├── .gitignore ├── index.js ├── .eslintrc ├── postcss.config.js ├── demo ├── nav.config.json ├── demo.html ├── template.html ├── dist │ ├── index.html │ ├── style.css │ └── style.css.map ├── index.js ├── route.js ├── index.vue ├── demo.vue └── pages │ └── ellipsis.vue ├── .babelrc ├── dist ├── style.css └── index.js ├── readme.md ├── package.json └── src └── ellipsis-plus.vue /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .git 3 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | export { default } from './src/ellipsis-plus.vue' 2 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": ["vue"], 3 | "extends": ["phoneui"] 4 | } 5 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: [ 3 | require('autoprefixer')({browsers:['> 1%', 'ie >= 8', 'iOS >= 6', 'Android >= 2.1']}) 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /demo/nav.config.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "title": "JS Components", 4 | "list": [ 5 | { 6 | "path": "/ellipsis", 7 | "name": "Ellipsis", 8 | "icon": "ellipsis" 9 | } 10 | ] 11 | } 12 | ] 13 | -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [["latest", { 3 | "es2015": { 4 | "modules": false 5 | } 6 | }]], 7 | "plugins": [ 8 | ["transform-runtime", { 9 | "polyfill": false, 10 | "regenerator": true 11 | }]], 12 | "comments": false 13 | } 14 | -------------------------------------------------------------------------------- /demo/demo.html: -------------------------------------------------------------------------------- 1 | Document
-------------------------------------------------------------------------------- /demo/template.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /demo/dist/index.html: -------------------------------------------------------------------------------- 1 | Document
-------------------------------------------------------------------------------- /dist/style.css: -------------------------------------------------------------------------------- 1 | 2 | .ellipsis-plus { 3 | width:100%; 4 | position:relative; 5 | line-height:1.5 6 | } 7 | .ellipsis-plus-button { 8 | padding-top:0; 9 | padding-bottom:0; 10 | border:0; 11 | font-size: 1em; 12 | vertical-align: middle; 13 | color: #8590a6; 14 | outline: none; 15 | line-height: 1; 16 | background-color: transparent 17 | } 18 | .ellipsis-plus-ellipsis { 19 | display: inline-block 20 | } 21 | .ellipsis-plus-txt { 22 | font-size: inherit 23 | } 24 | -------------------------------------------------------------------------------- /demo/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './index.vue' 3 | import routes from './route' 4 | import ellipsisPlus from '../index' 5 | import VueRouter from 'vue-router' 6 | 7 | document.addEventListener('DOMContentLoaded', function() { 8 | if (window.FastClick) window.FastClick.attach(document.body) 9 | }, false) 10 | 11 | 12 | Vue.component(ellipsisPlus.name, ellipsisPlus) 13 | Vue.use(VueRouter) 14 | 15 | const router = new VueRouter({ 16 | // base: __dirname, 17 | routes 18 | }) 19 | 20 | new Vue({ // eslint-disable-line 21 | el: '#app', 22 | render: h => h(App), 23 | router 24 | }) 25 | -------------------------------------------------------------------------------- /demo/route.js: -------------------------------------------------------------------------------- 1 | import NavConfig from './nav.config.json' 2 | 3 | import Demo from './demo.vue' 4 | 5 | const registerRoute = (config) => { 6 | let route = [] 7 | config.map(nav => 8 | nav.list.map(page => 9 | route.push({ 10 | name: page.name, 11 | path: page.path, 12 | component: require(`./pages${page.path}`), 13 | meta: { 14 | title: page.title || page.name, 15 | description: page.description 16 | } 17 | }) 18 | ) 19 | ) 20 | return { route, navs: config } 21 | } 22 | 23 | 24 | const route = registerRoute(NavConfig) 25 | 26 | route.route.push({ 27 | path: '/', 28 | component: Demo 29 | }) 30 | 31 | export const navs = route.navs 32 | export default route.route 33 | -------------------------------------------------------------------------------- /demo/index.vue: -------------------------------------------------------------------------------- 1 | 10 | 35 | 36 | 46 | -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | # ellipsis 组件 2 | 基于vue2.0的【展开、收起】组件 3 | 为了更好的实现多文本能够按指定行数显示，并通过配置两个按钮进行展开与折叠。 4 | ### 效果 5 | ![](https://lucefer.github.io/phone-ui/images/more.png) 6 | ### 安装 7 | ``` 8 | npm install -D ellipsis-plus 9 | ``` 10 | ### 使用 11 | ``` 12 | import Ellipsis from 'ellipsis-plus' 13 | Vue.component(Ellipsis.name, Ellipsis) 14 | ``` 15 | ### 参数说明 16 | * text 17 | > String ，待显示的文本 18 | * line 19 | > 显示的行数，默认为2 20 | * showButton 21 | > 是否显示组件内置按钮。默认为true 22 | * expandText 23 | > 展开按钮的文案 24 | * collapseText 25 | > 收起按钮的文案 26 | * ellipsis 27 | > 自定义省略符号，默认为... 28 | 29 | ``` 30 |
31 |
采用组件默认按钮
32 | 33 | 34 |
35 |
36 |
自定义按钮文字
37 | 38 | 39 |
40 |
41 |
在组件外部定义按钮
42 | 43 | 44 | 45 |
46 |
47 |
自定义省略符
48 | 49 | 50 |
51 |
52 |
不带省略符
53 | 54 | 55 |
56 | ``` 57 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ellipsis-plus", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1", 8 | "build": "webpack --config ./build/webpack.production.config.js --progress --colors", 9 | "demo": "webpack --config ./build/webpack.demo.config.js --progress --colors" 10 | }, 11 | "author": "", 12 | "license": "MIT", 13 | "devDependencies": { 14 | "autoprefixer": "^7.1.1", 15 | "babel-core": "^6.24.1", 16 | "babel-loader": "^7.0.0", 17 | "babel-plugin-transform-runtime": "^6.23.0", 18 | "babel-preset-latest": "^6.24.1", 19 | "css-loader": "^0.28.4", 20 | "eslint-loader": "^1.9.0", 21 | "extract-text-webpack-plugin": "^2.1.2", 22 | "html-webpack-plugin": "^2.28.0", 23 | "postcss": "^6.0.1", 24 | "postcss-bem": "^0.4.1", 25 | "postcss-cssnext": "^2.11.0", 26 | "postcss-loader": "^2.0.5", 27 | "postcss-position": "^0.5.0", 28 | "postcss-px2rem": "^0.3.0", 29 | "postcss-salad": "^2.0.1", 30 | "postcss-short": "^4.1.0", 31 | "postcss-title": "^1.0.3", 32 | "style-loader": "^0.18.2", 33 | "vue": "^2.3.4", 34 | "vue-loader": "^12.0.0", 35 | "vue-router": "^2.5.3", 36 | "vue-template-compiler": "^2.4.1", 37 | "webpack": "^2.6.1", 38 | "webpack-dev-server": "^2.4.5" 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /demo/demo.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | 60 | 61 | 76 | -------------------------------------------------------------------------------- /demo/pages/ellipsis.vue: -------------------------------------------------------------------------------- 1 | 37 | 38 | 60 | 61 | 92 | -------------------------------------------------------------------------------- /demo/dist/style.css: -------------------------------------------------------------------------------- 1 | 2 | @reset-global mobile; 3 | html, body { 4 | background-color: #000; 5 | -webkit-overflow-scrolling: touch; 6 | -webkit-user-select: none; 7 | -moz-user-select: none; 8 | -ms-user-select: none; 9 | user-select: none; 10 | } 11 | a { 12 | color: inherit; 13 | } 14 | .page-back { 15 | display: inline-block; 16 | top: 12px; 17 | left: 10px; 18 | position: absolute; 19 | width: 40px; 20 | height: 40px; 21 | text-align: center; 22 | } 23 | .page-back i { 24 | font-size: 24px; 25 | line-height: 40px; 26 | } 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | /* 46 | test 47 | */ 48 | .page-demo .nav{ 49 | display: inline-block; 50 | margin-right: 10px; 51 | margin-bottom: 15px; 52 | } 53 | .page-demo { 54 | padding-bottom: 50px; 55 | } 56 | .page-demo .indexicon { 57 | font-size: 22px; 58 | color: #26a2ff; 59 | display: inline-block; 60 | width: 30px; 61 | vertical-align: middle; 62 | } 63 | .page-demo .indexicon.icon-swipe { 64 | font-size: 26px; 65 | } 66 | .page-demo .indexicon.icon-checklist { 67 | font-size: 18px; 68 | } 69 | .page-title{ 70 | font-size: 20px; 71 | margin: 20px auto; 72 | text-align: center; 73 | display: block; 74 | line-height: 1; 75 | } 76 | .page-part{ 77 | margin-bottom: 15px; 78 | } 79 | 80 | .page-more{ 81 | padding: 15px; 82 | width: 375px; 83 | margin: 0 auto; 84 | font-family:Helvetica Neue,Microsoft Yahei,sans-serif; 85 | background: #000 86 | } 87 | .page-more >div { 88 | margin-bottom: 15px; 89 | border:1px solid #26a2ff; 90 | padding:15px; 91 | -webkit-border-radius: 4px; 92 | border-radius: 4px; 93 | -webkit-box-shadow:0 0 5px #aaa; 94 | box-shadow:0 0 5px #aaa 95 | } 96 | h6{ 97 | margin:0; 98 | padding-bottom: 10px; 99 | text-align: center; 100 | font-size: 14px; 101 | color: #FFF; 102 | } 103 | .ellipsis-plus { 104 | font-size: 16px; 105 | color: chartreuse 106 | } 107 | .outer-button{ 108 | margin-top: 10px; 109 | } 110 | 111 | .ellipsis-plus { 112 | width:100%; 113 | position:relative; 114 | line-height:1.5 115 | } 116 | .ellipsis-plus-button { 117 | padding-top:0; 118 | padding-bottom:0; 119 | border:0; 120 | font-size: 1em; 121 | vertical-align: middle; 122 | color: #8590a6; 123 | outline: none; 124 | line-height: 1; 125 | background-color: transparent 126 | } 127 | .ellipsis-plus-ellipsis { 128 | display: inline-block 129 | } 130 | .ellipsis-plus-txt { 131 | font-size: inherit 132 | } 133 | 134 | /*# sourceMappingURL=style.css.map*/ -------------------------------------------------------------------------------- /src/ellipsis-plus.vue: -------------------------------------------------------------------------------- 1 | 6 | 146 | 147 | 174 | -------------------------------------------------------------------------------- /demo/dist/style.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["webpack:///./demo/index.vue","webpack:///./demo/demo.vue","webpack:///./demo/pages/ellipsis.vue","webpack:///./src/ellipsis-plus.vue"],"names":[],"mappings":";AAUA;AAEA;EACA;EACA;EACA;KAAA;MAAA;UAAA;CACA;AAEA;EACA;CACA;AAEA;EACA;EACA;EAAA;EAAA;EACA;EACA;EACA;CAKA;AAJA;EACA;EACA;CACA;;;;;;;;;;;;;;;;;;;ACbA;;GAEA;AACA;MACA;MACA;MACA;CAEA;AACA;IACA;CAgBA;AAfA;MACA;MACA;MACA;MACA;MACA;CASA;AAPA;MACA;CACA;AAEA;MACA;CACA;AAIA;MACA;MACA;MACA;MACA;MACA;CACA;AAEA;MACA;CACA;;ACKA;EACA;EACA;EACA;EACA;EACA;CAEA;AACA;EACA;EACA;EACA;EACA;UAAA;EACA;UAAA;CACA;AACA;EACA;EACA;EACA;EACA;EACA;CACA;AACA;EACA;EACA;CACA;AACA;EACA;CACA;;AC2DA;IACA;IACA;IACA;CAkBA;AAjBA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;CACA;AACA;IACA;CACA;AACA;IACA;CACA","file":"style.css","sourcesContent":["\n\n\n\n\n\n\n// WEBPACK FOOTER //\n// ./demo/index.vue?1f15234f","\n\n\n\n\n\n\n\n// WEBPACK FOOTER //\n// ./demo/demo.vue?63f9f8f3","\n\n\n\n\n\n\n\n// WEBPACK FOOTER //\n// ./demo/pages/ellipsis.vue?339a0f28","\n\n\n\n\n\n\n// WEBPACK FOOTER //\n// ./src/ellipsis-plus.vue?0d295103"],"sourceRoot":""} -------------------------------------------------------------------------------- /dist/index.js: -------------------------------------------------------------------------------- 1 | (function webpackUniversalModuleDefinition(root, factory) { 2 | if(typeof exports === 'object' && typeof module === 'object') 3 | module.exports = factory(); 4 | else if(typeof define === 'function' && define.amd) 5 | define([], factory); 6 | else if(typeof exports === 'object') 7 | exports["ellipsisPlus"] = factory(); 8 | else 9 | root["ellipsisPlus"] = factory(); 10 | })(this, function() { 11 | return /******/ (function(modules) { // webpackBootstrap 12 | /******/ // The module cache 13 | /******/ var installedModules = {}; 14 | /******/ 15 | /******/ // The require function 16 | /******/ function __webpack_require__(moduleId) { 17 | /******/ 18 | /******/ // Check if module is in cache 19 | /******/ if(installedModules[moduleId]) { 20 | /******/ return installedModules[moduleId].exports; 21 | /******/ } 22 | /******/ // Create a new module (and put it into the cache) 23 | /******/ var module = installedModules[moduleId] = { 24 | /******/ i: moduleId, 25 | /******/ l: false, 26 | /******/ exports: {} 27 | /******/ }; 28 | /******/ 29 | /******/ // Execute the module function 30 | /******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); 31 | /******/ 32 | /******/ // Flag the module as loaded 33 | /******/ module.l = true; 34 | /******/ 35 | /******/ // Return the exports of the module 36 | /******/ return module.exports; 37 | /******/ } 38 | /******/ 39 | /******/ 40 | /******/ // expose the modules object (__webpack_modules__) 41 | /******/ __webpack_require__.m = modules; 42 | /******/ 43 | /******/ // expose the module cache 44 | /******/ __webpack_require__.c = installedModules; 45 | /******/ 46 | /******/ // identity function for calling harmony imports with the correct context 47 | /******/ __webpack_require__.i = function(value) { return value; }; 48 | /******/ 49 | /******/ // define getter function for harmony exports 50 | /******/ __webpack_require__.d = function(exports, name, getter) { 51 | /******/ if(!__webpack_require__.o(exports, name)) { 52 | /******/ Object.defineProperty(exports, name, { 53 | /******/ configurable: false, 54 | /******/ enumerable: true, 55 | /******/ get: getter 56 | /******/ }); 57 | /******/ } 58 | /******/ }; 59 | /******/ 60 | /******/ // getDefaultExport function for compatibility with non-harmony modules 61 | /******/ __webpack_require__.n = function(module) { 62 | /******/ var getter = module && module.__esModule ? 63 | /******/ function getDefault() { return module['default']; } : 64 | /******/ function getModuleExports() { return module; }; 65 | /******/ __webpack_require__.d(getter, 'a', getter); 66 | /******/ return getter; 67 | /******/ }; 68 | /******/ 69 | /******/ // Object.prototype.hasOwnProperty.call 70 | /******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); }; 71 | /******/ 72 | /******/ // __webpack_public_path__ 73 | /******/ __webpack_require__.p = ""; 74 | /******/ 75 | /******/ // Load entry module and return exports 76 | /******/ return __webpack_require__(__webpack_require__.s = 1); 77 | /******/ }) 78 | /************************************************************************/ 79 | /******/ ([ 80 | /* 0 */ 81 | /***/ (function(module, exports, __webpack_require__) { 82 | 83 | var disposed = false 84 | function injectStyle (ssrContext) { 85 | if (disposed) return 86 | __webpack_require__(3) 87 | } 88 | var Component = __webpack_require__(4)( 89 | /* script */ 90 | __webpack_require__(2), 91 | /* template */ 92 | __webpack_require__(5), 93 | /* styles */ 94 | injectStyle, 95 | /* scopeId */ 96 | null, 97 | /* moduleIdentifier (server only) */ 98 | null 99 | ) 100 | Component.options.__file = "/Users/fanqi/Documents/mine/lucefer/ellipsis-plus/src/ellipsis-plus.vue" 101 | if (Component.esModule && Object.keys(Component.esModule).some(function (key) {return key !== "default" && key.substr(0, 2) !== "__"})) {console.error("named exports are not supported in *.vue files.")} 102 | if (Component.options.functional) {console.error("[vue-loader] ellipsis-plus.vue: functional components are not supported with templates, they should use render functions.")} 103 | 104 | /* hot reload */ 105 | if (false) {(function () { 106 | var hotAPI = require("vue-hot-reload-api") 107 | hotAPI.install(require("vue"), false) 108 | if (!hotAPI.compatible) return 109 | module.hot.accept() 110 | if (!module.hot.data) { 111 | hotAPI.createRecord("data-v-2393ed58", Component.options) 112 | } else { 113 | hotAPI.reload("data-v-2393ed58", Component.options) 114 | } 115 | module.hot.dispose(function (data) { 116 | disposed = true 117 | }) 118 | })()} 119 | 120 | module.exports = Component.exports 121 | 122 | 123 | /***/ }), 124 | /* 1 */ 125 | /***/ (function(module, __webpack_exports__, __webpack_require__) { 126 | 127 | "use strict"; 128 | Object.defineProperty(__webpack_exports__, "__esModule", { value: true }); 129 | /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__src_ellipsis_plus_vue__ = __webpack_require__(0); 130 | /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__src_ellipsis_plus_vue___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0__src_ellipsis_plus_vue__); 131 | /* harmony reexport (default from non-hamory) */ __webpack_require__.d(__webpack_exports__, "default", function() { return __WEBPACK_IMPORTED_MODULE_0__src_ellipsis_plus_vue___default.a; }); 132 | 133 | 134 | /***/ }), 135 | /* 2 */ 136 | /***/ (function(module, __webpack_exports__, __webpack_require__) { 137 | 138 | "use strict"; 139 | Object.defineProperty(__webpack_exports__, "__esModule", { value: true }); 140 | // 141 | // 142 | // 143 | // 144 | // 145 | 146 | /* harmony default export */ __webpack_exports__["default"] = ({ 147 | name: 'ellipsis-plus', 148 | props: { 149 | text: String, 150 | line: { 151 | type: Number, 152 | default: 2 153 | }, 154 | ellipsis: { 155 | type: String, 156 | default: '...' 157 | }, 158 | showButton: { 159 | type: Boolean, 160 | default: true 161 | }, 162 | expandText: { 163 | type: String, 164 | default: '展开全部', 165 | validator(value) { 166 | return value && value.trim().length; 167 | } 168 | }, 169 | collapseText: { 170 | type: String, 171 | default: '收起', 172 | validator(value) { 173 | return value && value.trim().length; 174 | } 175 | } 176 | }, 177 | data() { 178 | return { 179 | tmpTxt: '', 180 | show: false, 181 | marginLeft: 0, 182 | collapseMarginLeft: 0 183 | }; 184 | }, 185 | created() {}, 186 | mounted() { 187 | if (!this.line) { 188 | return; 189 | } 190 | let everywidth = this.$refs.txt.offsetWidth; 191 | this.$refs.txt.innerHTML = this.text; 192 | let containerWidth = this.$refs.container.offsetWidth; 193 | let btnWidth = 0; 194 | let btnWidthExpand = 0; 195 | let ellipsisWidth = this.$refs.ellipsis.offsetWidth; 196 | if (this.showButton) { 197 | btnWidthExpand = btnWidth = Math.ceil(parseFloat(getComputedStyle(this.$refs.more, null)['width'].replace('px', ''))); 198 | this.$refs.ellipsis.style.display = 'none'; 199 | let left = 0; 200 | let btnClone = this.$refs.more.cloneNode(); 201 | if (this.expandText !== this.collapseText) { 202 | this.$refs.more.style.display = 'none'; 203 | btnClone.innerHTML = this.collapseText; 204 | btnClone.style.display = 'inline-block'; 205 | this.$refs.container.appendChild(btnClone); 206 | btnWidthExpand = Math.ceil(parseFloat(getComputedStyle(btnClone, null)['width'].replace('px', ''))); 207 | left = btnClone.offsetLeft; 208 | } 209 | // 魔法数字 5 210 | if (btnClone.offsetTop <= this.$refs.ellipsis.offsetTop + 5) { 211 | this.marginLeft = containerWidth - btnWidthExpand - left + ellipsisWidth; 212 | } else { 213 | this.marginLeft = containerWidth - btnWidthExpand - left; 214 | } 215 | btnClone.remove(); 216 | this.$refs.more.style.display = 'inline-block'; 217 | this.$refs.ellipsis.style.display = 'inline-block'; 218 | } 219 | 220 | let style = getComputedStyle(this.$refs.container, null); 221 | let lineHeight = parseFloat(style['lineHeight'].replace('px', '')); 222 | 223 | this.$refs.txt.innerHTML = this.text; 224 | if (Math.floor(this.$refs.container.offsetHeight / lineHeight) <= this.line) { 225 | this.tmpTxt = this.text; 226 | this.show = true; 227 | this.showButton = false; 228 | return; 229 | } 230 | let initNum = Math.floor((containerWidth * this.line - btnWidth - ellipsisWidth) / everywidth); 231 | let increase = 1; 232 | this.$refs.txt.innerHTML = this.text.substr(0, initNum); 233 | if (Math.round(this.$refs.container.offsetHeight / lineHeight) > this.line) { 234 | increase = -1; 235 | } 236 | for (let i = initNum; i < this.text.length; i = i + increase) { 237 | if (i < 0 || i > this.text.length) { 238 | return; 239 | } 240 | this.$refs.txt.innerHTML = this.text.substr(0, i); 241 | if (increase === 1 && Math.round(this.$refs.container.offsetHeight / lineHeight) > this.line) { 242 | this.tmpTxt = this.text.substr(0, i - 1); 243 | this.$refs.txt.innerHTML = this.tmpTxt; 244 | if (this.showButton) { 245 | let left = this.$refs.more.offsetLeft; 246 | this.collapseMarginLeft = containerWidth - btnWidth - left - 1; 247 | } 248 | break; 249 | } else if (increase === -1 && Math.round(this.$refs.container.offsetHeight / lineHeight) === this.line) { 250 | this.tmpTxt = this.text.substr(0, i); 251 | this.$refs.txt.innerHTML = this.tmpTxt; 252 | if (this.showButton) { 253 | let left = this.$refs.more.offsetLeft; 254 | this.collapseMarginLeft = containerWidth - btnWidth - left - 1; 255 | } 256 | break; 257 | } 258 | } 259 | }, 260 | methods: { 261 | handleClick() { 262 | if (this.show) { 263 | this.collapse(); 264 | } else { 265 | this.expand(); 266 | } 267 | }, 268 | expand() { 269 | if (!this.show) { 270 | this.show = true; 271 | this.$refs.txt.innerHTML = this.text; 272 | } 273 | }, 274 | collapse() { 275 | if (this.show) { 276 | this.show = false; 277 | this.$refs.txt.innerHTML = this.tmpTxt; 278 | } 279 | } 280 | } 281 | }); 282 | 283 | /***/ }), 284 | /* 3 */ 285 | /***/ (function(module, exports) { 286 | 287 | // removed by extract-text-webpack-plugin 288 | 289 | /***/ }), 290 | /* 4 */ 291 | /***/ (function(module, exports) { 292 | 293 | /* globals __VUE_SSR_CONTEXT__ */ 294 | 295 | // this module is a runtime utility for cleaner component module output and will 296 | // be included in the final webpack user bundle 297 | 298 | module.exports = function normalizeComponent ( 299 | rawScriptExports, 300 | compiledTemplate, 301 | injectStyles, 302 | scopeId, 303 | moduleIdentifier /* server only */ 304 | ) { 305 | var esModule 306 | var scriptExports = rawScriptExports = rawScriptExports || {} 307 | 308 | // ES6 modules interop 309 | var type = typeof rawScriptExports.default 310 | if (type === 'object' || type === 'function') { 311 | esModule = rawScriptExports 312 | scriptExports = rawScriptExports.default 313 | } 314 | 315 | // Vue.extend constructor export interop 316 | var options = typeof scriptExports === 'function' 317 | ? scriptExports.options 318 | : scriptExports 319 | 320 | // render functions 321 | if (compiledTemplate) { 322 | options.render = compiledTemplate.render 323 | options.staticRenderFns = compiledTemplate.staticRenderFns 324 | } 325 | 326 | // scopedId 327 | if (scopeId) { 328 | options._scopeId = scopeId 329 | } 330 | 331 | var hook 332 | if (moduleIdentifier) { // server build 333 | hook = function (context) { 334 | // 2.3 injection 335 | context = 336 | context || // cached call 337 | (this.$vnode && this.$vnode.ssrContext) || // stateful 338 | (this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext) // functional 339 | // 2.2 with runInNewContext: true 340 | if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') { 341 | context = __VUE_SSR_CONTEXT__ 342 | } 343 | // inject component styles 344 | if (injectStyles) { 345 | injectStyles.call(this, context) 346 | } 347 | // register component module identifier for async chunk inferrence 348 | if (context && context._registeredComponents) { 349 | context._registeredComponents.add(moduleIdentifier) 350 | } 351 | } 352 | // used by ssr in case component is cached and beforeCreate 353 | // never gets called 354 | options._ssrRegister = hook 355 | } else if (injectStyles) { 356 | hook = injectStyles 357 | } 358 | 359 | if (hook) { 360 | var functional = options.functional 361 | var existing = functional 362 | ? options.render 363 | : options.beforeCreate 364 | if (!functional) { 365 | // inject component registration as beforeCreate hook 366 | options.beforeCreate = existing 367 | ? [].concat(existing, hook) 368 | : [hook] 369 | } else { 370 | // register for functioal component in vue file 371 | options.render = function renderWithStyleInjection (h, context) { 372 | hook.call(context) 373 | return existing(h, context) 374 | } 375 | } 376 | } 377 | 378 | return { 379 | esModule: esModule, 380 | exports: scriptExports, 381 | options: options 382 | } 383 | } 384 | 385 | 386 | /***/ }), 387 | /* 5 */ 388 | /***/ (function(module, exports, __webpack_require__) { 389 | 390 | module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h; 391 | return _c('div', { 392 | ref: "container", 393 | staticClass: "ellipsis-plus" 394 | }, [_c('span', { 395 | ref: "txt", 396 | staticClass: "ellipsis-plus-txt" 397 | }, [_vm._v("中")]), _c('span', { 398 | ref: "ellipsis", 399 | staticClass: "ellipsis-plus-ellipsis", 400 | style: ({ 401 | 'display': _vm.show ? 'none' : 'inline-block' 402 | }) 403 | }, [_vm._v(_vm._s(_vm.ellipsis))]), (_vm.showButton) ? _c('button', { 404 | ref: "more", 405 | staticClass: "ellipsis-plus-button", 406 | style: ({ 407 | 'margin-left': (_vm.show ? (_vm.marginLeft + 'px') : _vm.collapseMarginLeft + 'px') 408 | }), 409 | on: { 410 | "click": _vm.handleClick 411 | } 412 | }, [_vm._v(_vm._s(_vm.show ? _vm.collapseText : _vm.expandText))]) : _vm._e()]) 413 | },staticRenderFns: []} 414 | module.exports.render._withStripped = true 415 | if (false) { 416 | module.hot.accept() 417 | if (module.hot.data) { 418 | require("vue-hot-reload-api").rerender("data-v-2393ed58", module.exports) 419 | } 420 | } 421 | 422 | /***/ }) 423 | /******/ ]); 424 | }); --------------------------------------------------------------------------------