Blame view

src/wxcomponents/vant/button/index.js 1.9 KB
289f85d9e   Adam   提交
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
  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');
              }
          }
      }
  });