View UI Plus 发布 1.2.0 版本，新增 Image、Skeleton、Typogra

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/