likes
comments
collection
share

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

作者站长头像
站长
· 阅读数 277

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.jsonview-ui-plus 版本号:

 "dependencies": {
    "view-ui-plus": "^1.2.0"
 }

2.运行 npm update view-ui-plus

内容简介

Image 图片组件

图片组件可以方便地对一张图进行各种排版,使用 fit 属性设置图片各种缩放效果,widthheight 可以设置图片的宽高,src 指定图片地址,比如:

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

<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 图像预览组件:

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

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

图片预览支持放大缩小旋转1:1看原图前后切换等功能,同时也支持键盘来操作。

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

Skeleton 骨架屏组件

骨架屏组件用于在需要等待加载数据的位置提供一个占位组合。

基础效果,包含头像、标题、段落

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

骨架屏也可以自定义配置,比如长度、高度、形状、动画、排版等

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

Typography 排版组件

展示标题、段落、列表等内容,常用于文章、文档的排版。

支持常见的辅助功能,如拷贝、可编辑、省略等。

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

Typography 的每个组件,都可以开启拷贝功能,只需要一个参数 copyableView UI Plus 发布 1.2.0 版本,新增 Image、Skeleton、Typogra

<Paragraph copyable>这是一段可以被复制的文本</Paragraph>

也支持直接在当前段落上编辑并保存,只需开启 editable 属性:View UI Plus 发布 1.2.0 版本,新增 Image、Skeleton、Typogra编辑支持从默认 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 UI Plus 发布 1.2.0 版本,新增 Image、Skeleton、Typogra

更多完整内容,请到 View Design 官网查看:https://www.iviewui.com/