1. 程式人生 > 程式設計 >vue 判斷元素內容是否超過寬度的方式

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,false);
          }
        }

補充知識:Vue h5 裡面如何動態設定返回時候meta 裡面的title屬性

Vue h5 裡面如何動態設定返回時候meta 裡面的title屬性

vue 判斷元素內容是否超過寬度的方式

百度了很多部落格,有兩種方法,

方法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,next) {
  next(vm => {
   document.title = '律師大資料'
  })
 },

但是開發裡面遇到了坑,有時候這種寫法根本不起效果,然後嘗試在 beforeCreate裡面也設定了下,最終總結出來的規律是,如果 只在 beforeRouteEnter 修改 document.title = '想要設定的title';不起效果的話,那就同時也把 beforeCreate寫進來,這樣肯定是能改變 頁面的 meta 屬性的,下面是程式碼

 beforeCreate () {
  document.title = '111律師大資料'
 },beforeRouteEnter (to,

但是 ,經過列印,實際起效果的是,beforeRouteEnter裡面設定的 document.title = '律師大資料'

以上這篇vue 判斷元素內容是否超過寬度的方式就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支援我們。