mint-ui使用

mint-ui 的使用

mint-ui官网

1. 安装

npm install mint-ui -S

2. 引入项目

• 全局引入（简单粗暴，一次引入所有组件）

main.js

// 引入全部组件
import Vue from 'vue';
import Mint from 'mint-ui';
import 'mint-ui/lib/style.css'; //  有可能会报错， 找node_modules --》 mint-ui  ?css


Vue.use(Mint);

3. 弹框 Toast组件

import {Toast} from 'mint-ui'

// 信息弹出框

Toast('提示信心');

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

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


//关闭

let instence=Toast();

instence.close();

备注：icon图标，需自己提供。

阿里字体图标官网官网

1. 注册一个账号 （推荐github账号注册）

2. 登陆

3. 图标管理 —> 我的项目—> +(新建项目)–>填写：项目名（不能汉字、-）、前缀… 新建按钮

给项目添加图标—>图标库—>选择你想要的图标添加购物车---->点击购物—>添加至项目---->选择项目 —>确定—>自动跳转到项目中—>使用图标（2种）

1种：点击查看在线连接，在index.html文件中， link 引入

 <i class='iconfont iconshezhi'></i>

2. 下载到本地。 放在assets 中

   main.js引入

   import ‘@/assets/icon/iconfont.css’

3. swipe

<div style='height:300px'>

<mt-swipe :auto="4000">
  <mt-swipe-item>1</mt-swipe-item>
  <mt-swipe-item>2</mt-swipe-item>
  <mt-swipe-item>3</mt-swipe-item>
</mt-swipe>

</div>

参数：
:show-indicators="false"  隐藏焦点
:auto="0"   取消轮播
@change="handleChange"  轮播图片触发的函数,参数为切入轮播图的索引

methods: {
  handleChange(index) {
    ...
  }
}

5. tabbar 底部导航

<mt-tabbar v-model="selected">
  <mt-tab-item id="外卖">
    <img slot="icon" src="../assets/100x100.png">
    外卖
  </mt-tab-item>
  <mt-tab-item id="订单">
    <img slot="icon" src="../assets/100x100.png">
    订单
  </mt-tab-item>
  <mt-tab-item id="发现">
    <img slot="icon" src="../assets/100x100.png">
    发现
  </mt-tab-item>
  <mt-tab-item id="我的">
    <img slot="icon" src="../assets/100x100.png">
    我的
  </mt-tab-item>
</mt-tabbar>


data(){
    return {
        selected:'外卖'
    }
}

5. Infinite scroll

<ul
  v-infinite-scroll="loadMore"
  infinite-scroll-disabled="loading"
  infinite-scroll-distance="10"
  class='scroll_box'   // 要定义高度，溢出滚动
  >
  <li v-for="item in list">{{ item }}</li>
  <span class='tip iconfont'>xxxxx</span>

</ul>

// v-infinite-scroll :  无限滚动指令 ,给谁加上，谁就可以无限滚动。 
// loadMore:   上拉触底 执行的回调函数（异步加载更多数据）。 

//infinite-scroll-disabled: 是否禁用无限滚动。值为true，表示禁用无限滚动。  值为false, 不禁用无限滚动。

//infinite-scroll-distance: 上拉 触底的距离.

<script>
 export default {

   data(){
     return {
       loading:false,
       list:[1,2,3,4,5,6,7,8,9,10,11,12]
     }
   },
   methods:{
     loadMore(){  // 触底函数。（大于10px）
      // 防抖， 防止多次反复上拉，只有第一次生效
      this.loading=true;
      this.$axios.get('/xxx').then(res=>{
        this.list=[...this.list,...res.data];
        this.loading=false;
      })
     }
   }
 }

</script>


<style>
.scroll_box{
  max-height:100vh;//屏幕高度
  overfllow:scroll;
}
.tip{
  position:abselute;
  bottom:20px;
  left:45%;
}
</style>

6. lazy-load 懒加载

<ul>
  <li v-for="item in list">
    <img v-lazy="item">
  </li>
</ul>

img[lazy=loading] {
  width: 200px;
  height: 300px;
  background:yellow; // 也可以是背景图片
  // background:url('../assets/logo.png') no-repeat fixed cneter;
  margin: auto;
}



<div>头部</div>
<div id="container">
  <ul>
    <li v-for="item in list">
      <img v-lazy.container="item">
    </li>
  </ul>
</div>

mint-ui 如何按需引入

cnpm i mint-ui -S

注意：npm下载出现问题（终端中出现Error红色提示，就得重新下载），用cnpm替换npm

npm install mint-ui -S -S ==== --save 表示把依赖安装到 （dependencies）生产环境（项目上线的环境）

npm install sass -D -D=== --save-dev 表示把依赖安装到 （devDependencies）开发环境（在本地运行的环境）

按需引入步骤

1. 安装插件：
   npm install babel-plugin-component -D
2. 修改配置(找到 .babelrc 文件，内容修改成：)

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

3. main.js 进行按需引入

import { Button, Cell } from 'mint-ui'

Vue.component(Button.name, Button)
Vue.component(Cell.name, Cell)
/* 或写为
 * Vue.use(Button)
 * Vue.use(Cell)
 */

4. 备注，如此修改 项目无法正常启动，还需要下载 es2015

cnpm install babel-preset-es2015 --save-dev