添加renderLessComp组件demo

Author: zepang

examples/pages/renderLessComp.vue

@@ -0,0 +1,61 @@
+<template>
+  <lai-render-less-comp :value="tags">
+    <div slot-scope="{tags, addTag, delTag}" class="tags-input__wrapper">
+      <div class="tags-input">
+        <input type="text" @keydown.enter="addTag">
+      </div>
+      
+      <ul>
+        <li v-for="(tag, i) in tags" :key="i">{{tag}} <span @click="delTag(i)">&times;</span></li>
+      </ul>
+    </div>
+  </lai-render-less-comp>
+</template>
+<script>
+export default {
+  data () {
+    return {
+      tags: ['法国', '日本']
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+.tags-input__wrapper {
+  margin: 0 auto;
+  ul {
+    margin: 10px 0;
+    padding: 0;
+    li {
+      display: inline-block;
+      margin-right: 10px;
+      padding: 6px 8px;
+      background-color: #4dc298;
+      border-radius: 4px;
+      list-style: none;
+      span {
+        cursor: pointer;
+      }
+    }
+  }
+}
+.tags-input {
+  display: inline-block;
+  padding: 10px 16px;
+  border: 1px solid #d6d5d5;
+  border-radius: 4px;
+  background-color: #fff;
+  input {
+    width: 300px;
+    height: 23px;
+    display: inline-block;
+    vertical-align: top;
+    border: 0;
+    letter-spacing: 1.6px;
+    &:focus {
+      outline: none;
+    }
+  }
+}
+</style>
+

examples/routes.js

@@ -12,6 +12,7 @@ import Table from './pages/table.vue'
 import Tree from './pages/tree.vue'
 import Date from './pages/date.vue'
 import InputTags from './pages/InputTags.vue'
+import RenderLessComp from './pages/renderLessComp.vue'
 
 Vue.use(Router)
 
@@ -59,6 +60,10 @@ const routes = [
   {
     path: '/input-tags',
     component: InputTags
+  },
+  {
+    path: '/render-less',
+    component: RenderLessComp
   }
 ]
 

src/components/index.js

@@ -16,6 +16,7 @@ import Table from './table'
 import Tree from './tree'
 import Slider from './slider'
 import InputTags from './inputTags'
+import RenderLessComp from './inputTags/renderLessComp'
 
 export default {
   Switch,
@@ -34,5 +35,6 @@ export default {
   Alert,
   Tree,
   Slider,
-  InputTags
+  InputTags,
+  RenderLessComp
 }

src/components/inputTags/RenderLessComp.vue

@@ -0,0 +1,24 @@
+<script>
+export default {
+  props: ['value'],
+  methods: {
+    addTag (e) {
+      let value = e.target.value.trim()
+      if (!this.value.includes(value)) {
+        this.value.push(value)
+      }
+      e.target.value = ''
+    },
+    delTag (index) {
+      this.value.splice(index, 1)
+    }
+  },
+  render () {
+    return this.$scopedSlots.default({
+      tags: this.value,
+      addTag: this.addTag,
+      delTag: this.delTag
+    })
+  }
+}
+</script>