Hopiu/vue-material
1
0
Fork 0
mirror of https://github.com/Hopiu/vue-material.git synced 2026-05-28 08:28:18 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

add md-clearable to md-input-container (#473)

Browse source 
* Add md-clearable to md-input-container

* Add docs for md-clearable

* Fix deprecated click event for clear button
This commit is contained in:
d3radicated 2017-02-13 11:07:25 +08:00 committed by Marcos Moura
parent 77a3ecb455
commit ec1f050d80
3 changed files with 48 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
docs/src/pages/components/Input.vue
View file

@ -28,6 +28,12 @@
<md-table-cell><code>Boolean</code></md-table-cell>
<md-table-cell>Show a button to toggle the password visibility. Default <code>false</code></md-table-cell>
</md-table-row>
<md-table-row>
<md-table-cell>md-clearable</md-table-cell>
<md-table-cell><code>Boolean</code></md-table-cell>
<md-table-cell>Show a button to clear the input. Default <code>false</code></md-table-cell>
</md-table-row>
</md-table-body>
</md-table>
@ -176,6 +182,11 @@
<label>Disabled</label>
<md-input disabled></md-input>
</md-input-container>
<md-input-container md-clearable>
<label>Clearable</label>
<md-input v-model="initialValue"></md-input>
</md-input-container>
</form>
</div>
@ -211,6 +222,11 @@
&lt;label&gt;Disabled&lt;/label&gt;
&lt;md-input disabled&gt;&lt;/md-input&gt;
&lt;/md-input-container&gt;
&lt;md-input-container md-clearable&gt;
&lt;label&gt;Clearable&lt;/label&gt;
&lt;md-input v-model=&quot;initialValue&quot;&gt;&lt;/md-input&gt;
&lt;/md-input-container&gt;
&lt;/form&gt;
</code-block>

18
src/components/mdInputContainer/mdInputContainer.scss
View file

@ -215,6 +215,24 @@ $input-size: 32px;
}
}
&.md-clearable {
&.md-input-focused .md-clear-input {
color: rgba(#000, .54);
}
.md-clear-input {
margin: 0;
position: absolute;
right: 0;
bottom: -2px;
color: rgba(#000, .38);
.md-ink-ripple {
color: rgba(#000, .87);
}
}
}
&.md-input-invalid {
.md-error {
opacity: 1;

15
src/components/mdInputContainer/mdInputContainer.vue
View file

@ -7,6 +7,10 @@
<md-button class="md-icon-button md-toggle-password" @click.native="togglePasswordType" v-if="mdHasPassword">
<md-icon>{{ showPassword ? 'visibility_off' : 'visibility' }}</md-icon>
</md-button>
<md-button class="md-icon-button md-clear-input" @click.native="clearInput" v-if="mdClearable && hasValue">
<md-icon>clear</md-icon>
</md-button>
</div>
</template>
@ -20,7 +24,8 @@
name: 'md-input-container',
props: {
mdInline: Boolean,
mdHasPassword: Boolean
mdHasPassword: Boolean,
mdClearable: Boolean
},
mixins: [theme],
data() {
@ -51,6 +56,7 @@
return {
'md-input-inline': this.mdInline,
'md-has-password': this.mdHasPassword,
'md-clearable': this.mdClearable,
'md-has-select': this.hasSelect,
'md-has-file': this.hasFile,
'md-has-value': this.hasValue,
@ -78,6 +84,13 @@
this.input.focus();
}
},
clearInput() {
if (this.isInput()) {
this.input.value = '';
this.setValue(this.input.value);
this.$emit('input', this.input.value);
}
},
setValue(value) {
this.value = value;
}