精华内容
下载资源
问答
  • 2021-09-10 09:16:58
    <v-header ref="headerRef" />
    <v-tags ref="tagsRef"></v-tags>
    
    import { ref, reactive, onMounted, watch } from 'vue'
    
    setup() {
    let clientHeight = ref('') //浏览器可视区域高度
    const headerRef = ref(null)
    
    const tagsRef = ref(null)
    let slbHeight = ref('')
    
    onMounted(() => {
    
    clientHeight.value = `${document.documentElement.clientHeight}` //获取浏览器可视区域高度
    
    let headerHeight = headerRef.value.$el.clientHeight
    
    let tagsHeight = tagsRef.value.$el.clientHeight
    
    slbHeight.value = clientHeight.value - headerHeight - tagsHeight
    
    window.onresize = function () {
    
    clientHeight.value = `${document.documentElement.clientHeight}` //获取浏览器可视区域高度
    
    let headerHeight = headerRef.value.$el.clientHeight
    
    let tagsHeight = tagsRef.value.$el.clientHeight
    
    slbHeight.value = clientHeight.value - headerHeight - tagsHeight
    
    }
    
    })
    
    
    
    return {
    
    clientHeight,
    
    slbHeight,
    
    headerRef,
    
    tagsRef,
    
    }

    更多相关内容
  • 原因:重置数据后获取dom元素宽高时,dom元素还未渲染完毕; 解决方法:利用Vue.nectTick(callback) this.$nextTick(() => { this.$refs.editor[0].offsetHeight; }) Vue.nectTick() 是在下次DOM更新循环结束之后...
  • 今天小编就为大家分享一篇vue获取元素宽、距离左边距离,右,上距离等还有XY坐标轴的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • Vue获取元素宽高

    千次阅读 2021-12-25 09:25:10
    一、获取元素 1、this.$refs 2、document.querySelector() document.getElementById() document.getElementByTagName()等等 ...二、获取元素宽高 1、如果是内嵌样式style="width:100px,height:10..

    一、获取元素

    1、this.$refs

    2、document.querySelector()  document.getElementById() document.getElementByTagName()等等

    确保获取到的元素不是undefined或null

    vue中,在mounted()生命周期函数中才能获取dom元素,建议在修改样式时加个定时器,或者将代码放入 $nextTick()中执行。

    二、获取元素的宽高

    1、如果是内嵌样式 style="width:100px,height:100px;"

    可以通过以下两种方法获取宽高:

    this.$refs.ele.style.width / this.$refs.ele.style.height   获取的是字符串且带单位,如:"100px"

    this.$refs.ele.offsetWidth  /this.$refs.ele.offsetHeight 获取的是字符串且无单位,,如:'100'

    2、如果非内嵌样式,即样式写在样式表里面:

    只能通过以下方式获取宽高:

    this.$refs.ele.offsetWidth  /this.$refs.ele.offsetHeight 获取的是字符串且无单位,,如:'100'

    三、给元素宽 高赋值:

    1、offsetWidth / offsetHeight 是只读属性,不能赋值;

    2、可以通过以下方式赋值:

    this.$refs.ele.style.width = "100px";  //记得带单位

    this.$refs.ele.style.height= "100px"; //记得带单位

    四、getComputedStyle API

    window.getComputedStyle(this.$refs.ele).width;

    window.getComputedStyle(this.$refs.ele).height;

    五、通过setAttribute来设置属性

    this.$refs.ele.setAttribute('style','height:1000px');

    this.$refs.ele.setAttribute('style','height:1000px');

     

    展开全文
  • vue3路由跳转的变化就是要在使用的页面引入router页 import router from './router' export default defineComponent({ setup() { //点击跳转 const gorouter = () =>{ const obj = { name:'nihao', age:...

    vue3动态路由添加,列表获取,跳转,传参,router里获取store里的值以及使用方法,页面获取vuex里的state值,ref获取元素宽高,监听vuex里的值
    vue3动态路由添加和路由列表获取

    import {useRouter} from 'vue-router'
    
    export default defineComponent({
      setup() {
        const router = useRouter(); 
        const dui = [
          {
            path: '/aaa',
            name: 'Aaa',
            component:  () => import('@/views/aaa.vue')
          },
          {
            path: '/firs',
            name: 'Firs',
            component:  () => import('@/views/firs.vue')
          },
          {
            path: '/thre',
            name: 'Thre',
            component:  () => import('@/views/thre.vue')
          },
        ];
        //添加路由
        dui.forEach(res =>{
          router.addRoute(res);
        })
        //获取路由列表
        let lis = router.getRoutes();
      },
    })
    

    vue3路由跳转传参

    方法一

    import router from './router'
    
      setup() {
      	//点击跳转
        const gorouter = () =>{
          const obj = {
            name:'nihao',
            age:100
          }
          router.push({
            path:'/about',
            query:obj
          });
        }
        return {
          gorouter
        }
      },
    

    方法二

    import { useRoute, useRouter} from 'vue-router'
    
    setup() {
        const router = useRouter();
        const route = useRoute();
    
        const gorouter = () =>{
          const obj = {
            name:'nihao',
            age:100
          }
          router.push({
            path:'/about',
            query:obj
          });
        }
        return {
          gorouter
        }
      },
    

    router里获取store里的值以及使用里面的方法
    在router里引入store里的文件就可以拿到
    例如:获取store下的modules下的文件里的值

    //router文件里
    import use from '../store'
    import store from '../store/modules/setUserInfo'
    let name = store.state.name;
    use.commit('方法',)
    

    页面获取vuex里state的某个值(用computed才能实时同步更新)

    import { computed, defineComponent,toRaw } from 'vue'
    import {useStore} from 'vuex'
    
    setUp(){
    	 const store = useStore();
        //获取vuex中setUserInfo模块里state的routerList值
        //如果不是模块化就把setUserInfo去掉就行
        //用computed才能实时同步更新
        let storeData = computed(() =>{
          return store.state.setUserInfo.routerList
        }).value
        
        //得到的是一个proxy值,需要toRaw才能拿到你想要的
        console.log(toRaw(storeData ))//方法一
        console.log(toRaw(store.state.setUserInfo.routerList))//方法二
    }
    

    ref获取元素及宽高

    <div ref="bigscroll"></div>
    setup() {
    	const bigscroll = ref(null);
    	onMounted(() =>{
    		console.log(bigscroll.value)
    		console.log(bigscroll.value.offsetWidth)
    		console.log(bigscroll.value.clientWidth)
    		console.log(bigscroll.value.clientHeight)
    	})
    	return{
    		bigscroll
    	}
    }
    

    监听vuex里的值

    import {useStore} from 'vuex'
    setup() {
            const store = useStore();
    		watch(()=>store.state.defaultActive,()=>{
    		    console.log('??????????')
    		})
    }
    
    展开全文
  • 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获取元素宽高

    千次阅读 2020-08-02 14:56:14
    获取元素 (1)如果你元素有内联样式style=“width:100px;height:100px;” 则可以通过以下方式获取 this.refs.名称.style.width或this.refs.名称.style.width 或 this.refs.名称.style.widt..
  • Vue 获取元素宽高

    千次阅读 2020-11-17 16:35:00
    1.模拟限制宽高 【在要获取宽高元素 上加 ref 属性】 <div style="width:600px;height:300px" ref="barparent" > </div> 2.获取宽高 console.log('this.$refs.barparent.$el.offsetWidth',this.$...
  • VUE通过refs获取元素宽高

    千次阅读 2020-12-10 08:05:10
    VUE通过refs获取元素宽高 1.如果元素设定了宽 例: 2.如果元素未设定宽
  • vue的自定义指令directive... bind(el, binding) { // el为绑定的元素,binding为绑定给指令的对象 let width = '', height = ''; function isReize() { const style = document.defaultView.getComputedStyle(el);
  • vue中通过ref获取元素宽高度的--数值

    千次阅读 2020-10-16 09:23:36
    getheight(){ let obj = this.$refs.school let h = window.getComputedStyle(obj).... //通过这个方法,获取宽高 return parseInt(h.substring(0,h.length-2)) //截取字符串,并将数字字符串,转成number类型 },
  • vue3获取组件元素节点宽度

    千次阅读 2022-03-10 11:10:39
    我的需求是让组件的高度随着他的宽度变化,该组件的宽度是由父元素决定的,所以他的高度我就在当前组件中决定。 然后在Dom中设置动态style
  • Vue中如何获取元素宽高呢?

    千次阅读 2019-08-14 00:44:03
    使用ref获取元素的宽度:this.$refs.abc.clientWidth 使用ref获取元素的高度:this.$refs.abc.clientHeight (注意:宽高不包括border的宽度)
  • vue 移动元素,调整元素宽高,支持 el-dialog
  • vue获取元素高度的方法

    千次阅读 2020-08-03 15:33:06
    vue获取元素的高度 <div ref="getHeight" class="block"/> .block { width: 100px; height: 100px; background: blueviolet; border: 2px solid pink; padding: 10px; margin: 5px; } 获取高度值...
  • 遇到的问题:直接在组件的mounted里面创建选择器,获取元素宽高,即使扔到定时器里面执行,还是偶尔会有获取不到的情况 解决办法: // 写法一: getDescBox() { uni.createSelectorQuery().in(this).select('....
  • vue获取dom元素宽高

    2021-01-30 13:29:38
    // 元素上加上ref在mounted写 因为我是html标签可以不用加el(如果是html标签就不用加)this.$refs.tooltipRef.offsetWidththis.$refs.tooltipRef.$el.offsetWidth建议在this.$nextTick写this.$nextTick(() =>...
  • 最近在开发一个Vue的项目,好几个页面都有用到一个 页面楼层滑动的组件,我就直接封装成了一个,但是遇到一个bug,就是我需要得到这个组件的offsetTop,然后页面滚动到这个位置的时候,就设置position属性为fixed,...
  • vue 动态获取div宽高有时候为0的情况

    千次阅读 2020-12-19 05:23:24
    由于div宽高是不固定的,因此需要先获取父级的宽高再把值赋予到图表的div中。需要使用this.$nextTick(() => { });方法,在mounted中,保证DOM渲染完全后,在进行echarts初始化。import echarts from 'echarts';...
  • Vue ref 和 $refs 获取元素宽高

    千次阅读 2019-10-27 20:32:06
    快速获取节点demo <div ref="div1">123</div> <input type="text" value="123" ref="input1" id="input1"> console.log(this.$refs.div1)//<div>123</div> console.log(this.$...
  • VUE获取元素的高度

    万次阅读 2019-03-01 16:36:13
    Vue获取元素高度. // 当前区域 &lt;div ref="elememt"&gt;&lt;/div&gt; // 获取高度值 (内容+padding+边框) let height= this.$refs.elememt.offsetHeight; ...
  • vue3获取dom元素和操作

    千次阅读 2022-02-09 14:32:20
    直接举例子来说明吧,我想要做的是,遍历这几个菜单,获取他们的dom元素的宽度。当文字dom元素宽度太长的话,需要滚动显示文本。 二,实现思路 对应的html: <div class="icon-box" ref="menu_item"> <div...
  • vue获取宽高为0

    2022-02-15 16:03:38
    //两部分要注意: //1.样式写在样式类里面 要使用下面的方式获取 getHeight(){ let chart = document....获取的这个元素的样式 .alarm_chart { width: 100vw; height: 30rem; } //要用vh或者rem为单位 不能用100%.
  • 今天老大没安排活干,也不想划水,于是打算用一个websocket写一个简易的...又使用debug调试,发现:vue会先执行你的其它方法,再渲染页面,导致总是只能滑到上一条消息展示的高度。 于是我再百度,发现:重置数据后,获
  • vue获取dom元素高度的方法

    千次阅读 2020-12-19 12:41:14
    获取高度:要在钩子mounted里面dom结构生成后去获取dom的高度,宽度,修改样式等操作!!!mounted() {let h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; //...
  • 使用 vue 的时候,想要获得一个指定的元素的高度时,可以使用 vue 中的ref 。 当 ref 加在普通的元素上,使用 this.ref.name 获取到的是 dom 元素 示例 写在 页面 html 部分的 <div ref="init"></...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 6,431
精华内容 2,572
关键字:

vue3获取元素宽高