vue 判斷元素內(nèi)容是否超過寬度的方式
我就廢話不多說了,大家還是直接看代碼吧~
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); }}
補(bǔ)充知識(shí):Vue h5 里面如何動(dòng)態(tài)設(shè)置返回時(shí)候meta 里面的title屬性
Vue h5 里面如何動(dòng)態(tài)設(shè)置返回時(shí)候meta 里面的title屬性
百度了很多博客,有兩種方法,
方法1 :
通過設(shè)置router.js 里面,路由切換時(shí)候 修改 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 = ’想要設(shè)置的title’;
但是需要注意的是,這種寫法需要注意Vue 里面的生命周期,需要在beforeRouteEnter 里面設(shè)置,下面是代碼
beforeRouteEnter (to, from, next) { next(vm => { document.title = ’律師大數(shù)據(jù)’ }) },
但是開發(fā)里面遇到了坑,有時(shí)候這種寫法根本不起效果,然后嘗試在 beforeCreate里面也設(shè)置了下,最終總結(jié)出來的規(guī)律是,如果 只在 beforeRouteEnter 修改 document.title = ’想要設(shè)置的title’;不起效果的話,那就同時(shí)也把 beforeCreate寫進(jìn)來,這樣肯定是能改變 頁面的 meta 屬性的,下面是代碼
beforeCreate () { document.title = ’111律師大數(shù)據(jù)’ }, beforeRouteEnter (to, from, next) { next(vm => { document.title = ’律師大數(shù)據(jù)’ }) },
但是 ,經(jīng)過打印,實(shí)際起效果的是,beforeRouteEnter里面設(shè)置的 document.title = ’律師大數(shù)據(jù)’
以上這篇vue 判斷元素內(nèi)容是否超過寬度的方式就是小編分享給大家的全部內(nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章:
1. javascript xml xsl取值及數(shù)據(jù)修改第1/2頁2. 利用CSS3新特性創(chuàng)建透明邊框三角3. ASP.NET MVC使用jQuery ui的progressbar實(shí)現(xiàn)進(jìn)度條4. .NET使用StackTrace獲取方法調(diào)用信息的代碼演示5. Vue 自適應(yīng)高度表格的實(shí)現(xiàn)方法6. Python 輸出詳細(xì)的異常信息(traceback)方式7. 如何在Notepad++中配置python執(zhí)行命令8. IDEA創(chuàng)建Java項(xiàng)目導(dǎo)出Jar包運(yùn)行9. Vue中nvm-windows的安裝與使用教程(親測(cè))10. 在Vue中創(chuàng)建可重用的 Transition的方法
