Vue-ellipsis-text NPM

A vue component for web developers. 文字溢出隐藏组件，基于vue编写，用于web表单页面，支持移动端。

一、组件功能

支持单行、多行文字溢出显示点点点 or【更多】按钮，如下图所示：
点击【更多】按钮可展开显示所有文字，点击【收起】按钮可收起文字（视具体情况）。

二、使用演示

npm.io

三、组件参数及事件

参数

参数	说明	类型	默认值
content	内容	String	""
triggerMore	点击更多时候是否触发展开操作	Boolean	true
line	展示几行文字	Number	1
hasMore	是否显示更多按钮	Boolean	false
isHtml	是否是html内容	Boolean	false
revealWidth	更多按钮宽度（若文字被"更多"按钮覆盖，可自行调整此参数）	Number	70
revealText	更多按钮文案	String	【全部】
foldText	收起按钮文案	String	收起
revealTextColor	更多按钮文案颜色	String	''
foldTextColor	收起按钮文案颜色	String	''

slot

支持通过slot的传入内容，优先级高于通过content传入的内容，同时使用只会展示slot传入的内容

<ellipsis-text :hasMore="true">
  <div>我是通过slot插入的内容，优先级高于通过content传入的内容</div>
</ellipsis-text>

事件

事件名	说明
reveal	展开文字时触发
fold	收起文字时触发

四、使用方法

1、使用npm 下载组件到项目中，引入即可使用

npm install -s vue-ellipsis-text

import EllipsisText from "vue-ellipsis-text"

export default {
  name: "app",
  components: { EllipsisText },
  data() {
    return {
      content:'这是一段很长的测试文字，是哦，好长啊，才不到30字。' // 标签数据
    };
  }
};

<ellipsis-text :content="content"></ellipsis-text>

2、普通html中直接引入使用注意：普通html中，如果prop属性为驼峰式，需要修改为连字符形式，方可识别。如：hasMore修改为has-more

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>ellipsis-text</title>
  <script src="https://cdn.staticfile.org/vue/2.5.2/vue.min.js"></script>
  <script src="../dist/ellipsisText.umd.js"></script>
</head>
<body>
  <div id="app">
    <ellipsis-text content="这是一段很长的测试文字，是哦，好长啊，才不到30字。"></ellipsis-text>
  </div>
  <script>
    new Vue({
      el: '#app'
    })
  </script>
</body>
</html>