vuex : 用vuex控制侧栏点亮状态
上代码。
xxx.vue
<template>
<div id="xxx">
<div class="layout">
<Layout>
<Sider breakpoint="md" collapsible :collapsed-width="78" :width="106">
<Menu :active-name="getActiceName" theme="dark" width="auto" :style="{padding:'10px 0 0'}">
<MenuItem name="1-1" @click.native="jump(1)">
<span>来源字典</span>
</MenuItem>
<MenuItem name="1-2" @click.native="jump(2)">
<span>权限字典</span>
</MenuItem>
</Menu>
<div slot="trigger"></div>
</Sider>
<Layout>
<Content :style="{margin: '0', background: '#212121', minHeight: content_height}">
<router-view></router-view>
</Content>
</Layout>
</Layout>
</div>
</div>
</template> <script>
export default {
name: "xxx",
data() {
return {
// activeNameString:'1-1',
routerIndex:1,
header_height:70,
content_height:220 + 'px'
}
},
methods:{
jump(index){
if (index === 1) {
this.$router.push('/backHome/dictionary/source')
} else if (index === 2) {
this.$router.push('/backHome/dictionary/authority')
} else if (index === 3) {
this.$router.push('/backHome/dictionary/account')
}
}
},
computed:{
getActiceName(){
return this.$store.state.activeNameString
}
},
components: { },
created() {
console.log(this.$store.state.activeNameString)
},
mounted(){
this.content_height = window.innerHeight - this.header_height + 'px'
}
};
</script>
store.js
export const store = {
state:{
test:"hello",
activeNameString:"1-1"
},
getters:{
},
mutations:{
changeActiveNameFunc(state, obj){
state.activeNameString = obj.activeNameString
}
},
actions:{
changeActiveNameFunc(context, obj){
context.commit('changeActiveNameFunc', obj)
}
}
}
main.js
...
import Vue from 'vue'
import App from './App'
import Vuex from 'vuex'
// iview
import iView from 'iview';
Vue.use(iView);
// vuex
Vue.use(Vuex)
import {router} from './router.js'
import {store} from './store.js' const s = new Vuex.Store(store)
...
const v = new Vue({
el: '#app',
router,
store:s,
components: { App },
template: '<App/>'
})
以上。
vuex : 用vuex控制侧栏点亮状态的更多相关文章
- 多种css3时尚侧栏菜单展开显示效果Off-Canvas Menu Effects
今天我们想分享多种css3时尚侧栏菜单展开显示效果.侧边栏应用广泛,我们之前已经产生了一些效果灵感.风格演变,今天我们要展示一套新的灵感的现代效果.不同的布局和菜单的同步转换和页面可以让一切看起来更有 ...
- Ionic Js十七:侧栏菜单
一个容器元素包含侧边菜单和主要内容.通过把主要内容区域从一边拖动到另一边,来让左侧或右侧的侧栏菜单进行切换. 效果图如下所示:   用法 要使用侧栏菜单,添加一个父元素,一个中间内容 ,和一个或更 ...
- ionic js 侧栏菜单 把主要内容区域从一边拖动到另一边,来让左侧或右侧的侧栏菜单进行切换
ionic 侧栏菜单 一个容器元素包含侧边菜单和主要内容.通过把主要内容区域从一边拖动到另一边,来让左侧或右侧的侧栏菜单进行切换. 效果图如下所示: 用法 要使用侧栏菜单,添加一个父元素<ion ...
- 使用django开发博客过程记录3——博客侧栏实现
说起这个侧栏真是苦恼我很长时间,一开始以为和之前的一样传递额外参数就可以了就像下面这样: class IndexView(ListView): template_name = 'apps/index. ...
- PIC12F629帮我用C语言写个程序,控制三个LED亮灭
http://power.baidu.com/question/240873584599025684.html?entry=browse_difficult PIC12F629帮我用C语言写个程序,控 ...
- 仿酒仙网的一款jQuery侧栏弹出导航栏特效
仿酒仙网的一款jQuery侧栏弹出导航栏特效 一款常用于商城左侧商品导航的jquery菜单导航特效. 非常不错的一款商品分类特效.大家可以拿去研究研究 . 注意:该特效还支持挨千刀的IE6啊,之强大. ...
- 原生javascript写的侧栏跟随效果
浏览网站时经常看到有的网站上,当一个页面很长的时候,设定侧栏内容会跟随滚动条滚动,我们把这种效果叫做“侧栏跟随滚动”.这种特效对提高网站浏览量.文章点击率.广告点击量都有一定效果. 侧栏跟随滚动的实现 ...
- 玩转Firefox侧栏
偶然看到煎蛋网的"玩转firefox侧栏",才注意到它. Firefox侧栏有啥不一样? Firefox可以在侧栏中打开网页. 于是,一系列玩法就出来了... 侧栏打开在线应用 G ...
- Centos7下建立rubymine快捷方式到侧栏或桌面
gnome桌面的所有菜单项都存储如下位置: /usr/share/applications/ 新建一个菜单项,直接在该目录下新建一个后缀名为.desktop的文件即可. $ vi /usr/share ...
随机推荐
- WeChair项目Alpha冲刺(10/10)
团队项目进行情况 1.昨日进展 Alpha冲刺第十天 昨日进展: 前端:安排页面美化,设计实名认证 后端:更新dao层代码 数据库:修改数据表属性,与后端部署数据库交互 2.今日安排 前端:继续 ...
- PHP丨PHP基础知识之数据类型
PHP的数据类型主要有三大种:(细分的话8小种) 一.标量数据类型 标量数据类型包括以下几种: (1)BOOLEAN:布尔型 布尔变量是PHP变量中最简单的: 它保存一个TRUE或者FALSE值: 其 ...
- Docker(一)Docker概述
Docker概述 概述 Docker是供开发人员和系统管理员 使用容器构建,运行和共享应用程序的平台.使用容器来部署应用程序称为容器化.容器不是新的,但用于轻松部署应用程序的容器却是新的. 容器化越来 ...
- NET 数据结构-单链表
概念介绍: 单链表是一种链式存取的数据结构,用一组地址任意的存储单元存放线性表中的数据元素. 链表中的数据是以结点来表示的,每个结点的构成:元素(数据元素的映象) + 指针(指示后继元素存储位置),元 ...
- 设计模式系列之中介者模式(Mediator Pattern)——协调多个对象之间的交互
说明:设计模式系列文章是读刘伟所著<设计模式的艺术之道(软件开发人员内功修炼之道)>一书的阅读笔记.个人感觉这本书讲的不错,有兴趣推荐读一读.详细内容也可以看看此书作者的博客https:/ ...
- 基于flink和drools的实时日志处理
1.背景 日志系统接入的日志种类多.格式复杂多样,主流的有以下几种日志: filebeat采集到的文本日志,格式多样 winbeat采集到的操作系统日志 设备上报到logstash的syslog日志 ...
- JAVA集合框架 - Collection
collection大致介绍 Collection是集合层次结构中的根接口. 集合表示一组对象.有些集合允许重复元素,有些则不允许.有些是有序的,有些是无序的. JDK没有提供此接口的任何直接实现:它 ...
- 【总结】Asp.Net Mvc 后台控制器获取页面发来的参数类型
接收各种参数(普通参数,对象,JSON, URL) 待续...
- #Google HTML&CSS规范指南
Google HTML&CSS规范指南 翻译自原文 目录 Google HTML&CSS规范指南 1. 背景 2. 通用 2.1 通用样式规则 2.1.1 协议 2.2 通用格式规则 ...
- SharePoint删除图片库文件
SPSecurity.RunWithElevatedPrivileges(delegate() { using (SPSite site = new SPSite(SPContext.Current. ...