Mint UI popup 的使用 2020-12-30一安装1.npm安装使用 npmimint-ui@1-S 2

1. npm 安装使用

npm i mint-ui@1 -S

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

安装 babel-plugin-component：

npm install babel-plugin-component -D

然后，将 .babelrc 修改为：

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

3 使用 Popup 组件

（1）在你的vue文件里面引入这个组件

import { MessageBox, Popup, Button } from "mint-ui";

其他两个是其他的组件，需要的话直接在后面加入就可以了

（2）复制粘贴组件

     <mt-popup v-model="popupVisible"                  position="center"                  class="dddddd"                  modal=false>   <div>  内容</div>            <mt-button type="primary "                       @click="btnPop"                       class="btnPop">我知道了</mt-button>        </mt-popup>

1如果弹窗需要设置 border-radius 这个属性但是组件里面的div设置不生效的话，可以试试给组件起个class名字然后再去设置，因为的我的不管用。

2.组件里面的div可以正常写你所需要的样式和需求

3，mt-button也是mint-ui的组件可以用按钮的方法关闭弹窗

4，需要在data里面设置初始值为false 然后 methods 里面正常写弹窗打开关闭的方法就可以了

Mint UI popup 的使用 2020-12-30一 安装

Mint UI popup 的使用 2020-12-30一安装