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 ...
随机推荐
- C++ 公有继承、保护继承和私有继承的对比
在c++的继承控制中,有三种不同的控制权限,分别是public.protected和private.定义派生类时,若不显示加上这三个关键字,就会使用默认的方式,用struct定义的类是默认public ...
- Domain Adaptive Faster R-CNN:经典域自适应目标检测算法,解决现实中痛点,代码开源 | CVPR2018
论文从理论的角度出发,对目标检测的域自适应问题进行了深入的研究,基于H-divergence的对抗训练提出了DA Faster R-CNN,从图片级和实例级两种角度进行域对齐,并且加入一致性正则化来学 ...
- Java并发编程-深入探讨synchronized实现原理
synchronized这个关键字对应Java程序猿来说是非常的熟悉,只要遇到要解决线程安全问题的地方都会使用这个关键字.接下来一起来探讨一下synchronized到底时怎么实现线程同步,使用syn ...
- unknown directive "" in E:\canteen\nginx-1.16.0/conf/nginx.conf:3-------文本编辑器修改nginx配置文件的坑
nignx小白一个,今天在配置nginx的时候,理所当然的用了文本编辑器编辑并保存了一下nginx的nginx.conf配置文件,一不小心就折腾了几个钟. 保存之后就nginx -s reload一下 ...
- SpringCloud与Eureka,Feign,Ribbon,Hystrix,Zuul核心组件间的关系
Eureka:各个服务启动时,Eureka Client都会将服务注册到Eureka Server,并且Eureka Client还可以反过来从Eureka Server拉取注册表,从而知道其他服务在 ...
- Scala创建SparkStreaming获取Kafka数据代码过程
正文 首先打开spark官网,找一个自己用版本我选的是1.6.3的,然后进入SparkStreaming ,通过搜索这个位置找到Kafka, 点击过去会找到一段Scala的代码 import or ...
- swift对象存储安装
对象存储服务概览 OpenStack对象存储是一个多租户的对象存储系统,它支持大规模扩展,可以以低成本来管理大型的非结构化数据,通过RESTful HTTP 应用程序接口. 它包含下列组件: 代理服务 ...
- Python实用笔记——错误处理
让我们用一个例子来看看try的机制: try: print('try...') r = 10 / 0 print('result:', r) except ZeroDivisionError as e ...
- 基于opencv的车牌提取项目
初学图像处理,做了一个车牌提取项目,本博客仅仅是为了记录一下学习过程,该项目只具备初级功能,还有待改善 第一部分:车牌倾斜矫正 # 导入所需模块 import cv2 import math from ...
- vue全家桶(2.1)
3.路由切换 3.1.vue-router路由切换 3.1.1.什么是前端路由 路由这个概念最先是后端出现的,发送不同的请求,后端根据请求的不同返回不同的资源,这个时候的url是和后端交互的,需要在后 ...