使用 vue3 封裝后臺(tái)管理系統(tǒng)圖片預(yù)覽功能

建了一個(gè)新的 vue3 項(xiàng)目，因?yàn)轫?xiàng)目中有很多模塊用到了圖片預(yù)覽功能，項(xiàng)目的 ui 框架用的是element-plus,框架自帶 el-image 組件里面帶了圖片預(yù)覽功能，但是當(dāng)時(shí)我不想用這個(gè)組件，所以就借鑒了它里面預(yù)覽圖片組件的代碼。

簡(jiǎn)單的例子

<div v-color="red"> 我是紅色的文字</div>

app.directive('color', (el, binding)=> {
  // 這會(huì)在 `mounted` 和 `updated` 時(shí)都調(diào)用
  el.style.color=binding.value
})

這時(shí)候 div 里面的文字都變成紅色， v-color="yellow" 就變成了黃色

相關(guān)參數(shù)介紹

el：指令綁定到的元素。這可以用于直接操作 DOM。
binding：一個(gè)對(duì)象，包含以下屬性。
value：傳遞給指令的值。例如在 v-my-directive="1 + 1" 中，值是 2。
oldValue：之前的值，僅在 beforeUpdate 和 updated 中可用。無(wú)論值是否更改，它都可用。
arg：傳遞給指令的參數(shù) (如果有的話)。例如在 v-my-directive:foo 中，參數(shù)是 "foo"。
modifiers：一個(gè)包含修飾符的對(duì)象 (如果有的話)。例如在 v-my-directive.foo.bar 中，修飾符對(duì)象是 { foo: true, bar: true }。
instance：使用該指令的組件實(shí)例。
dir：指令的定義對(duì)象。
vnode：代表綁定元素的底層 VNode。
prevNode：代表之前的渲染中指令所綁定元素的 VNode。僅在 beforeUpdate 和 updated 鉤子中可用。

新建 previewImageDirective.ts 文件

導(dǎo)入相關(guān)函數(shù)及類型，編寫(xiě)基本的指令代碼

import { DirectiveBinding, h, render } from 'vue';
import { ElImageViewer } from 'element-plus';

export default function (app) {
	app.directive('previewImage', {
		mounted(el: HTMLElement, binding: DirectiveBinding) {
			// 邏輯操作
		},
	});
}

DirectiveBinding el的類型
h 將組件代碼轉(zhuǎn)成 vnode
render 將 vnode 渲染成 html

下面開(kāi)始編寫(xiě)相關(guān)指令代碼

首先我們需要?jiǎng)?chuàng)建一個(gè) div 用來(lái)包裹我們的預(yù)覽組件，我們來(lái)控制這個(gè) div 的顯示隱藏來(lái)實(shí)現(xiàn)預(yù)覽組件的彈出和隱藏。

為什么這幾個(gè)變量為啥要定義成全局的，如果寫(xiě)在指令內(nèi)部 v-previewImage="" 多次就出現(xiàn)多個(gè)變量，和多個(gè)組件，造成了資源浪費(fèi)，然后ElImageViewer組件一個(gè)頁(yè)面要寫(xiě)多次還會(huì)出現(xiàn)一個(gè)錯(cuò)誤

我給 element 提了issues，現(xiàn)在已經(jīng)修復(fù)，但還是推薦我這種寫(xiě)法

const previewBox=document.createElement('div'); // 創(chuàng)建節(jié)點(diǎn)
previewBox.classList.add('preview-box'); // 給 div 增加類名
let vnode; // 存放 vnode 的變量

編寫(xiě)指令內(nèi)部代碼

第一步給圖片綁定點(diǎn)擊事件并給圖片添加樣式，當(dāng)鼠標(biāo)滑過(guò)添加小手的樣式

export default function (app) {
	app.directive('previewImage', {
		mounted(el: HTMLElement, binding: DirectiveBinding) {
			el.addEventListener('click', ()=> {
                            el.style.cursor='pointer';
                        })
		},
	});
}

第二步使用 h 函數(shù) 渲染組件將組件代碼轉(zhuǎn)成 vnode

export default function (app) {
	app.directive('previewImage', {
		mounted(el: HTMLElement, binding: DirectiveBinding) {
			el.addEventListener('click', ()=> {
                            el.style.cursor='pointer';
                        })
                        vnode=h(ElImageViewer, {
				urlList: [binding.value], // 圖片地址
				hideOnClickModal: true, // 允許點(diǎn)擊遮罩層關(guān)閉
			});
		},
	});
}

第三步使用 render 函數(shù)將 vnode 渲染到我們創(chuàng)建的div 里面，并且將我們創(chuàng)建的 div 插入到 body 里面

export default function (app) {
	app.directive('previewImage', {
		mounted(el: HTMLElement, binding: DirectiveBinding) {
			el.addEventListener('click', ()=> {
                            el.style.cursor='pointer';
                        })
                        vnode=h(ElImageViewer, {
				urlList: [binding.value], // 圖片地址
				hideOnClickModal: true, // 允許點(diǎn)擊遮罩層關(guān)閉
			});
                        render(vnode, previewBox); // 將 vnode 渲染成 html
                        document.body.appendChild(previewBox); // 將 html 插入到 body 標(biāo)簽里面
		},
	});
}

到現(xiàn)在為止我們點(diǎn)擊圖片組件已經(jīng)可以正常的顯示了

第四步當(dāng)點(diǎn)擊遮罩層關(guān)閉的時(shí)候?qū)⑽覀儎?chuàng)建的 div 移除掉就 ok 了

export default function (app) {
	app.directive('previewImage', {
		mounted(el: HTMLElement, binding: DirectiveBinding) {
			el.addEventListener('click', ()=> {
                            el.style.cursor='pointer';
                        })
                        vnode=h(ElImageViewer, {
				urlList: [binding.value], // 圖片地址
				hideOnClickModal: true, // 允許點(diǎn)擊遮罩層關(guān)閉
                                onClose: ()=> {
                                         el.removeEventListener('click', ()=> {}); // 移除
                                         document.body.removeChild(previewBox);
					},
			});
                        render(vnode, previewBox); // 將 vnode 渲染成 html
                        document.body.appendChild(previewBox); // 將 html 插入到 body 標(biāo)簽里面
		},
	});
}

將文件導(dǎo)入到 main.ts中

將文件導(dǎo)入 main.ts中然后調(diào)用我們導(dǎo)入的方法傳入 app 就可以在頁(yè)面中使用了

import imageDirective from 'xxxx/previewImageDirective';
const app=createApp(App);
imageDirective(app)

ok 上面就是完整代碼，這樣一個(gè)圖片預(yù)覽指令就完成了

使用 vue3 指令封裝一個(gè)后臺(tái)管理系統(tǒng)圖片預(yù)覽功能
原文鏈接：https://juejin.cn/post/7324653675456364596

天給小伙伴們分享一個(gè)超棒的Vue圖片任意裁剪插件VueImgCutter。

vue-img-cutter 基于 vue2.x 構(gòu)建的輕量級(jí)剪切圖片組件。支持移動(dòng)圖像、放大縮小圖片、任意移動(dòng)圖片、固定比例/尺寸、遠(yuǎn)程圖片裁剪等功能。

功能特色

兼容IE9+，MSEdge，Chrome，F(xiàn)irefox
兩種展現(xiàn)形式，行內(nèi)或彈窗
可旋轉(zhuǎn)、縮放圖片
任意比例、大小裁剪
固定比例、大小裁剪
支持遠(yuǎn)程圖片裁剪、跨域設(shè)置

安裝

$ npm i vue-img-cutter -S

使用插件

<template>
  <div id="app">
    <ImgCutter
      label="選擇圖片"
      :isModal="false"
      :boxWidth="800"
      :boxHeight="500"
      :cutWidth="300"
      :cutHeight="300"
      :sizeChange="true"
      :moveAble="true"
      WatermarkText="水印文字"
      v-on:cutDown="cutDown"
    >
      <div class="btn btn-primary" slot="open">選擇本地圖片</div>
    </ImgCutter>
  </div>
</template>
<script>
import ImgCutter from 'vue-img-cutter'
export default {
  components: { ImgCutter },
  data() {
    return {}
  },
  methods: {
    cutDown(res) {
      let imgSrc=res.dataURL;
      console.log(imgSrc);//輸出為base64數(shù)據(jù)
    }
  }
}
</script>

設(shè)置模態(tài)彈框模式

<ImgCutter :isModal="true"></ImgCutter>

模態(tài)框模式

參數(shù)配置

插槽Slot

<ImgCutter v-on:cutDown="cutDown">
  <button slot="open">選擇圖片</button>
</ImgCutter>

返回值

最后附上示例及項(xiàng)目地址

# 演示地址
https://ihtmlcss.com/demo/dist/#/croptool
# 倉(cāng)庫(kù)地址
https://github.com/acccccccb/vue-img-cutter

ok，就介紹到這里。希望對(duì)你有幫助！感興趣的同學(xué)可以去了解下哈~

言

為了豐富 Naive Admin 生態(tài)，近期我們一直在精雕細(xì)琢，日夜奮戰(zhàn)，終于又迎來(lái)了Arco Vue Pro 正式發(fā)布上線！

Arco Design 介紹

ArcoDesign 是由字節(jié)跳動(dòng) GIP UED 團(tuán)隊(duì)和架構(gòu)前端團(tuán)隊(duì)聯(lián)合推出的企業(yè)級(jí)設(shè)計(jì)系統(tǒng)，在打磨了近 3 年之后，通過(guò)字節(jié)內(nèi)部大量業(yè)務(wù)沉淀和驗(yàn)證，開(kāi)源了 ArcoDesign 設(shè)計(jì)系統(tǒng)，旨在讓社區(qū)聽(tīng)見(jiàn)更多的聲音，為更多中小型企業(yè)及個(gè)人設(shè)計(jì)師和開(kāi)發(fā)者提效，創(chuàng)造更多高效美觀的“最佳實(shí)踐”。

產(chǎn)品概要

Naive Admin Arco 是一個(gè)基于 Vue3.0、Vite、 Arco Vue、TypeScript 中后臺(tái)解決方案。

特點(diǎn)

Naive Admin Arco 企業(yè)級(jí)中后臺(tái)前端框架，使用最新的前端技術(shù)棧，并提煉了典型的業(yè)務(wù)模型，頁(yè)面，包括二次封裝組件、動(dòng)態(tài)菜單、權(quán)限校驗(yàn)、粒子化權(quán)限控制等功能，它可以幫助你快速搭建企業(yè)級(jí)中后臺(tái)項(xiàng)目

響應(yīng)式、多主題，多配置，快速集成，開(kāi)箱即用

最新技術(shù)棧，使用 Vue 3、Typescript、Pinia、Vite 等前端前沿技術(shù)

強(qiáng)大的鑒權(quán)系統(tǒng)，對(duì)路由、菜單、功能點(diǎn)等支持 3 種鑒權(quán)模式，滿足不同的業(yè)務(wù)鑒權(quán)需求

持續(xù)更新，實(shí)用性頁(yè)面模板功能和交互，隨意搭配組合，讓構(gòu)建頁(yè)面變得簡(jiǎn)單化

功能

一鍵鎖屏
支持內(nèi)嵌頁(yè)面
黑暗模式一鍵切換
支持多級(jí)路由嵌套
基于Vue3、Vite、TypeScript構(gòu)建
路由菜單智能生成，只需創(chuàng)建路由文件即可
頁(yè)面切換動(dòng)畫(huà)：漸變 / 閃現(xiàn) / 滾動(dòng) / 消退 / 底部消失 / 底部消退
含有大量典型的業(yè)務(wù)示例，持續(xù)更新中，之后可免費(fèi)升級(jí)獲取

布局

登錄 / 注冊(cè)
固定頂欄（可開(kāi)關(guān)）
固定主體（可開(kāi)關(guān)）
頁(yè)面重新刷新（可開(kāi)關(guān)）
面包屑導(dǎo)航（可開(kāi)關(guān)）
面包屑圖標(biāo)（可開(kāi)關(guān)）
頁(yè)面動(dòng)畫(huà)（可開(kāi)關(guān)）
導(dǎo)航欄模式：左側(cè)菜單 / 頂部菜單 / 頂部菜單混合
導(dǎo)航欄風(fēng)格：暗色側(cè)邊欄 / 白色側(cè)邊欄 / 暗色頂欄
更多布局可在線體驗(yàn)（右上角菜單項(xiàng)可動(dòng)態(tài)預(yù)覽各種配置）

鑒權(quán)

路由級(jí)別鑒權(quán)
側(cè)邊欄菜單鑒權(quán)
功能塊鑒權(quán)
功能點(diǎn)鑒權(quán)
鑒權(quán)指令

組件

Qrcode二維碼（自定義LOGO，大小，樣式，下載二維碼）
富文本（增加文本，增加圖片，獲取html，渲染HTML內(nèi)容）
BasicModal彈窗（美化彈窗，可拖拽移動(dòng)，確認(rèn)按鈕可定制）
BasicForm表單（只需配置一個(gè)FormSchema數(shù)組，即可生成一個(gè)完整表單）
Cropper圖片裁剪（可裁剪圓形，方形，適用于頭像上傳，商品圖片上傳，前端裁剪）
BasicUpload圖片上傳（幫助文本，大小限制，內(nèi)置圖片預(yù)覽，上傳圖片統(tǒng)一標(biāo)準(zhǔn)封裝）
BasicTable表格（自動(dòng)分頁(yè)，編輯單元格/行，自適應(yīng)高度，操作列深度封裝，列設(shè)置，密度設(shè)置，列順序可拖動(dòng)）
Region地區(qū)組件（省市區(qū)選擇，數(shù)據(jù)動(dòng)態(tài)加載方式，只需配置好相應(yīng)接口即可，此組件靈活在于，可單獨(dú)選擇省，或者，省，市
Password密碼強(qiáng)度（內(nèi)置多種校驗(yàn)規(guī)則，長(zhǎng)度，復(fù)雜度，強(qiáng)度等級(jí)，文案全部可自定義，給系統(tǒng)設(shè)置一個(gè)相對(duì)安全的密碼，就用他準(zhǔn)沒(méi)錯(cuò)）
BasicSelect選擇器（擴(kuò)展選擇器組件，用于各種表單選擇器，簡(jiǎn)化使用，內(nèi)置緩存，可對(duì)相同的數(shù)據(jù)減少http請(qǐng)求，也可手動(dòng)刷新數(shù)據(jù)源）

頁(yè)面

主控臺(tái)
監(jiān)控臺(tái)
工作臺(tái)
用戶管理
個(gè)人設(shè)置
系統(tǒng)設(shè)置
修改密碼
菜單權(quán)限管理
角色權(quán)限管理
查詢列表（表格組件示例）
更多頁(yè)面可在線查看

項(xiàng)目展示

更多頁(yè)面、功能，組件，請(qǐng)直接在線預(yù)覽查看

在線預(yù)覽

AdminPro

在線文檔

Naive Admin NaiveUi 生態(tài)最優(yōu)秀的中后臺(tái)框架，全面的系統(tǒng)配置，優(yōu)質(zhì)模板，常用組件，真正一站式開(kāi)箱即用

在線咨詢

上一篇：極簡(jiǎn)javascript時(shí)鐘，代碼卻不簡(jiǎn)單！
下一篇：HTTP 報(bào)文詳解

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商