vue通过v-clipboard实现复制功能

关注

最新推荐文章于 2024-11-06 10:20:46 发布 · 2.1k 阅读

原创 ·

本内容遵循 CC 4.0 BY-SA 版权协议

AI应用架构师总结：智能问答系统用户意图识别的8种方法与实践！意图识别是智能问答系统的大脑入口，其技术水平决定了系统能否准确捕捉用户的核心诉求。本文系统剖析了从基础规则到前沿PLM的8种核心意图识别方法透明简单，冷启动快，维护成本高。中等规模场景基线，依赖特征工程。利用词义和局部/序列信息，训练成本高。当前最优精度，需大量资源。添加意图灵活，冷启动友好，精度可能略逊。提升鲁棒性，系统变复杂。解决歧义和自然交互的关键（多轮）。增强专业领域理解和推理能力。成功的意图识别模块需要：精准的意图定义（Schema）是前提！阅读详情

安装

npm install clipboard --save 
或
cnpm i clipboard -S

// 引用
import Clipboard from 'clipboard';

v-clipboard:copy - copy 要复制的内容 cut 要剪贴的内容
v-clipboard:success 复制或剪贴成功的回调函数
v-clipboard:error 复制或剪贴失败的回调函数

  <a-modal
    v-model="visible"
    title="链接"
    @ok="handleOk"
  >
    <template #footer>
      <a-button key="submit" type="primary" @click="handleOk">好的</a-button>
    </template>
    <p>分享链接可以邀请其他人</p>
    <p>
      <a-tag color="blue">{{ roomShareUrl }}</a-tag>
      <a class="fs12" v-clipboard:copy="roomShareUrl" v-clipboard:success="onCopy">复制
      </a>
    </p>
  </a-modal>

  data() {
    return {
      visible: false,
      roomShareUrl: ''
    }
  }, 
 methods: {
    // 初始化方法
    show(roomId) {
      roomShare(roomId).then(res => {
        if (res.success) {
          this.visible = true
          console.log(res.data)
          this.roomShareUrl = res.data
        }
      })
    },
    handleOk() {
      this.roomShareUrl = ''
      this.visible = false
    },
    onCopy: function(e) {
      message.success('复制成功')
    }
  }