element 添加Tooltip 文字提示标签
<el-tooltip placement="top" effect="light">
<div slot="content" class="oneKeyCopy" id="oneKeyCopy">
<ul>
<li v-for="(item, index) in skxxList" :key="index">
<label>{{item.name}}:</label>
<span> {{item.value}}</span>
</li>
</ul>
<textarea v-model="copyText" id="copyText" style="opacity:0;"></textarea>
</div>
<el-button @click="copyClick();">一键复制</el-button>
</el-tooltip>
export default {
data(){
return{
copyText: '',
skxxList:[
{name:'水库编码', value:'M12322923'},
{name:'水库名称', value:'金源水库'},
{name:'水库地址', value:'深圳市龙岗区园山街道安良七村'},
{name:'所属街道', value:'龙岗街道'},
{name:'正常库容', value:'123.2'},
{name:'总库容', value:'142'},
{name:'集雨面积(㎡)', value:'1'},
{name:'核准水位(m)', value:'11'},
{name:'工程等级', value:'小(2)'},
{name:'技术负责人/电话', value:'唐蕾/18600755812'},
{name:'巡查负责人/电话', value:'唐蕾/18600755812'},
]
}
},
methods:{
copyClick(){ //一键复制
let text = document.getElementById("oneKeyCopy").innerText;
var input = document.getElementById("copyText");
this.copyText = text;
setTimeout(() => {
input.select(); // 选中文本
document.execCommand("copy");
this.$message({type: 'success',message: '复制成功!'});
}, 200)
}
}
}