From d61ca41aa0bf59101b9ff4ce48d0c0d4a7674ea9 Mon Sep 17 00:00:00 2001
From: Aaron <427787340@qq.com>
Date: Fri, 11 Oct 2019 16:29:41 +0800
Subject: [PATCH] 新增关键词输入器组件

---
 .env                                           |   2 +-
 examples/router/routes.js                      |   6 ++++++
 examples/views/docs/component/keyword-input.md |  62 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 examples/views/layout/component.vue            |   4 ++--
 lang/i18n.js                                   |   6 ++++++
 packages/index.js                              |   2 ++
 packages/keyword-input/index.vue               | 174 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 7 files changed, 253 insertions(+), 3 deletions(-)
 create mode 100644 examples/views/docs/component/keyword-input.md
 create mode 100644 packages/keyword-input/index.vue

diff --git a/.env b/.env
index 4ded078..e952756 100644
--- a/.env
+++ b/.env
@@ -1,4 +1,4 @@
 # 版本号
-VUE_APP_VERSION = '0.5.3'
+VUE_APP_VERSION = '0.5.4'
 # 自定义变量 Cookie失效时间 1天
 VUE_APP_NAME = 'Eagle Web Tookit'
\ No newline at end of file
diff --git a/examples/router/routes.js b/examples/router/routes.js
index 769d09d..f4bad39 100644
--- a/examples/router/routes.js
+++ b/examples/router/routes.js
@@ -30,6 +30,12 @@ const _components = [
         meta: { title: 'Select 选择器' },
         component: () => import('@/views/docs/component/select.md'),
       },
+      {
+        path: 'keyword-input',
+        name: 'keyword-input',
+        meta: { title: 'KeywordInput 关键词输入器' },
+        component: () => import('@/views/docs/component/keyword-input.md'),
+      },
     ]
   },
   {
diff --git a/examples/views/docs/component/keyword-input.md b/examples/views/docs/component/keyword-input.md
new file mode 100644
index 0000000..dd62291
--- /dev/null
+++ b/examples/views/docs/component/keyword-input.md
@@ -0,0 +1,62 @@
+# KeywordInput 关键词输入器
+
+自定义输入一组数据以数组或者逗号分隔的方式记录
+
+## 基础用法
+
+::: snippet 默认返回值类型为`Array`
+
+```html
+<template>
+  <div>
+    {{ inputValue }}
+    <eagle-keyword-input v-model="inputValue" style="width: 300px;" placeholder="输入内容，回车确认" clearable></eagle-keyword-input>
+  </div>
+</template>
+
+<script>
+export default {
+  data: () => ({
+    inputValue: []
+  }),
+}
+</script>
+```
+
+:::
+
+## 字符串类型
+
+::: snippet 返回值类型为`String`
+
+```html
+<template>
+  <div>
+    "{{ inputValue }}"
+    <eagle-keyword-input v-model="inputValue" style="width: 300px;" type="string" deletable></eagle-keyword-input>
+  </div>
+</template>
+
+<script>
+export default {
+  data: () => ({
+    inputValue: ''
+  }),
+}
+</script>
+```
+
+:::
+
+## API
+
+## Attribute 属性
+
+参数|说明|类型|可选值|默认值
+-|-|-|-|-
+value / v-model |	绑定值 | String,Array | - | -
+placeholder | 占位文本 | String | - | 请输入
+unique | 唯一值,设置后不会出现相同的值 | Boolean | - | true
+deletable | 是否能通过删除键删除上一个词 | Boolean | - | false
+clearable | 是否可清空 | Boolean | - | false
+type | 返回值类型 | String | array,string | array
\ No newline at end of file
diff --git a/examples/views/layout/component.vue b/examples/views/layout/component.vue
index 6e5d9e9..1aaa66a 100644
--- a/examples/views/layout/component.vue
+++ b/examples/views/layout/component.vue
@@ -2,7 +2,7 @@
   <el-container>
     <layout-header></layout-header>
     <el-container class="layout-container__component">
-      <el-aside class="layout-aside__component" width="200px">
+      <el-aside class="layout-aside__component" width="240px">
         <el-menu :default-active="activeMenu" class="layout-aside-menu__component" @select="handleSelect">
           <h4 class="side-menu__group">开发指南</h4>
           <el-menu-item v-for="(doc, index) in guideList" :key="`doc-${index}`" :index="doc.name">{{ doc.meta.title }}</el-menu-item>
@@ -201,7 +201,7 @@ export default {
     }
   }
   .layout-main__component {
-    margin-left: 200px;
+    margin-left: 240px;
     margin-right: 150px;
     padding: 20px 40px;
   }
diff --git a/lang/i18n.js b/lang/i18n.js
index 8d272df..00b5329 100644
--- a/lang/i18n.js
+++ b/lang/i18n.js
@@ -41,6 +41,9 @@ export default {
       select: {
         select: '请选择',
       },
+      input: {
+        input: '请输入'
+      }
     },
   },
   'en-US': {
@@ -85,6 +88,9 @@ export default {
       select: {
         select: 'Select',
       },
+      input: {
+        input: 'Input'
+      }
     },
   }
 }
\ No newline at end of file
diff --git a/packages/index.js b/packages/index.js
index 9e274ba..1b99fae 100644
--- a/packages/index.js
+++ b/packages/index.js
@@ -8,6 +8,7 @@ import Form from './form'
 import ImageUpload from './Image-upload'
 import ImageUploadMultiple from './Image-upload/multiple'
 import ImageView from './image-view'
+import KeywordInput from './keyword-input'
 import RadioGroup from './radio-group'
 import Scheme from './scheme'
 import Search from './search'
@@ -28,6 +29,7 @@ const components = {
   ImageUpload,
   ImageUploadMultiple,
   ImageView,
+  KeywordInput,
   RadioGroup,
   Scheme,
   Search,
diff --git a/packages/keyword-input/index.vue b/packages/keyword-input/index.vue
new file mode 100644
index 0000000..08e3a11
--- /dev/null
+++ b/packages/keyword-input/index.vue
@@ -0,0 +1,174 @@
+<template>
+  <div class="eagle-input-tag">
+    <el-tag :key="index" v-for="(tag, index) in model" closable disable-transitions @close="handleClose(tag)" size="mini" type="info">
+      {{ tag }}
+    </el-tag>
+    <input v-model="inputValue" @keydown.enter="handleInputConfirm" @keydown.delete="handleDelete" :placeholder="_placeholder" />
+    <div class="btn-clear" v-if="clearable && (inputValue || model.length > 0)">
+      <i class="el-icon-circle-close" @click="handleClear"></i>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'KeywordInput',
+  props: {
+    value: [Array, String],
+    placeholder: String,
+    unique: {
+      type: Boolean,
+      default: true,
+    },
+    deletable: {
+      type: Boolean,
+      default: false,
+    },
+    clearable: {
+      type: Boolean,
+      default: false,
+    },
+    type: {
+      type: String,
+      default: 'array', // array | string
+    },
+  },
+  data: () => ({
+    model: [],
+    inputValue: '',
+  }),
+  watch: {
+    value: {
+      handler(val) {
+        if (this.type === 'string') {
+          this.model = val
+            ? val
+                .replace(/，/, ',')
+                .replace(/\s+/g, '')
+                .split(',')
+            : [];
+        } else {
+          this.model = val || [];
+        }
+        if (!val || (val && val.length === 0)) {
+          this.inputValue = '';
+        }
+      },
+      immediate: true,
+    },
+  },
+  computed: {
+    _placeholder() {
+      if (!this.value || (this.value && this.value.length === 0)) {
+        return this.placeholder || this.i18n('eagle.input.input') || '请输入';
+      } else {
+        return undefined;
+      }
+    },
+  },
+  methods: {
+    handleClose(tag) {
+      this.model.splice(this.model.indexOf(tag), 1);
+      this.emitValue();
+    },
+    handleInputConfirm() {
+      let inputValue = this.inputValue;
+      if (inputValue) {
+        if (this.unique) {
+          let modelSet = new Set([...this.model]);
+          modelSet.add(inputValue);
+          this.model = Array.from(modelSet);
+        } else {
+          this.model.push(inputValue);
+        }
+      }
+      this.inputValue = '';
+      this.emitValue();
+    },
+    emitValue() {
+      if (this.type === 'string') {
+        this.$emit('input', this.model.join(','));
+      } else {
+        this.$emit('input', this.model);
+      }
+    },
+    handleDelete() {
+      if (!this.inputValue && this.model && this.model.length > 0 && this.deletable) {
+        this.model.splice(this.model.length - 1, 1);
+        this.emitValue();
+      }
+    },
+    handleClear() {
+      this.inputValue = '';
+      this.model = [];
+      this.emitValue();
+    },
+  },
+};
+</script>
+
+<style>
+.eagle-input-tag {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  -webkit-appearance: none;
+  background-color: #ffffff;
+  background-image: none;
+  border-radius: 4px;
+  border: 1px solid #dcdfe6;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  color: #606266;
+  font-size: inherit;
+  outline: none;
+  padding: 5px 5px 0px 5px;
+  -webkit-transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
+  transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
+  width: 100%;
+}
+.eagle-input-tag:hover {
+  border-color: #c0c4cc;
+}
+.eagle-input-tag .el-tag:not(:last-child) {
+  margin-right: 5px;
+  margin-bottom: 5px;
+}
+.eagle-input-tag input {
+  flex: auto;
+  -webkit-appearance: none;
+  background-color: #ffffff;
+  background-image: none;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  color: #606266;
+  display: inline-block;
+  font-size: inherit;
+  outline: none;
+  padding: 0 5px;
+  margin-bottom: 5px;
+  -webkit-transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
+  transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
+  border: 0;
+  font-size: 14px;
+
+  height: 20px;
+  padding: 0 5px;
+  line-height: 19px;
+}
+.eagle-input-tag .btn-clear {
+  height: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.eagle-input-tag .btn-clear i {
+  cursor: pointer;
+  position: relative;
+  top: -2px;
+  color: #dcdfe6;
+}
+.eagle-input-tag .btn-clear i:hover {
+  color: #606266;
+}
+</style>
--
libgit2 0.21.0