vue 文本省略号_自定义对Vue2的省略号支持

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/vue-ellipsis

用法 (Usage)

import ellipsis from '@hyjiacan/vue-ellipsis'
Vue.use(ellipsis)

or

要么

import {ellipsisDirective, ellipsisComponent} from '@hyjiacan/vue-ellipsis'
Vue.directive(ellipsisDirective.name, ellipsisDirective)
Vue.component(ellipsisComponent.name, ellipsisComponent)

You should specify the width via CSS.

您应该通过CSS指定宽度。

.ellipsis-style{
    width: 200px;
}
.ellipsis-style{
    max-width: 200px;
}

or STYLE

或STYLE

<div style="width: 200px"></div>
<ellipsis style="width: 200px"></ellipsis>

指示 (Directive)

• The value of directive v-ellipsis is the rows, default value: 1

  指令v-ellipsis的值是行，默认值： 1

修饰符 (Modifiers)

name	description
start	Show ellipsis as prefix
middle	Show ellipsis in the middle
end	Show ellipsis as suffix
always	ALWAYS show title while text overflow
none	DO NOT show title while text overflow
scale	Auto scale (font-size) text to fit container width, WON'T ellipsis

名称	描述
开始	显示省略号作为前缀
中间	在中间显示省略号
结束	显示省略号作为后缀
总是	文本溢出时始终显示标题
没有	文字溢出时不显示标题
规模	自动缩放( font-size )文本以适合容器宽度， 不会省略

• Modifiers start, middle, end are mutex, you should specify only one of them (default: end).

  修饰符start ， middle ， end是互斥体，您只能指定其中一个(默认值： end )。

• Modifiers always, none are mutex, you should specify only one of them,

  修饰符always ， none是互斥体，您只能指定其中之一，

  
  or leave it empty(Set
  或将其留空(设置

  title when there is an ellipsis).

  省略号时的title )。

属性 (Attributes)

name	default	description
data-ellipsis	...	Default fill text (ellipsis like text)
data-delay	200	the delay(milliseconds) for making ellipsis

名称	默认	描述
数据省略号	...	默认填充文本(像文本一样的省略号)
数据延迟	200	省略号的延迟(毫秒)

零件 (Component)

道具 (Props)

name	type	default	description
fill	String	...	Default fill text (ellipsis like text)
position	String	end	Ellipsis position, options: start, middle, end
show-title	String	-	options: always, none
rows	Number	1	Number of rows
scale	Boolean	false	Auto scale (font-size) text to fit container width, DO NOT ellipsis
content	String	end	The content, makes the slot default ignored

名称	类型	默认	描述
填	串	...	默认填充文本(像文本一样的省略号)
位置	串	结束	省略号位置，选项： start ， middle ， end
显示标题	串	--	选项： always ， none
行数	数	1	行数
规模	布尔型	假	自动缩放( font-size )文本以适合容器的宽度， 请勿省略
内容	串	结束	内容，使广告位default被忽略

插槽 (Slots)

name	description
default	The content

名称	描述
默认	内容

常问问题 (FAQ)

1. Q: I have an element with padding by percentage, got unexpected display ?

   问：我有一个按百分比填充的元素，显示是否意外？

   
   A: Padding by percentage is not supported for now.
   答：目前不支持按百分比填充。

翻译自: https://vuejsexamples.com/customize-ellipsis-like-support-for-vue2/

vue 文本省略号