1、需求
- 多余字符串用小数点表示
- 悬停展示全部字符串
- 能进行复制
需求及结果展示如下:
2、实现过程
- 使用el-tooltip悬停展示提示框
- 里面的内容使用
substring+'...'
进行字符串截取 - 复制代码参考如下(使用vue的v-clipboard),具体看3
注意:对字符串做substring时,需要判断其是否为空。即在数据前面的标签里面,进行判断 v-if=“字符串内容”
3、复制到剪切板功能v-clipboard
在vue 官网 /资源列表/Awesome Vue 里面搜索 clipboard 即可以找到 v-clipboard
使用步骤如下:
1.安装依赖
npm install --save v-clipboard
2.在main.js中引入
import Vue from 'vue'
import Clipboard from 'v-clipboard'
Vue.use(Clipboard)
3.使用
<template>
<button v-clipboard="value"
v-clipboard:success="clipboardSuccessHandler"
v-clipboard:error="clipboardErrorHandler">
Copy to clipboard
</button>
</template>
export default {
data() {
return {
value:'13064567899@qq.com'
}
},
methods: {
// Success event handler
clipboardSuccessHandler ({ value, event }){
console.log('success', value);
this.$message.success("复制成功");
},
// Error event handler
clipboardErrorHandler ({ value, event }) {
console.log('error', value)
}
}
}