快捷導航

vue 判斷元素內(nèi)容是否超過寬度的方式

更新時間：2020年07月29日 10:17:48 作者：勛勛勛勛小勛勛

這篇文章主要介紹了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);
          }
        }

補充知識：Vue h5 里面如何動態(tài)設(shè)置返回時候meta 里面的title屬性

Vue h5 里面如何動態(tài)設(shè)置返回時候meta 里面的title屬性

百度了很多博客，有兩種方法，

方法1 ：

通過設(shè)置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 = '想要設(shè)置的title';

但是需要注意的是，這種寫法需要注意Vue 里面的生命周期，需要在beforeRouteEnter 里面設(shè)置，下面是代碼

 beforeRouteEnter (to, from, next) {
  next(vm => {
   document.title = '律師大數(shù)據(jù)'
  })
 },

但是開發(fā)里面遇到了坑，有時候這種寫法根本不起效果，然后嘗試在 beforeCreate里面也設(shè)置了下，最終總結(jié)出來的規(guī)律是，如果只在 beforeRouteEnter 修改 document.title = '想要設(shè)置的title';不起效果的話，那就同時也把 beforeCreate寫進來，這樣肯定是能改變頁面的 meta 屬性的，下面是代碼

 beforeCreate () {
  document.title = '111律師大數(shù)據(jù)'
 },
 beforeRouteEnter (to, from, next) {
  next(vm => {
   document.title = '律師大數(shù)據(jù)'
  })
 },

但是，經(jīng)過打印，實際起效果的是，beforeRouteEnter里面設(shè)置的 document.title = '律師大數(shù)據(jù)'

以上這篇vue 判斷元素內(nèi)容是否超過寬度的方式就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: