lilinsen 7 年 前
コミット
f05272340f
4 ファイル変更179 行追加26 行削除
  1. 6 1
      scripts/md-to-other.js
  2. 5 21
      sites/doc/app.vue
  3. 7 4
      sites/doc/index.vue
  4. 161 0
      sites/doc/search.vue

+ 6 - 1
scripts/md-to-other.js

@@ -98,7 +98,12 @@ function createdFile(output, sorce,ishasCode) {
           <div v-html="content"></div>
           <div v-html="content"></div>
         </div>`+ res + '</div></template>' + jsroot;
         </div>`+ res + '</div></template>' + jsroot;
         var buf = new Buffer(bufs);
         var buf = new Buffer(bufs);
-        fs.writeSync(fd, buf, 0, buf.length, 0);
+        if( typeof fd  == 'number'){
+            fs.writeSync(fd, buf, 0, buf.length, 0);
+         }else{
+             console.log(pathSrc,'有问题')
+         }
+       
     })
     })
 }
 }
 function fileDisplay(filePath,outPath,nohead) {
 function fileDisplay(filePath,outPath,nohead) {

+ 5 - 21
sites/doc/app.vue

@@ -9,27 +9,7 @@
         <a href="default.html#/index" class="logo-link"><img src="./asset/css/i/nut.png" alt></a> <span class="version">{{version}}</span>
         <a href="default.html#/index" class="logo-link"><img src="./asset/css/i/nut.png" alt></a> <span class="version">{{version}}</span>
       </div>
       </div>
       <div class="h-nav">
       <div class="h-nav">
-        <div class="search-box">
-          <input
-            @focus="onfocus"
-            @input="search"
-            @keyup="choseList"
-            v-model="searchVal"
-            class="search"
-            type="text"
-            placeholder="在NutUI中搜索"
-          >
-          <!-- <transition name="fade"> -->
-            <ul class="search-list" v-if="searchList.length>0">
-              <li :class="searchCurName==item.chnName?'cur':''" @click="checklist(item)" v-for="(item,index) in searchList" :key="index">
-                <router-link :to="{name:item.name}">
-                  {{item.name}}
-                  <span>{{item.chnName}}</span>
-                </router-link>
-              </li>
-            </ul>
-          <!-- </transition> -->
-        </div>
+        <search/>
         <ul class="list">
         <ul class="list">
           <li class="cur">
           <li class="cur">
             <a href="default.html#/doc">指南</a>
             <a href="default.html#/doc">指南</a>
@@ -88,6 +68,7 @@ import "./asset/css/common.scss";
 import "./asset/css/style-blue.scss";
 import "./asset/css/style-blue.scss";
 import Conf from "../../src/config.json";
 import Conf from "../../src/config.json";
 import PackageJson from "../../package.json";
 import PackageJson from "../../package.json";
+import search from './search.vue';
 export default {
 export default {
   name: "App",
   name: "App",
   data() {
   data() {
@@ -111,6 +92,9 @@ export default {
     //  },
     //  },
     $route: "fetchData"
     $route: "fetchData"
   },
   },
+  components:{
+    search
+  },
   methods: {
   methods: {
     openwindow(val){      
     openwindow(val){      
       if(val.target.value==1){
       if(val.target.value==1){

+ 7 - 4
sites/doc/index.vue

@@ -8,9 +8,7 @@
           <span class="logo">NUTUI
           <span class="logo">NUTUI
             <s></s>
             <s></s>
           </span>
           </span>
-          <span class="search">
-            <input type="text" placeholder="在nutui中搜索" class="search-input">
-          </span>
+          <search/>
 
 
           <div class="menu">
           <div class="menu">
             <ul>
             <ul>
@@ -64,7 +62,7 @@
 import * as THREE from "three";
 import * as THREE from "three";
 import TWEEN from "@tweenjs/tween.js";
 import TWEEN from "@tweenjs/tween.js";
 import Detector from "./asset/js/Detector.js";
 import Detector from "./asset/js/Detector.js";
-
+import search from './search.vue';
 export default {
 export default {
   name: "frontCover",
   name: "frontCover",
   data() {
   data() {
@@ -73,6 +71,9 @@ export default {
       notWebgl: true
       notWebgl: true
     };
     };
   },
   },
+  components:{
+    search
+  },
   methods: {
   methods: {
     openwindow(val) {
     openwindow(val) {
       if (val.target.value == 1) {
       if (val.target.value == 1) {
@@ -466,6 +467,8 @@ export default {
     width: 100%;
     width: 100%;
     z-index: 999;
     z-index: 999;
     height: 64px;
     height: 64px;
+    display: flex;
+		 align-items:center;
   }
   }
   .menu {
   .menu {
     position: absolute;
     position: absolute;

+ 161 - 0
sites/doc/search.vue

@@ -0,0 +1,161 @@
+<template>
+      <div class="search-box">
+          <input
+            @focus="onfocus"
+            @input="search"
+            @keyup="choseList"
+            v-model="searchVal"
+            class="search"
+            type="text"
+            placeholder="在NutUI中搜索"
+          >
+          <!-- <transition name="fade"> -->
+            <ul class="search-list" v-if="searchList.length>0">
+              <li :class="searchCurName==item.name?'cur':''" @click="checklist(item)" v-for="(item,index) in searchList" :key="index">
+                <router-link :to="{name:item.name}">
+                  {{item.name}}
+                  <span>{{item.chnName}}</span>
+                </router-link>
+              </li>
+            </ul>
+          <!-- </transition> -->
+        </div>
+</template>
+<script>
+import Conf from "../../src/config.json";
+export default {
+    data(){
+        return {
+            packages : Conf.packages,
+            searchVal: "",           
+            searchList: [],
+            searchCurName:'',
+             searchIndex:0,
+        }
+    },   
+    methods:{
+        onfocus(e) {
+      e.target.select();
+    },
+    clearSearch() {
+      this.searchList = [];
+    },
+    search(e) {
+      let val = e.target.value.toLowerCase();     
+       this.searchIndex=0;
+      if (val) {
+        let packages = this.packages;
+        let list = [];
+        for (let i = 0, item; (item = packages[i]); i++) {
+          let cn = item.chnName.toLowerCase();
+          let en = item.name.toLowerCase();
+          if (cn.indexOf(val) > -1 || en.indexOf(val) > -1) {
+            list.push(item);
+          }
+        }
+        this.searchList = list;
+      }else{
+
+           this.checklist()
+      }
+    },
+     checklist() {
+      this.searchVal = "";
+      this.searchList = [];
+      this.searchCurName='';
+      this.searchIndex=0;
+    },
+    choseList(e){
+      console.log(e)
+      let searchIndex = this.searchIndex;
+      if(e.keyCode==40){
+        searchIndex++;
+      }
+      if(e.keyCode==38){
+         searchIndex--;
+      }
+      if(searchIndex<0){
+        searchIndex = 0;
+      }      
+      let searchList = this.searchList;
+      if(searchList.length>0){       
+           console.log(searchList[searchIndex])
+       let chnName = searchList[searchIndex].name;
+      
+       if(chnName){
+         this.searchCurName = chnName;
+         this.searchIndex = searchIndex;
+         if(e.keyCode==13){
+            this.$router.push({
+                path:'/'+searchList[searchIndex].name
+            })
+           this.searchCurName='';
+           this.searchIndex=0;
+           this.searchList=[];
+           this.searchVal='';
+        }
+       }       
+      }
+    },
+    }
+}
+</script>
+<style lang="scss" scoped>
+.search-box {
+      height: 22px;
+      min-width: 300px;
+      position: relative;
+      input {
+        width: 100%;
+      }
+    }
+ .search {
+      height: 22px;
+      font-size: 14px;
+      color: #666;
+      border: none;
+      background: url(./asset/css/i/sreach.png) no-repeat left center;
+      padding-left: 45px;
+      &:focus {
+        outline: none;
+      }
+    }
+.search-list {
+    background: #fff;
+    position: absolute;
+    width: 300px;
+    list-style: none;
+    border: 1px solid #f2f2f2;
+    z-index: 99999;
+    top: 27px;
+    padding: 0;
+    li {
+    height: 40px;
+    line-height: 40px;
+
+    a {
+        display: inline-block;
+        box-sizing: border-box;
+        width: 100%;
+        padding-left: 40px;
+        text-decoration: none;
+        color: #666;
+    }
+    &:hover {
+        background: #6096ff;
+        color: #fff;
+        a {
+        color: #fff;
+        }
+    }
+    }
+    .cur{
+        background: #6096ff;
+        color: #fff;
+        a {
+        color: #fff;
+        }
+    }
+}
+</style>
+