fix: 首页优化

src/sites/doc/components/Header.vue

@@ -31,6 +31,9 @@
           </li>
           <li class="nav-item">
             <div
+              @focus="handleFocus"
+              @focusout="handleFocusOut"
+              tabindex="0"
               class="header-select-box"
               @click.stop="data.isShowSelect = !data.isShowSelect"
               :class="[data.isShowSelect == true ? 'select-up' : 'select-down']"
@@ -38,17 +41,19 @@
               <div class="header-select-hd"
                 >{{ data.verson }}<i class=""></i
               ></div>
-              <div class="header-select-bd" v-show="data.isShowSelect">
-                <div
-                  class="header-select-item"
-                  v-for="(item, index) in data.versonList"
-                  :key="index"
-                  @click.stop="checkTheme(item.name, index)"
-                  :class="{ active: data.activeIndex === index }"
-                >
-                  {{ item.name }}
+              <transition name="fade">
+                <div class="header-select-bd" v-show="data.isShowSelect">
+                  <div
+                    class="header-select-item"
+                    v-for="(item, index) in data.versonList"
+                    :key="index"
+                    @click.stop="checkTheme(item.name, index)"
+                    :class="{ active: data.activeIndex === index }"
+                  >
+                    {{ item.name }}
+                  </div>
                 </div>
-              </div>
+              </transition>
             </div>
           </li>
           <li class="nav-item">
@@ -60,7 +65,7 @@
   </div>
 </template>
 <script lang="ts">
-import { defineComponent, reactive, computed } from 'vue';
+import { defineComponent, reactive, computed, onMounted } from 'vue';
 import Search from './Search.vue';
 import { header } from '@/config';
 import { currentRoute, themeColor } from '@/sites/assets/util/ref';
@@ -89,8 +94,15 @@ export default defineComponent({
       activeIndex: 0,
       isShowSelect: false
     });
+    const handleFocus = () => {
+      console.log(1);
+    };
+    const handleFocusOut = () => {
+      data.isShowSelect = false;
+    };
     const isActive = computed(() => {
       return function(name: string) {
+        console.log(name, currentRoute.value);
         // console.log('name1', currentRoute.value == name.toLowerCase());
         return currentRoute.value == name.toLowerCase();
       };
@@ -117,7 +129,9 @@ export default defineComponent({
       data,
       isActive,
       checkTheme,
-      themeName
+      themeName,
+      handleFocus,
+      handleFocusOut
     };
   }
 });
@@ -177,10 +191,11 @@ export default defineComponent({
     .nav-box {
       margin-right: 140px;
       .nav-list {
-        min-width: 400px;
+        min-width: 445px;
         display: flex;
         list-style: none;
         align-items: center;
+        justify-content: space-around;
       }
       .nav-item {
         position: relative;
@@ -192,7 +207,6 @@ export default defineComponent({
         cursor: pointer;
         a {
           display: inline-block;
-          padding: 0 10px;
           line-height: 64px;
         }
         // overflow: hidden;
@@ -230,6 +244,7 @@ export default defineComponent({
     position: relative;
     display: inline-block;
     vertical-align: middle;
+    outline: 0;
   }
   &-hd {
     min-width: 77px;
@@ -495,4 +510,12 @@ export default defineComponent({
     }
   }
 }
+// 下拉列表选择动画效果
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.5s;
+}
+.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
+  opacity: 0;
+}
 </style>

src/sites/doc/components/Nav.vue

@@ -5,16 +5,30 @@
         {{ docs.name }}
       </li>
       <ul>
-        <li :class="{ active: isActive(_package.name) }" v-for="_package in docs.packages" :key="_package">
-          <router-link v-if="!_package.isLink" :to="_package.name.toLowerCase()">{{ _package.cName }}</router-link>
-          <a v-else :href="_package.name" target="_blank">{{ _package.cName }}</a>
+        <li
+          :class="{ active: isActive(_package.name) }"
+          v-for="_package in docs.packages"
+          :key="_package"
+        >
+          <router-link
+            v-if="!_package.isLink"
+            :to="_package.name.toLowerCase()"
+            >{{ _package.cName }}</router-link
+          >
+          <a v-else :href="_package.name" target="_blank">{{
+            _package.cName
+          }}</a>
         </li>
       </ul>
     </ol>
     <ol v-for="_nav in nav" :key="_nav">
       <li>{{ _nav.name }}</li>
       <ul>
-        <template :class="{ active: isActive(_package.name) }" v-for="_package in _nav.packages" :key="_package">
+        <template
+          :class="{ active: isActive(_package.name) }"
+          v-for="_package in _nav.packages"
+          :key="_package"
+        >
           <li v-if="_package.show">
             <router-link :to="_package.name.toLowerCase()">
               {{ _package.name }}&nbsp;&nbsp;<b>{{ _package.cName }}</b>
@@ -26,7 +40,7 @@
   </div>
 </template>
 <script lang="ts">
-import { defineComponent, reactive, computed } from 'vue';
+import { defineComponent, reactive, computed, onMounted } from 'vue';
 import { currentRoute } from '@/sites/assets/util/ref';
 import { nav, docs } from '@/config';
 export default defineComponent({
@@ -37,6 +51,9 @@ export default defineComponent({
         return currentRoute.value == name.toLowerCase();
       };
     });
+    onMounted(() => {
+      console.log('123' + nav);
+    });
     return {
       isActive,
       nav: reactive(nav),
@@ -88,7 +105,8 @@ export default defineComponent({
             margin-top: -5px;
             height: 10px;
             transform: rotate(90deg);
-            background: url(https://img10.360buyimg.com/imagetools/jfs/t1/136135/19/14659/946/5fa20aa8E33a9aa26/d329fbe669171208.png) no-repeat;
+            background: url(https://img10.360buyimg.com/imagetools/jfs/t1/136135/19/14659/946/5fa20aa8E33a9aa26/d329fbe669171208.png)
+              no-repeat;
             background-size: 100% 100%;
           }
         }

src/sites/doc/components/Search.vue

@@ -6,6 +6,7 @@
       placeholder="在 NutUI 中搜索"
       v-model="data.searchVal"
       @focus="onfocus"
+      @blur="onblur"
       @keyup="choseList"
     />
     <ul class="search-list" v-if="data.searchList.length > 0">
@@ -40,6 +41,7 @@ export default defineComponent({
     });
     onMounted(() => {
       const files = require.context('@/packages', true, /doc\.md$/);
+      // console.log(files)
       files.keys().forEach(component => {
         const componentEntity = files(component).default;
       });
@@ -49,7 +51,7 @@ export default defineComponent({
           // console.log('value', value)
           data.navList.push(value);
         });
-        console.log('search', data.navList);
+        // console.log('search', data.navList);
       });
     });
     watch(
@@ -59,21 +61,30 @@ export default defineComponent({
         if (sVal) {
           data.searchList = data.navList.filter(item => {
             if (item.show === false) return false;
-            console.log('item', item);
+            // console.log('item', item);
             const rx = new RegExp(sVal, 'gi');
             return rx.test(item.name + ' ' + item.cName + '' + item.desc);
           });
-          console.log('rx2', data.searchList.length, data.searchList);
+          // console.log('rx2', data.searchList.length, data.searchList);
         } else {
           data.searchCName = '';
           data.searchIndex = 0;
           data.searchList = [];
         }
+        // console.log(data.searchList)
       }
     );
     const onfocus = e => {
-      e.target.select();
-      // console.log('e', e.target.select())
+      // e.target.select();
+    };
+    const onblur = e => {
+      setTimeout(() => {
+        data.searchList = [];
+        data.searchVal = '';
+      }, 200);
+    };
+    const checklist = item => {
+      console.log(1);
     };
     const choseList = e => {
       data.searchIndex = 0;
@@ -81,7 +92,9 @@ export default defineComponent({
     return {
       data,
       onfocus,
-      choseList
+      choseList,
+      onblur,
+      checklist
     };
   }
 });

src/sites/doc/views/Main.vue

@@ -7,7 +7,7 @@
       <div class="content-subTitle">一款具有京东风格的VUE组件</div>
       <div class="content-button">
         <div class="leftButton">
-          <div class="leftButtonText">开始使用</div>
+          <div class="leftButtonText" @click="toIntro">开始使用</div>
         </div>
         <div class="rightButton">
           <div class="rightButtonText">扫码体验</div>
@@ -65,6 +65,7 @@ import {
 } from 'vue-router';
 import { currentRoute } from '@/sites/assets/util/ref';
 import Header from '@/sites/doc/components/Header.vue';
+import router from '../router';
 export default defineComponent({
   name: 'main',
   components: { [Header.name]: Header },
@@ -74,8 +75,14 @@ export default defineComponent({
     onMounted(() => {
       const route = useRoute();
     });
+    function toIntro() {
+      router.push({ path: '/index' });
+    }
 
-    return data;
+    return {
+      toIntro,
+      data
+    };
   }
 });
 </script>