整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

使用 vue3 封装后台管理系统图片预览功能

使用 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.0ViteArco VueTypeScript 中后台解决方案。

特点

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 生态最优秀的中后台框架,全面的系统配置,优质模板,常用组件,真正一站式开箱即用