vue 判斷元素內(nèi)容是否超過(guò)寬度的方式
我就廢話不多說(shuō)了，大家還是直接看代碼吧~
let isOverflow = this.$refs.isOverflow;
for (let i in isOverflow) {
let cWidth = isOverflow[i].clientWidth;
let sWidth = isOverflow[i].scrollWidth;
if (sWidth > cWidth) { //超過(guò)
this.$set(this.isEllipsis, i, true);
} else {
this.$set(this.isEllipsis, i, false);
}
}
補(bǔ)充知識(shí)：Vue h5 里面如何動(dòng)態(tài)設(shè)置返回時(shí)候meta 里面的title屬性
Vue h5 里面如何動(dòng)態(tài)設(shè)置返回時(shí)候meta 里面的title屬性
百度了很多博客，有兩種方法，
方法1 ：
通過(guò)設(shè)置router.js 里面，路由切換時(shí)候 修改 meta 屬性 但是感覺(jué)沒(méi)必要這樣
{
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) => {
/* 路由發(fā)生變化修改頁(yè)面meta */
if(to.meta.content){
let head = document.getElementsByTagName('head');
let meta = document.createElement('meta');
meta.content = to.meta.content;
head[0].appendChild(meta)
}
/* 路由發(fā)生變化修改頁(yè)面title */
if (to.meta.title) {
document.title = to.meta.title;
}
next()
});
方法2 ：
可以直接通過(guò)
document.title = '想要設(shè)置的title';
但是需要注意的是，這種寫法需要注意Vue 里面的生命周期，需要在beforeRouteEnter 里面設(shè)置，下面是代碼
beforeRouteEnter (to, from, next) {
next(vm => {
document.title = '律師大數(shù)據(jù)'
})
},
但是開(kāi)發(fā)里面遇到了坑，有時(shí)候這種寫法根本不起效果，然后嘗試在 beforeCreate里面也設(shè)置了下，最終總結(jié)出來(lái)的規(guī)律是，如果 只在 beforeRouteEnter 修改 document.title = '想要設(shè)置的title';不起效果的話，那就同時(shí)也把 beforeCreate寫進(jìn)來(lái)，這樣肯定是能改變 頁(yè)面的 meta 屬性的，下面是代碼
beforeCreate () {
document.title = '111律師大數(shù)據(jù)'
},
beforeRouteEnter (to, from, next) {
next(vm => {
document.title = '律師大數(shù)據(jù)'
})
},
但是 ，經(jīng)過(guò)打印，實(shí)際起效果的是，beforeRouteEnter里面設(shè)置的 document.title = '律師大數(shù)據(jù)'
以上這篇vue 判斷元素內(nèi)容是否超過(guò)寬度的方式就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Vue?檢測(cè)變化的注意事項(xiàng)，文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-08-08
vue3集成Element-Plus之全局導(dǎo)入和按需導(dǎo)入
這篇文章主要給大家介紹了關(guān)于vue3集成Element-Plus之全局導(dǎo)入和按需導(dǎo)入的相關(guān)資料,element-plus正是element-ui針對(duì)于vue3開(kāi)發(fā)的一個(gè)UI組件庫(kù),?它的使用方式和很多其他的組件庫(kù)是一樣的,需要的朋友可以參考下2023-07-07
vue中使用localstorage來(lái)存儲(chǔ)頁(yè)面信息
這篇文章主要介紹了vue中使用localstorage來(lái)存儲(chǔ)頁(yè)面信息,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-11-11
vue監(jiān)聽(tīng)瀏覽器原生返回按鈕,進(jìn)行路由轉(zhuǎn)跳操作
這篇文章主要介紹了vue監(jiān)聽(tīng)瀏覽器原生返回按鈕,進(jìn)行路由轉(zhuǎn)跳操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-09-09
Vue3響應(yīng)式對(duì)象數(shù)組不能實(shí)時(shí)DOM更新問(wèn)題解決辦法
在寫大文件上傳時(shí),碰到關(guān)于 vue2 跟 vue3 對(duì)在循環(huán)中使用異步,并動(dòng)態(tài)把普通對(duì)象添加進(jìn)響應(yīng)式數(shù)據(jù),在異步前后修改該普通對(duì)象的某個(gè)屬性,導(dǎo)致 vue2 跟 vue3 的視圖更新不一致,引發(fā)一系列的思考,所以本文介紹了Vue3響應(yīng)式對(duì)象數(shù)組不能實(shí)時(shí)DOM更新問(wèn)題解決辦法2024-07-07
vue-cli history模式實(shí)現(xiàn)tomcat部署報(bào)404的解決方式
這篇文章主要介紹了vue-cli history模式實(shí)現(xiàn)tomcat部署報(bào)404的解決方式,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
圖文詳解如何在vue3+vite項(xiàng)目中使用svg
SVG指可伸縮矢量圖形,用來(lái)定義用于網(wǎng)絡(luò)的基于矢量的圖形,下面這篇文章主要給大家介紹了關(guān)于如何在vue3+vite項(xiàng)目中使用svg的相關(guān)資料,需要的朋友可以參考下2021-11-11
這篇文章主要介紹了vue?實(shí)現(xiàn)手動(dòng)分割日期，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
使用vue-cli腳手架工具搭建vue-webpack項(xiàng)目
這篇文章主要介紹了使用vue-cli腳手架工具搭建vue-webpack項(xiàng)目，通過(guò)幾個(gè)默認(rèn)的步驟幫助你快速的構(gòu)建Vue.js項(xiàng)目。非常具有實(shí)用價(jià)值，需要的朋友可以參考下2019-01-01
這篇文章主要介紹了Iview Table組件中各種組件擴(kuò)展的使用，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-10-10