码代码的冰果果

个人在线笔记

0%

mui框架

发表于 更新于 分类于 ， 阅读次数： Valine：
本文字数： 3.6k 阅读时长 ≈ 7 分钟

最接近原生APP体验的高性能前端框架

mui官方文档：https://dev.dcloud.net.cn/mui/

uniapp为mui的迭代产品，整合VUE框架，生态更好。

vue-awesome-mui

vue2.x中使用mui可以使用vue-awesome-mui，GitHub地址：https://github.com/Wscats/vue-awesome-mui

安装

1
 
npm install vue-awesome-mui -save

配置

main.js中挂载mui。

1
2
3
4
 
import mui from 'vue-awesome-mui'
import 'vue-awesome-mui/mui/dist/css/mui.css'
import 'vue-awesome-mui/mui/examples/hello-mui/css/icons-extra.css'//图标样式
Vue.use(mui);

移动app项目，建议在index.html文件中添加如下meta标签：（若组件没有正常显示）

1
2
 
<!-- 可视宽度为device-width；首次显示缩放级别为1，即按设备尺寸显示无缩放；最大缩放级别为1，即禁止用户放大页面；是否可缩放设置为否 -->
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">

可在App.vue文件中进行mui配置，例如：

1
2
3
4
5
6
7
8
9
10
 
<script>
	export default {
		name: 'App',
		created() {
			mui.init({
				swipeBack: true //启用右滑关闭功能
			});
		}
	}
</script>

使用

.vue文件中使用mui。

html元素中使用：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
<header class="mui-bar mui-bar-nav">
	<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
	<h1 class="mui-title">找回密码</h1>
</header>
<div class="mui-content">
	<form class="mui-input-group">
		<div class="mui-input-row">
			<label>用户名</label>
			<input id='account' type="text" class="mui-input-clear mui-input" placeholder="请输入用户名"
				v-model="formParam.username">
		</div>
	</form>
	<div class="mui-content-padded"><button class="mui-btn mui-btn-block mui-btn-primary"
			@click="submit">提交</button>
	</div>
</div>

JavaScript中使用：

1
2
3
4
5
6
7
8
9
10
11
12
 
var meta = respon.data.meta;
var btnArray = ['取消', '确认'];
mui.confirm(meta.msg, '提示', btnArray, e => {
	if (e.index == 1) {
		if (meta.status == "200") { //密码重置成功
			this.$router.push('/login'); //登录页
		}
	}
})


mui.alert("请先输入信息！",'','','','div');

引入时间选择器

vue-awesome-mui中并没有整合mui的时间选择器。要使用时间选择器还需要我们引入。

下载

下载时间选择器相关依赖文件：

1
2
3
4
5
6
 
//js文件
mui.picker.min.js//引入时间选择器相关文件
mui.dtpicker.js//引入时间选择器相关文件
//css文件
mui.picker.min.css//引入时间选择器相关文件
css/mui.dtpicker.css//引入时间选择器相关文件

在assets文件夹下，新建一个muiext文件夹存放这些文件。

引入

main.js中引入。上边的配置，修改如下：

1
2
3
4
5
6
7
8
9
10
11
 
//mui组件（第三方封装）
//注意：需将mui挂载到windows对象中：
//在 node_modules中vue-awesome-mui/mui/dist/js/mui.js 的最后添加“window.mui = mui;”
import mui from 'vue-awesome-mui'
import 'vue-awesome-mui/mui/dist/css/mui.css'
import 'vue-awesome-mui/mui/examples/hello-mui/css/icons-extra.css'
import './assets/muiext/js/mui.picker.min.js'//引入时间选择器相关文件
import './assets/muiext/js/mui.dtpicker.js'//引入时间选择器相关文件
import './assets/muiext/css/mui.picker.min.css'//引入时间选择器相关文件
import './assets/muiext/css/mui.dtpicker.css'//引入时间选择器相关文件
Vue.use(mui);

修改

修改mui.js

在node_modules文件夹下找到“vue-awesome-mui”，修改mui/dist/js/mui.js 和 mui.min.js文件。在js文件最后添加：

1
 
window.mui = mui;

使用

1
2
3
4
5
6
7
8
9
10
 
//默认，选择日期时间
var options = {};
var dtPicker = new mui.DtPicker(options);
dtPicker.show(function(selectItems) {
	console.log('选择的时间为='+selectItems.value);
})

//输出：选择的时间为=2025-01-12 15:15

//可以正常使用

扩展

关于optioins：

1
2
3
4
5
6
7
8
9
10
11
 
//var options = {"value":"2010-10-10 10:10","beginYear":2010,"endYear":2020};
//value设置一个默认值，beginYear、endYear设置可选时间区间

//var options = {"type":"month"};
//type设置时间选择器类型：
//date - 选择日期2010-10-10
//month - 选择月份2010-10
//time - 选择时间10:10
//默认，选择日期时间

//更多用法见mui官方文档。

show()的回调：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
 


//show的回调中：
/*
 * rs.value 拼合后的 value
 * rs.text 拼合后的 text
 * rs.y 年，可以通过 rs.y.vaue 和 rs.y.text 获取值和文本
 * rs.m 月，用法同年
 * rs.d 日，用法同年
 * rs.h 时，用法同年
 * rs.i 分（minutes 的第二个字母），用法同年
 */
result.innerText = '选择结果: ' + rs.text;
/* 
 * 返回 false 可以阻止选择框的关闭
 * return false;
 */
/*
 * 释放组件资源，释放后将将不能再操作组件
 * 通常情况下，不需要示放组件，new DtPicker(options) 后，可以一直使用。
 * 当前示例，因为内容较多，如不进行资原释放，在某些设备上会较慢。
 * 所以每次用完便立即调用 dispose 进行释放，下次用时再创建新实例。
 */
dtPicker.dispose();
dtPicker = null;

问题

遇到的问题：提示mui.picker.min.css中gradient的用法已过时。

解决方法：更正其用法，若不影响效果可将相关语句注释掉。

若图片不能正常显示，请在浏览器中打开

欢迎关注我的其它发布渠道