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/