2. 程式人生 > >vue mint ui

vue mint ui

阿新 • • 發佈：2019-02-10

npm 安裝

推薦使用 npm 的方式安裝，它能更好地和 webpack 打包工具配合使用。

npm i mint-ui -S

CDN

目前可以通過 unpkg.com/mint-ui 獲取到最新版本的資源，在頁面上引入 js 和 css 檔案即可開始使用。

<!-- 引入樣式 --><link rel="stylesheet" href="https://unpkg.com/mint-ui/lib/style.css"><!-- 引入元件庫 --><script src="https://unpkg.com/mint-ui/lib/index.js"></script>

Hello world

通過 CDN 的方式我們可以很容易地使用 Mint UI 寫出一個 Hello world 頁面。

<!DOCTYPE html><html><head>
  <meta charset="UTF-8">
  <!-- 引入樣式 -->
  <link rel="stylesheet" href="https://unpkg.com/mint-ui/lib/style.css"></head><body>
  <div id="app">
    <mt-button @click.native
 
="handleClick">按鈕</mt-button>
  </div></body>
  <!-- 先引入 Vue -->
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <!-- 引入元件庫 -->
  <script src="https://unpkg.com/mint-ui/lib/index.js"></script>
  <script>
    new Vue({
      el: '#app',
      methods: {
        handleClick: function
 
() {
          this.$toast('Hello world!')
        }
      }
    })
  </script></html>

如果是通過 npm 安裝，並希望配合 webpack 使用，請閱讀下一節：快速上手。

關於事件繫結

在 Vue 2.0 中，為自定義元件繫結原生事件必須使用 .native 修飾符：

<my-component @click.native="handleClick">Click Me</my-component>

從易用性的角度出發，我們對 Button 元件進行了處理，使它可以監聽 click 事件：

<mt-button @click="handleButtonClick">Click Me</mt-button>
但是對於其他元件，還是需要新增 .native 修飾符。

快速上手

本節將介紹如何在專案中使用 Mint UI。

使用 vue-cli

npm install -g vue-cli

vue init webpack projectname

引入 Mint UI

你可以引入整個 Mint UI，或是根據需要僅引入部分元件。我們先介紹如何引入完整的 Mint UI。

完整引入

在 main.js 中寫入以下內容：

import Vue from 'vue'import MintUI from 'mint-ui'import 'mint-ui/lib/style.css'import App from './App.vue'

Vue.use(MintUI)

new Vue({
  el: '#app',
  components: { App }
})

以上程式碼便完成了 Mint UI 的引入。需要注意的是，樣式檔案需要單獨引入。

按需引入

首先，安裝 babel-plugin-component：

npm install babel-plugin-component -D

然後，將 .babelrc 修改為：

{
  "presets": [
    ["es2015", { "modules": false }]
  ],
  "plugins": [["component", [
    {
      "libraryName": "mint-ui",
      "style": true
    }
  ]]]
}

如果你只希望引入部分元件，比如 Button 和 Cell，那麼需要在 main.js 中寫入以下內容：

import Vue from 'vue'import { Button, Cell } from 'mint-ui'import App from './App.vue'

Vue.component(Button.name, Button)
Vue.component(Cell.name, Cell)
/* 或寫為
 * Vue.use(Button)
 * Vue.use(Cell)
 */

new Vue({
  el: '#app',
  components: { App }
})

開始使用

至此，一個基於 Vue 和 Mint UI 的開發環境已經搭建完畢，現在就可以編寫程式碼了。啟動開發模式：

npm run dev

編譯：

npm run build
各個元件的使用方法請參閱它們各自的文件。

Toast

簡短的訊息提示框，支援自定義位置、持續時間和樣式。

引入

import { Toast } from 'mint-ui';

例子

基本用法

Toast('提示資訊');

在呼叫 Toast 時傳入一個物件即可配置更多選項

Toast({
  message: '提示',
  position: 'bottom',
  duration: 5000
});

若需在文字上方顯示一個 icon 圖示，可以將圖示的類名作為 iconClass 的值傳給 Toast（圖示需自行準備）

Toast({
  message: '操作成功',
  iconClass: 'icon icon-success'
});

執行 Toast 方法會返回一個 Toast 例項，每個例項都有 close 方法，用於手動關閉 Toast

let instance = Toast('提示資訊');
setTimeout(() => {
  instance.close();
}, 2000);

API

引數說明型別可選值預設值
message文字內容String
positionToast 的位置String'top'
'bottom'
'middle'		'middle'
duration持續時間（毫秒），若為 -1 則不會自動關閉Number3000
classNameToast 的類名。可以為其新增樣式String
iconClassicon 圖示的類名String

下拉/上拉重新整理，支援自定義 HTML 模板。

引入

import { Loadmore } from 'mint-ui';

Vue.component(Loadmore.name, Loadmore);

例子

<mt-loadmore :top-method="loadTop" :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" ref="loadmore">
  <ul>
    <li v-for="item in list">{{ item }}</li>
  </ul></mt-loadmore>

以列表頂部的下拉重新整理為例：按住列表，下拉一定距離（通過 topDistance 配置）後釋放，被指定為 top-method 的方法就會執行

loadTop() {
  ...// 載入更多資料
  this.$refs.loadmore.onTopLoaded();
}

注意在這個方法的最後需要手動呼叫 loadmore 的 onTopLoaded 事件。這是因為在載入資料後需要對元件進行一些重新定位的操作。

列表底部的上拉重新整理與之類似

loadBottom() {
  ...// 載入更多資料
  this.allLoaded = true;// 若資料已全部獲取完畢
  this.$refs.loadmore.onBottomLoaded();
}

唯一的區別是，當底部資料全部獲取完畢時，可以將繫結到元件 bottom-all-loaded 屬性的變數賦值為 true，這樣 bottom-method 就不會再次執行了。

手指在螢幕上滑動的距離與元件實際移動的距離比值可以通過 distance-index 引數配置，預設值為 2。

自定義 HTML 模板

可以為列表頂部和底部的載入提示區域提供自定義的 HTML 模板

<template>
  <mt-loadmore :top-method="loadTop" @top-status-change="handleTopChange">
    <ul>
      <li v-for="item in list">{{ item }}</li>
    </ul>
    <div slot="top" class="mint-loadmore-top">
      <span v-show="topStatus !== 'loading'" :class="{ 'rotate': topStatus === 'drop' }">↓</span>
      <span v-show="topStatus === 'loading'">Loading...</span>
    </div>
  </mt-loadmore></template><script>
  export default {
    data() {
      return {
        topStatus: '',
        // ...
      };
    },
    methods: {
      handleTopChange(status) {
        this.topStatus = status;
      },
      // ...
    },
    // ...
  };
</script>

比如需要配置列表頂部的 HTML，則需要為自定義 HTML 模板的最外層標籤設定 slot 屬性為 top，類名為 mint-loadmore-top。當用戶滑動元件時，元件會有以下幾個狀態：

  • pull：元件已經被按下，但按下的距離未達到 topDistance，此時釋放不會觸發 top-method，列表會回到初始位置
  • drop：按下的距離不小於 topDistance，此時釋放會觸發 top-method
  • loading：元件已被釋放，top-method 正在執行 每當元件的狀態發生變化時，loadmore 都會觸發 top-status-change 方法，引數為元件目前的狀態。因此可以像本例一樣，使用一個 handleTopChange 方法來處理元件狀態的變化。

配置載入提示區域的文字

在不使用自定義 HTML 模板的情況下，可以配置 loadmore 本身自帶的載入提示區域的文字。以列表頂部為例，對應於 status 的三個狀態，可配置的屬性依次為 topPullText、topDropText 和 topLoadingText。與之對應的底部屬性為 bottomPullText、bottomDropText 和 bottomLoadingText。

自動檢測

loadmore 在初始化時會自動檢測它的高度是否能夠撐滿其容器，如果不能則會呼叫 bottom-method，直到撐滿容器為止。如果不希望使用這一機制，可以將 auto-fill 設為 false。

API

引數說明型別可選值預設值
autoFill若為真，loadmore 會自動檢測並撐滿其容器Booleantrue
distanceIndex手指移動與元件移動距離的比值Number2
maxDistance元件可移動的最大距離（畫素），若為 0 則不限制Number0
topPullTexttopStatus 為 pull 時載入提示區域的文字String'下拉重新整理'
topDropTexttopStatus 為 drop 時載入提示區域的文字String'釋放更新'
topLoadingTexttopStatus 為 loading 時載入提示區域的文字String'載入中...'
topDistance觸發 topMethod 的下拉距離閾值（畫素）Number70
topMethod下拉重新整理執行的方法Function
bottomPullTextbottomStatus 為 pull 時載入提示區域的文字String'上拉重新整理'
bottomDropTextbottomStatus 為 drop 時載入提示區域的文字String'釋放更新'
bottomLoadingTextbottomStatus 為 loading 時載入提示區域的文字String'載入中...'
bottomDistance觸發 bottomMethod 的上拉距離閾值（畫素）Number70
bottomMethod上拉重新整理執行的方法Function
bottomAllLoaded若為真，則 bottomMethod 不會被再次觸發Booleanfalse

相關推薦

Cordova+Vue+Mint-UI+Android構建Andriod app開發環境

概要 軟體安裝清單:Node.js,Java JDK，gradle，apache-ant，Android Studio 步驟一：安裝Java SDK 配置環境變數： JAVA_HOME：C:\Program Files (x86)\Java\jdk1.8.0_91 CLASSPA

Vue + Mint-ui 封裝滾輪選擇器

Mint-ui 是個非常不錯的 UI 框架，提供了很多元件。 但在專案中實際使用的時候，還需要將幾個元件組合起來使用。 比如要實現 App 中常見的滾輪選擇器，需要將 Popup 和 Picker 組合起來，並根據專案的 UI 效果做一定的定製。 下面將用 P

使用vue-mint-ui 上拉載入，下拉重新整理效果

剛開始進入公司，搞得是vue開發的微信公眾號，花了好幾天做了一個這個效果，自己都笑哭了。做了這麼長時間。 <!-- <div class="dataSet" v-for="(item,index) in bulletinList" :

vue+mint-ui 下拉元件loadmore踩坑

mint-ui是vue開發中常用的元件庫，而loadmore 通常用於處理下拉載入與上拉載入 坑1、頁面渲染完，loadmore設定的上拉/下拉執行兩次 產生原因：loadmore設定中的auto-fill需要設定為false 實現程式碼如下： <load-mor

vue mint-ui 上拉載入，下拉重新整理

1.html部分 <div class="detail" ref="wrapper"> <mt-loadmore :top-method="loadTop" :bottom-method="loadBottom" @bottom-status-chan

vue mint-ui 使用介紹

npm 安裝 推薦使用 npm 的方式安裝，它能更好地和 webpack 打包工具配合使用。 npm i mint-ui -S CDN 目前可以通過 unpkg.com/mint-ui 獲取到最新版本的資源，在頁面上引入 js 和 css 檔案即可開始使用。 &l

vue mint-ui 使用手冊 全域性載入和按需引入

1 安裝過vue腳手架的可以直接vue init webpack + 專案名稱，    然後使用cnpm（npm）安裝依賴，全域性引入mint-ui的方法是       在控制檯cnpm install --save，檢視根目錄下的packjson檔案，可以看到版本資訊"de

vue mint-ui原始碼解析之loadmore元件

元件的template html <div class="mint-loadmore"> <div class="mint-loadmore-content" :class="{ 'is-dropped': topDropped || bottomDropped}" :sty

vue mint ui

npm 安裝推薦使用 npm 的方式安裝，它能更好地和 webpack 打包工具配合使用。npm i mint-ui -S CDN目前可以通過 unpkg.com/mint-ui 獲取到最新版本的資源，在頁面上引入 js 和 css 檔案即可開始使用。<!-- 引入樣式

VUE mint-ui mt-loadmore 上拉載入

<template> <div> <mt-loadmore :bottom-method="loadBottom" :bottom-all-loade

基於 Vue+Mint-ui 的 Mobile-h5 的專案說明

Vue作為前端三大框架之一，其已經悄然成為主流，學會用vue相關技術來開發專案會相當輕鬆。 對於還沒學習或者還沒用過vue的初學者，基礎知識這裡不作詳解，推薦先去相關官網，學習一下vue相關的基礎知識。 a. vue.js 官網 參考：https://cn.vuejs.org/ 我的 github

關於Vue的各個UI框架（elementUI、mint-ui、VUX）

查看 lose warn ble 格式 cnp component 可選 變形 elementUI 官網:http://element.eleme.io/ 使用步驟： 1、安裝完vue-cli後，再安裝 element-ui 命令行：npm i element-ui -

vue移動端Ui組件 mint-ui 使用指南

home 函數 下拉加載 使用指南 otto 組件 adt div 沒有 1、上啦加載下拉刷新的使用 this.$refs.loadmore.onTopLoaded(); this.$refs.loadmore.onBottomLoaded(); 上啦刷新下拉加載的 動

Vue-上拉加載與下拉刷新（mint-ui：loadmore）一個頁面使用多個上拉加載後沖突問題

tps loaded 讓其 ade disabled 元素 info 鏈接 加載 所遇問題： 該頁面為雙選項卡聯動，四個部分都需要上拉加載和下拉刷新功能，使用的mint-ui的loadmore插件，分別加上上拉加載後，只有最後一個的this.$refs.loadmore.o

mint-ui vue雙向綁定

com put 真的 otto class min lac action node 由於最近項目需求，用上了mint-ui來重構移動端頁面，從框架本身來講我覺得很強大了，用起來也很不錯，但是文檔就真的是，，，，讓我無言以對，給的api對於我們這些小菜鳥來講真的是處處是坑呀（

基於VUE.JS的移動端框架Mint UI

部分 () cnblogs div 兩個 span stc 方法 從零開始 Mint UI GitHub：github.com/ElemeFE/mint 項目主頁：mint-ui.github.io/# Demo：elemefe.github.io/mint- 文檔：min

Vue中使用mint-ui的日期外掛時在ios上會有滾動穿透問題

問題：在ios上選擇日期上下滑動時，整個頁面會跟著滾動，安卓是正常的 解決方法就是在日期彈出層出現的時候禁止頁面的預設滾動機制，日期彈出層消失的時候解除禁止頁面的預設滾動機制  1.呼叫日期元件 <div class="datePicker" style="z-inde

Vue修改mint-ui預設樣式（預設風格）

加入my-mint.css 我這裡用的postcss的變數定義，如果親們用的是其他前處理器，要改成其他處理器的定義方式 覆蓋mint-ui的primary顏色，改為自己UI的主題色 --main-color: #f76349; /* 橙色 主色調 */ .mint-header { backgrou

基於 Vue.js 的移動端組件庫mint-ui實現無限滾動加載更多

== spi dex try for ike country ble 頁面 通過多次爬坑，發現了這些監聽滾動來加載更多的組件的共同點， 因為這些加載更多的方法是綁定在需要加載更多的內容的元素上的， 所以是進入頁面則直接觸發一次，當監聽到滾動事件之後，繼續加載更多， 所以對於

vue爬坑之旅——mint-ui按需引入

今天開專案，決定使用 Vue 來進行開發，遂開始尋找 Vue 相關的 Ui 元件庫，找了一圈看下來，Github 上 star 數最高的二個分別為 Mint-ui 和 Vux，分別掃了他們的二維碼體驗了下，發現 Vux 在介面切換的時候不流暢，所以就剩下 Mint-ui 這一個選擇了。下面開始今天的