介紹

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

Github

<code>http://github.com/ydcss/vue-ydui/<code>

相關特性

• 提供兩種樣式單位（rem 和 px）版本；
• 高質量、功能豐富；
• 友好的 API ，自由靈活地使用空間；
• 細緻、漂亮的 UI；
• 使用單文件的 Vue 組件化開發模式；
• 基於 npm + webpack + babel 開發，支持 ES2015；
• 真正意義上的按需加載組件，可以只加載聲明過的組件及其樣式文件，無需再糾結文件體積過大。

一圖預覽所有組件

安裝使用

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

<code>npm install vue-ydui --save/<code>

當然你也可以直接引入相關的js文件，以下是在Vue的項目中全局引入的方法：

<code>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)
});/<code>

組件截圖

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

• 按鈕

常用按鈕樣式組件，提供2種尺寸，5種狀態顏色和2種形狀，支持自定義顏色。

• 表單

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

• 角標

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

• 頭部、底部導航

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

• 佈局

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

• 時間軸

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

• 步驟條

• 提示框

• 輪播圖

• 進度條

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

• 上拉菜單

• 安全鍵盤

• 城市選擇器

• 圖片預覽

• 搜索框

閱讀更多 最美分享Coder 的文章

關鍵字: 微信 移動 角標