antd vue json渲染的导航栏

毛默默不吃鱼

已于 2022-03-07 10:51:14 修改

阅读量238

点赞数

分类专栏： vue 文章标签： vue.js json javascript

于 2022-01-26 11:01:10 首次发布

本文链接：https://blog.csdn.net/qq_40869401/article/details/122697657

版权

vue 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

antd vue json渲染的管理系统

布局组件

<template>
  <div >
      <a-layout>
          <a-layout-header>
              <div class="logo"></div>
          </a-layout-header>
          <a-layout>
            <a-layout-sider> <sub-nav/></a-layout-sider>
            <a-layout>
             <a-layout-content>
                 <a-tabs  v-model="activeKey" hide-add type="editable-card" @edit="onEdit" @tabClick="jump">
                   <a-tab-pane v-for="(pane,index) in panes" :key="index" :tab="pane.title" :closable="pane.closable">{{pane.title}}</a-tab-pane>
                 </a-tabs>
                 <div><iframe :src="htmlUrl"></iframe></div>
             </a-layout-content>
            </a-layout>
          </a-layout>
      </a-layout>
  </div>
</template>

<script>
import subNav from './subNav'
import {mapState} from 'vuex'
export default {
components:{subNav},
data() {
    return {
        activeKey: undefined,
      newTabIndex: 0,
    }
},
computed: {
    ...mapState({
        panes:(state)=>state.list,
        htmlUrl:(state)=>state.url
    })
},
methods: {
  callback(key) {
      console.log(key);
    },
    onEdit(targetKey, action) {
      this[action](targetKey);
    },
    jump(i){
        let {valueObj} =this.panes[i].item.value
       this.$store.commit('setUrl',valueObj.src)
    },
      remove(targetKey) {
      if(this.panes){
         this.panes.splice(targetKey,1)
          if(targetKey>0){
           let len=this.panes.length
           this.$store.commit('setHtmlUrl',this.panes[len-targetKey-1].item.value.url)
         }else{
             this.$store.commit('setHtmlUrl',this.panes[targetKey+1].item.value.url)
		}
      }else{
             this.$store.commit('setHtmlUrl','')
		}
   
    },
},
}
</script>

<style>

</style>

导航组件

<template>
  <div>
      <div class="box"></div>
      <a-menu>
    <a-menu
      mode="inline"
      theme="dark"
      :inline-collapsed="collapsed"
      @click="clickMenuItem"
    >
      <template v-for="item in list">
        <a-menu-item v-if="!item.children" :key="item.key" :title="item.title" :value="item">
          <a-icon type="pie-chart" />
          <span>{{ item.title }}</span>
        </a-menu-item>
        <sub-menu v-else :key="item.key" :menu-info="item" />
      </template>
    </a-menu>
  </div>
</template>

<script>
import { Menu } from 'ant-design-vue';
const SubMenu = {
  template: `
      <a-sub-menu :key="menuInfo.key" v-bind="$props" v-on="$listeners" @mouseover="hover=true" @mouseleave="false">
        <span slot="title">
          <img :src="menuInfo.src | srcHover" v-if="hover" />
          <img :src="menuInfo.src | src" v-else />
        </span>
        <template v-for="item in menuInfo.children">
          <a-menu-item v-if="!item.children" :key="item.key" :title="item.title" :value="item">
            <a-icon type="pie-chart" />
            <span>{{ item.title }}</span>
          </a-menu-item>
          <sub-menu v-else :key="item.key" :menu-info="item" :title="item.title" :value="item"/>
        </template>
      </a-sub-menu>
    `,
  name: 'SubMenu',
  // must add isSubMenu: true
  isSubMenu: true,
  data(){
  return {
  hover:false
},
filters:{
	src:function(str){
		if(!str) return 
		var newUrl=require(''@assets/img/'+str)
		return newUrl
	},
	srcHover(str){
		if(!str) return 
		var newStr=str.split('.')
		var newUrl=newStr[0].concat('_hover.png')
		var url=require(''@assets/img/'+newUrl)
		return url
	}
}

  
  props: {
    ...Menu.SubMenu.props,
    // Cannot overlap with properties within Menu.SubMenu.props
    menuInfo: {
      type: Object,
      default: () => ({}),
    },
  },
};
export default {
 components: {
    'sub-menu': SubMenu,
  },
  data() {
    return {
      collapsed: false,
      list: [],
     clickArr:[]
    };
  },
  created() {
      this.list=jssdk.dataJson.list
  },
  methods: {
    toggleCollapsed() {
      this.collapsed = !this.collapsed;
    },
    clickMenuItem(data){
        let itemUrl=''
        let isEqual=this.clickArr.some(item=>{
            if(!isEqual){
                this.clickArr.push(data)
            }
            itemUrl=data.item.value.itemUrl
            this.$store.commit('setPanes',this.clickArr)//缓存点击的导航item，layout里的panes
            this.$store.commit('setUrl',itemUrl)
        })
    }
  },
}
</script>

<style>

</style>