ant-design-vue/components/button/button.jsx

106 lines
2.7 KiB
React
Raw Normal View History

2018-03-19 02:16:27 +00:00
2017-10-26 07:18:08 +00:00
import Icon from '../icon'
2017-12-29 08:51:06 +00:00
const rxTwoCNChar = /^[\u4e00-\u9fa5]{2}$/
const isTwoCNChar = rxTwoCNChar.test.bind(rxTwoCNChar)
2018-01-12 11:04:42 +00:00
import buttonTypes from './buttonTypes'
2018-01-15 09:33:34 +00:00
const props = buttonTypes()
2017-10-26 07:18:08 +00:00
export default {
name: 'Button',
2018-01-11 10:53:51 +00:00
__ANT_BUTTON: true,
2017-10-26 07:18:08 +00:00
props: {
2018-01-15 09:33:34 +00:00
...props,
2017-10-26 07:18:08 +00:00
},
data () {
return {
sizeMap: {
large: 'lg',
small: 'sm',
},
clicked: false,
2017-12-29 08:51:06 +00:00
sLoading: !!this.loading,
2017-10-26 07:18:08 +00:00
}
},
2017-12-29 08:51:06 +00:00
watch: {
2018-02-02 09:42:05 +00:00
loading (val) {
clearTimeout(this.delayTimeout)
if (typeof val !== 'boolean' && val && val.delay) {
this.delayTimeout = setTimeout(() => { this.sLoading = !!val }, val.delay)
} else {
this.sLoading = !!val
}
2017-12-29 08:51:06 +00:00
},
},
2017-10-26 07:18:08 +00:00
computed: {
classes () {
2017-12-29 08:51:06 +00:00
const { prefixCls, type, shape, size, sLoading, ghost, clicked, sizeMap } = this
2017-10-26 07:18:08 +00:00
const sizeCls = sizeMap[size] || ''
return {
[`${prefixCls}`]: true,
[`${prefixCls}-${type}`]: type,
[`${prefixCls}-${shape}`]: shape,
[`${prefixCls}-${sizeCls}`]: sizeCls,
2017-12-29 08:51:06 +00:00
[`${prefixCls}-loading`]: sLoading,
2017-10-26 07:18:08 +00:00
[`${prefixCls}-clicked`]: clicked,
[`${prefixCls}-background-ghost`]: ghost || type === 'ghost',
}
},
iconType () {
2017-12-29 08:51:06 +00:00
const { sLoading, icon } = this
return sLoading ? 'loading' : icon
2017-10-26 07:18:08 +00:00
},
},
methods: {
handleClick (event) {
this.clicked = true
clearTimeout(this.timeout)
this.timeout = setTimeout(() => (this.clicked = false), 500)
this.$emit('click', event)
},
2017-12-29 08:51:06 +00:00
insertSpace (child, needInserted) {
const SPACE = needInserted ? ' ' : ''
if (typeof child.text === 'string') {
let text = child.text.trim()
if (isTwoCNChar(text)) {
text = text.split('').join(SPACE)
}
return <span>{text}</span>
}
return child
2017-10-26 07:18:08 +00:00
},
},
2017-12-29 08:51:06 +00:00
render () {
2018-01-25 09:40:46 +00:00
const { htmlType, classes, disabled, handleClick, iconType, $slots, $attrs, $listeners } = this
2017-12-29 08:51:06 +00:00
const buttonProps = {
props: {
},
attrs: {
...$attrs,
type: htmlType,
disabled,
},
class: classes,
on: {
2018-01-25 09:40:46 +00:00
...$listeners,
2017-12-29 08:51:06 +00:00
click: handleClick,
},
}
const needInserted = $slots.default && $slots.default.length === 1 && (!iconType || iconType === 'loading')
const kids = $slots.default && $slots.default.length === 1 ? this.insertSpace($slots.default[0], needInserted) : $slots.default
return (
<button {...buttonProps}>
{iconType ? <Icon type={iconType}></Icon> : null}
{kids}
</button>
)
},
2017-10-26 07:18:08 +00:00
beforeDestroy () {
if (this.timeout) {
clearTimeout(this.timeout)
}
2017-12-29 08:51:06 +00:00
if (this.delayTimeout) {
clearTimeout(this.delayTimeout)
}
2017-10-26 07:18:08 +00:00
},
}
2018-03-19 02:16:27 +00:00