使用 vue3 封裝后臺管理系統圖片預覽功能

建了一個新的 vue3 項目，因為項目中有很多模塊用到了圖片預覽功能，項目的 ui 框架用的是element-plus,框架自帶 el-image 組件里面帶了圖片預覽功能，但是當時我不想用這個組件，所以就借鑒了它里面預覽圖片組件的代碼。

簡單的例子

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

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

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

相關參數介紹

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

新建 previewImageDirective.ts 文件

導入相關函數及類型，編寫基本的指令代碼

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 將組件代碼轉成 vnode
render 將 vnode 渲染成 html

下面開始編寫相關指令代碼

首先我們需要創建一個 div 用來包裹我們的預覽組件，我們來控制這個 div 的顯示隱藏來實現預覽組件的彈出和隱藏。

為什么這幾個變量為啥要定義成全局的，如果寫在指令內部 v-previewImage="" 多次就出現多個變量，和多個組件，造成了資源浪費，然后ElImageViewer組件一個頁面要寫多次還會出現一個錯誤

我給 element 提了issues，現在已經修復，但還是推薦我這種寫法

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

編寫指令內部代碼

第一步給圖片綁定點擊事件并給圖片添加樣式，當鼠標滑過添加小手的樣式

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

第二步使用 h 函數渲染組件將組件代碼轉成 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, // 允許點擊遮罩層關閉
			});
		},
	});
}

第三步使用 render 函數將 vnode 渲染到我們創建的div 里面，并且將我們創建的 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, // 允許點擊遮罩層關閉
			});
                        render(vnode, previewBox); // 將 vnode 渲染成 html
                        document.body.appendChild(previewBox); // 將 html 插入到 body 標簽里面
		},
	});
}

到現在為止我們點擊圖片組件已經可以正常的顯示了

第四步當點擊遮罩層關閉的時候將我們創建的 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, // 允許點擊遮罩層關閉
                                onClose: ()=> {
                                         el.removeEventListener('click', ()=> {}); // 移除
                                         document.body.removeChild(previewBox);
					},
			});
                        render(vnode, previewBox); // 將 vnode 渲染成 html
                        document.body.appendChild(previewBox); // 將 html 插入到 body 標簽里面
		},
	});
}

將文件導入到 main.ts中

將文件導入 main.ts中然后調用我們導入的方法傳入 app 就可以在頁面中使用了

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

ok 上面就是完整代碼，這樣一個圖片預覽指令就完成了

使用 vue3 指令封裝一個后臺管理系統圖片預覽功能
原文鏈接：https://juejin.cn/post/7324653675456364596

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

vue-img-cutter 基于 vue2.x 構建的輕量級剪切圖片組件。支持移動圖像、放大縮小圖片、任意移動圖片、固定比例/尺寸、遠程圖片裁剪等功能。

功能特色

兼容IE9+，MSEdge，Chrome，Firefox
兩種展現形式，行內或彈窗
可旋轉、縮放圖片
任意比例、大小裁剪
固定比例、大小裁剪
支持遠程圖片裁剪、跨域設置

安裝

$ 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數據
    }
  }
}
</script>

設置模態彈框模式

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

模態框模式

參數配置

插槽Slot

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

返回值

最后附上示例及項目地址

# 演示地址
https://ihtmlcss.com/demo/dist/#/croptool
# 倉庫地址
https://github.com/acccccccb/vue-img-cutter

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

言

為了豐富 Naive Admin 生態，近期我們一直在精雕細琢，日夜奮戰，終于又迎來了Arco Vue Pro 正式發布上線！

Arco Design 介紹

ArcoDesign 是由字節跳動 GIP UED 團隊和架構前端團隊聯合推出的企業級設計系統，在打磨了近 3 年之后，通過字節內部大量業務沉淀和驗證，開源了 ArcoDesign 設計系統，旨在讓社區聽見更多的聲音，為更多中小型企業及個人設計師和開發者提效，創造更多高效美觀的“最佳實踐”。

產品概要

Naive Admin Arco 是一個基于 Vue3.0、Vite、 Arco Vue、TypeScript 中后臺解決方案。

特點

Naive Admin Arco 企業級中后臺前端框架，使用最新的前端技術棧，并提煉了典型的業務模型，頁面，包括二次封裝組件、動態菜單、權限校驗、粒子化權限控制等功能，它可以幫助你快速搭建企業級中后臺項目

響應式、多主題，多配置，快速集成，開箱即用

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

強大的鑒權系統，對路由、菜單、功能點等支持 3 種鑒權模式，滿足不同的業務鑒權需求

持續更新，實用性頁面模板功能和交互，隨意搭配組合，讓構建頁面變得簡單化

功能

一鍵鎖屏
支持內嵌頁面
黑暗模式一鍵切換
支持多級路由嵌套
基于Vue3、Vite、TypeScript構建
路由菜單智能生成，只需創建路由文件即可
頁面切換動畫：漸變 / 閃現 / 滾動 / 消退 / 底部消失 / 底部消退
含有大量典型的業務示例，持續更新中，之后可免費升級獲取

布局

登錄 / 注冊
固定頂欄（可開關）
固定主體（可開關）
頁面重新刷新（可開關）
面包屑導航（可開關）
面包屑圖標（可開關）
頁面動畫（可開關）
導航欄模式：左側菜單 / 頂部菜單 / 頂部菜單混合
導航欄風格：暗色側邊欄 / 白色側邊欄 / 暗色頂欄
更多布局可在線體驗（右上角菜單項可動態預覽各種配置）

鑒權

路由級別鑒權
側邊欄菜單鑒權
功能塊鑒權
功能點鑒權
鑒權指令

組件

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

頁面

主控臺
監控臺
工作臺
用戶管理
個人設置
系統設置
修改密碼
菜單權限管理
角色權限管理
查詢列表（表格組件示例）
更多頁面可在線查看

項目展示

更多頁面、功能，組件，請直接在線預覽查看

在線預覽

AdminPro

在線文檔

Naive Admin NaiveUi 生態最優秀的中后臺框架，全面的系統配置，優質模板，常用組件，真正一站式開箱即用

在線咨詢

上一篇：極簡javascript時鐘，代碼卻不簡單！
下一篇：HTTP 報文詳解

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商