您的位置:首页 > Web前端 > Vue.js

vue多行文本溢出处理

2018-08-08 20:19 155 查看

在vue多行文本溢出的问题,工作中需要兼容火狐,ie,和谷歌,添加文本kit前缀的那种方式火狐和ie不兼容,找到一种万能的方法,如下:
 mounted:{

(function($) {
            $.fn.xdlines = function(options) {
                var opts = $.extend({}, $.fn.xdlines.defaults, options);
                var $this = $(this);
                for(var k = 0; k < $this.length; k++) {
                    var $obj = $this.eq(k);
                    $obj.css({ wordWrap: 'break-word' })
                    var str = $obj.text();
                    str = str.replace(/(^\s*)|(\s*$)/g, "");
                    var l = str.length;
                    var txt = '';
                    var lineHeight; //当前高度
                    var linesNum = opts.max; //需要的行数
                    for(var i in str) {
                        txt += str[i];
                        $obj.text(txt);
                        var nowh = parseInt($obj.css('height')); //当前高度
                        if(i == 0) {
                            lineHeight = nowh * linesNum;
                        }
                        if(nowh > lineHeight) {
                            var txt = txt.substring(0, txt.length - 3) + "...";
                            $obj.text(txt);
                            break;
                        }
                    }
                }
            };

            $.fn.xdlines.defaults = { max: 1 }
        })(jQuery)

}
 updated:{

      $('.el').xdlines({max:2});

}

注意在 $('.el').xdlines({max:2});必须写在updated函数中,否则不生效

$.fn是指jquery的命名空间,加上fn上的方法及属性,会对jquery实例每一个有效。

$.fn是指jquery的命名空间,加上fn上的方法及属性,会对jquery实例每一个有效。 
如扩展$.fn.abc() 
那么你可以这样子:$("#div").abc(); 
jQuery.fn = jQuery.prototype = {

   init: function( selector, context ) {//.... 

};

jQuery.fn = jQuery.prototype所以就是把方法加载jq对象上了,所以对每一个jq实例有效。

$.fn.xdlines =function(){//函数体}这个是给jquery对象添加一个方法,那么就可以这样使用$('.el').xdlines(参数)上述例子需要传入一个对象

$.extend()个人理解是jquery混淆对象的方法。例如:

var object1 = {
        apple: 0,
        banana: {weight: 52, price: 100},
        cherry: 97
    };
    var object2 = {
        banana: {price: 200},
        durian: 100
    };
    /* object2 合并到 object1 中 */
    $.extend(object1, object2);

结果{"apple":0,"banana":{"price":200},"cherry":97,"durian":100}

阅读更多
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: