共计 1646 个字符,预计需要花费 5 分钟才能阅读完成。
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 组件图标不居中的问题。
更新办法
1. 批改 package.json
中 view-ui-plus
版本号:
"dependencies": {"view-ui-plus": "^1.2.0"}
2. 运行 npm update view-ui-plus
。
内容简介
Image 图片组件
图片组件能够不便地对一张图进行各种排版,应用 fit
属性设置图片各种缩放成果,width
和 height
能够设置图片的宽高,src
指定图片地址,比方:
<Image
src="https://file.iviewui.com/images/image-demo-11.jpg"
fit="contain"
width="100px"
height="100px"
/>
设置属性 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
:
<Paragraph copyable> 这是一段能够被复制的文本 </Paragraph>
也反对间接在以后段落上 编辑并保留 ,只需开启 editable
属性:
编辑反对从 默认 slot
读取,或间接通过 v-model
双向绑定数据:
<template>
<Paragraph editable @on-edit-end="handleSave1">{{content1}}</Paragraph>
<Paragraph v-model="content2" editable />
</template>
<script>
export default {data () {
return {
content1: '能够间接编辑并保留的文本',
content2: '也反对 v-model 疾速绑定'
}
},
methods: {handleSave1 (content) {this.content1 = content;}
}
}
</script>
对于长篇段落,还能够开启属性 ellipsis
进行省略,并以 Tooltip
的模式显示残缺内容:
更多残缺内容,请到 View Design 官网查看:https://www.iviewui.com/