侧滑展开笔记

894974231 发布于2019-08-26 10:46 / 544人阅读

摘要：关于侧滑展开父组件组件点击控制侧边栏组件的展开组件组件部分点击执行方法存储和含异步操作，例如向后台提交数据同步操作写法方法名值组件部分点击执行隐藏辅助函数仅仅是将中的映射到局部计算属性首页影片影院我的卖座网查询点击隐藏父组件的目录结构切

关于侧滑展开

父组件：App.vue
A组件:navbar.vue(点击控制侧边栏(B组件)的展开)
B组件:sidebar.vue
A组件template部分：

点击执行方法showNav
export default{

methods:{
    showNav(){
        /*
        store存储和dispatch
        dispatch：含异步操作，例如向后台提交数据
        commit:同步操作,写法：this.$store.commit("mutations方法名",值)
        */
        this.$store.dispatch("changeLeftNavState",true);
    }
}

}
B组件template部分：

点击执行隐藏
/*
mapGetters辅助函数仅仅是将store中的getter映射到局部计算属性.
*/
import {mapGetters} from "vuex";
export default {

computed:{
    ...mapGetters({
        show:"getLeftNavState"
    })
},
data(){
    return {
        menuList:[
            {name:"首页",path:"/"},
            {name:"影片",path:"/film"},
            {name:"影院",path:"/cinema"},
            {name:"我的",path:"/login"},
            {name:"卖座网查询",path:"/card"}
        ]
    }
},
methods:{
    //点击隐藏
    hideNav(){
        this.$store.dispatch("changeLeftNavState",false);
    }
}

}
父组件App.vue：

import Navbar from "@/components/navbar.vue";
import Sidebar from "@/components/sidebar.vue";
import {mapGetters} from "vuex";
export default{

components:{
    Navbar,
    Sidebar
},
data(){
   return {
       show:false
   } 
}

}
vuex的目录结构：

actions.ts:

export const changeLeftNavState=({commit},isShow)=>{

commit("CHANGE_LEFTNAV_STATE",isShow)

}
getters.ts:

export const getLeftNavState=state=>state.leftNavState
mutation-type.ts:
export const CHANGE_LEFTNAV_STATE="CHANGE_LEFTNAV_STATE"

mutations.ts:

import {CHANGE_LEFTNAV_STATE} from "./mutation-type"
const mutations={

//切换左侧导航的显示状态
[CHANGE_LEFTNAV_STATE](state,isShow){
    state.leftNavState=isShow
}

}
export default mutations

index.ts
import * as actions from "./actions"
import * as getters from "./getters"
import mutations from "./mutations"
const state={

leftNavState:false

}

export default{

state,
actions,
getters,
mutations

}

store.ts

import Vue from "vue";
import Vuex from "vuex";
import app from "./vuex/modules/app"

Vue.use(Vuex);

export default new Vuex.Store({

modules:{
   app
},
state:{},
mutations:{},
actions:{}

})

GPU云服务器云服务器侧滑菜单 viewdraghelper侧滑 qq侧滑效果 android侧滑界面

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/106742.html

写一个微信小程序侧滑删除组件

摘要：今天就遇到一个需要，删除操作，按照微信的交互做一个。剩下的可以看看这个代码，微信小程序侧滑删除编辑一些小问题在滑动的时候，貌似最小需要像素才会响应，是不是我的姿势有点问题。原文阅读写一个微信小程序侧滑删除组件背景最近一直在断断续续做一个小程序的项目，看起来很小，但一直没正经做过小程序，所有没啥积累，什么东西都要自己写一遍。今天就遇到一个需要，删除操作，按照微信的交互做一个。向左...

宋华 2019-08-22 18:02 评论0 收藏0
匠心打造Vue侧滑菜单组件

摘要：本文介绍一个简单的类似的布局组件的实现，基于。介绍的内容已经制作成组件。即当不可以拖出抽屉时，应触发默认事件，比如垂直方向的滚动等等。这种优化可以将一部分复杂的计算工作提前准备好，使页面的反应更为快速灵敏。本文介绍一个简单的DrawerLayout（类似Android的DrawerLayout）布局组件的实现，基于Vue.js。介绍的内容已经制作成 vue-drawer-layout...

sutaking 2019-08-22 11:20 评论0 收藏0
匠心打造Vue侧滑菜单组件

摘要：本文介绍一个简单的类似的布局组件的实现，基于。介绍的内容已经制作成组件。即当不可以拖出抽屉时，应触发默认事件，比如垂直方向的滚动等等。这种优化可以将一部分复杂的计算工作提前准备好，使页面的反应更为快速灵敏。本文介绍一个简单的DrawerLayout（类似Android的DrawerLayout）布局组件的实现，基于Vue.js。介绍的内容已经制作成 vue-drawer-layout...

张汉庆 2019-08-29 14:05 评论0 收藏0