vue 判断元素内容是否超过宽度的方式
时间：2021-07-28 07:41:27|栏目：vue|点击： 次
我就废话不多说了，大家还是直接看代码吧~
let isOverflow = this.$refs.isOverflow;
for (let i in isOverflow) {
let cWidth = isOverflow[i].clientWidth;
let sWidth = isOverflow[i].scrollWidth;
if (sWidth > cWidth) { //超过
this.$set(this.isEllipsis, i, true);
} else {
this.$set(this.isEllipsis, i, false);
}
}
补充知识：Vue h5 里面如何动态设置返回时候meta 里面的title属性
Vue h5 里面如何动态设置返回时候meta 里面的title属性
百度了很多博客，有两种方法，
方法1 ：
通过设置router.js 里面，路由切换时候 修改 meta 属性 但是感觉没必要这样
{
path: '/teachers',
name: 'TDetail',
component: TDetail,
meta: {
title:"教师详情",
content: 'disable'
}
},
{
path: '/article',
name: 'Article',
component: Article,
meta: {
title: "文章详情",
content: 'disable-no'
}
},
//main.js里面的代码
router.beforeEach((to, from, next) => {
/* 路由发生变化修改页面meta */
if(to.meta.content){
let head = document.getElementsByTagName('head');
let meta = document.createElement('meta');
meta.content = to.meta.content;
head[0].appendChild(meta)
}
/* 路由发生变化修改页面title */
if (to.meta.title) {
document.title = to.meta.title;
}
next()
});
方法2 ：
可以直接通过
document.title = '想要设置的title';
但是需要注意的是，这种写法需要注意Vue 里面的生命周期，需要在beforeRouteEnter 里面设置，下面是代码
beforeRouteEnter (to, from, next) {
next(vm => {
document.title = '律师大数据'
})
},
但是开发里面遇到了坑，有时候这种写法根本不起效果，然后尝试在 beforeCreate里面也设置了下，最终总结出来的规律是，如果 只在 beforeRouteEnter 修改 document.title = '想要设置的title';不起效果的话，那就同时也把 beforeCreate写进来，这样肯定是能改变 页面的 meta 属性的，下面是代码
beforeCreate () {
document.title = '111律师大数据'
},
beforeRouteEnter (to, from, next) {
next(vm => {
document.title = '律师大数据'
})
},
但是 ，经过打印，实际起效果的是，beforeRouteEnter里面设置的 document.title = '律师大数据'
上一篇：基于vue2实现上拉加载功能
栏 目：vue
下一篇：在vue中使用Echarts利用watch做动态数据渲染操作
本文标题：vue 判断元素内容是否超过宽度的方式
本文地址：http://www.codeinn.net/misctech/161972.html
