ディレクトリ構築
写真を直接見てください
モジュラー仕様
copy.ts などのディレクティブ フォルダーの下に命令を記述し
、この命令を登録するメソッドを公開します。
// copy.ts
const copyDirective = {
mounted(){
},
updated(){
},
...
}
// 暴露注册指令的方法
export function setCopyDrective(app) {
app.directive("copy", copyDirective);
}
エントリファイルindex.ts内:
各命令の登録メソッドを導入し、すべての命令を登録するメソッドを公開します
// index.ts
import type {
App } from "vue";
import {
setCopyDrective } from "./copy";
export function setDirectives(app: App) {
// 加载需要的指令
setCopyDrective(app);
}
プロジェクトの初期化時にすべてのカスタム命令を自動的に登録したいので、main.js にすべての命令を登録する方法を導入し、以下を使用します。
// main.js
import {
createApp } from "vue";
import App from "./App.vue";
import {
setDirectives } from "./directives";
const app = createApp(App);
// 注册所有自定义指令
setDirectives(app);
app.mount("#app");
v-copy の実装 – クリップボードにコピー
例:
著者：オレンジ色の誰か
リンク：https://juejin.cn/post/6968996649515515917
出典：レアアースナゲット
- まず、使用シナリオとしては、特定のボタンをクリックして特定のコンテンツ (ターゲット コンテンツ) をクリップボードにコピーし、ctrl+v で貼り付けることができます。
- コンテンツをクリップボードに詰め込むには、上で説明した document.execCommand('Copy') API を使用しますが、この API の機能は現在選択されているコンテンツをクリップボードにコピーすることであることに注意してください。したがって、ターゲット コンテンツが選択されている場合にのみ、この API を呼び出して関数を完了する必要があります。
- コンテンツを選択するには、HTML イベントの onselect() メソッドを通じてコンテンツを実装できます。また、タグとタグの両方がこのイベントをサポートできます。
- したがって、ラベルを動的に作成する必要がありますが、ラベルは単なる補助ツールなので、表示領域の外に移動する必要があります。
- 次に、ターゲット コンテンツを value 属性に割り当て、ページの DOM 構造に挿入します。
- ラベルの select() を呼び出して値を選択し、document.execCommand('Copy') API を通じてコンテンツをクリップボードにコピーします。
- 最後にラベルを剥がします。
作成者は、入力ボックス内のテキストをコピーしますが、これは元のテキストとは少し異なります。
<template>
<h3>定义指令操作DOM元素</h3>
<div class="box">
<input type="text" v-model="msg" />
{
{ msg }}
<button v-copy="msg">复制内容</button>
</div>
</template>
<script lang="ts">
import {
defineComponent, ref } from "vue";
export default defineComponent({
name: "",
components: {
},
setup(props) {
const msg = ref("");
return {
msg,
};
},
});
</script>
<style lang="less" scoped></style>
コピー.ts
// import type { App, Directive, DirectiveBinding } from "vue";
const copyDirective = {
mounted(el, binding) {
el.target = binding.value;
el.addEventListener("click", () => {
// 创建 textarea 元素
const textarea = document.createElement("textarea");
// 移出视野
textarea.style.position = "fixed";
textarea.style.top = "-99999px";
// 插入 DOM
document.body.appendChild(textarea);
// 定义值
textarea.value = el.target;
// 自动选中文本 用于复制的 API 只能复制选中的值
textarea.select();
// 浏览器复制 API 显示废弃的原因是没有纳入标准 但仍被各大主流浏览器支持
const res = document.execCommand("Copy");
res && console.log(`success: ${
el.target}`);
// 移除 textarea
document.body.removeChild(textarea);
});
},
updated(el, binding) {
// 实时更新内容
el.target = binding.value;
},
};
export function setCopyDrective(app) {
app.directive("copy", copyDirective);
}
以上！