├── .gitignore
├── README.md
├── babel.config.js
├── changeLog.md
├── package-lock.json
├── package.json
├── public
    ├── favicon.ico
    └── index.html
├── src
    ├── App.vue
    ├── components
    │   └── ellipsis.vue
    ├── index.js
    └── main.js
└── vue.config.js


/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | 
 6 | # local env files
 7 | .env.local
 8 | .env.*.local
 9 | 
10 | # Log files
11 | npm-debug.log*
12 | yarn-debug.log*
13 | yarn-error.log*
14 | pnpm-debug.log*
15 | 
16 | # Editor directories and files
17 | .idea
18 | .vscode
19 | *.suo
20 | *.ntvs*
21 | *.njsproj
22 | *.sln
23 | *.sw?
24 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # vue-overlow-ellipsis
 2 | 
 3 | ## 在Vue项目中使用本组件
 4 | 
 5 | ### 1. 安装
 6 | ```bash
 7 | npm install vue-overflow-ellipsis
 8 | # 或
 9 | yarn add vue-overflow-ellipsis
10 | ```
11 | 
12 | ### 2. 在项目中引入组件以及依赖
13 | 
14 | ```js
15 | import ellipsis from "vue-overflow-ellipsis"
16 | import "vue-overflow-ellipsis/dist/index.css"
17 | ```
18 | 
19 | ### 3. 使用组件
20 | ```html
21 | <template>
22 |   <!-- ... -->
23 |     <ellipsis :content="content" rows></ellipsis>
24 |   <!-- ... -->
25 | </template>
26 | 
27 | <script>
28 | import ellipsis from 'vue-overflow-ellipsis'
29 | import "vue-overflow-ellipsis/dist/index.css"
30 | 
31 | const content = `
32 | 五百里滇池，奔来眼底，披襟岸帻，喜茫茫空阔无边。看东骧神骏，西翥灵仪，北走蜿蜒，南翔缟素。高人韵士，何妨选胜登临。趁蟹屿螺洲，梳裹就风鬟雾鬓；更苹天苇地，点缀些翠羽丹霞，莫辜负四围香稻，万顷晴沙，九夏芙蓉，三春杨柳。数千年往事，注到心头，把酒凌虚，叹滚滚英雄谁在。想汉习楼船，唐标铁柱，宋挥玉斧，元跨革囊。伟烈丰功，费尽移山心力。尽珠帘画栋，卷不及暮雨朝云；便断碣残碑，都付与苍烟落照。只赢得几杵疏钟，半江渔火，两行秋雁，一枕清霜。
33 | `
34 | 
35 | export default {
36 |   name: 'App',
37 |   components: {
38 |     ellipsis,
39 |   },
40 |   data () {
41 |     return {
42 |       content: content,
43 |     }
44 |   }
45 | }
46 | </script>
47 | ```
48 | 
49 | ### 4. API
50 | 说明：组件动态计算指定行数的容器能容纳的字符数量，动态截取字符串进行显示。组件内部使用ResizeObserver观察元素的size的变动并调用了refresh方法。但是IE不支持ResizeObserver，所以如果需要兼容IE动态
51 | 
52 | - props
53 |   - content 文本字符串
54 |   - rows 文本最大行数，默认是3
55 |   - ellipsisText 省略号字符，默认是"..."
56 |   - btnText 按钮的文字，默认是“展开”
57 |   - btnShow 是否总是显示按钮，即便未超过最大行数，默认false
58 | 
59 | - slot
60 |   - ellipsis 自定义省略号和按钮文字，`<span slot="ellipsis">... 查看全部</span>`
61 | - events
62 |   - click-btn 展开按钮点击事件
63 | 
64 | 
65 | ---
66 | 
67 | ## 源码运行
68 | 可以通过git将本项目clone到本地运行。
69 | 
70 | ### 安装依赖
71 | ```
72 | yarn install
73 | ```
74 | 
75 | ### 启动开发服务
76 | ```
77 | yarn serve
78 | ```
79 | 
80 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/cli-plugin-babel/preset'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/changeLog.md:
--------------------------------------------------------------------------------
1 | v1.0.4
2 | 过滤不必要的resize监听回调
3 | 
4 | v1.0.0
5 | 初版，支持指定行数、折叠按钮的文字


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-overflow-ellipsis",
 3 |   "version": "1.0.7",
 4 |   "description": "Vue组件，多行文字溢出省略折叠，...[查看更多]",
 5 |   "keywords": [
 6 |     "多行溢出",
 7 |     "省略多余内容",
 8 |     "折叠",
 9 |     "展开"
10 |   ],
11 |   "author": "Mumaa <lushg@foxmail.com>",
12 |   "repository": {
13 |     "type": "git",
14 |     "url": "https://github.com/Lushenggang/vue-overflow-ellipsis"
15 |   },
16 |   "license": "MIT",
17 |   "main": "dist/index.common.js",
18 |   "files": [
19 |     "dist"
20 |   ],
21 |   "private": false,
22 |   "scripts": {
23 |     "serve": "vue-cli-service serve",
24 |     "build": "vue-cli-service build --target lib --name index ./src/index.js",
25 |     "prepublishOnly": "git push && npm run build"
26 |   },
27 |   "dependencies": {
28 |     "core-js": "^3.6.5",
29 |     "element-resize-detector": "^1.2.1",
30 |     "vue": "^2.6.11"
31 |   },
32 |   "devDependencies": {
33 |     "@vue/cli-plugin-babel": "~4.5.0",
34 |     "@vue/cli-service": "~4.5.0",
35 |     "stylus": "^0.54.8",
36 |     "stylus-loader": "3.0",
37 |     "uglifyjs-webpack-plugin": "^2.2.0",
38 |     "vue-template-compiler": "^2.6.11"
39 |   },
40 |   "browserslist": [
41 |     "> 1%",
42 |     "last 2 versions",
43 |     "not dead"
44 |   ]
45 | }
46 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wintc23/vue-overflow-ellipsis/af0d72a8f33420db9b172fc77d8efcbcd87ccea9/public/favicon.ico


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title><%= htmlWebpackPlugin.options.title %></title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="page-ellipsis">
 3 |     <div class="ellipsis-container">
 4 |       <div class="ellipsis-notice">
 5 |         组件是自适应宽度的，拖动右下角改变宽度查看效果。
 6 |       </div>
 7 |       <div class="ellipsis-component">
 8 |         <ellipsis
 9 |           class="ellipsis-content"
10 |           @click-btn="hideMore(false)"
11 |           :content="content"
12 |           :rows="rows"
13 |           :btnText="btnText"
14 |           :ellipsisText="ellipsisText"
15 |           v-if="ellipsis">
16 |         </ellipsis>
17 |         <div class="ellipsis-content" v-else>
18 |           {{ content }}
19 |           <span class="btn" @click.stop="hideMore(true)">折叠</span>
20 |         </div>
21 |       </div>
22 |       <div class="ellipsis-github">
23 |         github[求star]：<a :href="link" target="_blank">{{ link }}</a>
24 |       </div>
25 |     </div>
26 |   </div>
27 | </template>
28 | 
29 | <script>
30 | import ellipsis from '@/components/ellipsis'
31 | 
32 | const content = `
33 | 五百里滇池，奔来眼底，披襟岸帻，喜茫茫空阔无边。看东骧神骏，西翥灵仪，北走蜿蜒，南翔缟素。高人韵士，何妨选胜登临。趁蟹屿螺洲，梳裹就风鬟雾鬓；更苹天苇地，点缀些翠羽丹霞，莫辜负四围香稻，万顷晴沙，九夏芙蓉，三春杨柳。
34 | 数千年往事，注到心头，把酒凌虚，叹滚滚英雄谁在。想汉习楼船，唐标铁柱，宋挥玉斧，元跨革囊。伟烈丰功，费尽移山心力。尽珠帘画栋，卷不及暮雨朝云；便断碣残碑，都付与苍烟落照。只赢得几杵疏钟，半江渔火，两行秋雁，一枕清霜。
35 | `
36 | 
37 | export default {
38 |   components: {
39 |     ellipsis
40 |   },
41 |   data () {
42 |     return {
43 |       content,
44 |       rows: 6,
45 |       btnText: '查看全部',
46 |       ellipsisText: '...',
47 |       link: 'https://github.com/Lushenggang/vue-overflow-ellipsis',
48 |       ellipsis: true,
49 |     }
50 |   },
51 |   methods: {
52 |     hideMore (ellipsis) {
53 |       console.log('hidemore')
54 |       this.ellipsis = ellipsis
55 |     }
56 |   }
57 | }
58 | </script>
59 | 
60 | <style lang="stylus" scoped>
61 | .page-ellipsis
62 |   display flex
63 |   flex-direction column
64 |   text-align center
65 |   justify-content center
66 |   &::before, &::after
67 |     content ''
68 |   &::before
69 |     flex-grow 1
70 |   &::after
71 |     flex-grow 4
72 |   .ellipsis-container
73 |     flex auto
74 |     overflow auto
75 |     .ellipsis-component
76 |       margin 0 auto
77 |       width 560px
78 |       max-width 90%
79 |       resize horizontal
80 |       border 1px solid rgba(64, 158, 255, 1)
81 |       padding 10px 20px
82 |       height auto
83 |       overflow hidden
84 |       .ellipsis-content
85 |         font-size 16px
86 |         line-height 2
87 |         text-align left
88 |     .ellipsis-notice
89 |       padding 20px 0
90 |     .ellipsis-github
91 |       margin 10px 0
92 |     .btn
93 |       color rgba(64, 158, 255, 1)
94 |       text-decoration underline
95 |       cursor pointer
96 | </style>


--------------------------------------------------------------------------------
/src/components/ellipsis.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="mm-ellipsis-container">
  3 |     <div class="shadow">
  4 |       <textarea :rows="rows" readonly></textarea>
  5 |       <div class="shadow-box" ref="box">
  6 |         {{ showContent }}
  7 |         <slot name="ellipsis">
  8 |           {{ ellipsisText }}
  9 |           <span class="ellipsis-btn">{{ btnText }}</span>
 10 |         </slot>
 11 |         <span ref="tail"></span>
 12 |       </div>
 13 |     </div>
 14 |     <div class="real-box">
 15 |       {{ showContent }}
 16 |       <slot name="ellipsis" v-if="(textLength < content.length) || btnShow">
 17 |         {{ ellipsisText }}
 18 |         <span class="ellipsis-btn" @click="clickBtn">{{ btnText }}</span>
 19 |       </slot>
 20 |     </div>
 21 |   </div>
 22 | </template>
 23 | 
 24 | <script>
 25 | import resizeObserver from 'element-resize-detector'
 26 | const observer = resizeObserver()
 27 | 
 28 | export default {
 29 |   props: {
 30 |     content: {
 31 |       type: String,
 32 |       default: ''
 33 |     },
 34 |     btnText: {
 35 |       type: String,
 36 |       default: '展开'
 37 |     },
 38 |     ellipsisText: {
 39 |       type: String,
 40 |       default: '...'
 41 |     },
 42 |     rows: {
 43 |       type: Number,
 44 |       default: 3
 45 |     },
 46 |     btnShow: {
 47 |       type: Boolean,
 48 |       default: false
 49 |     },
 50 |   },
 51 |   data () {
 52 |     return {
 53 |       textLength: 0,
 54 |       beforeRefresh: null,
 55 |       boxWidth: 0,
 56 |       boxHeight: 0
 57 |     }
 58 |   },
 59 |   computed: {
 60 |     showContent () {
 61 |       const length = this.beforeRefresh ? this.content.length : this.textLength
 62 |       return this.content.substr(0, this.textLength)
 63 |     },
 64 |     watchData () {
 65 |       return [this.content, this.btnText, this.ellipsisText, this.rows, this.btnShow]
 66 |     }
 67 |   },
 68 |   watch: {
 69 |     watchData: {
 70 |       immediate: true,
 71 |       handler () {
 72 |         this.refresh()
 73 |       }
 74 |     },
 75 |   },
 76 |   mounted () {
 77 |     observer.listenTo(this.$refs.box, (el) => {
 78 |       if (el.offsetWidth == this.boxWidth && el.offsetHeight == this.boxHeight) return
 79 |       this.boxWidth = el.offsetWidth
 80 |       this.boxHeight = el.offsetHeight
 81 |       this.refresh()
 82 |     })
 83 |   },
 84 |   beforeDestroy () {
 85 |     observer.uninstall(this.$refs.box)
 86 |   },
 87 |   methods: {
 88 |     refresh () {
 89 |       this.beforeRefresh && this.beforeRefresh()
 90 |       let stopLoop = false
 91 |       this.beforeRefresh = () => stopLoop = true
 92 |       this.textLength = this.content.length
 93 |       const checkLoop = (start, end) => {
 94 |         if (stopLoop || start + 1 >= end) {
 95 |           this.beforeRefresh = null
 96 |           return
 97 |         }
 98 |         const boxRect = this.$refs.box.getBoundingClientRect()
 99 |         const tailRect = this.$refs.tail.getBoundingClientRect()
100 |         const overflow = tailRect.bottom > boxRect.bottom
101 |         overflow ? (end = this.textLength) : (start = this.textLength)
102 |         this.textLength = Math.floor((start + end) / 2)
103 |         this.$nextTick(() => checkLoop(start, end))
104 |       }
105 |       this.$nextTick(() => checkLoop(0, this.textLength))
106 |     },
107 |     clickBtn (event) {
108 |       this.$emit('click-btn', event)
109 |     },
110 |   }
111 | }
112 | </script>
113 | 
114 | <style lang="stylus" scoped>
115 | .mm-ellipsis-container
116 |   text-align left
117 |   position relative
118 |   line-height 1.5
119 |   .shadow
120 |     width 100%
121 |     display flex
122 |     pointer-events none
123 |     opacity 0
124 |     user-select none
125 |     position absolute
126 |     outline green solid 1px
127 |     textarea
128 |       border none
129 |       flex auto
130 |       padding 0
131 |       resize none
132 |       overflow hidden
133 |       font-size inherit
134 |       line-height inherit
135 |       outline none
136 |     .shadow-box
137 |       position absolute
138 |       left 0
139 |       right 0
140 |       top 0
141 |       bottom 0
142 |   .ellipsis-btn
143 |     cursor pointer
144 |     text-decoration underline
145 |     color #4791ff
146 | </style>


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import ellipsis from '@/components/ellipsis'
2 | 
3 | export default ellipsis


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import App from './App.vue'
3 | 
4 | Vue.config.productionTip = false
5 | 
6 | new Vue({
7 |   render: h => h(App),
8 | }).$mount('#app')
9 | 


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
 1 | 
 2 | const UglifyJsPlugin=require('uglifyjs-webpack-plugin')
 3 | const isDev = process.env.NODE_ENV !== "production"
 4 | 
 5 | const externals = {}
 6 | !isDev && (externals.vue = 'vue')
 7 | 
 8 | module.exports = {
 9 |   productionSourceMap: false,
10 |   configureWebpack: {
11 |     externals,
12 |     optimization: {
13 |       minimizer: [
14 |         new UglifyJsPlugin({
15 |           uglifyOptions: {
16 |             output: {
17 |               comments: false,
18 |             },
19 |             warnings: false,
20 |             compress: {
21 |               drop_debugger: true,
22 |               drop_console: true
23 |             }
24 |           }
25 |         })
26 |       ]
27 |     }
28 |   }
29 | }


--------------------------------------------------------------------------------