补全vue3与移动端文档

Author: cq-panda

Vol.Vue/src/views/document/docApi/doc_header.vue

@@ -8,15 +8,16 @@
         import VolHeader from "@/components/basic/VolHeader.vue";
         </code>
     </pre>
-    <VolHeader style="margin: 30px 0;" :icon="icon" :text="text">
+    <VolHeader style="margin: 30px 0;" icon="ios-apps" :text="text">
       <div slot="content">VolHeader这里可以定义显示内容</div>
       <div style="text-align: right;padding-top: 4px;">
         <Button type="text" icon="ios-search" size="small" @click="()=>{this.$Message.error('1')}">buttons1</Button>
         <Button type="text" icon="ios-search" size="small" @click="()=>{this.$Message.error('2')}">buttons2</Button>
       </div>
     </VolHeader>
     <div>
-      <docParamTable name="header"></docParamTable>
+      <docParamTable name="header" :v3="true"></docParamTable>
+ 
     </div>
   </div>
 </template>

Vol.Vue/src/views/document/docApi/doc_table.vue

@@ -170,6 +170,16 @@
           "
           >查看代码</Button
         >
+        <Button
+          type="info"
+          @click="
+            () => {
+              this.viewCode = true;
+              this.code = this.sourceCode.btnedittable3;
+            }
+          "
+          >查看vue3代码</Button
+        >
       </div>
     </div>
     <br />
@@ -178,8 +188,28 @@
       <table3></table3>
     </div>
     <div>
-      <docParamTable name="voltable"></docParamTable>
-    </div>
+        <Button
+          type="info"
+          @click="
+            () => {
+              this.viewCode = true;
+              this.code = this.sourceCode.searchTable;
+            }
+          "
+          >查看代码</Button
+        >
+        <Button
+          type="info"
+          @click="
+            () => {
+              this.viewCode = true;
+              this.code = this.sourceCode.searchTable3;
+            }
+          "
+          >查看vue3代码</Button
+        >
+      </div>
+      <!-- <docParamTable name="voltable"></docParamTable> -->
     <br />
     <br />
     <VolBox
@@ -474,7 +504,7 @@ let doc_options = {
                 this.$Message.error("点击标签触发的事件");
               },
             },
-            width: 250,
+            width: 80,
           },
           {
             field: "test2",
@@ -501,13 +531,13 @@ let doc_options = {
           },
           {
             title: "render动态生成组件",
-            width: 165,
+            width: 220,
             render: (h, { row, column, index }) => {
               return h("div", { style: {} }, [
                 h(
-                  "Button",
+                  "a",
                   {
-                    props: { type: "success", size: "small" },
+                    props: { },
                     style: {},
                     on: {
                       click: (e) => {
@@ -523,9 +553,9 @@ let doc_options = {
                   "render按钮"
                 ),
                 h(
-                  "Button",
+                  "a",
                   {
-                    props: { type: "info", size: "small" },
+                    props: { },
                     style: { "margin-left": "10px" },
                     on: {
                       click: (e) => {
@@ -576,7 +606,7 @@ let doc_options = {
           {
             field: "test5",
             title: "测试5",
-            width: 150,
+            width: 300,
           },
         ],
       },

Vol.Vue/src/views/document/docApi/doc_volform.vue

@@ -23,7 +23,7 @@
         <Button type="info" @click="validate">验证表单 </Button>
     </div>
     <div>
-      <docParamTable name="form"></docParamTable>
+      <docParamTable name="form" :v3="true"></docParamTable>
     </div>
   </div>
 </template>

Vol.Vue/src/views/document/docApi/sourceCode.js

@@ -137,6 +137,7 @@ export default {
         },
         {
           text: '移动端(uni-app)',
+             path: '/app/home',
           actived: false
         },
         {

Vol.Vue/src/views/document/document.vue

@@ -1735,7 +1735,7 @@
                 border: 1px solid #d4d1d1;
               "
             >
-              <span style="color: #666666; font-size: 14px">消息推送</span>
+              <span style="color: #666666; font-size: 14px">消息推送(signalR)</span>
             </td>
             <td
               style="
@@ -1763,7 +1763,7 @@
                 border: 1px solid #d4d1d1;
               "
             >
-              <span style="color: #666666; font-size: 14px">x</span>
+              <span style="color: #666666; font-size: 14px">√</span>
               <span style="display: none"></span>
             </td>
           </tr>

Vol.Vue/src/views/document/guide.vue

@@ -1,193 +0,0 @@
-<template>
-  <div class="home">
-    <div class="head">
-      <div class="location">
-        <Dropdown>
-          <a href="javascript:void(0)">
-            北京市
-            <Icon type="ios-arrow-down"></Icon>
-          </a>
-          <DropdownMenu slot="list">
-            <DropdownItem>上海市</DropdownItem>
-            <DropdownItem>天津市</DropdownItem>
-            <DropdownItem>广州市</DropdownItem>
-          </DropdownMenu>
-        </Dropdown>
-      </div>
-      <div class="text">首页</div>
-      <div class="search">
-        <Icon type="ios-search" />
-      </div>
-      <!-- <Input search placeholder="搜索..." /> -->
-    </div>
-    <div class="home-content">
-      <!-- autoplay -->
-      <div class="title" style="border-left: 2px solid #00BCD4;">优选功能</div>
-      <Carousel class="carouse" style="display:none;" :height="180" v-model="value2" loop>
-        <CarouselItem v-for="(item,i) in carouse" :key="i">
-          <img :src="item.src" />
-        </CarouselItem>
-      </Carousel>
-      <div >
-      <!-- <div class="title">快捷功能</div> -->
-      <div class="icon-item">
-        <a class="item" v-for="(item,index) in icons" :key="index">
-          <!-- <Icon :type="item.icon" /> -->
-          <Avatar :style="{'background':item.color}" :icon="item.icon" size="large" />
-          <br />
-          <span>{{item.name}}</span>
-        </a>
-      </div>
-      <div  style="margin-top: 1rem;">
-        <list></list>
-      </div>
-      </div>
-    </div>
-  </div>
-  <!--  -->
-</template>
-<script>
-import list from "@/../src/components/Community/list.vue";
-export default {
-  components: { list: list },
-  data() {
-    return {
-      icons: [
-        {
-          name: "热 点",
-          path: "/app/home",
-          icon: "ios-aperture",
-          color: "#FF9800"
-        },
-        {
-          name: "商 圈",
-          path: "/app/home",
-          icon: "ios-cart",
-          color: "#7dbcee"
-        },
-        {
-          name: "社 圈",
-          path: "/app/home",
-          icon: "ios-globe-outline",
-          color: "#fa805a"
-        },
-        {
-          name: "话 题",
-          path: "/app/home",
-          icon: "ios-contacts",
-          color: "rgb(224, 140, 238)"
-        },
-        {
-          name: "服 务",
-          path: "/app/home",
-          icon: "ios-appstore",
-          color: "rgb(0, 201, 8)"
-        },
-        { name: "交 友", path: "/app/home", icon: "md-cafe", color: "#fa805a" },
-        {
-          name: "二 手",
-          path: "/app/home",
-          icon: "ios-hand",
-          color: "rgb(255, 121, 167)"
-        },
-        {
-          name: "其 他",
-          path: "/app/home",
-          icon: "ios-ionic",
-          color: "#7dbcee"
-        }
-      ],
-      carouse: [
-        {
-          src: "https://imgs-1256993465.cos.ap-chengdu.myqcloud.com/h5/h51.jpg"
-        },
-        {
-          src: "https://imgs-1256993465.cos.ap-chengdu.myqcloud.com/h5/h52.jpg"
-        },
-        {
-          src: "https://imgs-1256993465.cos.ap-chengdu.myqcloud.com/h5/h53.jpg"
-        },
-        {
-          src: "https://imgs-1256993465.cos.ap-chengdu.myqcloud.com/h5/h54.jpg"
-        }
-      ],
-      value2: 0
-    };
-  }
-};
-</script>
-<style lang="less" scoped>
-.home {
-  background: #f9f8f8;
-  height: 100%;
-}
-.home-content{
-      margin-top: 42px;
-  overflow-y: auto;
-}
-.carouse {
-  height: 180px;
-  img {
-    height: 100%;
-    width: 100%;
-  }
-}
-.head {
-  width: 100%;
-  padding: 0.6rem;
-  background: white;
-  display: inline-block;
-      border-bottom: 1px solid #eee;
-      top: 0;
-    position: fixed;
-    z-index: 100;
-  > div {
-    float: left;
-    width: 33.3333%;
-  }
-  .location .ivu-dropdown {
-    top: 5px;
-    position: relative;
-  }
-  .text {
-    text-align: center;
-    font-size: 1rem;
-    color: forestgreen;
-  }
-  .search {
-    text-align: right;
-    font-size: 1.1rem;
-    color: forestgreen;
-  }
-}
-.title {
-  padding: 0.6rem;
-}
-.icon-item {
-  width: 100%;
-  display: inline-block;
-  position: relative;
-  background: white;
-  /* height: 3.7rem; */
-  /* background: red; */
-  border: 1px solid #eee;
-  // padding: 1rem 0;
-  // margin-top: 1rem;
-  > a {
-    float: left;
-    width: 25%;
-    padding: 0.6rem 0.3rem;
-    text-align: center;
-    color: #7c7979;
-    border: 1px solid #f1eded;
-    > i {
-      font-size: 1.8rem;
-    }
-  }
-}
-</style>
-<style scoped>
-.head >>> input {
-  border-radius: 20px;
-}
-</style>