vue图片宽高自适应_Vue组件宽高自适应问题

在两个月前，我被公司安排做一个系统的前端页面开发，当时我还是个对前端知识一无所知的小白，html标签只知道

虽然自己还是个菜鸟，但是两个月做下来，自己也有一些心得，想要拿出来跟大家交流交流，顺便抛砖引玉，万一大神看到了，说，你这么做太愚蠢了，应该怎么怎么滴，那岂不是很爽，期待幻想中的大神~

今天想要说的是Vue组件宽高自适应问题。针对不同的屏幕大小，肯定不能把组件的width，height都定死了，用百分比对一些效果还有布局来说也不是很好。做到现在，我是有几个自适应的小方法的，但是也有不满意的地方，想要提出来跟大家交流交流，感觉应该有更好的方法。

1.在created方法中设置宽高

在created方法中，使用jQuery获取组件，设置组件的宽高created () {

$('#total').css('width', $('#rightBox').height() * 0.5)

}

2.使用计算属性计算宽高computed: {

mapWidth() {return$(document).width() -200+'px'},

mapHeight() {return$(document).height() -100+'px'}

在templete中的组件要这么写

两种方法其实大同小异，但是有一个大问题，就是都是一次性设置，不能做到随屏幕大小改变，除非刷新。感觉很愚蠢又找不到别的方法。希望有人能知道聪明的做法，一起交流交流呗

vue图片宽高自适应_Vue组件宽高自适应问题相关推荐

vue图片上传及压缩组件的封装
vue图片上传及压缩组件的封装源码地址使用方法: 先去上面的链接把组件,复制到自己的components文件夹内 1.先下载 cnpm install compressorjs --save-de ...
vue 实例化几种方式_Vue组件的三种调用方式
最近在写fj-service-system的时候,遇到了一些问题.那就是我有些组件,比如Dialog.Message这样的组件,是引入三方组件库,比如element-ui这样的,还是自己实现一个?虽然 ...
ant design vue table 高度自适应_Vue组件库大评测 Element, iView, HeyUI, Ant Design Vue
今天偶然的机会想了解下其他Vue相关的组件库,网上刚好有文章,顺便自己做一下笔记,算是资源整理吧 .好了,话不多说,直接开始: 组件库的选择对于前端开发有者至关重要的影响,而组件的丰富性以及健壮性是我 ...
vue图片压缩不失真_vue图片压缩(不失真)
1.在index.html中引入mobileBUGFix.min.js // mobileBUGFix.min.js内容见最下面附件 2.在build/webpack.base.conf.js文件中增 ...
vue中进度条写法_vue组件实现进度条效果
这篇文章主要为大家详细介绍了vue组件实现进度条效果,具有一定的参考价值,可以用来参考一下. 感兴趣的小伙伴,下面一起跟随512笔记的小编两巴掌来看看吧! 本文实例为大家分享了vue实现进度条效果的具 ...
vue项目接口地址暴露_vue组件暴露和.js文件暴露接口操作
1.将同一类型的组件放在一个文件夹下 2.在此文件夹下创建一个index.js 3.在index.js中导入组件,并把他们暴露出去 1.写法一 import studentCourse1 from ' ...
vue图片动画上下跳动_Vue 解决路由过渡动画抖动问题(实例详解)
前言 Vue-Router 作为 Vue 的核心模块,它为我们提供了基于组件的路由配置.路由参数等功能,让单页面应用变得更易于管理.良好的路由管理尤为重要,比如路由拦截.路由懒加载.路由权限等都在开发 ...
vue图片点击超链接_vue使用v-for实现hover点击效果
使用Vue来实现鼠标悬停效果.可以使用事件处理器v-on指令(简写为:@)来完成.为标签绑定mouseenter以及mouseleave事件即可. hover是css中的选择器,用于选择鼠标指针浮动在 ...
vue两个卡片并排_Vue组件-卡片层叠拖拽
组件效果 tantan.gif 项目地址 npm安装 npm install vue-tantan-stack --save 如何使用 prev next import stack from '../ ...
vue图片时间轴滑动_Vue实现可移动水平时间轴
本文实例为大家分享了Vue实现可移动水平时间轴的具体代码,供大家参考,具体内容如下里程碑时间轴具体实现效果图编辑里程碑效果图编辑里程碑里程碑状态: 开始超期关闭 {{'阶段名称:'+it ...

vue图片宽高自适应_Vue组件宽高自适应问题

vue图片宽高自适应_Vue组件宽高自适应问题相关推荐

最新文章

热门文章