本文主要介紹了vue3+ts+elementPLus實(shí)現(xiàn)v-preview指令，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

引文

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

文件內(nèi)容

previewImage.vue

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

<template>
? ? <div class="previewImg" @click="dialogVisible = true">
? ? ? ? <slot>
? ? ? ? ? ? <img :src="props.src" alt="圖片加載失敗" />
? ? ? ? </slot>
? ? </div>
? ? <el-dialog v-model="dialogVisible" title="查看圖片" @close="close">
? ? ? ? <img :src="imgSrc" alt="Preview Image" style="max-width: 100%" />
? ? </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 class="imgs">
? ? <!-- 普通圖片 -->
? ? <img src="~@/assets/images/logo.png" alt="">
? ? <!-- 組件形式使用預(yù)覽組件、需要注意路徑（使用絕對(duì)路徑） -->
? ? <PreviewImage src="/src/assets/images/logo.png"></PreviewImage>
? ? <!-- 組件插槽形式預(yù)覽組件、需要注意路徑（使用絕對(duì)路徑） -->
? ? <PreviewImage>
? ? ? ? <img src="/src/assets/images/logo.png" alt="">
? ? </PreviewImage>
? ? <!-- 指令使用預(yù)覽組件 -->
? ? <img src="~@/assets/images/logo.png" alt="" 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í)踐，使用下來感覺ts寫起來比較冗余，很多編輯器報(bào)錯(cuò)都需要時(shí)間去解決，可能不是開發(fā)組件庫(kù)都是業(yè)務(wù)需求，對(duì)類型接口的定義使用很少。個(gè)人不是很喜歡ts，還是js來的簡(jiǎn)單粗暴。

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

您可能感興趣的文章: