- 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 }}),但是计算属性的宽度计算不准确,那么你可能会在某些情况下看到不准确的结果。这种情况下,可以尝试以下几种方法来解决:
-
使用
ref值:如果你的计算属性需要一个可访问的值,你可以使用ref值。ref值是一个引用到你组件对象的一个属性,当你需要访问这个值时,可以使用this.$refs.myComponentRef。这样,你就可以在模板中直接访问到计算属性的值,而不需要使用计算属性的width。 -
使用
style属性:如果你的计算属性的宽度依赖于外部样式,你可以将计算属性的宽度设置为外部样式,然后在模板中直接使用style属性来修改宽度。这样,你就可以确保计算属性的宽度是正确的。 -
使用
watch事件:如果你的计算属性的宽度是通过计算属性的值动态更新的,你可以使用watch事件来监听这个变化。这样,你就可以确保计算属性的宽度总是正确的。 -
使用
computed或methods:如果你的计算属性的宽度是通过一些其他计算或方法计算的,你可以使用computed或methods来创建计算属性。这样,你就可以确保计算属性的宽度总是正确的。
以上都是一些常见的解决方法,具体的方法需要根据你的实际情况来选择。
-
更多回答
网站公告
- 扫一扫访问手机版
回答动态

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器更新之后。服务器里面有部分玩家要重新创建角色是怎么回事啊?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题函数计算不同地域的是不能用内网吧?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题ARMS可以创建多个应用嘛?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题在ARMS如何申请加入公测呀?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题前端小程序接入这个arms具体是如何接入监控的,这个init方法在哪里进行添加?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器刚到期,是不是就不能再导出存档了呢?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器的游戏版本不兼容 尝试更新怎么解决?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器服务器升级以后 就链接不上了,怎么办?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器转移以后服务器进不去了,怎么解决?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器修改参数后游戏进入不了,是什么情况?预计能赚取 0积分收益
- 回到顶部
- 回到顶部
