1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768 |
- 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');
- }
- }
- }
- });
|