Vue.js+Element:clipboard.js实现点击按钮复制内容到剪切板
需求点击某个按钮,将设置的目标内容(例如地址)复制到剪切板引入clipboardjs官网传送门npm引入:npm install clipboard --save使用<template><div class="drawer"><el-switch v-model="isopen" /><el-input placeho...
·
需求
点击某个按钮,将设置的目标内容(例如地址)复制到剪切板
引入
clipboardjs官网传送门
npm引入:npm install clipboard --save
使用
<template>
<div class="drawer">
<el-switch v-model="isopen" />
<el-input placeholder="请输入" style="width: 180px"/>
<div :class="isopen?'mask':''" @click="close"/>
<div :class="isopen?'open':'close'">
<div class="header">
<p class="fl">示例</p>
</div>
<el-table :key="key" :data="tableData" border fit highlight-current-row style="width: 100%">
<el-table-column prop="name" label="name" width="120" />
<el-table-column v-for="item in formThead" :key="item" :label="item">
<template slot-scope="scope">
{{ scope.row[item] }}
</template>
</el-table-column>
<el-table-column label="action" width="80">
<template slot-scope="{row}">
<el-button size="mini" type="primary" icon="document" @click="handleCopy(row.address,$event)">
copy
</el-button>
</template>
</el-table-column>
</el-table>
<div style="margin-top:20px">
<el-button size="mini" type="danger" class="fr mt-10" @click="close">关闭</el-button>
</div>
</div>
</div>
</template>
<script>
import clip from '@/utils/clipboard' // use clipboard directly
const defaultFormThead = ['address']
export default {
data() {
return {
isopen: false,
tableData: [
{
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
},
{
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
},
{
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
},
{
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}
],
key: 1, // table key
formTheadOptions: ['address'],
formThead: defaultFormThead // 默认表头 Default header
}
},
methods: {
close() {
this.isopen = false
},
handleCopy(text, event) {
clip(text, event)
},
clipboardSuccess() {
this.$message({
message: 'Copy successfully',
type: 'success',
duration: 1500
})
}
}
}
</script>
<style lang="scss" scoped>
.drawer {
.mask {
position: fixed;
z-index: 10;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .1);
}
.close {
position: absolute;
z-index: 10;
left: -800px;
top: 0;
width: 800px;
height: 100%;
background: #fff;
transition: left linear 1s;
}
.open {
position: absolute;
z-index: 10;
right: 0;
top: 0;
width: 600px;
height: 100%;
background: #fff;
transition: left linear 1s;
.header {
margin: 0 20px;
height: 40px;
border-bottom: 1px solid #dddddd;
p {
margin-top: 30px;
}
}
}
}
</style>
效果
更多推荐
已为社区贡献5条内容
所有评论(0)