[Статьи о плагинах Vue] буфер обмена

В процессе разработки внешнего интерфейса часто используется функция копирования и вставки текста. Как показано выше, скопируйте адрес ссылки из списка, вставьте его в браузер и откройте. Или на некоторых сайтах функция вставки кода в поле ввода через кнопку и т.д. Сегодня поговорим о плагине буфера обмена для копирования в проекте Vue.

буфер обменаофициальный сайт

установка буфера обмена

npm install clipboard --save

Метод, используемый в этом проекте

Инкапсулирован в глобальный инструментclipboard.js

import Vue from 'vue'
import Clipboard from 'clipboard'

function clipboardSuccess() {
  Vue.prototype.$message.success('复制成功')
}

function clipboardError() {
  Vue.prototype.$message.error('复制失败')
}

export default function handleClipboard(text, event) {
  const clipboard = new Clipboard(event.target, {
    text: () => text
  })
  clipboard.on('success', () => {
    clipboardSuccess()
    clipboard.destroy()
  })
  clipboard.on('error', () => {
    clipboardError()
    clipboard.destroy()
  })
  clipboard.onClick(event)
}

используется в компоненте

# template 模板代码
<el-table-column prop="webUrl" label="H5链接" width="300">
    <template slot-scope="scope">
      <el-link
        :underline="false"
        type="primary"
        @click="handleCopy(scope.row.webUrl, $event)"
      >{
   
   { scope.row.webUrl }}
      </el-link>
    </template>
</el-table-column>

  
# 脚本代码
import clip from '@/utils/clipboard'
handleCopy(text, event) {
  clip(text, event)
}

Платформа цифрового управления
Vue3+Vite+VueRouter+Pinia+Axios+ElementPlus
Кейс системы разрешений Vue
адрес личного блога

Другое использование команды в Интернете (не проверено)

Установите то же, что и выше, импортируйте то же, что и выше

import Clipboard from 'clipboard'

Три команды:

• v-clipboard:copy - скопировать содержимое, которое нужно скопировать, вырезать содержимое, которое нужно вырезать
• v-clipboard:функция обратного вызова успеха для успешного копирования или вставки
• v-clipboard: функция обратного вызова при ошибке копирования или вставки

код:

  <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('复制成功')
    }
  }