Код реализации функции буфера обмена Html5

Недавно Vue использовался для разработки встроенного H5 Line (японская и корейская платформа, похожая на китайский WeChat). Одно из требований — вставить текущую ссылку, затем отправить ее на ПК и открыть на компьютере. Во всей коллекции встречались следующие ситуации:

Эта ситуация относится к копированию текста в полях, не предназначенных для ввода, в буфер обмена.

 <h1 id=content>Скопированный контент</h1> <button id=button>Нажмите, чтобы скопировать</button> <script> (function(){ button.addEventListener('click', function(){ var copyDom = document . querySelector('#content'); //Создаем выбранный диапазон var range = document.createRange(); range.selectNode(copyDom); //Удалить содержимое из буфера обмена window.getSelection().removeAllRanges(); //Добавить новое содержимое в буфер обмена window.getSelection().addRange(range); //Копировать var Success = document.execCommand('copy') ; try { var msg = успешно? успешно: не удалось; alert ('Команда копирования была: ' + msg); catch(err) { alert(' К сожалению, не удалось); копируй!'); } }) })() </script>

Используется для копирования текста в поле ввода, textarea.

 <input type=text id=input value=17373383> <br> <button type=button id=button>Скопируйте содержимое в поле ввода</button> <script> (function(){ button.addEventListener('click' , function (){ input.select(); document.execCommand('copy'); alert('копирование успешно');

Этот метод также может быть расширен и служит той же цели, что и метод 1. Динамическое создание поля ввода, установка его содержимого в соответствии с содержимым, которое вы хотите скопировать, и, наконец, удаление или скрытие его.

3.js копирование содержимого в плагин буфера обмена (clipboard.js)

Официальный сайт clipboard.js

Clipboard.js адрес CDN

Эталонный метод:

NPM npm install --save clipboard

CDN <script src=https://cdn.bootcss.com/clipboard.js/2.0.1/clipboard.js></script>

 <!--По умолчанию значение атрибута data-clipboard-text перехватывается в .btn--> <!-- <button class=btn data-clipboard-text=3>Копировать</button> --> < !- -Перехватить значение в поле ввода --> <input id=foo value=https://github.com/zenorocha/clipboard.js.git> <!-- Trigger --> <button class=btn data-clipboard-target=#foo> <img src=assets/clippy.svg </button> <script src=https://cdn.bootcss.com/clipboard.js/2.0.1/clipboard.js></ script> <script> var clipboard = new ClipboardJS('.btn'); clipboard.on('success', function (e) {); console.log(e); }); clipboard.on('error', function (e) { console.log(e); });

В нем есть много расширенных возможностей. Для получения более подробной информации вы можете перейти на официальный сайт Clipboard.

4. Плагин буфера обмена vue-clipboard2, предоставляемый инфраструктурой Vue.

 импортировать Vue из 'vue' импортировать VueClipboard из 'vue-clipboard2' VueClipboard.config.autoSetContainer = true // добавить эту строку Vue.use(VueClipboard)

Образец1

 <div id=app></div> <template id=t> <div class=container> <input type=text v-model=message> <button type=button v-clipboard:copy=message v-clipboard:success =onCopy v-clipboard:error=onError>Копировать!</button> </div> </template> <script> new Vue({ el: '#app', template: '#t', data: function () { return { message: 'Copy This Text' } }, методы: { onCopy: function (e) { alert('Вы только что скопировали: ' + e.text) }, onError: function (e) { alert('Не удалось скопировать тексты') } } }) </script>

Образец2

 <div id=app></div> <template id=t> <div class=container> <input type=text v-model=message> <button type=button @click=doCopy>Копировать!</button> < /div> </template> <script> new Vue({ el: '#app', template: '#t', data: function () { return { message: 'Copy This Text' } }, методы: { doCopy: function () { this.$copyText(this.message).then(function (e) { alert('Скопировано') console.log(e) }, function (e) { alert('Невозможно скопировать') console.log(e) }) } } }) </script>

Выше приведено все содержание этой статьи. Я надеюсь, что она будет полезна для изучения всеми. Я также надеюсь, что все поддержат сеть VeVb Wulin.