You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
69 lines
1.9 KiB
69 lines
1.9 KiB
4 years ago
|
import { VantComponent } from '../common/component';
|
||
|
|
import { button } from '../mixins/button';
|
||
|
|
import { openType } from '../mixins/open-type';
|
||
|
|
VantComponent({
|
||
|
|
mixins: [button, openType],
|
||
|
|
classes: ['hover-class', 'loading-class'],
|
||
|
|
data: {
|
||
|
|
style: ''
|
||
|
|
},
|
||
|
|
props: {
|
||
|
|
icon: String,
|
||
|
|
plain: Boolean,
|
||
|
|
block: Boolean,
|
||
|
|
round: Boolean,
|
||
|
|
square: Boolean,
|
||
|
|
loading: Boolean,
|
||
|
|
hairline: Boolean,
|
||
|
|
disabled: Boolean,
|
||
|
|
loadingText: String,
|
||
|
|
customStyle: String,
|
||
|
|
loadingType: {
|
||
|
|
type: String,
|
||
|
|
value: 'circular'
|
||
|
|
},
|
||
|
|
type: {
|
||
|
|
type: String,
|
||
|
|
value: 'default'
|
||
|
|
},
|
||
|
|
size: {
|
||
|
|
type: String,
|
||
|
|
value: 'normal'
|
||
|
|
},
|
||
|
|
loadingSize: {
|
||
|
|
type: String,
|
||
|
|
value: '20px'
|
||
|
|
},
|
||
|
|
color: {
|
||
|
|
type: String,
|
||
|
|
observer(color) {
|
||
|
|
let style = '';
|
||
|
|
if (color) {
|
||
|
|
style += `color: ${this.data.plain ? color : 'white'};`;
|
||
|
|
if (!this.data.plain) {
|
||
|
|
// Use background instead of backgroundColor to make linear-gradient work
|
||
|
|
style += `background: ${color};`;
|
||
|
|
}
|
||
|
|
// hide border when color is linear-gradient
|
||
|
|
if (color.indexOf('gradient') !== -1) {
|
||
|
|
style += 'border: 0;';
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
style += `border-color: ${color};`;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
if (style !== this.data.style) {
|
||
|
|
this.setData({ style });
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
onClick() {
|
||
|
|
if (!this.data.disabled && !this.data.loading) {
|
||
|
|
this.$emit('click');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|