提交 35d65085 编写于 作者: zhujiamin's avatar zhujiamin

解决侧滑菜单左右滑动和主界面内容左右滑动的冲突

上级 15bab80f
...@@ -126,7 +126,9 @@ export const AppComponents = { ...@@ -126,7 +126,9 @@ export const AppComponents = {
v.component('app-mob-select-changeTheme',() => import('@/ibiz-core/components/app-mob-select-changeTheme/app-mob-select-changeTheme.vue')); v.component('app-mob-select-changeTheme',() => import('@/ibiz-core/components/app-mob-select-changeTheme/app-mob-select-changeTheme.vue'));
// 锚点列表插件 // 锚点列表插件
v.component('app-anchor-list',() => import('@/components/app-anchor-list/app-anchor-list.vue')); v.component('app-anchor-list',() => import('@/components/app-anchor-list/app-anchor-list.vue'));
// 菜单组件 // 侧滑菜单组件
v.component('app-mob-menu-sideslip-view',() => import('@/components/app-mob-menu-sideslip-view/app-mob-menu-sideslip-view.vue')); v.component('app-mob-menu-sideslip-view',() => import('@/components/app-mob-menu-sideslip-view/app-mob-menu-sideslip-view.vue'));
// 侧滑菜单组件头部信息
v.component('app-mob-menu-sideslip-view-header',() => import('@/components/app-mob-menu-sideslip-view-header/app-mob-menu-sideslip-view-header.vue'));
}, },
}; };
\ No newline at end of file
.app-mob-menu-sideslip-view-header{
.header{
padding: 15px;
img{
margin-top: 20px;
width: 30%;
margin-bottom: 20px;
}
.title{
color: #fff;
font-size: 20px;
margin-bottom: 10px;
}
.text{
display: inline-block;
padding: 3px 6px;
background-color: #fff;
color: #333;
font-size: 12px;
margin-bottom: 20px;
}
.notice{
ion-icon{
font-size: 12px;
}
color: rgb(255, 248, 248);
font-size: 10px;
}
}
}
\ No newline at end of file
<template>
<div class="app-mob-menu-sideslip-view-header">
<div class="header">
<img src="assets/images/logo.png" class="ibizLogo"/>
<div class="title">iBizPMS</div>
<div class="text">登录·试用测试版</div>
<div class="notice"><ion-icon name="megaphone-outline"></ion-icon> #最新通知——更新/下载</div>
</div>
</div>
</template>
<script lang="ts">
import { Vue, Component, Prop, Emit, Model } from 'vue-property-decorator';
import { Environment } from '@/environments/environment';
@Component({
components: {
}
})
export default class AppMobMenuSideslipView extends Vue {
}
</script>
<style lang="less">
@import "./app-mob-menu-sideslip-view-header.less";
</style>
\ No newline at end of file
...@@ -16,34 +16,6 @@ ...@@ -16,34 +16,6 @@
} }
} }
.app-menu-plugin{ .app-menu-plugin{
.header{
padding: 15px;
img{
margin-top: 20px;
width: 30%;
margin-bottom: 20px;
}
.title{
color: #fff;
font-size: 20px;
margin-bottom: 10px;
}
.text{
display: inline-block;
padding: 3px 6px;
background-color: #fff;
color: #333;
font-size: 12px;
margin-bottom: 20px;
}
.notice{
ion-icon{
font-size: 12px;
}
color: rgb(255, 248, 248);
font-size: 10px;
}
}
.top{ .top{
.title{ .title{
color:#727272; color:#727272;
......
<template> <template>
<div class="app-mob-menu-sideslip-view"> <div class="app-mob-menu-sideslip-view">
<van-popup v-model="showPopup" get-container="#app" position="left" :style="{ height: '100%',width: '80%' }" duration="0.2"> <van-popup v-model="showPopup" get-container="#app" position="left" :style="{ height: '100%',width: '80%' }" duration="0.2" :close-on-popstate="true">
<v-touch v-on:swipeleft="onSwipeLeft" style="height:100%;"> <v-touch v-on:swipeleft="onSwipeLeft" style="height:100%;">
<div class="app-menu-plugin"> <div class="app-menu-plugin">
<div class="header"> <app-mob-menu-sideslip-view-header></app-mob-menu-sideslip-view-header>
<img src="assets/images/logo.png" class="ibizLogo"/>
<div class="title">iBizPMS</div>
<div class="text">登录·试用测试版</div>
<div class="notice"><ion-icon name="megaphone-outline"></ion-icon> #最新通知——更新/下载</div>
</div>
<div class="top"> <div class="top">
<div class="title">Menu</div> <div class="title">Menu</div>
<template v-for="item in items" > <template v-for="item in items" >
...@@ -25,34 +20,34 @@ ...@@ -25,34 +20,34 @@
</template> </template>
</div> </div>
</div> </div>
</v-touch>
</van-popup>
<v-touch v-on:swiperight="onSwipeRight" style="height:100%;">
<template v-for="item in items">
<template v-if="!item.hidden">
<component :key="item.id" v-if="item.id == activeId" :is="item.componentname" viewDefaultUsage="indexView"></component>
</template>
</template>
</v-touch> </v-touch>
</van-popup>
<v-touch v-on:swiperight="onSwipeRight" style="height:100%;">
<template v-for="item in items">
<template v-if="!item.hidden">
<component :key="item.id" v-if="item.id == activeId" :is="item.componentname" viewDefaultUsage="indexView"></component>
</template>
</template>
</v-touch>
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { Vue, Component, Prop, Emit, Model } from 'vue-property-decorator'; import { Vue, Component, Prop, Emit, Model, Provide } from 'vue-property-decorator';
import { Environment } from '@/environments/environment'; import { Environment } from '@/environments/environment';
@Component({ @Component({
components: { components: {
} }
}) })
export default class AppMobMenuSideslipView extends Vue { export default class AppMobMenuSideslipView extends Vue {
/** /**
* 向左滑动关闭弹出层 * 向左滑动关闭弹出层
* *
* @type {*} * @type {*}
* @memberof AppMobMenuSideslipView * @memberof AppMobMenuSideslipView
*/ */
public onSwipeLeft(){ public onSwipeLeft(e:any){
this.showPopup = false; this.showPopup = false;
} }
...@@ -63,7 +58,9 @@ export default class AppMobMenuSideslipView extends Vue { ...@@ -63,7 +58,9 @@ export default class AppMobMenuSideslipView extends Vue {
* @memberof AppMobMenuSideslipView * @memberof AppMobMenuSideslipView
*/ */
public onSwipeRight(){ public onSwipeRight(){
this.showPopup = true; if (this.$store.state.popupStatus) {
this.showPopup = true;
}
} }
/** /**
...@@ -232,6 +229,10 @@ export default class AppMobMenuSideslipView extends Vue { ...@@ -232,6 +229,10 @@ export default class AppMobMenuSideslipView extends Vue {
} }
}) })
} }
// 阻止冒泡
document.addEventListener('touchmove',function(event){
event.stopPropagation();
},false);
} }
/** /**
......
...@@ -281,4 +281,14 @@ export const setTextAlignStyle = (state: any, val: any) => { ...@@ -281,4 +281,14 @@ export const setTextAlignStyle = (state: any, val: any) => {
*/ */
export const setNavigationStyle = (state: any, val: any) => { export const setNavigationStyle = (state: any, val: any) => {
state.selectNaviStyle = val; state.selectNaviStyle = val;
}
/**
* 是否能弹出侧滑菜单
*
* @param state
* @param val
*/
export const setPopupStatus = (state: any, val: any) => {
state.popupStatus = val;
} }
\ No newline at end of file
...@@ -17,4 +17,5 @@ export const rootstate: any = { ...@@ -17,4 +17,5 @@ export const rootstate: any = {
selectStatus:true, selectStatus:true,
selectTextAlign:'', selectTextAlign:'',
selectNaviStyle:'', selectNaviStyle:'',
popupStatus:true,
} }
\ No newline at end of file
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册