all files / packages/button/src/ button.js

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
69
70
71
72
73
74
75
76
77
78
79
80
 
 
 
 
 
 
 
 
 
 
 
 
 
1×
1×
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
/**
 * @module components/button
 * @desc 按钮
 * @param {string} [type=default] - 显示类型，接受 default, primary, danger
 * @param {boolean} [disabled=false] - 禁用
 * @param {string} [size=normal] - 尺寸，接受 normal, mini, small, large
 * @param {string} [native-type] - 原生 type 属性
 * @param {slot} - 显示文本
 *
 * @example
 * <zan-button size="large" type="primary">按钮</zan-button>
 */
 
const allowedSize = ['mini', 'small', 'normal', 'large'];
const allowedType = ['default', 'danger', 'primary'];
 
export default {
  name: 'zan-button',
 
  props: {
    disabled: Boolean,
    loading: Boolean,
    block: Boolean,
    tag: {
      type: String,
      default: 'button'
    },
    nativeType: String,
    type: {
      type: String,
      default: 'default',
      validator(value) {
        return allowedType.indexOf(value) > -1;
      }
    },
    size: {
      type: String,
      default: 'normal',
      validator(value) {
        return allowedSize.indexOf(value) > -1;
      }
    }
  },
 
  methods: {
    handleClick() {
      this.$emit('click');
    }
  },
 
  render(h) {
    let { type, nativeType, size, disabled, loading, block } = this;
    let Tag = this.tag;
 
    return (
      <Tag
        type={nativeType}
        disabled={disabled}
        class={[
          'zan-button',
          'zan-button--' + type,
          'zan-button--' + size,
          {
            'is-disabled': disabled,
            'is-loading': loading,
            'is-block': block
          }
        ]}
        onClick={this.handleClick}
      >
        {
          loading ? <i class="zan-icon-loading"></i> : null
        }
        <span class="zan-button-text">{this.$slots.default}</span>
      </Tag>
    );
  }
};