-
Notifications
You must be signed in to change notification settings - Fork 138
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
7 changed files
with
1,207 additions
and
1,033 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -23,3 +23,4 @@ pnpm-debug.log* | |
| *.sw? | ||
| /nfd-front.zip | ||
| /nfd-front | ||
| /package-lock.json | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,17 @@ | ||
| //index.ts | ||
| import { ObjectDirective, App, Plugin } from "vue"; | ||
|
|
||
| // 自定义指令 可以引用多个 | ||
| import vClipboard from "./vClipboard"; | ||
|
|
||
| // 构建指令集 | ||
| const directives = [vClipboard]; | ||
|
|
||
| export default { | ||
| install: (app) => { | ||
| // 安装指令集 | ||
| directives.forEach((item) => { | ||
| app.directive(item.name, item.options); | ||
| }); | ||
| }, | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,71 @@ | ||
| // vClipboard.ts | ||
| // vue-clipboard3 提供的 composition api | ||
| import useClipboard from "vue-clipboard3"; | ||
| const { toClipboard } = useClipboard(); | ||
| export default { | ||
| name: "clipboard", | ||
| options: { | ||
| // 挂载 | ||
| mounted(el, binding) { | ||
| // binding.arg 为动态指令参数 | ||
| // 由于 指令是支持响应式的 因此我们指令需要有一个“全局”对象，这里我们为了不借助其他对象浪费资源，就直接使用el自身了 | ||
| // 将copy的值 成功回调 失败回调 及 click事件都绑定到el上 这样在更新和卸载时方便操作 | ||
| switch (binding.arg) { | ||
| case "copy": | ||
| // copy值 | ||
| el.clipValue = binding.value; | ||
| // click事件 | ||
| el.clipCopy = function () { | ||
| toClipboard(el.clipValue) | ||
| .then(result => { | ||
| el.clipSuccess && el.clipSuccess(result); | ||
| }) | ||
| .catch(err => { | ||
| el.clipError && el.clipError(err); | ||
| }); | ||
| }; | ||
| // 绑定click事件 | ||
| el.addEventListener("click", el.clipCopy); | ||
| break; | ||
| case "success": | ||
| // 成功回调 | ||
| el.clipSuccess = binding.value; | ||
| break; | ||
| case "error": | ||
| // 失败回调 | ||
| el.clipError = binding.value; | ||
| break; | ||
| } | ||
| }, | ||
| // 相应修改 这里比较简单 重置相应的值即可 | ||
| updated(el, binding) { | ||
| switch (binding.arg) { | ||
| case "copy": | ||
| el.clipValue = binding.value; | ||
| break; | ||
| case "success": | ||
| el.clipSuccess = binding.value; | ||
| break; | ||
| case "error": | ||
| el.clipError = binding.value; | ||
| break; | ||
| } | ||
| }, | ||
| // 卸载 删除click事件 删除对应的自定义属性 | ||
| unmounted(el, binding) { | ||
| switch (binding.arg) { | ||
| case "copy": | ||
| el.removeEventListener("click", el.clipCopy); | ||
| delete el.clipValue; | ||
| delete el.clipCopy; | ||
| break; | ||
| case "success": | ||
| delete el.clipSuccess; | ||
| break; | ||
| case "error": | ||
| delete el.clipError; | ||
| break; | ||
| } | ||
| }, | ||
| }, | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,19 +1,28 @@ | ||
| import Vue from 'vue' | ||
| import * as Vue from 'vue' | ||
| import App from './App.vue' | ||
| import ElementUI from 'element-ui' | ||
| import 'element-ui/lib/theme-chalk/index.css' | ||
| import VueClipboard from 'vue-clipboard2' | ||
| import JsonViewer from 'vue-json-viewer' | ||
| import VueClipboard from 'vue-clipboard3' | ||
| import DirectiveExtensions from './directive' | ||
|
|
||
| import JsonViewer from 'vue3-json-viewer' | ||
| import ElementPlus from 'element-plus' | ||
| import 'element-plus/dist/index.css' | ||
| import "vue3-json-viewer/dist/index.css"; | ||
|
|
||
| window.$vueApp = Vue.createApp(App) | ||
|
|
||
|
|
||
| import * as ElementPlusIconsVue from '@element-plus/icons-vue' | ||
| for (const [key, component] of Object.entries(ElementPlusIconsVue)) { | ||
| window.$vueApp.component(key, component) | ||
| } | ||
|
|
||
| // Import JsonViewer as a Vue.js plugin | ||
| Vue.use(JsonViewer) | ||
| window.$vueApp.use(JsonViewer) | ||
| window.$vueApp.use(DirectiveExtensions) | ||
|
|
||
| // or | ||
| // components: {JsonViewer} | ||
|
|
||
| Vue.use(VueClipboard) | ||
| Vue.config.productionTip = false | ||
| Vue.use(ElementUI) | ||
| new Vue({ | ||
| render: h => h(App), | ||
| }).$mount('#app') | ||
| window.$vueApp.use(VueClipboard) | ||
| window.$vueApp.use(ElementPlus) | ||
| window.$vueApp.mount('#app') |
Oops, something went wrong.