View|View UI Plus 发布 1.2.0 版本,新增 Image、Skeleton、Typography 组件
View UI Plus 1.2.0 版本已于 2022-06-13 发布。
更新日志
请到官网 www.iviewui.com 查看最新版。
- 新增排版组件
Typography
,内置丰富的内容排版 UI,支持拷贝、可编辑、省略等功能。Typography 共包含 5 个组件:
- Typography 内容结构
- Title 标题
- Paragraph 段落
- Text 行内文本
- Link 链接
- 新增骨架屏组件
Skeleton
。 - 新增图片组件
Image
。包含两个组件:
- Image 图片
- ImagePreview 图片预览
- 修复部分 CSS 在部分环境下出错的问题。
- 修复 Row 组件 types 错误的问题。
- 修复 Alert 组件图标不居中的问题。
package.json
中 view-ui-plus
版本号: "dependencies": {
"view-ui-plus": "^1.2.0"
}
2.运行
npm update view-ui-plus
。内容简介 Image 图片组件
图片组件可以方便地对一张图进行各种排版,使用
fit
属性设置图片各种缩放效果,width
和 height
可以设置图片的宽高,src
指定图片地址,比如:文章图片
设置属性
lazy
可以对图片进行懒加载,默认会自动寻找最近一个 overflow 值为 auto 或 scroll 的父元素。当滚动到图片可见区域时,才会加载该图片。当然,也可以设置属性 scroll-container
来指定容器。可以到这里在线体验图片懒加载:
https://run.iviewui.com/HoVFMqS7
除此之外,图片组件还可以自定义加载中提示、加载失败提示等常用属性。具体可以查看 文档 API
ImagePreview 图片预览组件
图片预览可以在
Image
组件上开启属性 preview
使用,或直接单独使用 ImagePreview
图像预览组件:文章图片
图片预览需要指定一组图片地址
preview-list
和默认显示第几张图 initial-index
。图片预览支持放大、缩小、旋转、1:1看原图、前后切换等功能,同时也支持键盘来操作。
在线体验地址:https://run.iviewui.com/T2V78Fay
Skeleton 骨架屏组件
骨架屏组件用于在需要等待加载数据的位置提供一个占位组合。
基础效果,包含头像、标题、段落
文章图片
骨架屏也可以自定义配置,比如长度、高度、形状、动画、排版等
文章图片
Typography 排版组件
展示标题、段落、列表等内容,常用于文章、文档的排版。
支持常见的辅助功能,如拷贝、可编辑、省略等。
文章图片
Typography 的每个组件,都可以开启拷贝功能,只需要一个参数
copyable
:文章图片
这是一段可以被复制的文本
也支持直接在当前段落上编辑并保存,只需开启
editable
属性:文章图片
编辑支持从
默认 slot
读取,或直接通过 v-model
双向绑定数据:{{ content1 }}
对于长篇段落,还可以开启属性
ellipsis
进行省略,并以 Tooltip
的形式显示完整内容:【View|View UI Plus 发布 1.2.0 版本,新增 Image、Skeleton、Typography 组件】
文章图片
更多完整内容,请到 View Design 官网查看:https://www.iviewui.com/
推荐阅读
- javaweb|mybatis-plus批量逻辑删除,并填充字段
- Spring|mybatis-plus的删除操作
- IOS常见问题|iphone屏幕参数iphone3GS~Iphone6 plus
- [Druid-1.2.9_preview_01源码系列]-4-DruidDataSource初始化时的神操作之自动解析DbType与驱动类
- 前端|新提案,初识CSS的object-view-box属性
- XMeter Newsletter 2022-05|企业版 v4.0.0 发布,基于 K8s 部署测试机资源
- DynamicTp v1.0.7版本发布。还在为Dubbo线程池耗尽烦恼吗(还在为Mq消费积压烦恼吗?)
- 90天Java---mybatis与mybatis plus-1
- Harbor 2.5.1新版发布,赶紧升级尝尝鲜
- NanoMQ Newsletter 2022-05|v0.8.0 发布,新增 WebHook 拓展接口和连接认证 API