Сверните пользовательскую инструкцию Vue, чтобы реализовать функцию копирования одним щелчком мыши.

Vue.js

Без дальнейших церемоний, давайте сначала посмотрим на эффект, который фактически используется в реальном проекте:

在这里插入图片描述

Каков порядок?

Как обычно, пожалуйста, сначала дайте официальное объяснение:

Директивы — это специальные функции с префиксом v-. Ожидается, что значением атрибута директивы будет одно выражение JavaScript (v-for является исключением, которое мы обсудим позже). Директива отвечает за реакцию на DOM при изменении значения выражения с соответствующими эффектами.

Как обычно, все (делают вид) не понимают, а потом я объясню с каштаном. . . Ладно, я до сих пор не знаю, что сказать, конец этой статье (Ctrl + F4) ,Следующий.

Во избежание вышеуказанной ситуации, это не будет объяснено. На самом деле официальная предоставляет множество встроенных инструкций, таких как:v-if,v-for,v-bindи так далее. Каждая команда имеет свою определенную функцию.

пользовательская директива

Как следует из названия, это самоопределяемая инструкция, которая может выполнять желаемую функцию. Ниже приведена реализация одним щелчком мыши.Copyфункция.

Жизненный цикл

Во-первых, кратко рассмотрим синтаксис инструкций. Каждая инструкция имеет свой жизненный цикл. Когда вы увидите жизненный цикл, вы обязательно подумаете о функциях-ловушках. Да, инструкции также предоставляют функции-ловушки:

  • bind: Вызывается, когда директива впервые привязывается к элементу, этот хук вызывается только один раз. Здесь можно выполнить одноразовые настройки инициализации.
  • inserted: вызывается, когда связанный элемент вставляется в родительский узел (гарантируется существование только родительского узла, но не обязательно вставленного в документ).
  • update: Вызывается при обновлении VNode компонента, но может произойти до обновления его дочерних VNode. Значение инструкции может измениться, а может и не измениться.
  • componentUpdated: Вызывается после VNode компонента, в котором обновляются инструкция и ее дочерние VNode.
  • unbind: Вызывается только один раз, когда инструкция отсоединяется от элемента.

Давайте кратко рассмотрим параметры вышеприведенной функции ловушки:

  • el: элемент, связанный с инструкцией, может использоваться для прямого управленияDOM.
  • binding: объект, содержащий следующие свойства:
  • name: имя команды, исключаяv-приставка.
  • value: значение привязки директивы, например:v-my-directive="1 + 1", значение привязки равно2.
  • oldValue: предыдущее значение, связанное директивой, только еслиupdateа такжеcomponentUpdatedВ наличии крючки. Доступно вне зависимости от того, изменилось значение или нет.
  • expression: Выражение инструкции в строковой форме. Напримерv-my-directive="1 + 1", выражение "1 + 1".
  • arg: Параметры, передаваемые команде, необязательны. Напримерv-my-directive:foo, параметр "foo".
  • modifiers: Объект, содержащий модификаторы. Например:v-my-directive.foo.bar, объект модификатора{ foo: true, bar: true }.
  • vnode:VueСкомпилируйте сгенерированный виртуальный узел. переехатьVNode APIУзнать больше.
  • oldVnode: предыдущий виртуальный узел, только наupdateа такжеcomponentUpdatedВ наличии крючки.

Кажется довольно много, но других партий, на самом деле, обычно используются лишь некоторые. Что ж, начнем представление:

Подождите, давайте подумаем еще раз:

  • какcopy: На самом деле браузер предоставляет нативный API, но толькоcopyВыбранное значение (то есть выбранное мышью).
  • Итак, как использовать код для достижения выбранного эффекта? При этом используется элемент управления вводом (input, textarea..), который предоставляет выбранныйapi, выбранный является текущим элементом управленияvalueстоимость.
  • Тогда идея такова:
    • динамически созданныйinputЭтикетка
    • присвоить значение для копированияinput.value
    • передачаapiпроверилinput.value
    • последний звонокapiКопировать выбранное значение
  1. Сначала постройтеjsфайл (v-copy.js). Дайте определение объекту. (Инструкция на самом деле является объектом)
    import { Message } from 'ant-design-vue';

const vCopy = { // 名字爱取啥取啥
  /*
    bind 钩子函数，第一次绑定时调用，可以在这里做初始化设置
    el: 作用的 dom 对象
    value: 传给指令的值，也就是我们要 copy 的值
  */
  bind(el, { value }) {
    el.$value = value; // 用一个全局属性来存传进来的值，因为这个值在别的钩子函数里还会用到
    el.handler = () => {
      if (!el.$value) {
      // 值为空的时候，给出提示，我这里的提示是用的 ant-design-vue 的提示，你们随意
        Message.warning('无复制内容');
        return;
      }
      // 动态创建 textarea 标签
      const textarea = document.createElement('textarea');
      // 将该 textarea 设为 readonly 防止 iOS 下自动唤起键盘，同时将 textarea 移出可视区域
      textarea.readOnly = 'readonly';
      textarea.style.position = 'absolute';
      textarea.style.left = '-9999px';
      // 将要 copy 的值赋给 textarea 标签的 value 属性
      textarea.value = el.$value;
      // 将 textarea 插入到 body 中
      document.body.appendChild(textarea);
      // 选中值并复制
      textarea.select();
      // textarea.setSelectionRange(0, textarea.value.length);
      const result = document.execCommand('Copy');
      if (result) {
        Message.success('复制成功');
      }
      document.body.removeChild(textarea);
    };
    // 绑定点击事件，就是所谓的一键 copy 啦
    el.addEventListener('click', el.handler);
  },
  // 当传进来的值更新的时候触发
  componentUpdated(el, { value }) {
    el.$value = value;
  },
  // 指令与元素解绑的时候，移除事件绑定
  unbind(el) {
    el.removeEventListener('click', el.handler);
  },
};

export default vCopy;
  2. здесь, один кликCopyФункция реализована, и напоследок поговорим о том, как прописать кастомную инструкцию в глобальную: создать новуюjs(directives.js) для регистрации всех глобальных директив.
    import copy from './v-copy';
// 自定义指令
const directives = {
  copy,
};
// 这种写法可以批量注册指令
export default {
  install(Vue) {
    Object.keys(directives).forEach((key) => {
      Vue.directive(key, directives[key]);
    });
  },
};
  3. Наконец, вmain.jsВводится так:
    import Vue from 'vue';
import Directives from './directives';

Vue.use(Directives);
  4. Наконец, давайте поговорим о том, как его использовать. .
    <template>
  <button v-copy="copyText">copy</button>
</template>

<script>
export default {
  data() {
    return {
      copyText: '要 Copy 的内容',
    };
  },
};
</script>

ОК все готово, посыпать цветы.

Категории