installation
npm i mint-ui -S
# for Vue 1.x
npm i mint-ui@1 -S
Usage
- Import all components.
import Vue from 'vue';
import Mint from 'mint-ui';
import 'mint-ui/lib/style.css';
Vue.use(Mint);
- Or import specified component. (Use babel-plugin-component)
import { Cell, Checklist } from 'mint-ui';
Vue.component(Cell.name, Cell);
Vue.component(Checklist.name, Checklist);
- Equals to
import Vue from 'vue';
import Mint from 'mint-ui';
import 'mint-ui/lib/style.css';
Vue.use(Mint);
// import specified component
import Popup from 'mint-ui/lib/popup';
import 'mint-ui/lib/radio/style.css';
Vue.component("mt-popup", Popup);
- babel-plugin-component
Auto import css file ,Modular import component
Installation
npm i babel-plugin-component -D
Usage
.babelrc
{
"plugins": ["other-plugin", ["component", [
{ "libraryName": "mint-ui", "style": true }
]]]
}
popup.vue
<mt-popup
v-model="popupVisible"
position="bottom">
...
</mt-popup>
//其中popupVisible绑定在vue组件data里面,用来控制popup的显示与关闭。
//position 属性指定了 popup 的位置。比如,position 为 'bottom' 时,popup 会从屏幕下方移入,并最终固定在屏幕下方。移入/移出的动效会根据 position 的不同而自动改变,无需手动配置。