目錄

• 引文
• 目錄
• 文件內(nèi)容
• previewImage.vue
• preview.ts
• 使用
• 開發(fā)中可能遇到的問題
• 總結(jié)

引文

最近在用 vue3+ts 開發(fā)公司的后臺(tái)系統(tǒng)，因?yàn)楹笈_(tái)多處需要圖片放大預(yù)覽的功能，就想著封裝一個(gè)v-preview指令，這樣在需要預(yù)覽的圖片上加個(gè) v-preview就可以預(yù)覽啦。

目錄

在這里就不列我的項(xiàng)目目錄啦，想嘗試的朋友可以這樣創(chuàng)建目錄

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

文件內(nèi)容

previewImage.vue

普普通通vue3組件，記得全局注冊(cè)

<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){
? ? ? ? ? ? // 獲取插槽內(nèi)容設(shè)置imgSrc地址
? ? ? ? ? ? imgSrc.value = slot?.[0]?.props?.src
? ? ? ? }
? ? })
? ? const setSrc = (v: string) => {
? ? ? ? imgSrc.value = v
? ? }
? ? // 組件觸發(fā)
? ? if (props.src) {
? ? ? ? setSrc(props.src)
? ? }
? ? // 指令觸發(fā)
? ? const show = () => {
? ? ? ? dialogVisible.value = true
? ? }
? ? const close = () => {?
? ? ? ? // 彈窗關(guān)閉移除dom
? ? ? ? if (document.getElementById("previewDom")) {
? ? ? ? ? ? document.body.removeChild(document.getElementById("previewDom") as HTMLElement)
? ? ? ? }
? ? }
? ? defineExpose({
? ? ? ? show,
? ? ? ? setSrc
? ? })
</script>

preview.ts

對(duì)previewImage組件進(jìn)行拓展，全局注冊(cè)preview指令（這個(gè)注冊(cè)代碼就不放了呦）
需要注意的是vue3拓展組件和vue2有所不同，vue2用Vue.extend就可以拿到組件構(gòu)造器，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沒用到，因?yàn)榻M件中dialog的close事件這里監(jiān)聽不到，我就在組件內(nèi)進(jìn)行卸載了
? ? ? ? ? ? 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

使用

本地資源測(cè)試

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

開發(fā)中可能遇到的問題

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

總結(jié)

之前都是用vue2開發(fā)項(xiàng)目，此次項(xiàng)目是vue3的第一次實(shí)踐，使用下來(lái)感覺ts寫起來(lái)比較冗余，很多編輯器報(bào)錯(cuò)都需要時(shí)間去解決，可能不是開發(fā)組件庫(kù)都是業(yè)務(wù)需求，對(duì)類型接口的定義使用很少。個(gè)人不是很喜歡ts，還是js來(lái)的簡(jiǎn)單粗暴。

到此這篇關(guān)于vue3+ts+elementPLus實(shí)現(xiàn)v-preview指令的文章就介紹到這了,更多相關(guān)vue3 v-preview指令內(nèi)容請(qǐng)搜索以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持！