vue 自定义指令 -- 图片预览

最新推荐文章于 2024-10-30 15:03:33 发布
最新推荐文章于 2024-10-30 15:03:33 发布
阅读量1.1k 收藏 1
点赞数
分类专栏： vue directive vue-directive 文章标签： vue vue_directive
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Lpandeng/article/details/88930795
版权
vue 同时被 3 个专栏收录
19 篇文章 2 订阅
订阅专栏
directive
1 篇文章 0 订阅
订阅专栏
vue-directive
1 篇文章 0 订阅
订阅专栏

vue 自定义指令 – 图片预览放大

安装

npm i lpd-image --save

使用

在 main.js 中

import xxxx from 'lpd-image'

在组件中：

 <img alt="Vue logo" src="./assets/logo.png" v-lpd-image>  默认scale ：1 ，opacity：0.5
 <img alt="Vue logo" src="./assets/logo.png" v-lpd-image="{scale:'1.5',opacity:'0.3'}">  定义缩放倍数,背景透明度
vue实战-完全掌握Vue自定义指令
yyds2026的博客
10-17 397
除了核心功能默认内置的指令 (v-model和v-show等)，Vue 也允许注册自定义指令。注意，在 Vue2.0 中，代码复用和抽象的主要形式是组件。然而，有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。———Vue官网作为使用Vue的开发者，我们对Vue指令一定不陌生，诸如v-model、v-on、v-for、v-if等，同时Vue也为开发者提供了自定义指令的api，熟练的使用自定义指令可以极大的提高了我们编写代码的效率，让我们可以节省时间开心的摸鱼~
Vue图片浏览组件v-viewer用法分析【支持旋转、缩放、翻转等操作】
10-16
Vue图片浏览组件v-viewer是一款基于viewer.js的Vue封装插件，主要功能包括图片的浏览、旋转、缩放和翻转等。它提供了一种简便的方式来集成图片查看器到Vue应用程序中，支持多种操作模式，适用于现代web应用开发中的...
vue自定义图片懒加载指令
09-27
vue中封装自定义指令，该指令主要功能是到达指定区域加载图片，若已加载过就不再加载
【vue2】自定义指令，以（复制v-copy / 预览图片v-imagePreview）为例
weixin_42779803的博客
09-14 1471
vue 自定义指令 ，实现 v-copy 复制文本 / v-imagePreview 预览图片 指令
vue3 自定义预览图片&缩放和拖拽图片功能
最新发布
weixin_46165123的博客
10-30 727
vue3 自定义预览图片&缩放和拖拽图片功能
vue2自定义封装图片预览组件
不会写代码的前端
01-17 1432
功能：滚轮滚动图片放大、还原图片、左旋转、右旋转、上一张、下一张、删除图片、预览大图参数传入：是否显示图片、图片的url、图片预览图的宽度、图片预览图的宽度、预览列表。
vue实现基于elementui的全屏图片自定义预览
kirinlau的专栏
05-10 1947
到elementUI看了一下，发现el-image是有这个功能的，而且支持旋转、放大缩小，原图，鼠标滚动，列表预览等基础功能，但是是基于小图点击预览大图的，官方api也没有提供触发预览的事件，所以手动实现了它的预览调用功能
vue自定义指令（弹框拖拽和点击图片放大）
zxl_start的博客
04-15 835
vue自定义指令（弹框拖拽和点击图片放大） import Vue from 'vue' let zIndex = 2000 // v-dialogDrag: 弹窗拖拽属性 Vue.directive('drag', { bind(el, binding, vnode, oldVnode) { const dialogHeaderEl = el.querySelector('.znv-dialog__header') || el.querySelector('.sub-small-title')
vue 自定义上传图片
weixin_53587375的博客
05-19 967
vue自定义上传图片 1.用elementUI 里的el-upload上传 <div class="businesster"> <el-form-item label="封面图片" prop="headImg"> <div class="businesster_ying"> <el-upload class="avatar-uploader" a
vue--点击图片放大的自定义指令（低级版）
diaowuyan4390的博客
05-25 315
1 Vue.directive('showImg',{ 2 inserted(el){ 3 el.addEventListener('click',function(e){ 4 e.stopPropagation() 5 const imgSrc = el.getAttribute('src')...
Vue 自定义图片/src懒加载
qq_35189120的博客
03-06 397
if(!Array.prototype.remove){ Array.prototype.remove = function(item){ if(!this.length) return var index = this.indexOf(item); if( index > -1){ ...
vue全局注册自定义图片属性
m0_57262819的博客
06-03 486
vue项里面,注册全局的图片自定义属性
VUE中的内置指令，图文加案例，让你快速掌握，轻松使用无压力
qq_61876792的博客
02-24 298
一，v-text文本指令 此代码运行结果是 v-text与{{}}的效果一样，不过{{}}方式更简洁 二,v-html 先看示例： 此代码运行结果是 可以看出v-text与v-html的差别是v-html可以识别标签 三，v-bind属性指令 示例 上述代码的页面效果如图 设置的title属性为“我学vue，我骄傲！” v-bind后加:属性名可以直接简写成:属性名 四，v-if与v-else条件指令 示例 当isLog的值为false时...
vue自定义指令实现img默认图片
weixin_39995147的博客
02-15 1785
img 的onerror方法与vue 指令可以实现 // 注册一个全局自定义指令 `v-pic` Vue.directive('pic', { bind: function (el) { el.onerror = function(){ el.src = '默认图片'; } } }) ...
vue3.0中用自定义指令实现图片懒加载
^_^
07-19 1208
本章技术点 Vue官方工具库(仅限vue3.0使用)中的useIntersectionObserver vue.use插件的使用 vue3.0自定义指令 使用场景 ① 每一张图片都要进行懒加载操作，在存在大量图片的列表中,为了避免大量图片一起发送网络请求而造成网络堵塞,把图片的加载变成按需的状态 浏览器一般最多支持并行发送的请求数6个左右 避免和重要请求竞争 ② 监听图片是否成功进入到视口 如果进来了我们才正式发送请求 (操作src就可以) ③ 迷惑点 我们请求回来的数据给数据做...
vue 使用 v-viewer 用于图片浏览的Vue组件，支持旋转、缩放、翻转等操作，基于viewer.js。
努力
01-29 1848
vue 中 v-viewer 的简单使用
使用vue开发，图文页面，实现点击图片可以预览
weixin_43444977的博客
02-03 2522
在某个有文字、图片、按钮等元素的页面，比如像各种APP的新闻页面，其中，实现用户点击图片可以预览图片,点击其它元素不会预览。（提供一个在线图片地址：https://img01.yzcdn.cn/vant/apple-1.jpg）引入 ImagePreview。在开发页面.vue文件开发。
vue 实现预览图片
。
08-03 3824
vue 简单实现图片的放大预览
Vue图片预览插件：vue-photo-preview全平台适用
在Vue.js中，vue-photo-preview作为一个图片预览插件，是以Vue组件的形式存在的。要使用该插件，开发者需要按照Vue组件的使用规则将其集成到项目中。这通常涉及以下几个步骤： - **组件引入**：将vue-photo-preview...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

昔人'

你的鼓励将是我创造的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值