Skip to content

一键复制

js
//方案一:
Vue.directive('copy', {
  bind: function (el) {
    el.addEventListener('click', function () {
      var range = document.createRange();
      range.selectNode(el);
      window.getSelection().addRange(range);
      document.execCommand('copy');
      window.getSelection().removeAllRanges();
    });
  }
});

//方案二:
import { Notification } from "element-ui";
export const COPY = {
  bind(el, { value }) {
    el.$value = value;
    el.handler = () => {
      if (!el.$value) {
        Notification.success({
          title: "无复制内容",
        });
        return;
      }
      const textarea = document.createElement("textarea");
      textarea.readOnly = "readonly";
      textarea.style.position = "absolute";
      textarea.style.left = "-9999px";
      textarea.value = el.$value;
      document.body.appendChild(textarea);
      textarea.select();
      const result = document.execCommand("Copy");
      if (result) {
        Notification.success({
          title: "复制成功",
        });
      }
      document.body.removeChild(textarea);
    };
    el.addEventListener("click", el.handler);
  },
  componentUpdated(el, { value }) {
    el.$value = value;
  },
  unbind(el) {
    el.removeEventListener("click", el.handler);
  },
};

用心去做高质量的内容网站,欢迎 star ⭐ 让更多人发现