[feature] 优化button代码,代码更简洁
This commit is contained in:
parent
0f8452047d
commit
d77476f87a
1 changed files with 24 additions and 22 deletions
|
@ -1,27 +1,9 @@
|
||||||
<template>
|
<template>
|
||||||
<a
|
<component :is="tagName" :class="classes" :disabled="disabled" @click="handleClickLink" v-bind="tagProps">
|
||||||
v-if="to"
|
|
||||||
:class="classes"
|
|
||||||
:disabled="disabled"
|
|
||||||
:href="linkUrl"
|
|
||||||
:target="target"
|
|
||||||
@click.exact="handleClickLink($event, false)"
|
|
||||||
@click.ctrl="handleClickLink($event, true)"
|
|
||||||
@click.meta="handleClickLink($event, true)">
|
|
||||||
<Icon class="ivu-load-loop" type="ios-loading" v-if="loading"></Icon>
|
<Icon class="ivu-load-loop" type="ios-loading" v-if="loading"></Icon>
|
||||||
<Icon :type="icon" :custom="customIcon" v-if="(icon || customIcon) && !loading"></Icon>
|
<Icon :type="icon" :custom="customIcon" v-if="(icon || customIcon) && !loading"></Icon>
|
||||||
<span v-if="showSlot" ref="slot"><slot></slot></span>
|
<span v-if="showSlot" ref="slot"><slot></slot></span>
|
||||||
</a>
|
</component>
|
||||||
<button
|
|
||||||
v-else
|
|
||||||
:type="htmlType"
|
|
||||||
:class="classes"
|
|
||||||
:disabled="disabled"
|
|
||||||
@click="handleClickLink">
|
|
||||||
<Icon class="ivu-load-loop" type="ios-loading" v-if="loading"></Icon>
|
|
||||||
<Icon :type="icon" :custom="customIcon" v-if="(icon || customIcon) && !loading"></Icon>
|
|
||||||
<span v-if="showSlot" ref="slot"><slot></slot></span>
|
|
||||||
</button>
|
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import Icon from '../icon';
|
import Icon from '../icon';
|
||||||
|
@ -98,14 +80,34 @@
|
||||||
[`${prefixCls}-ghost`]: this.ghost
|
[`${prefixCls}-ghost`]: this.ghost
|
||||||
}
|
}
|
||||||
];
|
];
|
||||||
|
},
|
||||||
|
// Point out if it should render as <a> tag
|
||||||
|
isHrefPattern() {
|
||||||
|
const {to} = this;
|
||||||
|
return !!to;
|
||||||
|
},
|
||||||
|
tagName() {
|
||||||
|
const {isHrefPattern} = this;
|
||||||
|
return isHrefPattern ? 'a' : 'button';
|
||||||
|
},
|
||||||
|
tagProps() {
|
||||||
|
const {isHrefPattern} = this;
|
||||||
|
if(isHrefPattern) {
|
||||||
|
const {linkUrl,target}=this;
|
||||||
|
return {href: linkUrl, target};
|
||||||
|
} else {
|
||||||
|
const {htmlType} = this;
|
||||||
|
return {type: htmlType};
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
// Ctrl or CMD and click, open in new window when use `to`
|
// Ctrl or CMD and click, open in new window when use `to`
|
||||||
handleClickLink (event, new_window = false) {
|
handleClickLink (event) {
|
||||||
this.$emit('click', event);
|
this.$emit('click', event);
|
||||||
|
const openInNewWindow = event.ctrlKey || event.metaKey;
|
||||||
|
|
||||||
this.handleCheckClick(event, new_window);
|
this.handleCheckClick(event, openInNewWindow);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted () {
|
mounted () {
|
||||||
|
|
Loading…
Add table
Reference in a new issue