侧滑展开笔记

2019-08-14 admin

关于侧滑展开

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

clipboard.png 点击执行方法showNav export default{

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

} B组件template部分:

clipboard.png 点击执行隐藏 /* 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: <template>

<div id="app">
    <Navbar></Navbar>
    <Sidebar :show.sync="show"></Sidebar>
</div>

</template> 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的目录结构:

clipboard.png

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:{}

})

[转载]原文链接:https://segmentfault.com/a/1190000020071542

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-72501.html

文章标题:侧滑展开笔记

相关文章
JavaScript控制网页层收起和展开效果的方法
本文实例讲述了JavaScript控制网页层收起和展开效果的方法。分享给大家供大家参考。具体如下: &lt;!DOCTYPE HTML PUBLIC &quot;-&#x2F;&#x2F;W3C&#x2F;&#x2F;DTD HTML 4....
2017-03-22
JavaScript学习笔记之DOM基础 2.4
DOM的发展,与WEB标准化的大趋势相关甚密。只有基于正确的语义逻辑,DOM才能正确地发挥其功用。如今,正确的语义结构、表现与内容分离等要求,都已经成为网页设计中的基本要求。因此,在网页前端开发中,DOM的存在,无疑是为表现层、行为层甚至内...
2017-03-29
AngularJS学习笔记之ng-options指令
1.基本下拉效果(lable for value in array) 其中select标签中的ng-model属性必须有,其值为选中的对象或属性值。 &lt;div ng-controller=&quot;ngselect&quot;&gt...
2017-03-24
AngularJS基础学习笔记之表达式
AngularJS通过表达式将数据绑定到HTML。 AngularJS表达式 AngularJS表达式写在双大括号中:{{ 表达式语句 }}。 AngularJS表达式绑定数据到HTML的方式与ng-bind指令的方式相同。 Angular...
2017-03-23
vue2笔记 — vue-router路由懒加载的实现
在Web应用程序中,系统的瓶颈常在于系统的响应速度。如果系统响应速度过慢,用户就会出现埋怨情绪,系统的价值也因此会大打折扣。因此,提高系统响应速度,是非常重要的。 懒加载(Load On Demand)是一种独特而又强大的数据获取方法,它能...
2017-03-14
javascript实现多栏闭合展开式广告位菜单效果实例
本文实例讲述了javascript实现多栏闭合展开式广告位菜单效果。分享给大家供大家参考。具体如下: 从操作方式上来说,有似曾相识的感觉,有点手风琴菜单的味道,像一个折叠面板,用JavaScript和CSS结合来实现,虽然不华丽,但很简洁实...
2017-03-27
js实现div层缓慢收缩与展开的方法
本文实例讲述了js实现div层缓慢收缩与展开的方法。分享给大家供大家参考。具体分析如下: 这是一个层伸缩与展开的特效代码,带有点动画效果,缓慢展开,DIV+JS联合打造,看上去还不错。不受内容约束,收缩与展开的速度是可以控制的,高度、循环时...
2017-03-23
Nodejs学习笔记之入门篇
分享第一篇,关于 NodeJS —— Javascript 的常用知识以及如何从 Javascript 开发者过渡到 NodeJS 开发者(不会介绍具体的框架)。在读本文前,希望你对 javascript 有一些初步的认识。 Javascr...
2017-03-22
JavaScript DOM事件(笔记)
第1章 事件流 1-1.事件冒泡:事件最开始由最具体的元素(文档中嵌套层次最深的那个节点)接收; 然后逐级向上传播至最不具体的那个节点(文档); 1-2.事件捕获:不太具体的节点应该更早接收到事件,而最具体的节点最后接收到事件; 第2章 事...
2017-03-22
基于Vue的侧滑菜单组件v0.3
A simple DrawerLayout component like Android has for Vue.js 中文文档 Demo share.codehuang.com/vue-drawer-… Mobile QQ by...
2018-03-08
回到顶部