介紹

Vue-ydui是一個專為移動端打造的UI庫，在追求完美視覺體驗的同時也保證了其效能高效，從官方的文件介紹中來看，這是一個情懷作品，目前只有一個人維護，Vue-ydui 是 YDUI Touch 的一個Vue2.x實現版本（目前最後的更新是在2018年底，不過還是具有很大借鑑意義的）：

Githubhttp://github.com/ydcss/vue-ydui相關特性提供兩種樣式單位（rem 和 px）版本；高品質、功能豐富；友好的 API ，自由靈活地使用空間；細緻、漂亮的 UI；使用單檔案的 Vue 元件化開發模式；基於 npm + webpack + babel 開發，支援 ES2015；真正意義上的按需載入元件，可以只加載宣告過的元件及其樣式檔案，無需再糾結檔案體積過大。一圖預覽所有元件安裝使用

在大多數情況下我們都是使用npm包管理進行安裝使用：

npm install vue-ydui --save

當然你也可以直接引入相關的js檔案，以下是在Vue的專案中全域性引入的方法：

import Vue from 'vue';import YDUI from 'vue-ydui'; /* 相當於import YDUI from 'vue-ydui/ydui.rem.js' */import 'vue-ydui/dist/ydui.rem.css';/* 使用px：import 'vue-ydui/dist/ydui.px.css'; */Vue.use(YDUI);new Vue({ el: '#app', render: h => h(App)});元件截圖

下面擷取部分元件的截圖，讓小夥伴們有一個簡單的了解

表單

列表檢視，webapp 上最常用的內容結構，採用flex佈局，適應各類結構；

角標

角標提供2種形狀和5種狀態顏色樣式；支援自定義顏色；

頭部、底部導航

移動端常見固定於頂部、底部的導航條

佈局

移動端常見頁面結構，通常包含 頁頭，主體內容 和 頁尾，顯示如下：

時間軸

移動端常見顯示各時間節點流程的垂直軸線

步驟條提示框輪播圖進度條

進度條外掛（圈形進度條和線形進度條），採用SVG方式實現，寬高佔滿父級容器。

上拉選單安全鍵盤城市選擇器圖片預覽搜尋框