md-iview 1.0.12

package/src/components/md-shrinkable-menu/demo/index.vue

@@ -0,0 +1,285 @@
+<style lang="less">
+    @import "index.less";
+</style>
+<template>
+    <div class="main" :class="{'main-hide-text': shrink}">
+        <div class="sidebar-menu-con" :style="{width: shrink?'80px':'250px'}">
+            <scroll-bar ref="scrollBar">
+                <shrinkable-menu
+                    :shrink="shrink"
+                    @on-change="handleSubmenuChange"
+                    :theme="menuTheme"
+                    :before-push="beforePush"
+                    :open-names="openedSubmenuArr"
+                    :menu-list="menuList">
+                    <!--<div slot="top" class="logo-con">-->
+                        <!--<img v-show="!shrink"  src="@/assets/logo.png" key="max-logo" />-->
+                        <!--<img v-show="shrink" src="@/assets/logo.png" key="min-logo" />-->
+                    <!--</div>-->
+                </shrinkable-menu>
+
+            </scroll-bar>
+
+          <Affix :offset-bottom="0" class="menu-right-footer" @click.native="toggleClick"  :style="{width: shrink?'80px':'250px'}">
+            <div style="padding: 0 16px;">
+              <template v-if="!shrink">
+                <md-icon type="first_page" ></md-icon>
+              </template>
+              <template v-else>
+                <md-icon type="last_page"></md-icon>
+              </template>
+            </div>
+          </Affix>
+
+        </div>
+
+        <!--<div class="main-header-con" :style="{paddingLeft: shrink?'60px':'200px'}">-->
+            <!--<div class="main-header">-->
+                <!--<div class="navicon-con">-->
+                    <!--<Button :style="{transform: 'rotateZ(' + (this.shrink ? '-90' : '0') + 'deg)'}" type="text" @click="toggleClick">-->
+                        <!--<Icon type="navicon" size="32"></Icon>-->
+                    <!--</Button>-->
+                <!--</div>-->
+                <!--<div class="header-middle-con">-->
+                    <!--<div class="main-breadcrumb">-->
+                        <!--<breadcrumb-nav :currentPath="currentPath"></breadcrumb-nav>-->
+                    <!--</div>-->
+                <!--</div>-->
+                <!--<div class="header-avator-con">-->
+                    <!--<full-screen v-model="isFullScreen" @on-change="fullscreenChange"></full-screen>-->
+                    <!--<lock-screen></lock-screen>-->
+                    <!--<message-tip v-model="mesCount"></message-tip>-->
+                    <!--<theme-switch></theme-switch>-->
+
+                    <!--<div class="user-dropdown-menu-con">-->
+                        <!--<Row type="flex" justify="end" align="middle" class="user-dropdown-innercon">-->
+                            <!--<Dropdown transfer trigger="click" @on-click="handleClickUserDropdown">-->
+                                <!--<a href="javascript:void(0)">-->
+                                    <!--<span class="main-user-name">{{ userName }}</span>-->
+                                    <!--<Icon type="arrow-down-b"></Icon>-->
+                                <!--</a>-->
+                                <!--<DropdownMenu slot="list">-->
+                                    <!--<DropdownItem name="ownSpace">个人中心</DropdownItem>-->
+                                    <!--<DropdownItem name="loginout" divided>退出登录</DropdownItem>-->
+                                <!--</DropdownMenu>-->
+                            <!--</Dropdown>-->
+                            <!--<Avatar :src="avatorPath" style="background: #619fe7;margin-left: 10px;"></Avatar>-->
+                        <!--</Row>-->
+                    <!--</div>-->
+                <!--</div>-->
+            <!--</div>-->
+            <!--<div class="tags-con">-->
+                <!--<tags-page-opened :pageTagsList="pageTagsList"></tags-page-opened>-->
+            <!--</div>-->
+        <!--</div>-->
+        <!--<div class="single-page-con" :style="{left: shrink?'60px':'200px'}">-->
+            <!--<div class="single-page">-->
+                <!--<keep-alive :include="cachePage">-->
+                    <!--<router-view></router-view>-->
+                <!--</keep-alive>-->
+            <!--</div>-->
+        <!--</div>-->
+    </div>
+</template>
+<script>
+    // import shrinkableMenu from './main-components/shrinkable-menu/shrinkable-menu.vue';
+    // import tagsPageOpened from './main-components/tags-page-opened.vue';
+    // import breadcrumbNav from './main-components/breadcrumb-nav.vue';
+    // import fullScreen from './main-components/fullscreen.vue';
+    // import lockScreen from './main-components/lockscreen/lockscreen.vue';
+    // import messageTip from './main-components/message-tip.vue';
+    // import themeSwitch from './main-components/theme-switch/theme-switch.vue';
+    // import Cookies from 'js-cookie';
+    // import util from '@/libs/util.js';
+    // import scrollBar from '@/views/my-components/scroll-bar/vue-scroller-bars';
+
+    import shrinkableMenu from '../index';
+    import scrollBar from '../../md-scroll-bar';
+    import util from '../../libs/util';
+    import _menuList from './data/menu'
+    import _pageTagsList from './data/pageTagsList'
+    import _currentPath from './data/currentPath'
+    import _cachePage from './data/cachePage'
+
+    export default {
+        components: {
+            shrinkableMenu,
+            // tagsPageOpened,
+            // breadcrumbNav,
+            // fullScreen,
+            // lockScreen,
+            // messageTip,
+            // themeSwitch,
+            scrollBar
+        },
+        model:{
+          prop:'collapsed'
+        },
+        props:{
+          collapsed:{
+            type:Boolean,
+            default:false,
+          }
+        },
+        data () {
+            return {
+              menuList:[],
+                shrink: false,
+                userName: '',
+                isFullScreen: false,
+                // openedSubmenuArr: ["component","tables","form","advanced-router"]
+                openedSubmenuArr: [],//["个人中心","tables","form","advanced-router"]
+            };
+        },
+        computed: {
+            // menuList () {
+            //   console.log(this.$md.state.personal_menus);
+            //   return this.$md.state.personal_menus;
+            //     // return _menuList
+            //     // return this.$store.state.app.menuList;
+            // },
+            pageTagsList () {
+              return _pageTagsList
+                // return this.$store.state.app.pageOpenedList; // 打开的页面的页面对象
+            },
+            currentPath () {
+              return _currentPath;
+                // return this.$store.state.app.currentPath; // 当前面包屑数组
+            },
+            avatorPath () {
+                return localStorage.avatorImgPath;
+            },
+            cachePage () {
+              return _cachePage
+                // return this.$store.state.app.cachePage;
+            },
+            lang () {
+              return ""
+                // return this.$store.state.app.lang;
+            },
+            menuTheme () {
+              return 'light'
+                // return this.$store.state.app.menuTheme;
+            },
+            mesCount () {
+              return 3;
+                // return this.$store.state.app.messageCount;
+            }
+        },
+        methods: {
+          getMenusList(){
+            this.menuList = _menuList['result'];
+            this.openedSubmenuArr = this.menuList.map(elem=>{
+              return elem.name;
+            })
+
+            // this.menuList = [_menuList[2]];
+            // this.$md.dispatch('personal_menus', {userId:'4'}).then(data=>{
+            //   let list = data['result'][1];
+            //
+            //   let childList = list['childList'];
+            //   this.menuList = [list];
+            //   this.openedSubmenuArr = this.menuList .map(elem=>{
+            //     return elem.name;
+            //   })
+            //   // this.openedSubmenuArr = this.menuList;
+            //   console.log(this.menuList);
+            //   // this.menuList = data['result']
+            //   // console.log( data['result'][1]);
+            // })
+          },
+            init () {
+                // let pathArr = util.setCurrentPath(this, this.$route.name);
+                // this.$store.commit('updateMenulist');
+                // if (pathArr.length >= 2) {
+                //     this.$store.commit('addOpenSubmenu', pathArr[1].name);
+                // }
+                // this.userName = Cookies.get('user');
+                // let messageCount = 3;
+                // this.messageCount = messageCount.toString();
+                // this.checkTag(this.$route.name);
+                // this.$store.commit('setMessageCount', 3);
+            },
+            toggleClick () {
+                this.shrink = !this.shrink;
+                this.$emit('input', this.shrink);
+            },
+            handleClickUserDropdown (name) {
+                if (name === 'ownSpace') {
+                    util.openNewPage(this, 'ownspace_index');
+                    this.$router.push({
+                        name: 'ownspace_index'
+                    });
+                } else if (name === 'loginout') {
+                    // 退出登录
+                    this.$store.commit('logout', this);
+                    this.$store.commit('clearOpenedSubmenu');
+                    this.$router.push({
+                        name: 'login'
+                    });
+                }
+            },
+            checkTag (name) {
+                let openpageHasTag = this.pageTagsList.some(item => {
+                    if (item.name === name) {
+                        return true;
+                    }
+                });
+                if (!openpageHasTag) { //  解决关闭当前标签后再点击回退按钮会退到当前页时没有标签的问题
+                    util.openNewPage(this, name, this.$route.params || {}, this.$route.query || {});
+                }
+            },
+            handleSubmenuChange (val) {
+                // console.log(val)
+            },
+            beforePush (name) {
+                // if (name === 'accesstest_index') {
+                //     return false;
+                // } else {
+                //     return true;
+                // }
+                return true;
+            },
+            fullscreenChange (isFullScreen) {
+                // console.log(isFullScreen);
+            },
+            scrollBarResize () {
+                this.$refs.scrollBar.resize();
+            }
+        },
+        watch: {
+            collapsed(to) {
+              this.shrink = to;
+            },
+            '$route' (to) {
+                // this.$store.commit('setCurrentPageName', to.name);
+                // let pathArr = util.setCurrentPath(this, to.name);
+                // if (pathArr.length > 2) {
+                //     this.$store.commit('addOpenSubmenu', pathArr[1].name);
+                // }
+                // this.checkTag(to.name);
+                // localStorage.currentPageName = to.name;
+            },
+            lang () {
+                // util.setCurrentPath(this, this.$route.name); // 在切换语言时用于刷新面包屑
+            },
+            openedSubmenuArr () {
+                setTimeout(() => {
+                    this.scrollBarResize();
+                }, 300);
+            }
+        },
+        mounted () {
+            this.init();
+            window.addEventListener('resize', this.scrollBarResize);
+        },
+        created () {
+            // 显示打开的页面的列表
+            // this.$store.commit('setOpenedList');
+          this.getMenusList();
+        },
+        dispatch () {
+            window.removeEventListener('resize', this.scrollBarResize);
+        }
+    };
+</script>

package/src/components/md-shrinkable-menu/index.vue

@@ -0,0 +1,112 @@
+<template>
+  <div class="ivu-shrinkable-menu">
+    <slot name="top"></slot>
+    <sidebar-menu
+      v-show="!shrink"
+      :menu-theme="theme"
+      :menu-list="menuList"
+      :open-names="openNames"
+      :icon-size="iconSize"
+      :icon-color="iconColor"
+      :show-divider="showDivider"
+      :cell-height="cellHeight"
+      @on-change="handleChange"
+    ></sidebar-menu>
+    <sidebar-menu-shrink
+      v-show="shrink"
+      :menu-theme="theme"
+      :menu-list="menuList"
+      :icon-size="iconSize"
+      :icon-color="iconColor"
+      @on-change="handleChange"
+    ></sidebar-menu-shrink>
+  </div>
+</template>
+
+<script>
+import sidebarMenu from "./components/sidebarMenu.vue";
+import sidebarMenuShrink from "./components/sidebarMenuShrink.vue";
+import util from "../libs/util";
+// import util from '@/libs/util';
+export default {
+  name: "shrinkableMenu",
+  components: {
+    sidebarMenu,
+    sidebarMenuShrink
+  },
+  props: {
+    shrink: {
+      type: Boolean,
+      default: false
+    },
+    iconSize: {
+      type:Number,
+      default:16,
+    },
+    iconColor:{
+      type:Object|String,
+      default:'#C5C8CD'
+    },
+    cellHeight:{
+      type:Number,
+      default:56,
+    },
+    menuList: {
+      type: Array,
+      required: true
+    },
+    theme: {
+      type: String,
+      default: "dark",
+      validator(val) {
+        return util.oneOf(val, ["dark", "light"]);
+      }
+    },
+    beforePush: {
+      type: Function
+    },
+    openNames: {
+      type: Array
+    },
+    showDivider:{
+      type:Boolean,
+      default:true,
+    }
+  },
+  computed: {
+    bgColor() {
+      return this.theme === "dark" ? "#495060" : "#fafafa";
+    },
+    shrinkIconColor() {
+      return this.theme === "dark" ? "#595959" : "#495060";
+      // return this.theme === 'dark' ? '#fafafa' : '#495060';
+    }
+  },
+  methods: {
+    handleChange(name) {
+
+      let willpush = true;
+      if (this.beforePush !== undefined) {
+        if (!this.beforePush(name)) {
+          willpush = false;
+        }
+      }
+      // console.log(willpush, name)
+      if (willpush) {
+        this.$router.push({
+          path: name
+        });
+        // this.$router.push({
+        //     name: name
+        // });
+      }
+
+      this.$emit("on-change", name);
+    }
+  }
+};
+</script>
+
+<style lang="less" scoped>
+  /*@import "./styles/menu.less";*/
+</style>

package/src/components/md-shrinkable-menu/sidebar.vue

@@ -0,0 +1,195 @@
+<template>
+    <div class="main" :class="{'main-hide-text': shrink}">
+        <div class="sidebar-menu-con" :style="{width: shrink?'80px':'250px'}" :class="{'sidebar-menu-con-footer__has':!hideFooter,'sidebar-menu-con-footer__none':hideFooter}">
+            <scroll-bar ref="scrollBar">
+                <shrinkable-menu
+                        :shrink="shrink"
+                        @on-change="handleSubmenuChange"
+                        :theme="theme"
+                        :class="themeClassName"
+                        class="shrinkable-menu"
+                        :before-push="beforePush"
+                        :open-names="openedSubs"
+                        :icon-size="iconSize"
+                        :icon-color="iconColor"
+                        :show-divider="showDivider"
+                        :cell-height="cellHeight"
+                        :menu-list="menuList">
+                    <!--<div slot="top" class="logo-con">-->
+                    <!--<img v-show="!shrink"  src="@/assets/logo.png" key="max-logo" />-->
+                    <!--<img v-show="shrink" src="@/assets/logo.png" key="min-logo" />-->
+                    <!--</div>-->
+                </shrinkable-menu>
+            </scroll-bar>
+            <Affix v-if="!hideFooter" :offset-bottom="0" class="menu-right-footer" @click.native="toggleClick"  :style="{width: shrink?'80px':'250px'}">
+                <div style="padding: 0 16px;">
+                    <template v-if="!shrink">
+                        <md-icon type="md-arrow-back" size="18"></md-icon>
+                    </template>
+                    <template v-else>
+                        <md-icon type="md-arrow-forward"  size="18"></md-icon>
+                    </template>
+                </div>
+            </Affix>
+        </div>
+    </div>
+</template>
+<script>
+  import shrinkableMenu from './index';
+  import scrollBar from '../md-scroll-bar';
+  // import _menuList from './data/menu'
+
+  export default {
+    components: {
+      shrinkableMenu,
+      scrollBar
+    },
+    model:{
+      prop:'collapsed',
+    },
+    props:{
+      cellHeight:{
+        type:Number,
+        default:48,
+      },
+      iconSize: {
+        type:Number,
+        default:16,
+      },
+      iconColor:{
+        type:Object|String,
+        default:'#C5C8CD'
+      },
+      collapsed:{
+        type:Boolean,
+        default:false,
+      },
+      menus:{
+        type:Array|Object,
+        default:[],
+      },
+      hideFooter:{
+        type:Boolean,
+        default:true
+      },
+      openedSubs:{
+        type:Array|Object,
+        default:[],
+      },
+      showDivider:{
+        type:Boolean,
+        default:false,
+      },
+      theme:{
+        type:String,
+        default:'dark',
+        validator:value=>{
+          return ['dark', 'light'].indexOf(value) !== -1
+        }
+      }
+    },
+    data () {
+      return {
+        menuList:[],
+        shrink: false,
+        openedSubmenuArr: [],
+      };
+    },
+    computed: {
+      themeClassName() {
+        if (this.theme === 'dark') {
+          return ["shrinkable-menu--dark"]
+        }  else {
+          return ["shrinkable-menu--light"]
+        }
+      },
+      menuTheme () {
+        return 'light'
+        // return this.$store.state.app.menuTheme;
+      },
+    },
+    methods: {
+      getMenusList(){
+        this.menuList = this.menus;//_menuList['result'];
+        // this.openedSubmenuArr = this.menus.map(elem=>{
+        //   return elem.name;
+        // })
+        // this.menuList = [_menuList[2]];
+        // this.$md.dispatch('personal_menus', {userId:'4'}).then(data=>{
+        //   let list = data['result'][1];
+        //
+        //   let childList = list['childList'];
+        //   this.menuList = [list];
+        //   this.openedSubmenuArr = this.menuList .map(elem=>{
+        //     return elem.name;
+        //   })
+        //   // this.openedSubmenuArr = this.menuList;
+        //   console.log(this.menuList);
+        //   // this.menuList = data['result']
+        //   // console.log( data['result'][1]);
+        // })
+      },
+      toggleClick () {
+        this.shrink = !this.shrink;
+        this.$emit('input', this.shrink);
+      },
+      handleSubmenuChange (val) {
+        // console.log(val)
+      },
+      beforePush (name) {
+        // if (name === 'accesstest_index') {
+        //     return false;
+        // } else {
+        //     return true;
+        // }
+        return true;
+      },
+      scrollBarResize () {
+        this.$refs.scrollBar.resize();
+      }
+    },
+    watch: {
+      collapsed(to) {
+        this.shrink = to;
+      },
+      '$route' (to) {
+        // this.$store.commit('setCurrentPageName', to.name);
+        // let pathArr = util.setCurrentPath(this, to.name);
+        // if (pathArr.length > 2) {
+        //     this.$store.commit('addOpenSubmenu', pathArr[1].name);
+        // }
+        // this.checkTag(to.name);
+        // localStorage.currentPageName = to.name;
+      },
+      openedSubs () {
+        setTimeout(() => {
+          this.scrollBarResize();
+        }, 300);
+      }
+    },
+    mounted () {
+      window.addEventListener('resize', this.scrollBarResize);
+    },
+    created () {
+      // 显示打开的页面的列表
+      // this.$store.commit('setOpenedList');
+      this.getMenusList();
+    },
+    dispatch () {
+      window.removeEventListener('resize', this.scrollBarResize);
+    }
+  };
+</script>
+
+<style lang="less">
+    /*@import "./styles/sidebar.less";*/
+    /*.sidebar-menu-con-footer__has {*/
+    /*    height: calc(~"100% - 47px");;*/
+    /*}*/
+    /*.sidebar-menu-con-footer__none {*/
+    /*    height: calc(~"100%");;*/
+    /*}*/
+  /*  .shrinkable-menu {
+        background-color: #fafafa;
+    }*/
+</style>

package/src/components/md-shrinkable-menu/styles/menu.less

@@ -0,0 +1,5 @@
+.ivu-shrinkable-menu{
+    //height: 100%;
+    width: 100%;
+  min-height: 100%;
+}