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/