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/