項(xiàng)目中需要實(shí)現(xiàn)復(fù)制到剪貼板的功能财喳，看了一下vue相關(guān)的插件捞蛋，發(fā)現(xiàn)了vue-clipboard2但是因?yàn)楝F(xiàn)在項(xiàng)目都是基于Vue 3.0開(kāi)發(fā)，所以不適用颅和，又發(fā)現(xiàn)了vue3-clipboard胡控，但是沒(méi)弄清楚怎么用，所以就想到使用js原生自帶的功能叫挟，然后就發(fā)現(xiàn)了艰匙，一種寫(xiě)法：
<el-input id="demoInput" ></el-input>
let input = document.querySelector('#demoInput');
input.select();
document.execCommand('copy')
然后在使用過(guò)程中，發(fā)現(xiàn)了這樣寫(xiě)也是可以的：
<el-input ref="demoInput" ></el-input>
this.$refs.demoInput.select()
document.execCommand('copy')
但是在實(shí)現(xiàn)的時(shí)候遇到難題抹恳，那就是<el-input>如果是disabled员凝，那么復(fù)制是不生效的，也試過(guò)在document.execCommand('copy')前后奋献，動(dòng)態(tài)設(shè)置disabled的值健霹，但是效果并不理想旺上，后來(lái)就想著要不寫(xiě)兩個(gè)<el-input>吧，然后就看到下面這篇博文：
JS document.execCommand實(shí)現(xiàn)復(fù)制功能（帶你出坑）
具體實(shí)現(xiàn)方式如下：
<el-input ref="demoInput" type="textarea" style='opacity: 0;position: absolute;' :rows="20" v-model="flowJSON" placeholder="請(qǐng)輸入內(nèi)容" resize="none"></el-input>
<el-input type="textarea" :rows="20" v-model="flowJSON" resize="none" disabled></el-input>
<el-button size="mini" type="primary" @click="copyClicked">導(dǎo)出到剪貼板</el-button>
methods: {
copyClicked() {
this.$refs.demoInput.select()
document.execCommand('copy')
}
}
