快捷導(dǎo)航

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

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

這篇文章主要介紹了vue 判斷元素內(nèi)容是否超過(guò)寬度的方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

我就廢話不多說(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';

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

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

但是開(kāi)發(fā)里面遇到了坑，有時(shí)候這種寫(xiě)法根本不起效果，然后嘗試在 beforeCreate里面也設(shè)置了下，最終總結(jié)出來(lái)的規(guī)律是，如果只在 beforeRouteEnter 修改 document.title = '想要設(shè)置的title';不起效果的話，那就同時(shí)也把 beforeCreate寫(xiě)進(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è)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: