基于 Vue2 的自定义文本省略支持。
安装
yarn add @hyjiacan/vue-ellipsis
or
npm install @hyjiacan/vue-ellipsis
用法
import ellipsis from '@hyjiacan/vue-ellipsis' Vue.use(ellipsis)
你需要通过CSS指定宽度
.ellipsis-style{
width: 200px;
}
.ellipsis-style{
max-width: 200px;
}
或通过 STYLE
<div style="width: 200px"></div> <ellipsis style="width: 200px"></ellipsis>
指令
v-ellipsis 的值表示显示的行数，默认值为 1
修饰符
| 名称 | 描述 |
|---|---|
| start | 使用前置省略模式 |
| middle | 使用中置省略模式 |
| end | 后置省略模式 |
| always | 不论是否被省略，始终显示 title |
| none | 不论是否被省略，始终不不显示 title |
| scale | 自动缩放(font-size)文本以适应容器宽度, 此时 不会 省略文本 |
- 修饰符
start,middle,end是互斥的，只能指定其中一个 - 修饰符
always,none是互斥的，只能指定其中一个，留空时表示在省略时自动设置title
属性
| 名称 | 默认值 | 描述 |
|---|---|---|
| data-ellipsis | ... |
Default fill text (ellipsis like text) |
| data-delay | 200 |
表示处理的延时(毫秒) |
组件
属性
| 名称 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| fill | String | ... |
省略时的默认填充串 |
| position | String | end | 省略位置，可选值: start, middle, end |
| show-title | String | - | 是否显示 title，可选值: always, none |
| rows | Number | 1 |
显示的行数 |
| scale | Boolean | false | 自动缩放(font-size)文本以适应容器宽度, 此时 不会 省略文本 |
| content | String | end | 设置文本内容，此时会忽略槽 default |
插槽
| 名称 | 描述 |
|---|---|
| default | 内容 |
-
在开发过程中经常会遇到以下需求： 超过父元素以后，内部文字显示省略号并且鼠标移上去出现弹窗，在父元素宽度内则不需要省略号且移上去不需要弹窗。 针对这个问题，本人写了基于vue的vue-directive-ellipsis插件，可以使用指令一句话解决这类问题 github地址：https://github.com/bmsherry/v-ellipsis 用法： 1.首先安装 npm i vue-di
-
vue 文本省略号 省略号 (vue-ellipsis) Customize ellipsis-like support for Vue2. 自定义对Vue2的类似省略号的支持。 View Demo 查看演示 View Github 查看Github 安装 (Install) yarn add @hyjiacan/vue-ellipsis or 要么 npm install @hyjiacan/v
-
** 近期想换一套ui框架，就选择了an design vue,但是发现table组件本身没有像element ui一样集成了列可以伸缩，看到官网提供了一个插件vue-draggable-resizable，我按照官网的例子copy了一下，遇到各种问题 1、我的colums数据没有写width 2、我有的列如操作列没有设置dataIndex 、key 3、我表格使用了复选框后一直报错Cannot
-
vue手把手带你创建聊天室（vue-native-websocket） 谓套接字(Socket)，就是对网络中不同主机上的应用进程之间进行双向通信的端点的抽象。一个套接字就是网络上进程通信的一端，提供了应用层进程利用网络协议交换数据的机制。从所处的地位来讲，套接字上联应用进程，下联网络协议栈，是应用程序通过网络协议进行通信的接口，是应用程序与网络协议根进行交互的接口 [1] 。 正文开始： soc
-
列表文章布局-Cell 单元格组件- Cell 单元格组件：https://youzan.github.io/vant/#/zh-CN/cell 结构：src/views/home/index.vue 放在van-cell标签内容盒子里 三张图 <div class="article_item"> <h3 class="van-ellipsis">PullRefresh下拉刷新PullRefr
-
安装vue-seamless-scroll npm install vue-seamless-scroll --save 引入 1.main.js中全局引入 import scroll from 'vue-seamless-scroll' Vue.use(scroll) 2.局部引入 <script> import vueSeamless from 'vue-seamless-scroll
-
一、安装 npm install vue-super-flow 二、引入 <template> <super-flow></super-flow> </template> <script > import SuperFlow from 'vue-super-flow' import 'vue-super-flow/lib/index.css' export default {
-
<template> <div class="boxYj"> <div class="earlyWarnin"> <div class="topImg"> <img src="../../assets/images/yj.png" alt=""> </div> <div class="IconFont"> <img s
-
<template> <div class="boxYj"> <div class="earlyWarnin"> <div class="topImg"> <img src="../../assets/images/yj.png" alt=""> </div> <div class="IconFont"> <img s
-
我有一个带有display flex的容器，其中包含2个项目。这两个项都有文本省略号以支持长文本。我想在项目之间设置一些优先级，以便根据需要将项目1作为匹配位置，为项目2保留一些固定空间。这意味着，如果容器的宽度是200px，那么第2项的最小尺寸是50px，我希望第1项达到150px（然后是文本省略号）。最好的方法是什么？ JSFIDLE
-
为什么忽略我的注释继承器。aj文件？我的配置有问题吗？ 我想建议与自定义注释： Spring数据JPA使用接口，Java注释永远不会从接口继承到子类（由于JVM限制）。为了使我的建议适用于自定义注释，有一个小的AspectJ技巧。因此，如前面的引用中所述，我创建了 文件： 并将以下配置添加到我的
-
问题内容： 我有一条路径列表（由于缺少更好的词，也许面包屑痕迹可以更好地描述它们）。有些值太长而无法在其父项中显示，因此我正在使用。问题在于重要信息在右侧，因此我希望省略号出现在左侧。像这样的ASCII艺术： 请注意，第一行足够短，因此仍保持左对齐，而其他两行又太长，因此省略号出现在左侧。 我更喜欢仅CSS的解决方案，但是如果无法避免，JS很好。如果该解决方案仅适用于Firefox和Chrome，
-
设置日程表的week numbers（就是当前第几周）那一栏的标题，值为字符串类型，默认“W”。 在月视图将显示在week numbers列的头部，周视图显示在左上角。具体看图： 官方英文文档：http://arshaw.com/fullcalendar/docs/text/weekNumberTitle/
-
设置一周中每天的名称缩写，值为数组类型，默认： ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'] 官方英文文档：http://arshaw.com/fullcalendar/docs/text/dayNamesShort/
-
设置一周中每天的名称，值为数组类型，默认： ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'] 官方英文文档：http://arshaw.com/fullcalendar/docs/text/dayNames/