mint-ui使用
mint-ui 的使用
npm install babel-plugin-component -D 修改配置(找到 .babelrc 文件，内容修改成：)
作者：星空之火@田兴
mint-ui官网
安装npm install mint-ui -S
引入项目
全局引入（简单粗暴，一次引入所有组件）
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);
弹框 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图标，需自己提供。
阿里字体图标官网官网
注册一个账号 （推荐github账号注册）
登陆
图标管理 —> 我的项目—> +(新建项目)–>填写：项目名（不能汉字、-）、前缀… 新建按钮
给项目添加图标—>图标库—>选择你想要的图标添加购物车---->点击购物—>添加至项目---->选择项目 —>确定—>自动跳转到项目中—>使用图标（2种）
1种：点击查看在线连接，在index.html文件中， link 引入
下载到本地。 放在assets 中
main.js引入
import ‘@/assets/icon/iconfont.css’
swipe
1
2
3
参数：
:show-indicators="false" 隐藏焦点
:auto="0" 取消轮播
@change="handleChange" 轮播图片触发的函数,参数为切入轮播图的索引
methods: {
handleChange(index) {
...
}
}
tabbar 底部导航
外卖
订单
发现
我的
data(){
return {
selected:'外卖'
}
}
Infinite scroll
- {{ item }}
xxxxx
// v-infinite-scroll : 无限滚动指令 ,给谁加上，谁就可以无限滚动。
// loadMore: 上拉触底 执行的回调函数（异步加载更多数据）。
//infinite-scroll-disabled: 是否禁用无限滚动。值为true，表示禁用无限滚动。 值为false, 不禁用无限滚动。
//infinite-scroll-distance: 上拉 触底的距离.
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;
})
}
}
}
.scroll_box{
max-height:100vh;//屏幕高度
overfllow:scroll;
}
.tip{
position:abselute;
bottom:20px;
left:45%;
}
-
![]()
img[lazy=loading] {
width: 200px;
height: 300px;
background:yellow; // 也可以是背景图片
// background:url('../assets/logo.png') no-repeat fixed cneter;
margin: auto;
}
头部
-
![]()
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）开发环境（在本地运行的环境） 按需引入步骤 安装插件：npm install babel-plugin-component -D 修改配置(找到 .babelrc 文件，内容修改成：)
{
"presets": [
["es2015", { "modules": false }]
],
"plugins": [["component", [
{
"libraryName": "mint-ui",
"style": true
}
]]]
}
main.js 进行按需引入
import { Button, Cell } from 'mint-ui'
Vue.component(Button.name, Button)
Vue.component(Cell.name, Cell)
/* 或写为
* Vue.use(Button)
* Vue.use(Cell)
*/
备注，如此修改 项目无法正常启动，还需要下载 es2015
cnpm install babel-preset-es2015 --save-dev
作者：星空之火@田兴
