mint-ui使用

mint-ui 的使用

mint-ui官网

  1. 安装
npm install mint-ui -S
  1. 引入项目
  • 全局引入(简单粗暴,一次引入所有组件)

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);

  1. 弹框 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>
  1. 下载到本地。 放在assets 中

    main.js引入

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

  2. 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) {
    ...
  }
}

  1. 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:'外卖'
    }
}

  1. 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>


  1. 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
    }
  ]]]
}

  1. main.js 进行按需引入
import { Button, Cell } from 'mint-ui'

Vue.component(Button.name, Button)
Vue.component(Cell.name, Cell)
/* 或写为
 * Vue.use(Button)
 * Vue.use(Cell)
 */
  1. 备注,如此修改 项目无法正常启动,还需要下载 es2015
cnpm install babel-preset-es2015 --save-dev
 
发布了45 篇原创文章 · 获赞 54 · 访问量 6451
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 精致技术 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览