Mint-UI中按需导入配置方式-MUI

注意：MUI 中的一些 class 可能会有和 Mint-UI 相冲突，只能把相冲的一些样式用新样式代替

使用 MUI 代码片段

注意：MUI 不同于 Mint-UI，MUI 只是开发出来的一套好用的代码片段，里面提供了配套的样式、配套的 HTML 代码片段，类似于 bootstrap；而 Mint-UI，是真正的组件库，是使用 Vue 技术封装出来的成套组件，可以无缝的和 VUE 项目进行集成开发；
因此，从体验上来说，Mint-UI 体验更好，因为这是别人帮我们开发好的现成的 Vue 组件；
从体验上来说，MUI 和 Bootstrap 类似；理论上，任何项目都可以使用 MUI 或 Bootstrap ，但是，Mint-UI 只适用于 Vue 项目；

注意：MUI 并不能使用 npm 去下载，需要自己手动从 github 上，下载现成的包：mui，自己解压出来，然后手动拷贝 dist文件（之后可以自己命名为mui） 到项目的 src>lib 中使用（lib 是指手动拷贝的包）

导入 MUI

// 导入 MUI 的样式表，和 bootstrap 用法没有差别
import './lib/mui/css/mui.min.css'

应用

之后可以在安装包的 D:\mui-master\examples\hello-mui\examples 下面找需要的组件，如 button：

再检查相应的源码

拷贝需要的代码放进项目中：

附加：

对于 number box 它的计数限制有两种

示例：设置取值范围为0~100，每次变化步长为10，则代码如下

<div class="mui-numbox" data-numbox-step='10' data-numbox-min='0' data-numbox-max='100'>
  <button class="mui-btn mui-numbox-btn-minus" type="button">-</button>
  <input class="mui-numbox-input" type="number" />
  <button class="mui-btn mui-numbox-btn-plus" type="button">+</button>
</div>

示例: getValue()

mui(Selector).numbox().getValue()

示例: setValue()

mui(Selector).numbox().setValue(5)

示例: setOption()

mui(Selector).numbox().setOption('step',5)

假如添加购物车，是异步获取添加上限值，推荐使用 watch 监听 JS API 的方式添加事件，例如

 watch: {
	max: function (newVal, oldVal) {
		mui(".mui-numbox").numbox().setOption("max", newVal);
	}
 }