一、簡介

Mint UI是一個基于Vue.js的移動端組件庫

Mint UI和Bootstrap不一樣 Bootstrap并不是一個真正的組件庫 而是類似于代碼片段

而Mint-UI是真正的組件庫 是使用 Vue 技術封裝的成套組件 可無縫和VUE項目進行集成開發 且只適用于Vue項目

二、使用

1.x版本的Vue安裝時需指定Mint UI的版本

Vue 2.0npm install mint-ui -S

Mint UI的引入方式分為兩種：可引入全部組件 使用會較為方便 但占用內存較大還可按需引入部分的組件 節省占用的內存

/ 引入全部組件import Vue from &39;;import Mint from &39;;Vue.use(Mint);// 按需引入部分組件import { 組件名 } from &39;;Vue.component(組件名);Vue.component(組件名.name，組件名);

Mint UI的組件分為兩種：CSS組件 和 JS組件

1、CSS組件 - 以Button為例

CSS組件有很多 按鈕(button)只是其中之一CSS組件的特點是只要全局引入了Mint UI的組件 即可在頁面中以標簽的形式直接使用

main.js：

/ 導入Mint UI所有組件import MintUI from &34;// 導入Mint UI的樣式(前面可省略node_modules目錄)import &34;// 手動安裝Mint UI到Vue中Vue.use(MintUI)

App.vue：按鈕組件的默認標簽名為

企業回蘇州艾爾頓自動化科技有限公司主營產品： 熱壓機，焊錫機，塑料熱熔機，塑料鉚接機，自動鎖螺絲機，專業制作塑料鉚接頭，焊接熱壓頭；輔助治具，以及其他非標設備等。本公司生產的設備具有精度高，效率高，穩定性高，使用方便，壽命長等優點，自。

用type屬性改變按鈕的顏色：

用type屬性改變按鈕的顏色：

mintui文檔，defaultprimarydanger

用size屬性改變按鈕的大小：

用disabled屬性禁用按鈕：

disabled

用plain屬性設為幽靈按鈕：(即顏色和外面的相反 只有邊框顏色 里面是空白的)

plain

（1） 在你的vue文件里面引入這個組件??? ?import?{?MessageBox,?Popup,?Button?}?from?"mint-ui";?? ? 其他兩個是其他的組。

用icon屬性設置按鈕的圖標：

用src屬性設置自定義圖標：

自定義圖標用**.native**綁定點擊事件：

用**.native**綁定點擊事件：

點擊觸發

2、JS組件 - 以Toast為例

JS組件也有很多 彈出框(Toast)只是其中之一JS組件的特點是需要在

瀏覽器地址欄輸入 data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAoHBwgHBgoICAgLCgoLDhgQDg0NDh0VFhEYIx8lJCIfIiEmKzcvJik0KSEiMEExNDk7Pj4+JS5ESUM8SDc9Pjv/2wBDAQoLCw4NDhwQEBw7KCIoOzs7Ozs7Ozs7Ozs7Ozs7O。

在調用Toast時 可傳入一個對象 以配置更多選項：

可用iconClass屬性設置在Toast的文字上方顯示一個圖標：將圖標的類名作為iconClass的值傳給Toast

Toast({ message: &39;， iconClass: &39; // 圖標的類名});

可用className屬性設置圖標的樣式：傳入一個類的類名(class) 即可實現該類的樣式app.css：

.mytoast{color:aqua;}

main.js：

/ 導入bootstrap樣式import &34;// 導入自定義的css樣式import &34;

App.vue：

基于mintui的picker和popup方法，自定義了一個多級聯動，我覺得還有可以優化的點，但是應該可以勉強食用了，當前我用于省市區三級聯動切換。引入，注冊，渲染三連。提供一下我使用的方法，視情況自定義，僅供參考。以下為注冊的。

還可用子類選擇器設置只修改圖標的樣式：在Toast里 有個i標簽用于承載圖標 因此修改 i 標簽的樣式即可

.mytoast i{color:aqua;}