账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    vue获取宽度不准确
    49
    0

    每个li元素都是动态创建的,宽度会根据每个li的文字多少决定,因为要横向滚动,所以要获取每个li的宽度来给ul赋值,我用的是better-scroll,现在获取宽度的时候比实际宽度少了3个像素,但是我把li里面的i标签拿掉以后就是正常,以下是我的代码。

    <template>
        <div>
          <div class="nav" ref="wrapper">
            <ul class="content clearfix ">
              <router-link  v-for="(item,index) in getView" :to='{path:item.path}' :key="index" tag="li" >
                  {{item.name}}<i v-if='index !== 0' class="el-icon-error" @click.prevent='_removeView(item.path,index)'></i>
              </router-link>
            </ul>
          </div>
        </div>
      </template>
    
    <script>
    export default {
    return {
        getView:[
            {
                "name":"首页",
                "path":"/index"
            },
            {
                "name":"系统管理",
                "path":"/xtgl"
            }
        ]
      },
      methods:{
        setWidth:function(){
            this.$nextTick(() => {
                var content = this.$refs.content;
                var li = content.children;
                var width = 0;
                for( let i=0;i<li.length;i++)
                {
                    width += li[i].clientWidth;
                    console.log(li[i].clientWidth)
                }
                content.style.width = width +'px'; 
                
            });
        },
      }
    }
    </script>
    
    
    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • 爱哭鬼° 普通会员 1楼

      在Vue中,如果你在模板中使用了计算属性(如计算属性 width)并使用了模板内联(如 {{ width }}),但是计算属性的宽度计算不准确,那么你可能会在某些情况下看到不准确的结果。

      这种情况下,可以尝试以下几种方法来解决:

      1. 使用 ref 值:如果你的计算属性需要一个可访问的值,你可以使用 ref 值。ref 值是一个引用到你组件对象的一个属性,当你需要访问这个值时,可以使用 this.$refs.myComponentRef。这样,你就可以在模板中直接访问到计算属性的值,而不需要使用计算属性的 width

      2. 使用 style 属性:如果你的计算属性的宽度依赖于外部样式,你可以将计算属性的宽度设置为外部样式,然后在模板中直接使用 style 属性来修改宽度。这样,你就可以确保计算属性的宽度是正确的。

      3. 使用 watch 事件:如果你的计算属性的宽度是通过计算属性的值动态更新的,你可以使用 watch 事件来监听这个变化。这样,你就可以确保计算属性的宽度总是正确的。

      4. 使用 computedmethods:如果你的计算属性的宽度是通过一些其他计算或方法计算的,你可以使用 computedmethods 来创建计算属性。这样,你就可以确保计算属性的宽度总是正确的。

      以上都是一些常见的解决方法,具体的方法需要根据你的实际情况来选择。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部