other / mew-iview

Commit d77476f87a886a85da15ab23e7ea40aed0b5baeb

Authored by 范文杰
1 parent 0f845204

[feature] 优化button代码，代码更简洁

Showing 1 changed file with 24 additions and 22 deletions   Show diff stats
Inline Side-by-side
src/components/button/button.vue
  Show/Hide comments   View file @d77476f
1 1 <template>
2   - <a
3   - v-if="to"
4   - :class="classes"
5   - :disabled="disabled"
6   - :href="linkUrl"
7   - :target="target"
8   - @click.exact="handleClickLink($event, false)"
9   - @click.ctrl="handleClickLink($event, true)"
10   - @click.meta="handleClickLink($event, true)">
  2 + <component :is="tagName" :class="classes" :disabled="disabled" @click="handleClickLink" v-bind="tagProps">
11 3 <Icon class="ivu-load-loop" type="ios-loading" v-if="loading"></Icon>
12 4 <Icon :type="icon" :custom="customIcon" v-if="(icon || customIcon) && !loading"></Icon>
13 5 <span v-if="showSlot" ref="slot"><slot></slot></span>
14   - </a>
15   - <button
16   - v-else
17   - :type="htmlType"
18   - :class="classes"
19   - :disabled="disabled"
20   - @click="handleClickLink">
21   - <Icon class="ivu-load-loop" type="ios-loading" v-if="loading"></Icon>
22   - <Icon :type="icon" :custom="customIcon" v-if="(icon || customIcon) && !loading"></Icon>
23   - <span v-if="showSlot" ref="slot"><slot></slot></span>
24   - </button>
  6 + </component>
25 7 </template>
26 8 <script>
27 9 import Icon from '../icon';
... ... @@ -98,14 +80,34 @@
98 80 [`${prefixCls}-ghost`]: this.ghost
99 81 }
100 82 ];
  83 + },
  84 + // Point out if it should render as <a> tag
  85 + isHrefPattern() {
  86 + const {to} = this;
  87 + return !!to;
  88 + },
  89 + tagName() {
  90 + const {isHrefPattern} = this;
  91 + return isHrefPattern ? 'a' : 'button';
  92 + },
  93 + tagProps() {
  94 + const {isHrefPattern} = this;
  95 + if(isHrefPattern) {
  96 + const {linkUrl,target}=this;
  97 + return {href: linkUrl, target};
  98 + } else {
  99 + const {htmlType} = this;
  100 + return {type: htmlType};
  101 + }
101 102 }
102 103 },
103 104 methods: {
104 105 // Ctrl or CMD and click, open in new window when use `to`
105   - handleClickLink (event, new_window = false) {
  106 + handleClickLink (event) {
106 107 this.$emit('click', event);
  108 + const openInNewWindow = event.ctrlKey || event.metaKey;
107 109  
108   - this.handleCheckClick(event, new_window);
  110 + this.handleCheckClick(event, openInNewWindow);
109 111 }
110 112 },
111 113 mounted () {
... ...