开箱即用的vue tips指令
- 下载
npm install v-tips -s
yarn add v-tips- 注册
import Vue from 'vue'
import Tips from 'v-tips'
Vue.use(Tips)- 使用指令
<!-- vue 文件 -->
<template>
<!-- 参数为string | number 用户hover active focus 控制tips显示 -->
<button v-tips="tips">tips</button>
</template>
<script>
export default {
name: 'xxx',
data () {
return {
tips: 'hello tips'
}
}
}
</script>- 控制tips
<!-- vue 文件 -->
<template>
<!-- 参数为object 自行控制tips显示 -->
<!-- this.message % 2 === 0 时显示tips -->
<button v-tips="tips">tips</button>
</template>
<script>
export default {
name: 'xxx',
data () {
return {
num: 1
}
},
created () {
setInterval(() => {
this.message += 1
}, 1000)
},
computed: {
tips () {
return {
message: this.message,
show: this.message % 2 === 0
}
}
}
}
</script><script src="https://cdn.jsdelivr.net/npm/v-tips/dist/v-tips.min.js"></script>- [] 添加动效