Простое копирование в буфер обмена с помощью vue-clipboard2

Копировать в буфер обмена — это функция, которая может быть полезна пользователям вашего приложения и легко настраивается благодаря простому модулю под названием vue-clipboard.

Давайте создадим быстрый пример прямо из документации!

Во-первых, вы можете быстро настроить приложение Vue с помощью vue-cli.

Затем вам просто нужно добавить vue-clipboard2 в ваше приложение. Сделаем это с помощью пряжи.

yarn add vue-clipboard2

После этого вам нужно импортировать этот модуль в ваш файл main.js:

import VueClipboard from ‘vue-clipboard2’
Vue.use(VueClipboard)

Мы изменим наш шаблон, чтобы добавить ввод текста и кнопку для копирования в буфер обмена:

<input type=”text” v-model=”message”>
<button type=”button”
v-clipboard:copy=”message”
v-clipboard:success=”onCopy”
v-clipboard:error=”onError”>Copy!</button>

Мы используем модуль в шаблоне. message — это имя данных, которые мы хотим скопировать, вы можете изменить его, введя ввод.

Если копирование прошло успешно, мы показываем алерт со скопированным текстом в методе onCopy. При ошибке мы сообщаем пользователю, что произошла ошибка, с помощью onError:

 export default {
  name: 'app',
  data () {
    return {
      message: null
    }
  },
  methods: {
    onCopy: function (e) {
      alert('You just copied: ' + e.text)
    },
    onError: function (e) {
      alert('Failed to copy texts')
    }
  }
}

Исходный код вы можете найти здесь.

А еще, живой пример здесь, спасибо Netlify!

Электронная книга VueJoy готова к предзаказу!

Изучите VueJs с помощью учебника и примеров.

Получайте новые главы по мере их завершения и получайте обновления!

Сделайте предзаказ прямо сейчас: http://www.vuejoy.com!