資訊專欄INFORMATION COLUMN
摘要：關(guān)于側(cè)滑展開父組件組件點(diǎn)擊控制側(cè)邊欄組件的展開組件組件部分點(diǎn)擊執(zhí)行方法存儲和含異步操作，例如向后臺提交數(shù)據(jù)同步操作寫法方法名值組件部分點(diǎn)擊執(zhí)行隱藏輔助函數(shù)僅僅是將中的映射到局部計(jì)算屬性首頁影片影院我的賣座網(wǎng)查詢點(diǎn)擊隱藏父組件的目錄結(jié)構(gòu)切
關(guān)于側(cè)滑展開
父組件：App.vue
A組件:navbar.vue(點(diǎn)擊控制側(cè)邊欄(B組件)的展開)
B組件:sidebar.vue
A組件template部分：
點(diǎn)擊執(zhí)行方法showNav
export default{
methods:{
showNav(){
/*
store存儲和dispatch
dispatch：含異步操作，例如向后臺提交數(shù)據(jù)
commit:同步操作,寫法：this.$store.commit("mutations方法名",值)
*/
this.$store.dispatch("changeLeftNavState",true);
}
}
}
B組件template部分：
點(diǎn)擊執(zhí)行隱藏
/*
mapGetters輔助函數(shù)僅僅是將store中的getter映射到局部計(jì)算屬性.
*/
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:"賣座網(wǎng)查詢",path:"/card"}
]
}
},
methods:{
//點(diǎn)擊隱藏
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的目錄結(jié)構(gòu)：
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={
//切換左側(cè)導(dǎo)航的顯示狀態(tài)
[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:{}
})
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/106742.html
摘要：今天就遇到一個(gè)需要，刪除操作，按照微信的交互做一個(gè)。剩下的可以看看這個(gè)代碼，微信小程序側(cè)滑刪除編輯一些小問題在滑動的時(shí)候，貌似最小需要像素才會響應(yīng)，是不是我的姿勢有點(diǎn)問題。原文閱讀寫一個(gè)微信小程序側(cè)滑刪除組件 背景 最近一直在斷斷續(xù)續(xù)做一個(gè)小程序的項(xiàng)目，看起來很小，但一直沒正經(jīng)做過小程序，所有沒啥積累，什么東西都要自己寫一遍。 今天就遇到一個(gè)需要，刪除操作，按照微信的交互做一個(gè)。 向左...
摘要：本文介紹一個(gè)簡單的類似的布局組件的實(shí)現(xiàn)，基于。介紹的內(nèi)容已經(jīng)制作成組件。即當(dāng)不可以拖出抽屜時(shí)，應(yīng)觸發(fā)默認(rèn)事件，比如垂直方向的滾動等等。這種優(yōu)化可以將一部分復(fù)雜的計(jì)算工作提前準(zhǔn)備好，使頁面的反應(yīng)更為快速靈敏。 本文介紹一個(gè)簡單的DrawerLayout（類似Android的DrawerLayout）布局組件的實(shí)現(xiàn)，基于Vue.js。介紹的內(nèi)容已經(jīng)制作成 vue-drawer-layout...
摘要：本文介紹一個(gè)簡單的類似的布局組件的實(shí)現(xiàn)，基于。介紹的內(nèi)容已經(jīng)制作成組件。即當(dāng)不可以拖出抽屜時(shí)，應(yīng)觸發(fā)默認(rèn)事件，比如垂直方向的滾動等等。這種優(yōu)化可以將一部分復(fù)雜的計(jì)算工作提前準(zhǔn)備好，使頁面的反應(yīng)更為快速靈敏。 本文介紹一個(gè)簡單的DrawerLayout（類似Android的DrawerLayout）布局組件的實(shí)現(xiàn)，基于Vue.js。介紹的內(nèi)容已經(jīng)制作成 vue-drawer-layout...
閱讀 1036·2022-07-19 10:19
閱讀 1806·2021-09-02 15:15
閱讀 1022·2019-08-30 15:53
閱讀 2668·2019-08-30 13:45
閱讀 2664·2019-08-26 13:57
閱讀 1998·2019-08-26 12:13
閱讀 1016·2019-08-26 10:55
閱讀 557·2019-08-26 10:46
