资讯专栏INFORMATION COLUMN

[vue-keep-ratio] Vue 保持 Dom 元素宽高比例的一个指令

RdouTyping / 3359人阅读

摘要:地址介绍该组件主要是用作高效的设定元素,保持固定的宽高比,效果如下如何使用将会保持或者将会一直保持方块状浏览器改变大小时,也会保持宽高安装要保持的宽高比例哪个属性需要固定,如果固定宽,则高会被设置为合适的值以保持比例当浏览器

vue-keep-ratio

地址 vue-keep-ratio

介绍

该组件主要是用作高效的设定 dom 元素,保持固定的宽高比,效果如下

如何使用

main.js

import KeepRatio from "vue-keep-ratio"
Vue.use(KeepRatio)

div screen 将会保持 width=1920px;height:1080px

或者

div cube 将会一直保持方块状, 浏览器改变大小时,也会保持宽高 1 : 1

Demo

安装 parcel

parcel examples/base/index.html
API

ratio: 要保持的宽高比例

fixed: 哪个属性需要固定,如果固定宽,则高会被设置为合适的值以保持比例

keep: 当浏览器窗口大小改变的时候,是否依然保持比例

debounce: resize 事件防抖

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/109137.html

相关文章

  • vue实现旋转木马轮播

    摘要:关于旋转木马效果实用例子一个实际应用在优酷的频道页。将对的数据操作转化为数组,数组元素存储各项的数据宽高绝对定位偏移值透明度以及层叠参数,在模板处遍历实际项目的数组,其样式则通过索引获取对数组的元素数据。 同事拿到个设计稿,是旋转木马的轮播效果,于是网上找了一下,发现了jquery实现的效果,一有空就看看源码,研究其实现原理,想着用vue的数据驱动方式来实现一个,但这个效果跟以往做的d...

    waltr 评论0 收藏0
  • vue实现旋转木马轮播

    摘要:关于旋转木马效果实用例子一个实际应用在优酷的频道页。将对的数据操作转化为数组,数组元素存储各项的数据宽高绝对定位偏移值透明度以及层叠参数,在模板处遍历实际项目的数组,其样式则通过索引获取对数组的元素数据。 同事拿到个设计稿,是旋转木马的轮播效果,于是网上找了一下,发现了jquery实现的效果,一有空就看看源码,研究其实现原理,想着用vue的数据驱动方式来实现一个,但这个效果跟以往做的d...

    高璐 评论0 收藏0
  • element-ui dialog组件添加可拖拽位置 可拖拽宽高

    摘要:最近公司新加需求实现弹窗可拖拽还要拖拽宽高变化国际惯例先上图浏览器下作的有几个点需要注意一下每个弹窗都要有唯一可操作指令可以做到拖拽时要添加可拖拽区块由于组件在设计时宽度用了百分比这里不同浏览器有兼容性问题实现拖拽宽高时获取边缘问题定位设 最近公司新加需求, 实现弹窗可拖拽, 还要拖拽宽高变化. 国际惯例先上图: edge浏览器下作的gif http://www.lano...

    jzman 评论0 收藏0
  • Vue_Vue权威指南

    摘要:效率不高,很多多余,称之为脏检查。通过索引设置数组元素并触发视图更新。解决闪烁问题自定义指令自定义指令提供一种机制将数据的变化映射为行为。 Vue特性 Vue只是聚焦视图层,是一个构建数据驱动的Web界面的库。 Vue通过简单 API提供高效的数据绑定和灵活的组件系统 轻量 数据绑定 指令 插件化 架构从传统后台MVC 向REST API + 前端MV*迁移DOM是数据的一种自然映...

    SimonMa 评论0 收藏0
  • 管中窥Vue

    摘要:博客文章链接管中窥和的相同点和不同点与的相同都使用了提供了响应式和组件化的视图组件将注意力集中保持在核心库,而将其他功能如路由和全局状态管理交给相关的库。在复杂的情况下,可以考虑使用官方提供的状态管理模式来进行管理。 博客文章链接:管中窥Vue Vue和Angular、React.js的相同点和不同点? 与React的相同: 都使用了Virtual DOM 提供了响应式和组件化的...

    yy736044583 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<