精华内容
下载资源
问答
  • VUE动态获取浏览器宽高,动态获取元素宽高,动态设置元素的宽高或样式动态获取浏览器宽高动态获取元素宽高动态设置元素的宽高或样式 动态获取浏览器宽高 created(){ window.addEventListener('resize', this....

    VUE动态获取浏览器宽高,动态获取元素宽高,动态设置元素的宽高或样式

    动态获取浏览器宽高

    created(){
    	window.addEventListener('resize', this.GetWindowInfo); //注册监听器
    	this.GetWindowInfo() //页面创建时先调用一次
    },
    methods:{
      GetWindowInfo(){
    	var width = window.innerWidth // 宽
    	var height = window.innerHeight // 高
      }
    },
    destroyed(){
      window.removeEventListener('resize', this.GetWindowInfo)
    }
    

    动态获取元素宽高

    在标签中定义ref属性,用this.$refs.自定义名称.clientHeight / clientWidth去获取。
    但是this.$refs可能会出现undefined的问题,解决方法:
    
     - 写在method中,使用 this.$nextTick(() => {}) 等页面渲染好再调用,这样就可以了
    并且此方法获取的宽高不包括border的值
    

    代码:

    // html
    <div ref="container"></div>
    // js
    GetDomInfo() {
      this.$nextTick(() => {
        var domWidth = this.$refs.container.clientWidth // 宽
    	var domHeight = this.$refs.container.clientHeight // 高
      })
    }
    

    动态设置元素的宽高或样式

    <div :style="{width: width}"></div>
    data() {
      return {
        width: ''
      }
    },
    setInfo() {
      this.width = width - domWidth + 'px'
    }
    
    展开全文
  • Vue动态设置Dom元素宽高

    千次阅读 2019-11-04 11:07:34
    slider侧边栏是宽度是动态的,使用jquery可以操作dom元素,设置宽高,但vue是避免操作dom的 <template> <div class="slider"> <h1>Hamy</h1> </div> </template> <...

     需求:

         slider侧边栏是宽度是动态的,使用jquery可以操作dom元素,设置宽高,但vue是避免操作dom

    <template>
        <div class="slider">
            <h1>Hamy</h1>
        </div>
    </template>
    <script>
        export default{
            name:'index',
            data(){
                return{
                    sliderStyle:{
                        width:'240px'
                    }
                }
            }
        }
    </script>

    思路:

         通过给元素绑定style,在methods中通过改变this.sliderStyle.width来设置动态宽度

    <template>
        <div class="slider" :style="sliderStyle">
            <h1>Hamy</h1>
        </div>
    </template>

     

    展开全文
  • vue动态添加类名和设置宽高

    千次阅读 2020-04-07 14:41:08
    1 动态设置宽高 1.1 html代码 <div class="box" :style="{height: scrollerHeight}"> </div> 1.2 在计算属性中计算高度 computed: { // 滚动区高度 scrollerHeight: function() { return (window....
    1 动态设置宽高

    1.1 html代码

    <div class="box" :style="{height: scrollerHeight}">
    </div>
    

    1.2 在计算属性中计算高度

    computed: {
        // 滚动区高度
        scrollerHeight: function() {
          return (window.innerHeight - 46 - 50) + 'px';
        }
      }
    
    2 获取vue中的元素

    2.1 通过通用方法获取。如id,class等
    document .getElementById(‘id名’)

    2.2 vue特有的方法,通过ref
    this.$refs.name

    3 动态添加类

    3.1 通过判断添加

    <span :class="['类名',discountType==1?'类名':'']"
    

    3.2 通过真假值添加
    :class="{‘类名:条件,类名:条件’}"

    <i class="circle" :class="{'notAudit':scope.row.state=='未通过','waitAudit':scope.row.state=='待审核'}"></i>
    
    展开全文
  • vue 动态获取

    2020-01-03 15:09:08
    // 获取页面div的宽度 getWidth() { this.$nextTick(() => { let treeContainer = this.$refs.treeContainer.clientWidth // 最外边的长度 this.tableTreeTwo = (treeContainer/4)*2-18 + "px" ...
    // 获取页面div的宽度
    getWidth() {
      this.$nextTick(() => {
        let treeContainer = this.$refs.treeContainer.clientWidth // 最外边的长度
        this.tableTreeTwo = (treeContainer/4)*2-18 + "px"
       //  let tableTreeRight = this.$refs.tableTreeRight.clientWidth
       // this.tableTreeOne = (tableTreeRight - (treeContainer/3)*2) + 'px'
       //  console.log(this.tableTreeOne)
      })
    
    }

    有的时候获取不到可以用this.$nextTick

    展开全文
  • 初始获取浏览器宽高 data() { return { screenWidth: window.innerWidth, screenHeight: window.innerHeight, }; }, window.addEventListener 监听浏览器宽高变化 mounted() { window.addEventListener(...
  • vue 动态设置组件高度 虚拟动态星级 (vue-dynamic-star-rating) A Highly Customizable, easy-to-use elegant stars rating component (similar to Google Play) 高度可定制,易于使用的优雅星级评定组件(类似于...
  • 主要介绍了vue-preview动态获取图片宽高并增加旋转功能的实现,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • vue动态设置宽度

    2021-04-23 10:50:17
    <div class="" :style="'width:' + param* 100 + '%'"></div>
  • vue-preview 动态获取宽高

    千次阅读 2018-04-01 11:49:10
    使用vue-preview遇到问题 就是必须设置宽高 官方给出的答案是 预览必须以list对象的形式 以下是我实现的效果图预览效果 : 是获取图片原有的宽高进行设置的 截图方便大家仔细看以下是代码 不指出请指出(谢谢)...
  • vue 动态获取div宽高有时候为0的情况

    千次阅读 2018-12-18 16:59:00
    由于div宽高是不固定的,因此需要先获取父级的宽高再把值赋予到图表的div中。  需要使用this.$nextTick(() => { });方法,在mounted中,保证DOM渲染完全后,在进行echarts初始化。 <!--wifi数据采集-->...
  • //item.countNum就是数组下所有的数字,然后去除数组第一个下标的数字,再乘上百分百,就可以显示动态宽度,高度同理 <div class="center-line" :style="{'width':(item.countNum/list[0].countNum) * 100 + '%...
  • 1.Vue项目中动态获取浏览器 mouted(){ this.widheight= `${document.documentElement.clientHeight}`;//获取浏览器可视区域高度 this.widwidth= `${document.documentElement.clientWidth}`;//获取浏览器...
  • vue整合echarts,动态改变宽高

    千次阅读 2020-10-19 16:53:56
    npm引入 ...Vue.prototype.$echarts = echarts echarts.vue <template> <div :id="id" :style="{width: width, height: height}"></div> </template> <script> // 引入
  • vue-preview动态获取图片宽高并增加旋转功能 懒得自己动手改插件的伙伴,可以在你安装好 vue-preview 后用“attachment”文件夹中的三个文件替换你项目中的对应文件就拥有“旋转”功能了。 default-skin.png 替换...
  • this.option.autoCropWidth = "" // 默认生成截图框宽度 this.option.autoCropHeight = "" // 默认生成截图框高度 this.option.fixed = false // 是否开启截图框宽高固定比例
  • 由于div宽高是不固定的,因此需要先获取父级的宽高再把值赋予到图表的div中。  需要使用this.$nextTick(() => { });方法,在mounted中,保证DOM渲染完全后,在进行echarts初始化。 赋值操作: $("#...
  • Vue中Echarts修改宽高

    2021-06-07 08:54:45
    Vue中Echarts修改宽高
  • console.log(this.clientWidth) // 获取高度值 (内容+padding+边框) let height= this.$refs.element.offsetHeight; //100 offsetWidth // 获取元素样式值 (存在单位) let height = window.getComputedStyle...
  • Vue如何设置动态宽度高度或者动态样式 添加样式绑定 添加属性计算 在开发过程中,很多时候都会用到动态的计算的样式,比如宽度,高度。特别是开发后台管理系统。 那么首先你务必看Vue的官方文档。涉及到的基础知识...
  • vue-preview动态获取图片宽高并增加旋转功能

    万次阅读 热门讨论 2018-04-25 15:35:15
    vue-preview是一个常用的图片查看器,微博网页版就是用的这个插件: 我在项目中也用过这个插件,总体来说,还是比较满意。但是缺少一个图片旋转功能。   安装使用 第一步:安装 npm i vue-preview -S 第二...
  • vue的自定义指令directive自动计算宽度和高度变化 Vue.directive('resize',{ // 指令的名称 bind(el, binding) { // el为绑定的元素,binding为绑定给指令的对象 let width = '', height = ''; function isReize...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 4,814
精华内容 1,925
关键字:

vue动态宽高

vue 订阅