View UI Plus 釋出 1.3.0 版本，新增 Space、$ImagePreview 元件

Aresn發表於2022-06-21
ViewUI元件

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.json 中 view-ui-plus 版本號：

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

2.執行 npm update view-ui-plus。

內容簡介

Space 間距元件

間距元件可以很方便地設定相鄰元件之間的統一間距。比如下面的場景，在沒有使用 Space 間距元件時的效果是：

<Button>線上預覽</Button>
<Button>購買授權</Button>
<Button>申請演示</Button>

PC端：

移動端：

使用 Space 元件：

<Space wrap>
  <Button>線上預覽</Button>
  <Button>購買授權</Button>
  <Button>申請演示</Button>
</Space>

PC端：

移動端：

Space 元件也支援 垂直方向 的排列：

<Space wrap direction="vertical">
  <Button>線上預覽</Button>
  <Button>購買授權</Button>
  <Button>申請演示</Button>
</Space>

還支援各種對齊方式：

$ImagePreview 例項化的圖片預覽元件

在 1.2.0 版本中，新增了圖片預覽元件 ImagePreview。在 1.3.0 中，除了傳統的 <ImagePreview /> 標籤呼叫方式，現在也支援 JS 例項化呼叫：

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

另外，ImagePreview 也新增了 下載圖片 功能：

圖片預覽也新增了屬性 toolbar 來選擇顯示哪些快捷功能，並支援排序，具體可以檢視文件 API。

更多完整內容，請到 View Design 官網檢視：https://www.iviewui.com/

相關文章