添加input-tags组件

Author: zepang

docs/.vuepress/config.js

@@ -47,6 +47,5 @@ module.exports = {
       config.output.publicPath =
         process.env.NODE_ENV === "production" ? "/lai-ui/" : "/" 
     }
-    console.log(config)
   }
 }

docs/posts/tutorial/5.md

@@ -1 +1,2 @@
-# 无渲染组件 
+# 无渲染组件 
+

examples/app.vue

@@ -2,7 +2,7 @@
   <div id="app">
     <!-- <img class="avatar" src="../src/assets/images/cache_user_icon.jpg" alt=""> -->
     <router-view></router-view>
-    <lai-button @click.native="openModal">Modal</lai-button>
+    <!-- <lai-button @click.native="openModal">Modal</lai-button> -->
   </div>
 </template>
 

examples/pages/inputTags.vue

@@ -0,0 +1,22 @@
+<template>
+  <div class="input-tag__wrapper">
+     <lai-input-tags :tags="tags" @on-change="handleChangeTags"></lai-input-tags>
+  </div>
+</template>
+<script>
+export default {
+  data () {
+    return  {
+      tags: [
+        '日本',
+        '泰国'
+      ]
+    }
+  },
+  methods: {
+    handleChangeTags (cur, tags) {
+      console.log(cur, tags)
+    }
+  }
+}
+</script>

examples/routes.js

@@ -11,6 +11,7 @@ import ImgLoader from './pages/imgLoader.vue'
 import Table from './pages/table.vue'
 import Tree from './pages/tree.vue'
 import Date from './pages/date.vue'
+import InputTags from './pages/InputTags.vue'
 
 Vue.use(Router)
 
@@ -54,6 +55,10 @@ const routes = [
   {
     path: '/date',
     component: Date
+  },
+  {
+    path: '/input-tags',
+    component: InputTags
   }
 ]
 

src/components/index.js

@@ -15,6 +15,7 @@ import Alert from './alert'
 import Table from './table'
 import Tree from './tree'
 import Slider from './slider'
+import InputTags from './inputTags'
 
 export default {
   Switch,
@@ -32,5 +33,6 @@ export default {
   CheckboxGroup,
   Alert,
   Tree,
-  Slider
+  Slider,
+  InputTags
 }

src/components/inputTags/index.vue

@@ -0,0 +1,77 @@
+<template>
+  <div class="input-tag">
+    <span class="tag" v-for="(tag, i) in tags" :key="i">
+      {{tag}}
+      <a href="javascript:;" @click="delTag(i)">&times;</a>  
+    </span>
+    <input type="text" @keydown.enter="addTag">
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+     tags: Array
+   },
+   mounted () {
+     console.log(this.tags)
+   },
+   methods: {
+     addTag (e) {
+       let value = e.target.value.trim()
+       if (!this.tags.includes(value)) {
+         this.tags.push(value)
+        }
+       e.target.value = ''
+       this.$emit('on-change',value, this.tags)
+     },
+     delTag (index) {
+       this.tags.splice(index, 1)
+     }
+   }
+}
+</script>
+<style lang="less" scoped>
+.input-tag {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -5%);
+  display: inline-block;
+  padding: 10px 16px;
+  border: 1px solid #d6d5d5;
+  border-radius: 4px;
+  background-color: #fff;
+}
+
+.input-tag .tag {
+  display: inline-block;
+  margin-right: 10px;
+  padding: 3px 5px;
+  background-color: #41c5b4;
+  font-size: 13px;
+  color: #fff;
+  border-radius: 4px;
+}
+
+.input-tag .tag a { 
+  display: inline-block;
+  vertical-align: 1px;
+  text-decoration: none;
+  color: #00000091;
+  font-size: 14px;
+}
+
+.input-tag input {
+  width: 300px;
+  height: 23px;
+  display: inline-block;
+  vertical-align: top;
+  border: 0;
+  letter-spacing: 1.6px;
+}
+.input-tag input:focus {
+  outline: none;
+}
+</style>
+

yarn.lock

@@ -5116,9 +5116,10 @@ markdown-it-table-of-contents@^0.4.0:
   version "0.4.3"
   resolved "http://registry.npm.taobao.org/markdown-it-table-of-contents/download/markdown-it-table-of-contents-0.4.3.tgz#6453925a76e49b9b3d9569a0d89f1c2168b46982"
 
-markdown-it@^8.4.1:
+markdown-it@^8.4.1, markdown-it@^8.4.2:
   version "8.4.2"
-  resolved "http://registry.npm.taobao.org/markdown-it/download/markdown-it-8.4.2.tgz#386f98998dc15a37722aa7722084f4020bdd9b54"
+  resolved "https://registry.npm.taobao.org/markdown-it/download/markdown-it-8.4.2.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fmarkdown-it%2Fdownload%2Fmarkdown-it-8.4.2.tgz#386f98998dc15a37722aa7722084f4020bdd9b54"
+  integrity sha1-OG+YmY3BWjdyKqdyIIT0Agvdm1Q=
   dependencies:
     argparse "^1.0.7"
     entities "~1.1.1"
@@ -8000,6 +8001,20 @@ vue-server-renderer@^2.5.16:
     serialize-javascript "^1.3.0"
     source-map "0.5.6"
 
+vue-server-renderer@^2.5.17:
+  version "2.6.10"
+  resolved "https://registry.npm.taobao.org/vue-server-renderer/download/vue-server-renderer-2.6.10.tgz#cb2558842ead360ae2ec1f3719b75564a805b375"
+  integrity sha1-yyVYhC6tNgri7B83GbdVZKgFs3U=
+  dependencies:
+    chalk "^1.1.3"
+    hash-sum "^1.0.2"
+    he "^1.1.0"
+    lodash.template "^4.4.0"
+    lodash.uniq "^4.5.0"
+    resolve "^1.2.0"
+    serialize-javascript "^1.3.0"
+    source-map "0.5.6"
+
 vue-style-loader@^4.1.0, vue-style-loader@^4.1.2:
   version "4.1.2"
   resolved "http://registry.npm.taobao.org/vue-style-loader/download/vue-style-loader-4.1.2.tgz#dedf349806f25ceb4e64f3ad7c0a44fba735fcf8"
@@ -8049,9 +8064,10 @@ vuepress-html-webpack-plugin@^3.2.0:
     toposort "^1.0.0"
     util.promisify "1.0.0"
 
-vuepress@^0.14.9:
-  version "0.14.10"
-  resolved "http://registry.npm.taobao.org/vuepress/download/vuepress-0.14.10.tgz#070281ad0c9d48e7c848eb9511c96ceb106414ab"
+vuepress@^0.14.10:
+  version "0.14.11"
+  resolved "https://registry.npm.taobao.org/vuepress/download/vuepress-0.14.11.tgz#fc6ba0e609e3433a8070e95301b4d987712b2a08"
+  integrity sha1-/Gug5gnjQzqAcOlTAbTZh3ErKgg=
   dependencies:
     "@babel/core" "7.0.0-beta.47"
     "@vue/babel-preset-app" "3.0.0-beta.11"