element复制功能

最新推荐文章于 2024-05-16 21:34:48 发布

33455432

最新推荐文章于 2024-05-16 21:34:48 发布

阅读量144

点赞数 2

文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_38999134/article/details/137596216

版权

文章介绍了如何在Vue应用中使用el-select组件进行零件号选择，并利用clipboard库实现选中的referenceName复制到剪贴板的功能，包括成功和错误处理。

摘要由CSDN通过智能技术生成

npm install clipboard --save

    <el-select v-model="deviceobj"  value-key="referenceName"  filterable clearable placeholder="请选择零件号" @change="referenceSelect($event)" class="ml-10" style="width: 350px;">
                <el-option
                v-for="item in partoptions"
                :key="item.referenceCode"
                :label="item.referenceName"
                :value="item"
                >
                <!-- :value="item.referenceCode" -->
                </el-option>
            </el-select>
          
            
            <el-button round id="tag-copy" :data-clipboard-text="deviceobj.referenceName"  @click="copyActiveCode($event,queryParams.referenceName)" type="plain" class="ml-10">复制</el-button>

    import Clipboard from 'clipboard'

copyActiveCode(event,queryParams) {
          console.log(queryParams)
          const clipboard = new Clipboard("#tag-copy")
          clipboard.on('success', e => {
            this.$message({ type: 'success', message: '复制成功' })
            // 释放内存
            clipboard.destroy()
          })
          clipboard.on('error', e => {
            // 不支持复制
            this.$message({ type: 'waning', message: '该浏览器不支持自动复制' })
            // 释放内存
            clipboard.destroy()
          })
        },