update README.md

codedefault · Sep 10, 2018 · eb5d3ee · eb5d3ee
1 parent 981a982
commit eb5d3ee
Show file tree

Hide file tree

Showing 2 changed files with 100 additions and 12 deletions.
diff --git a/README.md b/README.md
@@ -1,5 +1,74 @@
-# DncVueSample
-A Vue.js + iview static html admin template project.
+## 关于DncVueSample
+
+**VncVueSample**由**码友网**(https://codedefault.com)发布并提供更新支持。
+
+作者:Rector
+
+演示地址：https://codedefault.github.io/DncVueSample/
+
+**DncVueSample：** 是一个基于Vue.js + iview 前端框架搭建的后台管理系统模板，适用于如：OA,CRM,CMS等管理系统的后台开发。 
+
+## 模板简介
+
+### 版本信息
+
+**DncVueSample**当前依赖的组件的版本信息如下：
+
+**Vue.js:** 2.5.17
+**iview:** 3.1.0 
+
+### 布局和菜单
+
+该模板以左菜单，右操作面板来布局。左侧菜单树目前支持两级菜单，菜单树以JSON格式定义。其中，菜单项支持指定图标，菜单的链接地址等选项，详细的配置属性如：
+```
+{
+    title:"用户及授权",
+    name:"1",
+    icon:"logo-apple",
+    menuItem:[
+        {
+            label:"用户管理",
+            name:"1-1",
+            href:"/account/user/list",
+            icon:"logo-apple"
+        },
+        {
+            label:"资源管理",
+            name:"1-2",
+            href:"/account/resource/list",
+            icon:"logo-windows"
+        },
+        {
+            label:"角色管理",
+            name:"1-3",
+            href:"/account/role/list",
+            icon:"logo-tux"
+        }
+    ]
+}
+```
+
+左侧菜单支持收起和展开，当菜处于收起状态时，只显示菜单项的图标，这样使得整个系统的在横向的操作界面空更宽一些，在数据的展示上效果会更好。 
+
+### 选项卡
+
+右侧操作区是以选项卡(iframe)打开的各个操作界面，每个选项卡页面均为一个独立的页面。
+
+当点击每个选项卡时，左侧菜单会自动跟踪到当前打开的菜单上。
+
+选项卡切换时，支持切换动画效果，视觉体验非常不错。 
+
+### 结束语
+
+ DncVueSample是一个极简的基于Vue.js + iview 实现的静态后台管理系统模板，她仅是一个后台管理系统模板的雏形UI，不涉及系统功能，但所谓“麻雀虽小五脏俱全”，选择DncVueSample作为后台管理系统的初始模板，可以帮助使用者快速地开始项目的开端UI框架的搭建。
+
+> **注：DncVueSample目前没有适配移动端设备和IE10以下古老的浏览器，所以请在PC设备中使用现代浏览器预览和使用。**
+
+### 代码开源
+
+没错，DncVueSample是开源的，你可以使用DncVueSample模板框架做任何的集成或者开发。
+
+源代码托管地址: https://github.com/codedefault/DncVueSample 
 
 **Demo:** [DncVueSample演示地址][1]
 

diff --git a/index.html b/index.html
@@ -75,16 +75,26 @@
                         </i-menu>
                     </i-header>
                     <i-content :style="mainContentHeight">
-                        <tabs closable v-show="tabs.length>0" :value="menuState.activeTabName" :animated="true"
-                            @on-click="handleTabClicked" @on-tab-remove="handleTabRemoved">
-                            <Dropdown style="margin-left: 20px" placement="bottom-end" slot="extra" @on-click="handleTabDropdownClick">
+                        <tabs :type="tab.type" closable v-show="tabs.length>0" :value="menuState.activeTabName"
+                            :animated="true" @on-click="handleTabClicked" @on-tab-remove="handleTabRemoved">
+                            <Dropdown style="margin-left: 20px" placement="bottom-end" transfer="true" slot="extra"
+                                @on-click="handleTabDropdownClick">
                                 <i-button type="text" style="height:30px;">
                                     <Icon type="ios-arrow-down"></Icon>
                                 </i-button>
                                 <dropdown-menu slot="list">
-                                    <dropdown-item name="close-all">关闭全部</dropdown-item>
-                                    <dropdown-item name="close-current">关闭当前</dropdown-item>
-                                    <dropdown-item name="close-others">关闭其他</dropdown-item>
+                                    <dropdown-item name="close-all">
+                                        <Icon type="md-close"></Icon> 关闭全部
+                                    </dropdown-item>
+                                    <dropdown-item name="close-current">
+                                        <Icon type="ios-arrow-forward"></Icon> 关闭当前
+                                    </dropdown-item>
+                                    <dropdown-item name="close-others">
+                                        <Icon type="md-arrow-forward"></Icon> 关闭其他
+                                    </dropdown-item>
+                                    <dropdown-item name="switch-tab-type" divided>
+                                        <Icon type="md-swap"></Icon> 切换模式
+                                    </dropdown-item>
                                 </dropdown-menu>
                             </Dropdown>
                             <tab-pane v-for="(tab,index) in tabs" :key="tab" :label="tab.label" :icon="tab.icon" :name="tab.name"
@@ -112,6 +122,9 @@
                     activeTabName: "",
                     openMenus: []
                 },
+                tab: {
+                    type: "line" //可选值:line,card
+                },
                 isCollapsed: false,
                 menu: [
                     {
@@ -215,7 +228,6 @@
                     this.doRemoveTab(index);
                 },
                 handleResize: function () {
-                    console.log("resized.");
                     this.calcFrameHeight();
                 },
                 handleTabDropdownClick: function (name) {
@@ -229,18 +241,22 @@
                         case "close-others":
                             this.doCloseTabOthers();
                             break;
+                        case "switch-tab-type":
+                            this.handleSwitchTabType();
+                            break;
                     }
                 },
                 doRemoveTab: function (index) {
+                    var tab = this.tabs[index];
+                    if (!tab.closable) {
+                        return;
+                    }
                     this.tabs.splice(index, 1);
                 },
                 doCloseTabAll: function () {
-                    console.log("close all clicked.");
                     for (var i = this.tabs.length - 1; i >= 0; i--) {
                         var tab = this.tabs[i];
-                        console.log("close all each item:", JSON.stringify(tab));
                         if (tab.closable) {
-                            console.log("doCloseTabAll: ", JSON.stringify(this.tabs[i]));
                             this.doRemoveTab(i);
                         }
                     }
@@ -266,6 +282,9 @@
                         target.handleTabClicked(target.menuState.activeTabName);
                     }, 100);
 
+                },
+                handleSwitchTabType: function () {
+                    this.tab.type = this.tab.type === "line" ? "card" : "line";
                 }
             }
         });