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 相关文章推荐
javascript检查日期格式的函数[比较全]
Oct 17 Javascript
腾讯与新浪的通过IP地址获取当前地理位置(省份)的接口
Jul 26 Javascript
jQuery实现鼠标移到元素上动态提示消息框效果
Oct 20 Javascript
jQuery实现简单的间隔向上滚动效果
Mar 09 Javascript
JavaScript使用yield模拟多线程的方法
Mar 19 Javascript
详解JavaScript对Date对象的操作问题(生成一个倒数7天的数组)
Oct 01 Javascript
JavaScript原生编写《飞机大战坦克》游戏完整实例
Jan 04 Javascript
WebPack配置vue多页面的技巧
May 15 Javascript
Vue data的数据响应式到底是如何实现的
Feb 11 Javascript
原生js实现html手机端城市列表索引选择城市
Jun 24 Javascript
如何用JS实现网页瀑布流布局
Apr 24 Javascript
vue点击弹窗自动触发点击事件的解决办法(模拟场景)
May 25 Vue.js
在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 cookie的操作实现代码(登录)
2010/12/29 PHP
Codeigniter购物车类不能添加中文的解决方法
2014/11/29 PHP
Symfony2函数用法实例分析
2016/03/18 PHP
javascript AutoScroller 函数类
2009/05/29 Javascript
javascript高级程序设计第二版第十二章事件要点总结(常用的跨浏览器检测方法)
2012/08/22 Javascript
jquery高效反选具体实现
2013/05/05 Javascript
中止javascript执行的方法
2014/02/14 Javascript
浅谈javascript中的闭包
2015/05/13 Javascript
js实现的tab标签切换效果代码分享
2015/08/25 Javascript
js实现接收表单的值并将值拼在表单action后面的方法
2015/11/23 Javascript
js创建数组的简单方法
2016/07/27 Javascript
Vue.js组件使用开发实例教程
2016/11/01 Javascript
bootstrap模态框实现拖拽效果
2016/12/14 Javascript
HTML5 js实现拖拉上传文件功能
2020/11/20 Javascript
ES6扩展运算符用法实例分析
2017/10/31 Javascript
AngularJS对动态增加的DOM实现ng-keyup事件示例
2018/03/12 Javascript
node.js部署之启动后台运行forever的方法
2018/05/23 Javascript
JS中比Switch...Case更优雅的多条件判断写法
2019/09/05 Javascript
jQuery弹框插件使用方法详解
2020/05/26 jQuery
js实现QQ邮箱邮件拖拽删除功能
2020/08/27 Javascript
vue treeselect获取当前选中项的label实例
2020/08/31 Javascript
Python编程实现二叉树及七种遍历方法详解
2017/06/02 Python
浅谈Python 列表字典赋值的陷阱
2019/01/20 Python
很酷的python表白工具 你喜欢我吗
2019/04/11 Python
用Python实现二叉树、二叉树非递归遍历及绘制的例子
2019/08/09 Python
Python编写带选项的命令行程序方法
2019/08/13 Python
keras 模型参数,模型保存,中间结果输出操作
2020/07/06 Python
纪伊国屋泰国网上书店:Kinokuniya泰国
2017/12/24 全球购物
Linux中如何用命令创建目录
2016/12/02 面试题
车间副主任岗位职责
2013/12/24 职场文书
结对共建协议书
2014/08/20 职场文书
机器人总动员观后感
2015/06/09 职场文书
汽车车尾标语大全
2015/08/11 职场文书
24年收藏2000多部退役军用电台
2022/02/18 无线电
Java9新特性之Module模块化编程示例演绎
2022/03/16 Java/Android
python实现对doc、txt、xls等文档的读写操作
2022/04/02 Python