vue-ellipsis 正在参加 2020 年度 OSC 中国开源项目评选,请投票支持!
vue-ellipsis 在 2020 年度 OSC 中国开源项目评选 中已获得 {{ projectVoteCount }} 票,请投票支持!
投票让它出道
已投票
授权协议 MIT
开发语言 JavaScript
操作系统 跨平台
软件类型 开源软件
所属分类 Web应用开发Vue 组件
开发厂商
地区 国产
提 交 者 hyjiacan
适用人群 未知
收录时间 2019-11-28

软件简介

基于 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)文本以适应容器宽度, 此时 不会 省略文本
  • 修饰符 startmiddleend 是互斥的,只能指定其中一个
  • 修饰符 alwaysnone 是互斥的,只能指定其中一个,留空时表示在省略时自动设置 title

属性

名称 默认值 描述
data-ellipsis ... Default fill text (ellipsis like text)
data-delay 200 表示处理的延时(毫秒)

组件

属性

名称 类型 默认值 描述
fill String ... 省略时的默认填充串
position String end 省略位置,可选值: startmiddleend
show-title String - 是否显示 title,可选值: alwaysnone
rows Number 1 显示的行数
scale Boolean false 自动缩放(font-size)文本以适应容器宽度, 此时 不会 省略文本
content String end 设置文本内容,此时会忽略槽 default

插槽

名称 描述
default 内容
展开阅读全文

代码

的 Gitee 指数为
超过 的项目

评论 (0)

加载中
更多评论
发表于大前端专区
2019/11/28 14:45

vue-ellipsis,文本省略插件首版发布

vue-ellipsis 是一个Vue插件,用于在Vue环境中自动处理文本省略。 在 CSS 中的 text-overflow: ellipsis 已经不能满足需求时,你可能会需要此插件。 提供以下特性: 支持组件和指令两种调用方式 支持多行显示 支持指定省略位置(开始,中间,结束) 支持指定省略时的占位符 (不用老是使用点点点了) 支持根据容器宽度自动...

1
34
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
发表了博客
2019/06/23 21:29

[Vue] : Vue概述

什么是Vue.js Vue.js 是目前最火的一个前端框架,React是最流行的一个前端框架。 Vue.js 是前端的主流框架之一,和Angular.js、React.js 一起,并成为前端三大主流框架! Vue.js 是一套构建用户界面的框架,只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合。 Vue 核心的概念,就是让用户不再操作DOM元素,...

0
1
11/19 00:00

VUE|Vue实例

欢迎点击「算法与编程之美」↑关注我们! 本文首发于微信公众号:"算法与编程之美",欢迎关注,及时了解更多此系列文章。 欢迎加入团队圈子!与作者面对面!直接点击! 1.创建一个Vue实例 之前初步学习了Vue的安装...

0
0
发表了博客
2018/04/27 14:00

Vue--vue-Router

一.vue路由的基本使用 为什么需要路由? 因为我们通过component切换组件无法给组件传递参数 component切换组件 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" con...

0
1
发表了博客
2019/04/04 11:41

vue -- vue实例

一、vue实例 let app = new Vue({ // 对象属性 ]) 二、对象属性 1、el 就是父DOM 2、data 所有vue上面操作的数据都会被写在这里 3、methods 所有的函数方法都写在这里 methods: { getFun () { console.log(123) } } 4、components 用来注册子组件用 5、props 这个是子元素用来接收父元素传递数据的...

0
2
发表了博客
2018/08/18 17:12

[vue]vue路由篇vue-router

spa单页开发及vue-router基础: https://www.cnblogs.com/iiiiiher/p/9034496.html url两种传参方式 query: $route.query http://localhost:63342/login?name=maotai&age=22 params: $route.params http://localhost:63342/login/maotai/22 引入router组件后, vm里注册router,会在vm实例上新增router属性 基础路由 匹配...

0
0
发表了博客
04/14 13:50

Vue - Vue-CLI2 和 Vue-CLI3、Vue-CLI4的区别

周末在家新建了一个 Vue 测试项目,但不管怎么建,总会提示一些 有的没的,杂七杂八的信息,如:找不到 funding、存在多少漏洞(vulnerabilities) 什么的。如下所示: 寻思着,出现这些问题的原因,应该是一些 不太重要的依赖包 更新了版本 或 迁移了地址,导致之前的 Vue-CLI 找不到 对应的版本 或 依赖包地址了。 虽然暂...

0
0
05/07 17:32

vue开发之vue-cli2与vue-cli3的对比

项目目录结构  可以明显的看出来,vue-cli2.0与3.0在目录结构方面有明显的不同:  1. vue-cli3移除了配置文件目录:config 和 build 文件夹,增加了vue.config.js文件  2. vue-cli3移除了 static 静态文件夹 ...

0
0
发表了博客
2019/05/28 14:35

vue-bluJavascript - Vue - 插件(swiper、vue-preview)

swiper swiper是一个支持滑动效果的js插件,它也支持在vue中使用,主要用于移动端的触摸滑动操作。Swiper中文网。 安装和导入插件 npm i vue-awesome-swiper - S //在main.js中导入swiper import Vue from "vue" import VueAwesomeSwiper from 'vue-awesome-swiper' import "swiper/dist/css/swiper.min.css" Vue.use(Vu...

0
1
发表了博客
2018/08/03 11:44

vue.js 的插件 vue-resource

vue-resource Vue.js是数据驱动的,这使得我们并不需要直接操作DOM,如果我们不需要使用jQuery的DOM选择器,就没有必要引入jQuery。vue-resource是Vue.js的一款插件,它可以通过XMLHttpRequest或JSONP发起请求并处理响应。也就是说,$.ajax能做的事情,vue-resource插件一样也能做到,而且vue-resource的API更为简洁。另...

0
0
发表了博客
08/22 00:00

VUE|Vue实例

欢迎点击「算法与编程之美」↑关注我们! 本文首发于微信公众号:"算法与编程之美",欢迎关注,及时了解更多此系列文章。 欢迎加入团队圈子!与作者面对面!直接点击! 1.创建一个Vue实例 之前初步学习了Vue的安装...

0
0
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
暂无内容
0 评论
19 收藏
分享
返回顶部
顶部