关于vue.js:View-UI-Plus-发布-120-版本新增-ImageSkeletonTypography-组件

3次阅读

共计 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。

图片组件能够不便地对一张图进行各种排版，应用 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

图片预览能够在 Image 组件上开启属性 preview 应用，或间接独自应用 ImagePreview 图像预览组件：

图片预览须要指定一组图片地址 preview-list 和默认显示第几张图 initial-index。

图片预览反对放大、放大、旋转、1:1 看原图、 前后切换 等性能，同时也反对键盘来操作。

在线体验地址：https://run.iviewui.com/T2V78Fay

骨架屏组件用于在须要期待加载数据的地位提供一个占位组合。

根底成果，蕴含头像、题目、段落

骨架屏也能够自定义配置，比方长度、高度、形态、动画、排版等

展现题目、段落、列表等内容，罕用于文章、文档的排版。

反对常见的辅助性能，如拷贝、可编辑、省略等。

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 的模式显示残缺内容：