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

之前就有的:

import Vue from 'vue'
import App from './App.vue'

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

使用css组件

直接将官方文档所给代码放在主页面的显示区
比如:

	<mt-button type="default">default</mt-button>
    <mt-button type="primary">primary</mt-button>
    <mt-button type="danger">danger</mt-button>

使用JS组件

比如 Toast组件使用步骤:
1.引入组件import { Toast } from 'mint-ui';
2.在script里再定义数据和方法

export default {
        data(){
            return {}
        },
        methods:{
            show(){
                Toast({
						  message: '提示',
						  position: 'bottom',
						  duration: 1000 //显示时间
				});
            }
        }
    }

3.在所需要的按钮上面添加绑定事件<mt-button type="default" @click="show">default</mt-button>
4.点击既可以触发

发布了103 篇原创文章 · 获赞 5 · 访问量 2254

猜你喜欢

转载自blog.csdn.net/weixin_42452726/article/details/102554929