Quellcode durchsuchen

增加导航栏的案例。

yangzhijie vor 4 Jahren
Ursprung
Commit
9f67ff40d3

+ 3 - 0
examples/App.vue

@@ -25,6 +25,9 @@
                     <li>
                         <router-link :to="{ path: '/desktop/loading-example'}">加载中</router-link>
                     </li>
+                    <li>
+                        <router-link :to="{ path: '/desktop/navbar-example'}">页面导航</router-link>
+                    </li>
 
                     
 

+ 21 - 2
examples/modal/src/ModalExample.vue

@@ -1,14 +1,30 @@
 <template>
-
+    <h1>模态框</h1>
     <button @click="show">显示</button>
     <Modal ref="modal" title="hello">
         <div>hello</div>
     </Modal>
+
+    
+    <h1>模态框-标题+内容+结尾</h1>
+    <button @click="show1">显示</button>
+    <Modal ref="modal1" title="hello" :showCanelButton="false" :showOkButton="false">
+        <template #header>
+            标题
+        </template>
+        <template #default>
+            内容
+        </template>
+        <template #footer>
+            结尾
+        </template>
+    </Modal>
+
 </template>
 
 <script>
 
-import Modal from "@/modal/src/Modal.vue";
+import Modal from "@/modal/index.js";
 
 export default {
     data: function(){
@@ -24,6 +40,9 @@ export default {
     methods: {
         show: function(){
             this.$refs.modal.showModal();
+        },
+        show1: function(){
+            this.$refs.modal1.showModal();
         }
     },
 

+ 50 - 0
examples/navbar/src/NavbarExample.vue

@@ -0,0 +1,50 @@
+<template>
+    <h1>页面导航</h1>
+    <Navbar title="页面导航">
+    </Navbar>
+
+    <h1>页面导航-显示返回按钮</h1>
+    <Navbar title="页面导航-显示返回按钮" :isGoBack="true">
+    </Navbar>
+
+    <h1>页面导航-额外的内容</h1>
+    <Navbar title="页面导航-显示返回按钮" :isGoBack="true">
+        <template #default>
+            您好
+        </template>
+    </Navbar>
+
+</template>
+
+<script>
+import Navbar from "@/navbar/index.js";
+
+export default {
+    data: function(){
+        return {
+
+        }
+    },
+
+    components: {
+        "Navbar": Navbar
+    },
+
+    methods: {
+        show: function(){
+            this.$refs.modal.showModal();
+        },
+        show1: function(){
+            this.$refs.modal1.showModal();
+        }
+    },
+
+    mounted: function(){
+        
+    }
+}
+</script>
+
+<style scoped>
+
+</style>

+ 5 - 1
examples/route/index.js

@@ -4,6 +4,7 @@ const DateExample = () => import(/* webpackChunkName: "date-example" */ '../date
 const DateTimeExample = () => import(/* webpackChunkName: "date-time-example" */ '../datetime/src/DateTimeExample.vue')
 const DateTimeV2Example = () => import(/* webpackChunkName: "date-time-v2-example" */ '../datetime-v2/src/DateTimeV2Example.vue')
 const ModalExample = () => import(/* webpackChunkName: "modal-example" */ '../modal/src/ModalExample.vue')
+const NavbarExample = () => import(/* webpackChunkName: "nav-bar-example" */ '../navbar/src/NavbarExample.vue')
 const ImagePreviewExample = () => import(/* webpackChunkName: "image-preview-example" */ '../image-preview/src/ImagePreviewExample.vue')
 const LoadingExample = () => import(/* webpackChunkName: "loading-example" */ '../loading/src/LoadingExample.vue')
 const ProcessReport = () => import(/* webpackChunkName: "process-report" */ '../../packages/process/src/ProcessReport.vue')
@@ -38,9 +39,12 @@ export default {
 				/** 加载中 */
 				{ path: 'loading-example', component: LoadingExample },
 
-				
+				/** 页面导航 */
+				{ path: 'navbar-example', component: NavbarExample },
 
+				
 
+				
 
 				/** 流程报表 */
 				{ path: 'process-report/:no', component: ProcessReport },