vue移动端Mint-ui/MUI

cnpm install mint-ui -S

按需引入
借助 babel-plugin-component,我们可以只引入需要的组件,以达到减小项目体积的目的。

首先,安装 babel-plugin-component:
cnpm install babel-plugin-component -D

然后,将 .babelrc 修改为:实现按需导入
{
  "plugins": [["component", 
    {
      "libraryName": "mint-ui",
      "style": true
    }
  ]]
}

但是js组件可能失灵,因为是非严格模式编写,而babel7默认全局严格,需要取消严格模式

安装:
cnpm i @babel/plugin-transform-modules-commonjs @babel/plugin-transform-strict-mode -D
 
在.babelrc中进行配置:

"plugins": [
      ["@babel/plugin-transform-modules-commonjs", { "strictMode": false }]
    ]
但是这样设置完目前无法按需导入了,那就都导入吧

tab-top-webview-main 滑动组件填坑:
https://blog.csdn.net/weixin_42536639/article/details/86821209
注意在mounted里面加载初始化,同时全局添加
* {
    touch-action: pan-y;
}防止谷歌浏览器报错[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive.

但是发现底部切换栏mui-bar-tab不能用了,真是日了狗了,没办法,既然这样我也不用设置全局非严格模式了,在babel options里面添加 sourceType属性
sourceType:"unambiguous",这样还能按需导入

sourceType
类型:"script" | "module" | "unambiguous"
默认:“模块”
"script"-使用ECMAScript脚本语法解析文件。不允许import/ export语句,并且文件不在严格模式下。
"module"-使用ECMAScript模块语法分析文件。文件是自动严格的,并且允许import/ export语句。
"unambiguous"-如果存在import/ export语句,则将文件视为“模块” ,否则将其视为“脚本”。
unambiguous在类型未知的情况下可以非常有用,但是会导致错误匹配,因为拥有不使用import/ export 语句的模块文件是完全有效的。
此选项很重要,因为当前文件的类型会影响输入文件的解析以及可能希望向当前文件添加import/ require使用的某些转换 。
结果我还是没换UI,还是MUI好用,至于tabbar不起效果了,我发现只要将class="mui-tab-item" 删除就可以跳转路由了,但是样式就没了,于是我把基础样式抽离了出来。
首页模板如下:顶部栏 轮播图 六宫格 tabbar,包含左右切换动画
<template>
  <div class="app-container">
      <mt-header fixed title="首页布局"></mt-header>
      <transition>
	 	<router-view></router-view> 
	  </transition>
      <nav class="mui-bar mui-bar-tab">
			<router-link class="tab-item" to="/home">
				<span class="mui-icon mui-icon-home"></span>
				<span class="mui-tab-label">首页</span>
			</router-link>
			<router-link class="tab-item" to="/member">
				<span class="mui-icon mui-icon-contact mui-icon-icon-contact-filled"></span>
				<span class="mui-tab-label">会员</span>
			</router-link>
			<router-link class="tab-item" to="/shopcar">
				<span class="mui-icon mui-icon-extra mui-icon-extra-cart"><span class="mui-badge">0</span></span>
				<span class="mui-tab-label">购物车</span>
			</router-link>
			<router-link class="tab-item" to="/search">
				<span class="mui-icon mui-icon-search "></span>
				<span class="mui-tab-label">搜索</span>  
			</router-link>
		</nav>

  </div>
</template>

<script>
export default {
	data(){
		return {
		
		}
	}
};
</script>

<style lang='less' scoped>
    .app-container{
		padding-top:40px;
		overflow-x:hidden;
		padding-bottom:50px;
		.tab-item{
			display: table-cell;
			overflow: hidden;
			width: 1%;
			height: 50px;
			text-align: center;
			vertical-align: middle;
			white-space: nowrap;
			text-overflow: ellipsis;
			color: #929292;
			.mui-icon{
				top: 3px;
				width: 24px;
				height: 24px;
				padding-top: 0;
				padding-bottom: 0;
			}
			.mui-icon ~ .mui-tab-label{
				font-size: 11px;
				display: block;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			.mui-icon:active{
				background: none;
			}
		}
		.mui-active{
			color: #5aa4f8;
		}
	}
	.v-enter{
		opacity:0;
		transform: translateX(100%);
	}
	.v-leave-to{
		opacity:0;
		transform: translateX(-100%);
		position:absolute;  //不飘
	}
	.v-enter-active,.v-leave-active{
		transition:all ease 0.5s;
	}

</style>
cnpm install vuex -S

发表评论

电子邮件地址不会被公开。 必填项已用*标注