vue3+ts+elementPLus實現v-preview指令

目錄

• 引文
• 目錄
• 文件內容
• previewImage.vue
• preview.ts
• 使用
• 開發中可能遇到的問題
• 總結

引文

最近在用 vue3+ts 開發公司的后臺系統，因為后臺多處需要圖片放大預覽的功能，就想著封裝一個v-preview指令，這樣在需要預覽的圖片上加個 v-preview就可以預覽啦。

目錄

在這里就不列我的項目目錄啦，想嘗試的朋友可以這樣創建目錄

-- preview
---- previewImage.vue
---- preview.ts

文件內容

previewImage.vue

普普通通vue3組件，記得全局注冊

<template>
? ? <div @click="dialogVisible = true">
? ? ? ? <slot>
? ? ? ? ? ? <img :src="props.src" />
? ? ? ? </slot>
? ? </div>
? ? <el-dialog v-model="dialogVisible" title="查看圖片" @close="close">
? ? ? ? <img :src="imgSrc" />
? ? </el-dialog>
</template>
<script setup lang="ts">
? ? import { ref, getCurrentInstance, ComponentInternalInstance, onMounted } from "vue"
? ? import { ElDialog } from "element-plus"
? ? const props = defineProps({
? ? ? ? src: String
? ? })
? ? const dialogVisible = ref(false)
? ? const imgSrc = ref("")
? ? // 插槽形式
? ? onMounted(() => {
? ? ? ? const { proxy } = getCurrentInstance() as ComponentInternalInstance
? ? ? ? let slot = proxy?.$slots?.default?.()
? ? ? ? if(slot){
? ? ? ? ? ? // 獲取插槽內容設置imgSrc地址
? ? ? ? ? ? imgSrc.value = slot?.[0]?.props?.src
? ? ? ? }
? ? })
? ? const setSrc = (v: string) => {
? ? ? ? imgSrc.value = v
? ? }
? ? // 組件觸發
? ? if (props.src) {
? ? ? ? setSrc(props.src)
? ? }
? ? // 指令觸發
? ? const show = () => {
? ? ? ? dialogVisible.value = true
? ? }
? ? const close = () => {?
? ? ? ? // 彈窗關閉移除dom
? ? ? ? if (document.getElementById("previewDom")) {
? ? ? ? ? ? document.body.removeChild(document.getElementById("previewDom") as HTMLElement)
? ? ? ? }
? ? }
? ? defineExpose({
? ? ? ? show,
? ? ? ? setSrc
? ? })
</script>

preview.ts

對previewImage組件進行拓展，全局注冊preview指令（這個注冊代碼就不放了呦）
需要注意的是vue3拓展組件和vue2有所不同，vue2用Vue.extend就可以拿到組件構造器，vue3這邊則是使用createApp

import { Component, createApp } from "vue"
import PreviewImageVue from "@/components/PreviewImage.vue"
function mountComponent(RootComponent: Component) {
? ? const app = createApp(RootComponent)
? ? const root = document.createElement("div")
? ? root.setAttribute("id", "previewDom")
? ? document.body.appendChild(root)
? ? return {
? ? ? ? instance: app.mount(root),
? ? ? ? unmount() { // 這里unmout沒用到，因為組件中dialog的close事件這里監聽不到，我就在組件內進行卸載了
? ? ? ? ? ? console.log("unmount")
? ? ? ? ? ? document.body.removeChild(root)
? ? ? ? }
? ? }
}
const preview = {
? ? mounted(el: any) {
? ? ? ? el.style.cursor = "zoom-in"
? ? ? ? el.addEventListener("click", () => {
? ? ? ? ? ? let imgSrc = el.getAttribute("src")
? ? ? ? ? ? let { instance, unmount } = mountComponent(PreviewImageVue)
? ? ? ? ? ? ;(instance as any).setSrc(imgSrc)
? ? ? ? ? ? ;(instance as any).show()
? ? ? ? })
? ? }
}
export default preview

使用

本地資源測試

<div>
? ? <!-- 普通圖片 -->
? ? <img src="~@/assets/images/logo.png">
? ? <!-- 組件形式使用預覽組件、需要注意路徑（使用絕對路徑） -->
? ? <PreviewImage src="/src/assets/images/logo.png"></PreviewImage>
? ? <!-- 組件插槽形式預覽組件、需要注意路徑（使用絕對路徑） -->
? ? <PreviewImage>
? ? ? ? <img src="/src/assets/images/logo.png">
? ? </PreviewImage>
? ? <!-- 指令使用預覽組件 -->
? ? <img src="~@/assets/images/logo.png" v-preview>
</div>

開發中可能遇到的問題

• 獲取proxy時使用getCurrentInstance時編輯器會報錯，斷言成ComponentInternalInstance就不報錯了。
• 獲取插槽內容時需要 proxy?.$slots?.default?.() 這樣判斷取值，不然編輯器也會報錯。
• 暴露給外部使用的方法/屬性需通過defineExpose暴露出去
• 注意拓展組件方式。vue2用Vue.extend，vue3用createApp
• 使用的時候注意路徑問題

總結

之前都是用vue2開發項目，此次項目是vue3的第一次實踐，使用下來感覺ts寫起來比較冗余，很多編輯器報錯都需要時間去解決，可能不是開發組件庫都是業務需求，對類型接口的定義使用很少。個人不是很喜歡ts，還是js來的簡單粗暴。

到此這篇關于vue3+ts+elementPLus實現v-preview指令的文章就介紹到這了,更多相關vue3 v-preview指令內容請搜索以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持！