vue 判斷元素內容是否超過寬度的方式
更新時間：2020年07月29日 10:17:48 作者：勛勛勛勛小勛勛
這篇文章主要介紹了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 里面如何動態(tài)設置返回時候meta 里面的title屬性
Vue h5 里面如何動態(tài)設置返回時候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) => {
/* 路由發(fā)生變化修改頁面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ā)生變化修改頁面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 = '律師大數據'
})
},
但是開發(fā)里面遇到了坑，有時候這種寫法根本不起效果，然后嘗試在 beforeCreate里面也設置了下，最終總結出來的規(guī)律是，如果 只在 beforeRouteEnter 修改 document.title = '想要設置的title';不起效果的話，那就同時也把 beforeCreate寫進來，這樣肯定是能改變 頁面的 meta 屬性的，下面是代碼
beforeCreate () {
document.title = '111律師大數據'
},
beforeRouteEnter (to, from, next) {
next(vm => {
document.title = '律師大數據'
})
},
但是 ，經過打印，實際起效果的是，beforeRouteEnter里面設置的 document.title = '律師大數據'
以上這篇vue 判斷元素內容是否超過寬度的方式就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了Vue?檢測變化的注意事項，文章圍繞主題展開詳細的內容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-08-08
這篇文章主要給大家介紹了關于vue3集成Element-Plus之全局導入和按需導入的相關資料,element-plus正是element-ui針對于vue3開發(fā)的一個UI組件庫,?它的使用方式和很多其他的組件庫是一樣的,需要的朋友可以參考下2023-07-07
這篇文章主要介紹了vue中使用localstorage來存儲頁面信息,小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
這篇文章主要介紹了vue監(jiān)聽瀏覽器原生返回按鈕,進行路由轉跳操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
在寫大文件上傳時,碰到關于 vue2 跟 vue3 對在循環(huán)中使用異步,并動態(tài)把普通對象添加進響應式數據,在異步前后修改該普通對象的某個屬性,導致 vue2 跟 vue3 的視圖更新不一致,引發(fā)一系列的思考,所以本文介紹了Vue3響應式對象數組不能實時DOM更新問題解決辦法2024-07-07
vue-cli history模式實現tomcat部署報404的解決方式
這篇文章主要介紹了vue-cli history模式實現tomcat部署報404的解決方式,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-09-09
SVG指可伸縮矢量圖形,用來定義用于網絡的基于矢量的圖形,下面這篇文章主要給大家介紹了關于如何在vue3+vite項目中使用svg的相關資料,需要的朋友可以參考下2021-11-11
這篇文章主要介紹了vue?實現手動分割日期，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了使用vue-cli腳手架工具搭建vue-webpack項目，通過幾個默認的步驟幫助你快速的構建Vue.js項目。非常具有實用價值，需要的朋友可以參考下2019-01-01
這篇文章主要介紹了Iview Table組件中各種組件擴展的使用，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-10-10