建了一个新的 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" 就变成了黄色
相关参数介绍
导入相关函数及类型,编写基本的指令代码
import { DirectiveBinding, h, render } from 'vue';
import { ElImageViewer } from 'element-plus';
export default function (app) {
app.directive('previewImage', {
mounted(el: HTMLElement, binding: DirectiveBinding) {
// 逻辑操作
},
});
}
下面开始编写相关指令代码
首先我们需要创建一个 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';
})
},
});
}
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, // 允许点击遮罩层关闭
});
},
});
}
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 标签里面
},
});
}
到现在为止我们点击图片组件已经可以正常的显示了
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中然后调用我们导入的方法传入 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 构建的轻量级剪切图片组件。支持移动图像、放大缩小图片、任意移动图片、固定比例/尺寸、远程图片裁剪等功能。
功能特色
安装
$ 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 正式发布上线!
ArcoDesign 是由字节跳动 GIP UED 团队和架构前端团队联合推出的企业级设计系统,在打磨了近 3 年之后,通过字节内部大量业务沉淀和验证,开源了 ArcoDesign 设计系统,旨在让社区听见更多的声音,为更多中小型企业及个人设计师和开发者提效,创造更多高效美观的“最佳实践”。
Naive Admin Arco 是一个基于 Vue3.0、Vite、 Arco Vue、TypeScript 中后台解决方案。
Naive Admin Arco 企业级中后台前端框架,使用最新的前端技术栈,并提炼了典型的业务模型,页面,包括二次封装组件、动态菜单、权限校验、粒子化权限控制等功能,它可以帮助你快速搭建企业级中后台项目
响应式、多主题,多配置,快速集成,开箱即用
最新技术栈,使用 Vue 3、Typescript、Pinia、Vite 等前端前沿技术
强大的鉴权系统,对路由、菜单、功能点等支持 3 种鉴权模式,满足不同的业务鉴权需求
持续更新,实用性页面模板功能和交互,随意搭配组合,让构建页面变得简单化
更多页面、功能,组件,请直接在线预览查看
AdminPro
Naive Admin NaiveUi 生态最优秀的中后台框架,全面的系统配置,优质模板,常用组件,真正一站式开箱即用
*请认真填写需求信息,我们会在24小时内与您取得联系。