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/