注意: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);
	}
 }
Logo

前往低代码交流专区

更多推荐