54 lines
1.5 KiB
JavaScript
54 lines
1.5 KiB
JavaScript
/**
|
||
* 按钮波浪指令
|
||
* @directive 默认方式：v-waves，如 `<div v-waves></div>`
|
||
* @directive 参数方式：v-waves=" |light|red|orange|purple|green|teal"，如 `<div v-waves="'light'"></div>`
|
||
*/
|
||
export default {
|
||
mounted(el, binding) {
|
||
el.classList.add('waves-effect')
|
||
binding.value && el.classList.add(`waves-${binding.value}`)
|
||
|
||
function setConvertStyle(obj) {
|
||
let style = ''
|
||
for (let i in obj) {
|
||
if (obj.hasOwnProperty(i)) style += `${i}:${obj[i]};`
|
||
}
|
||
return style
|
||
}
|
||
|
||
function onCurrentClick(e) {
|
||
let elDiv = document.createElement('div')
|
||
elDiv.classList.add('waves-ripple')
|
||
el.appendChild(elDiv)
|
||
let styles = {
|
||
left: `${e.layerX}px`,
|
||
top: `${e.layerY}px`,
|
||
opacity: 1,
|
||
transform: `scale(${(el.clientWidth / 100) * 10})`,
|
||
'transition-duration': `750ms`,
|
||
'transition-timing-function': `cubic-bezier(0.250, 0.460, 0.450, 0.940)`
|
||
}
|
||
|
||
elDiv.setAttribute('style', setConvertStyle(styles))
|
||
setTimeout(() => {
|
||
elDiv.setAttribute(
|
||
'style',
|
||
setConvertStyle({
|
||
opacity: 0,
|
||
transform: styles.transform,
|
||
left: styles.left,
|
||
top: styles.top
|
||
})
|
||
)
|
||
setTimeout(() => {
|
||
elDiv && el.removeChild(elDiv)
|
||
}, 750)
|
||
}, 450)
|
||
}
|
||
el.addEventListener('mousedown', onCurrentClick, false)
|
||
},
|
||
unmounted(el) {
|
||
el.addEventListener('mousedown', () => {})
|
||
}
|
||
}
|