Копировать в буфер обмена — это функция, которая может быть полезна пользователям вашего приложения и легко настраивается благодаря простому модулю под названием 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!