vue标签设置宽高成比例指令

最新推荐文章于 2023-12-20 23:28:33 发布
最新推荐文章于 2023-12-20 23:28:33 发布
阅读量1.3k 收藏 3
点赞数 1
文章标签： javascript vue.js html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42597770/article/details/120435995
版权

VUE标签根据宽度按比例实现高度

1、安装指令 “vue-proportion-directive”: “^1.1.0”,
npm install vue-proportion-directive --save
2、在main.js中引入指令
// 控制标签宽高成比例的指令
import proportion from 'vue-proportion-directive';
Vue.use(proportion);
3、示例
<div class="div1" style="width: 20%;float: left" v-proportion="0.85"></div>
<div class="div2" style="width: 30%;float: left" v-proportion="1.6"></div>
<div class="div3" style="width: 40%;float: left" v-proportion="0.65"></div>

演示效果，标签高度始终随着宽度成比例变化在这里插入图片描述

头发依旧在
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
vue input标签通用指令校验的实现
12-13
移动端通常对于input标签要求输入有一些校验，vue的指令可达到完美校验的作用 预期效果 <input v-model="times" :data-last_value="lastTimes" v-int v-max="8" v-min="2" /> 属性data-last_value的值用来...
分享一个vue按比例设置标签高度的指令
sumimg的博客
09-10 731
介绍 开发中经常遇到这样的场景：根据元素的宽度，按比例设置高度。今天分享个指令，可以很轻松满足这类需求。 项目地址： https://github.com/MarxJiao/vue-proportion-directive 使用 安装 npm install vue-proportion-directive --save 代码 在新建vue实例前引用指令 import proportion from 'vue-proportion-directive'; Vue.use(proportion); 在
vue的自定义指令 - Directive
nunumaymax的博客
07-08 2951
vue除了提供了默认内置的指令外 (例如：v-model 和 v-show)，还允许开发人员根据实际情况自定义指令，它的作用价值在于当开发人员在某些场景下需要对普通DOM元素进行操作的时候。Vue自定义指令和组件一样存在着 全局注册 和 局部注册 两种方式。注册全局指令的方式，是通过 Vue.directive( id, [definition] ) 方法： 2. 局部注册 通过在vue实例中添加 directives 对象数据，可以注册局部自定义指令。我们还是以全局注册的案例为例，通过注册一个 v-foc
vue项目网页自适应，等比例放大缩小
热门推荐
zxczero的博客
09-19 3万+
vue项目网页自适应，等比例放大缩小
vue自定义指令
weixin_30843605的博客
07-31 347
除了核心功能默认内置的指令（v-model和v-show），也可以注册自定义指令。 //注册一个全局自定义指令'v-focus' Vue.directive('focus', { //当被绑定的元素插入到DOM中时 inserted: function(el) { //聚焦元素 el.focus() } }) ...
vue.js 获取当前屏幕的宽度_Vue动态获取width的方法
weixin_39984661的博客
12-19 2662
vue里想用Bootstrap的进度条，aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"style="width: 20%;">20%主要是把style="width: 20%;"变成动态获取的。:style="'width:' + percent + '%'"这样写就好了。也可是这样：用vue 获取动态元素的宽度。首页，要放在...
vue中生成条形码，以及条形码的所有参数
dakache11的博客
11-05 9264
//安装条形码插件 npm install @xkeshi/vue-barcode 在main.js中引入 import VueBarcode from '@xkeshi/vue-barcode'; //导入条形码插件 Vue.component('barcode', VueBarcode); //声明条形码组件   &lt;p class="printOrder" v-for=...
vue中动态设置meta标签和title标签的方法
10-18
主要介绍了vue中动态设置meta标签和title标签的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue实现图片按比例缩放问题操作
10-14
当需要将图片按比例缩放时，首要任务是获取图片的原始宽高比例。在给定的示例中，通过创建一个新的`Image`对象，并将其`src`属性设置为图片URL，可以预加载图片。当图片加载完成（即`onload`事件触发）后，可以计算...
vue 检测用户上传图片宽高的方法
10-15
在Vue.js应用中，检测用户上传图片的宽高是一个常见的需求，这有助于确保用户上传的图片符合特定的尺寸规格。以下是一种实现此功能的方法： 首先，我们需要创建一个数据对象`picArray`，用于存储每张图片的宽度和...
vue组件封装——固定宽高比的容器（2种方法：纯CSS实现 + JS实现）
朝阳39的博客
10-14 2375
什么是固定宽高比容器？ 定义： 无论浏览器窗口或页面元素如何变化，容器的宽度和高度永远保持固定的比例，如16:9。 应用场景： 如大屏自适应，内部元素对容器宽高比依赖很高的复杂模块布局等。 纯CSS实现固定宽高比的容器 原理： padding-top的值为百分比时，最终padding-top的计算值 = 百分比 * 当前元素宽度的计算值，从而通过padding-top将容器撑开。 为容器添加样式 box-sizing: border-box; 则容器的高度 = padding-top的计算值，从而.
自适应布局使用CSS3缩放实现(Vue)
a_strong_pig的博客
08-14 521
自适应布局使用CSS3缩放实现(Vue)
【自适应缩放】vue根据屏幕大小自适应宽高缩放的方法
seeeeeeeeeee的博客
11-23 1万+
根据屏幕大小的变化自动缩放元素的宽高，达到可以适应任何屏幕大小的效果。 这边通过一个mixins.js文件混入到组件内直接使用就行，只需要改一下ref的名字 示例结构 这里只需要看下我的结构大概示例和引入mixins文件， <template> <div style="width:100%;height:100%;position: relative"> <div class="box" ref="zoom"> <p>测试11</
Vue3使用 xx UI解决布局高度自适应
最新发布
zangzh的博客
12-20 1488
视窗(Viewport)是你的浏览器实际显示内容的区域—，换句话说是你的不包括工具栏和按钮的网页浏览器。字体大小同样都是1.5em，但是效果却截然不同，按照W3C提供的公式，我们可以计算下： class为id1的div字体大小继承自父元素body：16px。rem是CSS3新增的一个相对单位，但相对的只是HTML根元素。1.5em = 36px class为id3的div字体大小继承自父元素id2：36px*1.5em = 54px。px就是pixel（像素）的缩写，相对长度单位，相对于屏幕分辨率。
vue计算图片尺寸,获取宽高
EnidChann的博客
01-18 7261
methods:{ getData(){ // 获取数据后传入图片url获取尺寸(宽高) data.map(async item => { item.imgSize = await this.getImgSize(item.imgUrl) }) } // 获取图片尺寸 getImgSize (url) { return new Promise((resolve, reject) => { let imgOb
vue水平布局1-用flex按比例排版
qq_43840793的博客
06-16 4873
水平布局的排版，运用flex实现
CSS之经典flex布局-垂直居中
bossxu_的博客
07-21 673
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>flex垂直居中&lt
PC端 VUE 官网项目 前端开发 响应式布局（宽+高 等比例缩放）
weixin_55846296的博客
08-01 6070
各位大佬有好方法或者想指正的可以在评论去告诉我们，大佬们辛苦了（抱大腿）！！！
vue如何使用js代码设置一个元素的高度
weixin_42593130的博客
02-13 571
在Vue中，您可以使用JavaScript代码通过访问该元素的DOM节点来设置元素的高度。您可以使用以下步骤来实现这一点： 在Vue实例中使用ref属性为该元素分配一个引用。 在Vue的生命周期钩子中使用该引用，例如mounted()钩子，访问该元素的DOM节点。 使用JavaScript代码为该元素的style属性设置高度值。 以下是一个示例： <template> &...
vue js动态设置img长宽比例
05-12
可以使用 Vue.js 的绑定语法，动态设置图片的长宽比例。具体实现方法如下： ```html <template> <div> <img :src="imageUrl" :style="{ aspectRatio: ratio }"> </div> </template> <script> export default { data() { return { imageUrl: 'https://example.com/image.jpg', ratio: 16/9 // 设置默认的长宽比例为16:9 } } } </script> ``` 在上面的代码中，我们使用了 `:style` 绑定来动态设置图片的长宽比例。在样式中，使用了 `aspectRatio` 属性来设置图片的长宽比例。`aspectRatio` 属性是 CSS 的一部分，可以用于设置元素的长宽比例。 在 Vue.js 中，我们可以使用绑定语法 `:style="{ aspectRatio: ratio }"` 来绑定 `ratio` 数据属性到 `aspectRatio` 样式属性上。这样，每当 `ratio` 数据属性发生变化时，图片的长宽比例也会自动变化。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值