2017-10-26 15:18:08 +08:00
|
|
|
<script>
|
|
|
|
export default {
|
|
|
|
name: 'Icon',
|
|
|
|
props: {
|
|
|
|
prefixCls: {
|
|
|
|
default: 'anticon',
|
|
|
|
type: String,
|
|
|
|
},
|
|
|
|
type: String,
|
|
|
|
title: String,
|
|
|
|
spin: Boolean,
|
|
|
|
},
|
|
|
|
data () {
|
|
|
|
return {
|
|
|
|
}
|
|
|
|
},
|
|
|
|
computed: {
|
|
|
|
classes () {
|
|
|
|
const { prefixCls, type, spin } = this
|
|
|
|
return {
|
|
|
|
[`${prefixCls}`]: true,
|
|
|
|
[`${prefixCls}-${type}`]: type,
|
|
|
|
[`${prefixCls}-spin`]: !!spin || type === 'loading',
|
|
|
|
}
|
|
|
|
},
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
handleClick (event) {
|
|
|
|
if (this.clicked) {
|
|
|
|
return
|
|
|
|
}
|
2018-01-25 17:40:46 +08:00
|
|
|
|
2017-10-26 15:18:08 +08:00
|
|
|
this.clicked = true
|
|
|
|
clearTimeout(this.timeout)
|
|
|
|
this.timeout = setTimeout(() => (this.clicked = false), 500)
|
|
|
|
this.$emit('click', event)
|
|
|
|
},
|
|
|
|
},
|
2018-01-25 16:29:23 +08:00
|
|
|
render () {
|
2018-01-25 17:40:46 +08:00
|
|
|
const { title, classes, handleClick, $listeners } = this
|
|
|
|
const iconProps = {
|
|
|
|
attrs: {
|
|
|
|
title,
|
|
|
|
},
|
|
|
|
class: classes,
|
|
|
|
on: {
|
|
|
|
...$listeners,
|
|
|
|
click: handleClick,
|
|
|
|
},
|
|
|
|
}
|
2018-01-25 16:29:23 +08:00
|
|
|
return (
|
2018-01-25 17:40:46 +08:00
|
|
|
<i {...iconProps}/>
|
2018-01-25 16:29:23 +08:00
|
|
|
)
|
|
|
|
},
|
2017-10-26 15:18:08 +08:00
|
|
|
beforeDestroy () {
|
|
|
|
if (this.timeout) {
|
|
|
|
clearTimeout(this.timeout)
|
|
|
|
}
|
|
|
|
},
|
|
|
|
}
|
|
|
|
</script>
|