首先项目用到了mint-ui
安装 cnpm i mint-ui -S
然后按照官网的操作,将mint-ui导入main.js
实操
将所有准备工作准备就绪,下面就可以使用mint-ui
在main.js 里面,render要渲染的是app
而app是从App.vue里面导入的,所以要想实现渲染,要在App.vue里面写
先来看看官网的CSS
不要慌,跟bootstrap一样,喜欢那个,复制粘贴
至于他的一些属性,看文档
但是要注意,template只能有一个根,所以,要通一放在div里面
接下来是js,js就是高级,用的时候要在script标签里面导入你要使用的组件 ,当然复制粘贴就可以
最简单的点击按钮,显示信息
在按钮上面绑定事件,点击触发函数。在<script></script>里面写函数,但是要注意,vue里面的template不能直接使用script里面的代码,需要先将script里面的代码暴露出来 export default {
data;
methods
}
基本使用。但是你如果对样式不满意,可以Toast({}) 以对象的形式,写属性
这里需要注意,都是以字符串的形式来写值,而且要是想自己写样式需要指定className,然后再单独的css文件写,最后不要忘了在main.js导入css ,如果想要字体图标,需要安装bootstrap,并且在main里面导入,在App.vue里面用iconClass写入字体文字
现在有一个需求:打开页面,自动弹框,三秒之后。关闭
1:先需要写好弹框的函数
2:自动弹框,并且三秒关闭----
用三生命周期函数 created 里面调用getList方法,getList里面先调用show,show完之后,定时器三秒关闭
Toast提示会返回一个Toast实例,每个实例都有close方法,但是你有函数两个,一个定时器,该怎么用Toast的实例,是个问题?
在data里面定义一个 instance :null ---在下面就可以用this.instance来接受,返回的实例,接收到这个实例后,调用close关闭
在打包运行的时候,你会发现占很大的内存,这是因为我们把所有的mint-ui都引入了,那我们按需引入不就好了