Forráskód Böngészése

🐛 fix(vue-clipboard): 修复clipboard没引用调用报错

晓晓晓晓丶vv 4 éve
szülő
commit
d0c65944e6
3 módosított fájl, 29 hozzáadás és 4 törlés
  1. 2 2
      src/hooks/useClipboard.ts
  2. 2 0
      src/plugins/install.ts
  3. 25 2
      src/views/Page1.vue

+ 2 - 2
src/hooks/useClipboard.ts

@@ -2,8 +2,8 @@ import { clipboardKey } from "@/plugins/injectionKey";
 import { inject } from "vue";
 
 const useClipboard = () => {
-  const { $copyText } = inject(clipboardKey)!;
-  return { $copyText };
+  const clipboard = inject(clipboardKey)!;
+  return clipboard;
 };
 
 export default useClipboard;

+ 2 - 0
src/plugins/install.ts

@@ -1,5 +1,6 @@
 import { App } from "vue";
 import { Button, ConfigProvider, Layout, Menu, Modal } from "ant-design-vue";
+import VueClipboard3 from "./vue-clipboard";
 
 import { ModalConfirmKey } from "./injectionKey";
 
@@ -8,6 +9,7 @@ const install = (app: App<Element>) => {
   app.config.globalProperties.$confirm = Modal.confirm;
 
   return app
+    .use(VueClipboard3)
     .use(ConfigProvider)
     .use(Layout)
     .use(Menu)

+ 25 - 2
src/views/Page1.vue

@@ -1,3 +1,26 @@
 <template>
-  <div>page 1</div>
-</template>
+  <div>page 1
+    <a-button @click="doCopy">复制</a-button>
+  </div>
+</template>
+
+<script lang="ts">
+import useClipboard from "@/hooks/useClipboard";
+import { defineComponent, onMounted } from "vue";
+
+const Page1 = defineComponent({
+  setup() {
+    const clip = useClipboard();
+
+    const doCopy = () => {
+      clip.$copyText("copy success");
+    };
+
+    return {
+      doCopy,
+    };
+  },
+});
+
+export default Page1;
+</script>