标签：文字 ... vue suffix default textDom rows tempstr var

直接上代码
在components中创建paragraph.vue文件

<template>
    <div class="paragraph" ref="text" :style="`line-height: ${lineHeight}px;`" ></div>
</template>
<script>
export default {
  layout: "empty",
  props: {
    text: {
        type: String,
        default:''
    },
    lineHeight: {
        type: Number,
        default:18
    },
    rows:{
        ype: Number,
        default:3
    },
    suffix:{
        type: String,
        default:''
    }
  },
  methods: {
    overflowhidden (textDom, rows, lineHeight,suffix){
	      var at = rows*parseInt(lineHeight);      //计算包含文本的div应该有的高度
	     var tempstr = this.text;                       //获取到所有文本
	      textDom.innerHTML = tempstr;                //将所有文本写入html中
	     var len = tempstr.length;
	     var i = 0;
	      if(textDom.offsetHeight <= at){             //如果所有文本在写入html后文本没有溢出，那不需要做溢出处理
             textDom.innerHTML= tempstr + `<span style="color: #F67052;font-weight: 600;">${suffix}</span>`;
	     }else {                                   //否则 一个一个字符添加写入 不断判断写入后是否溢出
			var temp = "";
	         textDom.innerHTML = temp +  `<span style="color: #F67052;font-weight: 600;">${suffix}</span>`;
	         while(textDom.offsetHeight <= at){
	             temp = tempstr.substring(0, i+1);
	             i++;
	             textDom.innerHTML = temp + `<span style="color: #F67052;font-weight: 600;">${suffix}</span>`;
	         }
	         var slen = temp.length;
	         tempstr = temp.substring(0, slen-1);
	         len = tempstr.length
	         textDom.innerHTML  = tempstr.substring(0, len-3-this.suffix.length) +"..." + `<span style="color: #F67052;font-weight: 600;">${suffix}</span>`;     //替换string后面三个字符 
	     }
	     
	  }
  },
  mounted(){
      this.overflowhidden(this.$refs.text,this.rows,this.lineHeight,this.suffix)  
  }

};
</script>
<style lang="less" scoped>
.paragraph {
    font-size: 18px;
    color: #2C2D31;
    font-weight: 600;
    cursor: pointer;
  }
</style>

引用

import Paragraph from "~/components/paragraph.vue";

...



 components: { Paragraph },

使用

<Paragraph
                :lineHeight="26"
                :text="item.title"
                :rows="2"
                :suffix="item.rebate"
              ></Paragraph>

js原生地址:
js处理文字移出…

标签：文字,...,vue,suffix,default,textDom,rows,tempstr,var
来源： https://blog.csdn.net/wangxinyang0118/article/details/115557602

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。