Merge branch 'next' of https://github.com/jdf2e/nutui into next

src/packages/backtop/demo.vue

@@ -24,7 +24,9 @@
     <div class="text-data">我是测试数据22</div>
     <div class="text-data">我是测试数据23</div>
     <div class="text-data">我是测试数据24</div>
-    <nut-backtop @click="handleClick" elId="elId" :distance="100" :bottom="90"><view>无</view></nut-backtop>
+    <nut-backtop @click="handleClick" elId="elId" :distance="100" :bottom="90"
+      ><view>无</view></nut-backtop
+    >
     <nut-backtop @click="handleClick" elId="elId" :distance="200"></nut-backtop>
   </div>
 </template>

src/packages/backtop/index.vue

@@ -68,7 +68,8 @@ export default create({
       //滚动条偏移量
       //Window
       if (scrollEl instanceof Window) {
-        const scrollTop = scrollEl.pageYOffset !== undefined ? scrollEl.pageYOffset : '';
+        const scrollTop =
+          scrollEl.pageYOffset !== undefined ? scrollEl.pageYOffset : '';
         backTop.value = scrollTop >= props.distance;
         //DOM
       } else if (scrollEl instanceof HTMLElement) {

src/sites/doc/components/Header.vue

@@ -10,24 +10,24 @@
       <div class="nav-box">
         <ul class="nav-list">
           <li class="nav-item" :class="{ active: isActive(header[0].name) }">
-            <router-link :to="header[0].name">{{
-              header[0].cName
-            }}</router-link>
+            <router-link :to="header[0].name">
+              {{ header[0].cName }}
+            </router-link>
           </li>
           <li class="nav-item" :class="{ active: isActive(header[1].name) }">
-            <router-link :to="header[1].name">{{
-              header[1].cName
-            }}</router-link>
+            <router-link :to="header[1].name">
+              {{ header[1].cName }}
+            </router-link>
+          </li>
+          <li class="nav-item" :class="{ active: isActive(header[2].name) }">
+            <a href="http://localhost:8080/demo.html#/">
+              {{ header[2].cName }}
+            </a>
           </li>
-          <li class="nav-item" :class="{ active: isActive(header[2].name) }"
-            ><a href="http://localhost:8080/demo.html#/">{{
-              header[2].cName
-            }}</a></li
-          >
           <li class="nav-item" :class="{ active: isActive(header[3].name) }">
-            <router-link :to="header[3].name">{{
-              header[3].cName
-            }}</router-link>
+            <router-link :to="header[3].name">
+              {{ header[3].cName }}
+            </router-link>
           </li>
           <li class="nav-item">
             <div
@@ -234,7 +234,7 @@ export default defineComponent({
         height: 26px;
         vertical-align: middle;
         background: url('../../assets/images/icon-user.png') no-repeat;
-        background-size: 100%;
+        background-size: 26px;
       }
     }
   }
@@ -322,6 +322,9 @@ export default defineComponent({
           }
           .user-link {
             background-position: 0 0;
+            // &:hover {
+            //   background-position: -26px 0;
+            // }
           }
         }
       }
@@ -397,7 +400,10 @@ export default defineComponent({
             }
           }
           .user-link {
-            background-position: 0 -26px;
+            background-position: 0 -25px;
+            // &:hover {
+            //   background-position: -26px -25px;
+            // }
           }
         }
       }
@@ -473,7 +479,10 @@ export default defineComponent({
             }
           }
           .user-link {
-            background-position: 0 -52px;
+            background-position: 0 -51px;
+            // &:hover {
+            //   background-position: -26px -51px;
+            // }
           }
         }
       }

src/sites/doc/components/Search.vue

@@ -20,7 +20,6 @@
           {{ item.name }}
           <span>{{ item.cName }}</span>
         </router-link>
-        <!-- <router-link v-if="!_package.isLink" :to="_package.name.toLowerCase()">{{ _package.cName }}</router-link> -->
       </li>
     </ul>
   </div>
@@ -57,7 +56,6 @@ export default defineComponent({
     watch(
       () => data.searchVal,
       sVal => {
-        console.log(sVal, '改变');
         if (sVal) {
           data.searchList = data.navList.filter(item => {
             if (item.show === false) return false;
@@ -83,11 +81,38 @@ export default defineComponent({
         data.searchVal = '';
       }, 200);
     };
-    const checklist = item => {
-      console.log(1);
+    const checklist = () => {
+      data.searchVal = '';
+      data.searchCurName = '';
+      data.searchIndex = 0;
     };
     const choseList = e => {
-      data.searchIndex = 0;
+      let searchIndex = data.searchIndex;
+      if (e.keyCode == 40) {
+        searchIndex++;
+      }
+      if (e.keyCode == 38) {
+        searchIndex--;
+      }
+      if (searchIndex < 0) {
+        searchIndex = 0;
+      }
+      const searchList = data.searchList;
+      if (searchList.length > 0) {
+        const cName = searchList[searchIndex] && searchList[searchIndex].name;
+        if (cName) {
+          data.searchCurName = cName;
+          data.searchIndex = searchIndex;
+          if (e.keyCode == 13) {
+            data.$router.push({
+              path: '/' + searchList[searchIndex].name
+            });
+            data.searchCurName = '';
+            data.searchIndex = 0;
+            data.searchVal = '';
+          }
+        }
+      }
     };
     return {
       data,

src/sites/doc/views/Resource.vue

@@ -8,7 +8,7 @@
   </div>
   <!-- 设计资源 -->
   <div class="resource-content">
-    <div class="resource-block" v-if="data.articleList.length === 0">
+    <div class="resource-block" v-if="articleList.length === 0">
       <h4 class="sub-title">设计资源</h4>
       <p class="sub-desc"
         >这里提供 NUT UI
@@ -33,18 +33,18 @@
         <div class="tab-hd">
           <div
             class="tab-hd-item"
-            :class="{ active: data.activeIndex === index }"
-            v-for="(item, index) in data.tabData"
+            :class="{ active: activeIndex === index }"
+            v-for="(item, index) in tabData"
             :key="index"
             @click="clickTab(index)"
           >
             {{ item.title }}
           </div>
         </div>
-        <div class="tab-bd" v-show="data.activeIndex === 0">
+        <div class="tab-bd" v-show="activeIndex === 0">
           <div
             class="design-item"
-            v-for="item in data.articleList"
+            v-for="item in articleList"
             :key="item.id"
             @click="toLink(item.id)"
           >
@@ -52,7 +52,7 @@
             <p class="design-title">{{ item.title }}</p>
           </div>
         </div>
-        <div class="tab-bd" v-show="data.activeIndex === 1">
+        <div class="tab-bd" v-show="activeIndex === 1">
           <div class="design-item">
             <img class="img-design" src="../../assets/images/img-article.jpg" />
             <p class="design-title"
@@ -93,7 +93,7 @@
   <doc-footer></doc-footer>
 </template>
 <script lang="ts">
-import { defineComponent, onMounted, reactive } from 'vue';
+import { defineComponent, onMounted, reactive, toRefs } from 'vue';
 import {
   onBeforeRouteUpdate,
   RouteLocationNormalized,
@@ -116,12 +116,6 @@ export default defineComponent({
       tabData: [
         {
           title: '全部文章'
-        },
-        {
-          title: '性能体验'
-        },
-        {
-          title: '性能体验1'
         }
         // {
         //   title: '性能体验'
@@ -158,7 +152,7 @@ export default defineComponent({
       window.open('//jelly.jd.com/article/' + id);
     };
     return {
-      data,
+      ...toRefs(data),
       clickTab,
       toLink
     };