<ul id="o8kyw"></ul>

側滑展開筆記

894974231 發布于2019-08-26 10:46 / 550人閱讀

摘要：關于側滑展開父組件組件點擊控制側邊欄組件的展開組件組件部分點擊執行方法存儲和含異步操作，例如向后臺提交數據同步操作寫法方法名值組件部分點擊執行隱藏輔助函數僅僅是將中的映射到局部計算屬性首頁影片影院我的賣座網查詢點擊隱藏父組件的目錄結構切

關于側滑展開

父組件：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側滑界面

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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