vue 判断元素内容是否超过宽度的方式


Posted in Javascript onJuly 29, 2020

我就废话不多说了,大家还是直接看代码吧~

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 里面如何动态设置返回时候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, from, next) {
  next(vm => {
   document.title = '律师大数据'
  })
 },

但是开发里面遇到了坑,有时候这种写法根本不起效果,然后尝试在 beforeCreate里面也设置了下,最终总结出来的规律是,如果 只在 beforeRouteEnter 修改 document.title = '想要设置的title';不起效果的话,那就同时也把 beforeCreate写进来,这样肯定是能改变 页面的 meta 属性的,下面是代码

beforeCreate () {
  document.title = '111律师大数据'
 },
 beforeRouteEnter (to, from, next) {
  next(vm => {
   document.title = '律师大数据'
  })
 },

但是 ,经过打印,实际起效果的是,beforeRouteEnter里面设置的 document.title = '律师大数据'

以上这篇vue 判断元素内容是否超过宽度的方式就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery slideshow的一个小问题(如何发现及解决过程)
Feb 06 Javascript
QQ空间顶部折页撕开效果示例代码
Jun 15 Javascript
基于Bootstrap的UI扩展 StyleBootstrap
Jun 17 Javascript
jQuery中text() val()和html()的区别实例详解
Jun 28 Javascript
微信小程序(应用号)开发新闻客户端实例
Oct 24 Javascript
javascript中this用法实例详解
Apr 06 Javascript
基于Bootstrap table组件实现多层表头的实例代码
Sep 07 Javascript
小程序视频或音频自定义可拖拽进度条的示例代码
Sep 30 Javascript
vue地址栏直接输入路由无效问题的解决
Nov 15 Javascript
layui之table checkbox初始化时选中对应选项的方法
Sep 02 Javascript
VUE实现自身整体组件销毁的示例代码
Jan 13 Javascript
React如何创建组件
Jun 27 Javascript
在vue中实现给每个页面顶部设置title
Jul 29 #Javascript
vue实现移动端项目多行文本溢出省略
Jul 29 #Javascript
ElementUI 修改默认样式的几种办法(小结)
Jul 29 #Javascript
Element中Slider滑块的具体使用
Jul 29 #Javascript
vue 实现超长文本截取,悬浮框提示
Jul 29 #Javascript
javascript实现移动端触屏拖拽功能
Jul 29 #Javascript
Vue实现移动端拖拽交换位置
Jul 29 #Javascript
You might like
PHP 基本语法格式
2009/12/15 PHP
php ftp文件上传函数(基础版)
2010/06/03 PHP
php过滤XSS攻击的函数
2013/11/12 PHP
PHP url的pathinfo模式加载不同控制器的简单实现
2016/08/12 PHP
php实现微信支付之退款功能
2018/05/30 PHP
关于PHP求解三数之和问题详析
2020/11/09 PHP
jquery动态改变form属性提交表单
2014/06/03 Javascript
node.js中使用node-schedule实现定时任务实例
2014/06/03 Javascript
json实现前后台的相互传值详解
2015/01/05 Javascript
JavaScript DOM基础
2015/04/13 Javascript
node+koa实现数据mock接口的方法
2017/09/20 Javascript
jqgrid实现简单的单行编辑功能
2017/09/30 Javascript
快速搭建React的环境步骤详解
2017/11/06 Javascript
如何让你的JS代码更好看易读
2017/12/01 Javascript
浅谈JS对象添加getter与setter的5种方法
2018/06/09 Javascript
webuploader实现上传图片到服务器功能
2018/08/16 Javascript
微信小程序云开发如何使用云函数生成二维码
2019/05/18 Javascript
vue实现记事本功能
2019/06/26 Javascript
JS实现简易贪吃蛇游戏
2020/08/24 Javascript
VUE UPLOAD 通过ACTION返回上传结果操作
2020/09/07 Javascript
PyQt5每天必学之创建窗口居中效果
2018/04/19 Python
对Python的交互模式和直接运行.py文件的区别详解
2019/06/29 Python
python3模拟实现xshell远程执行liunx命令的方法
2019/07/12 Python
Django返回HTML文件的实现方法
2020/09/17 Python
CSS3 animation ? steps 函数详解
2019/08/30 HTML / CSS
独特的礼品和创新的科技产品:The Grommet
2018/02/24 全球购物
澳大利亚网上玩具商店:Mr Toys Toyworld
2018/03/25 全球购物
巴西24小时在线药房:Drogasil
2020/06/20 全球购物
计算机应用专业毕业生求职信
2013/10/24 职场文书
生产总经理岗位职责
2013/12/19 职场文书
关于中国梦的演讲稿
2014/04/23 职场文书
纪律教育学习心得体会
2014/09/02 职场文书
办理收楼委托书范本
2014/10/09 职场文书
党员检讨书
2014/10/13 职场文书
2016国庆节67周年寄语
2015/12/07 职场文书
用 Python 元类的特性实现 ORM 框架
2021/05/19 Python