vue自定义指令截取图片中心显示

使用vue做项目时，有一种产品需求，是像朋友圈一样展示图片，在小图时，只展示中心的一部分图片

在vue中可以用自定义指令来做

页面代码

<div class="image-item" v-for="(image, index) in data.img" :key="index"><img v-interceptImg :src="data:image.img_min" alt="">
</div>
复制代码

样式代码

.image-item {width: 100%;height: 100%;float: left;display: flex;overflow: hidden;align-items: center;justify-content: center;
}
复制代码

自定义指令代码

export function interceptImg (el, binding) {el.addEventListener('load', () => {let width = el.naturalWidth;let height = el.naturalHeight;// 获取父元素的设定宽度let parentWidth = Number(window.getComputedStyle(el.parentNode).width.replace('px', ''));let parentHeight = Number(window.getComputedStyle(el.parentNode).height.replace('px', ''));// 获取父元素宽高比例let scale = binding.value ? binding.value.scale : parentHeight / parentWidth;// 清除元素style值el.style = '';if (height / width < scale) {el.style.height = '100%';// 获取图片放入后实际的宽度// let imgWidth = Number(window.getComputedStyle(el).width.replace('px', ''));let imgWidth = (width * parentHeight) / height;el.style.marginLeft = `${(parentWidth - imgWidth) / 2}px`;} else if (height / width > scale) {el.style.width = '100%';} else {el.style.width = '100%';el.style.height = '100%';}});
}
复制代码

vue自定义指令截取图片中心显示相关推荐

自定义指令实现图片懒加载
Vue自定义指令实现图片懒加载其实实现懒加载的方式有很多了,现在也有很多插件(比如:vue-lazyload等),element-ui库中也有图片懒加载的方式,所以大家根据自己的喜欢选择就可以了 I ...
Vue自定义指令及实现图片懒加载指令
一. 速识概念: 在我们使用 Vue 的过程中,遇到了很多方便我们操作的vue内置指令,以 v-xxx 表示.比如有 v-module,v-for,v-if,v-show 等等,每个指令都能实现一 ...
vuejs 指令封装 button 加载效果_这些Vue自定义指令，让你的项目开发爽到爆
受 AngularJS 的启发,Vue 内置了一些非常有用的指令(比如v-html 和 v-once等),每个指令都有自身的用途.完整的指令列表可以在这里查看. 这还没完,更棒的是可以开发自定义指令. ...
pyqt5 treeview鼠标右键菜单事件_【动手实践】使用 Vue 自定义指令实现右键菜单...
本文来自于神奇的程序员前言浏览器里右键时会有一个默认的菜单,在我的开源项目中正好有自定义右键菜单的需求,在npm库找了下与之相关的包,发现都是以组件形式实现的,感觉那种做法太过繁琐. 于是,我就 ...
clientsideevents能定义几个click事件_分享8个非常实用的Vue自定义指令
作者:lzg9527 https://juejin.cn/post/6906028995133833230 在 Vue,除了核心功能默认内置的指令 ( v-model 和 v-show ),Vue 也 ...
超实用：Vue 自定义指令合集
大家好,我是漫步前面我已经分享过一篇"分享8个非常实用的Vue自定义指令"文章,里面教了大家如何使用自定义指令,以及几个使用的指令,下面这篇文章也是类似内容,希望你会喜欢.记得查 ...
Vue的自定义指令以及Vue自定义指令的应用场景
前言一.Vue的自定义指令分为? vue中除了核心功能内置的指令外,也允许注册自定义指令.有的情况下,对普通DOM元素进行底层操作,这时候就会用到自定义指令. 自定义指令分为全局自定义指令和局部的自 ...
vue自定义指令使用
前言一.Vue的自定义指令分为? vue中除了核心功能内置的指令外,也允许注册自定义指令.有的情况下,对普通DOM元素进行底层操作,这时候就会用到自定义指令. 自定义指令分为全局自定义指令和局部的自 ...
15个Vue自定义指令，让你的项目开发爽到爆
这15个Vue自定义指令,让你的项目开发爽到爆李中凯老师,8年前端开发,前端负责人,擅长JavaScript/Vue. 受 AngularJS 的启发,Vue 内置了一些非常有用的指令(比如v-ht ...

vue自定义指令截取图片中心显示

在vue中可以用自定义指令来做

vue自定义指令截取图片中心显示相关推荐

最新文章

热门文章