View UI Plus 发布 1.3.0 版本,新增 Space、$ImagePreview 组件

View UI Plus 1.3.0 版本已于 2022-06-21 发布。

更新日志

请到官网 www.iviewui.com 查看最新版。

  • 新增间距组件 Space。
  • ImagePreview 新增下载图片功能。
  • ImagePreview 新增属性 toolbar,可选择开启的快捷功能并排序。
  • 图片预览支持 $ImagePreview 实例化调用。
  • ImagePreview 新增拖拽手势样式。
  • Skeleton 默认样式,增加最后一个段落效果。
  • Result 属性 type 新增 warning。
  • 优化大量文档示例。
  • 修复 Select 远程搜索的问题。
  • 修复 ImagePreview 点击控制条关闭预览的问题。
  • 修复 Layout 样式问题。
  • 修复部分组件 types 错误的问题。

更新方法

1.修改 package.jsonview-ui-plus 版本号:

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

2.运行 npm update view-ui-plus

内容简介

Space 间距组件

间距组件可以很方便地设置相邻组件之间的统一间距。比如下面的场景,在没有使用 Space 间距组件时的效果是:

<Button>在线预览Button>
<Button>购买授权Button>
<Button>申请演示Button>

PC端:
View UI Plus 发布 1.3.0 版本,新增 Space、$ImagePreview 组件_第1张图片

移动端:
View UI Plus 发布 1.3.0 版本,新增 Space、$ImagePreview 组件_第2张图片

使用 Space 组件:

<Space wrap>
  <Button>在线预览Button>
  <Button>购买授权Button>
  <Button>申请演示Button>
Space>

PC端:
View UI Plus 发布 1.3.0 版本,新增 Space、$ImagePreview 组件_第3张图片

移动端:
View UI Plus 发布 1.3.0 版本,新增 Space、$ImagePreview 组件_第4张图片

Space 组件也支持 垂直方向 的排列:

<Space wrap direction="vertical">
  <Button>在线预览Button>
  <Button>购买授权Button>
  <Button>申请演示Button>
Space>

View UI Plus 发布 1.3.0 版本,新增 Space、$ImagePreview 组件_第5张图片

还支持各种对齐方式:

View UI Plus 发布 1.3.0 版本,新增 Space、$ImagePreview 组件_第6张图片

$ImagePreview 实例化的图片预览组件

1.2.0 版本中,新增了图片预览组件 ImagePreview。在 1.3.0 中,除了传统的 标签调用方式,现在也支持 JS 实例化调用:

methods: {
  showImage () {
    this.$ImagePreview.show({
      previewList: [...]
    })
  }
}

另外,ImagePreview 也新增了 下载图片 功能:
View UI Plus 发布 1.3.0 版本,新增 Space、$ImagePreview 组件_第7张图片

图片预览也新增了属性 toolbar 来选择显示哪些快捷功能,并支持排序,具体可以查看文档 API。

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

你可能感兴趣的:(前端,vue.js,ui,javascript)