framework / eagle-web-toolkit

Download as
Browse Code »

Commit d61ca41aa0bf59101b9ff4ce48d0c0d4a7674ea9

Authored by Aaron
1 parent 8ddcc27b
Exists in master and in 1 other branch legacy

新增关键词输入器组件

Showing 7 changed files with 253 additions and 3 deletions   Show diff stats
.env
  Diff comments   View file @d61ca41
1 1 # 版本号
2   -VUE_APP_VERSION = '0.5.3'
  2 +VUE_APP_VERSION = '0.5.4'
3 3 # 自定义变量 Cookie失效时间 1天
4 4 VUE_APP_NAME = 'Eagle Web Tookit'
5 5 \ No newline at end of file
... ...
examples/router/routes.js
  Diff comments   View file @d61ca41
... ... @@ -30,6 +30,12 @@ const _components = [
30 30 meta: { title: 'Select 选择器' },
31 31 component: () => import('@/views/docs/component/select.md'),
32 32 },
  33 + {
  34 + path: 'keyword-input',
  35 + name: 'keyword-input',
  36 + meta: { title: 'KeywordInput 关键词输入器' },
  37 + component: () => import('@/views/docs/component/keyword-input.md'),
  38 + },
33 39 ]
34 40 },
35 41 {
... ...
examples/views/docs/component/keyword-input.md 0 → 100644
  Diff comments   View file @d61ca41
... ... @@ -0,0 +1,62 @@
  1 +# KeywordInput 关键词输入器
  2 +
  3 +自定义输入一组数据以数组或者逗号分隔的方式记录
  4 +
  5 +## 基础用法
  6 +
  7 +::: snippet 默认返回值类型为`Array`
  8 +
  9 +```html
  10 +<template>
  11 + <div>
  12 + {{ inputValue }}
  13 + <eagle-keyword-input v-model="inputValue" style="width: 300px;" placeholder="输入内容，回车确认" clearable></eagle-keyword-input>
  14 + </div>
  15 +</template>
  16 +
  17 +<script>
  18 +export default {
  19 + data: () => ({
  20 + inputValue: []
  21 + }),
  22 +}
  23 +</script>
  24 +```
  25 +
  26 +:::
  27 +
  28 +## 字符串类型
  29 +
  30 +::: snippet 返回值类型为`String`
  31 +
  32 +```html
  33 +<template>
  34 + <div>
  35 + "{{ inputValue }}"
  36 + <eagle-keyword-input v-model="inputValue" style="width: 300px;" type="string" deletable></eagle-keyword-input>
  37 + </div>
  38 +</template>
  39 +
  40 +<script>
  41 +export default {
  42 + data: () => ({
  43 + inputValue: ''
  44 + }),
  45 +}
  46 +</script>
  47 +```
  48 +
  49 +:::
  50 +
  51 +## API
  52 +
  53 +## Attribute 属性
  54 +
  55 +参数|说明|类型|可选值|默认值
  56 +-|-|-|-|-
  57 +value / v-model | 绑定值 | String,Array | - | -
  58 +placeholder | 占位文本 | String | - | 请输入
  59 +unique | 唯一值,设置后不会出现相同的值 | Boolean | - | true
  60 +deletable | 是否能通过删除键删除上一个词 | Boolean | - | false
  61 +clearable | 是否可清空 | Boolean | - | false
  62 +type | 返回值类型 | String | array,string | array
0 63 \ No newline at end of file
... ...
examples/views/layout/component.vue
  Diff comments   View file @d61ca41
... ... @@ -2,7 +2,7 @@
2 2 <el-container>
3 3 <layout-header></layout-header>
4 4 <el-container class="layout-container__component">
5   - <el-aside class="layout-aside__component" width="200px">
  5 + <el-aside class="layout-aside__component" width="240px">
6 6 <el-menu :default-active="activeMenu" class="layout-aside-menu__component" @select="handleSelect">
7 7 <h4 class="side-menu__group">开发指南</h4>
8 8 <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 {
201 201 }
202 202 }
203 203 .layout-main__component {
204   - margin-left: 200px;
  204 + margin-left: 240px;
205 205 margin-right: 150px;
206 206 padding: 20px 40px;
207 207 }
... ...
lang/i18n.js
  Diff comments   View file @d61ca41
... ... @@ -41,6 +41,9 @@ export default {
41 41 select: {
42 42 select: '请选择',
43 43 },
  44 + input: {
  45 + input: '请输入'
  46 + }
44 47 },
45 48 },
46 49 'en-US': {
... ... @@ -85,6 +88,9 @@ export default {
85 88 select: {
86 89 select: 'Select',
87 90 },
  91 + input: {
  92 + input: 'Input'
  93 + }
88 94 },
89 95 }
90 96 }
91 97 \ No newline at end of file
... ...
packages/index.js
  Diff comments   View file @d61ca41
... ... @@ -8,6 +8,7 @@ import Form from &#39;./form&#39;
8 8 import ImageUpload from './Image-upload'
9 9 import ImageUploadMultiple from './Image-upload/multiple'
10 10 import ImageView from './image-view'
  11 +import KeywordInput from './keyword-input'
11 12 import RadioGroup from './radio-group'
12 13 import Scheme from './scheme'
13 14 import Search from './search'
... ... @@ -28,6 +29,7 @@ const components = {
28 29 ImageUpload,
29 30 ImageUploadMultiple,
30 31 ImageView,
  32 + KeywordInput,
31 33 RadioGroup,
32 34 Scheme,
33 35 Search,
... ...
packages/keyword-input/index.vue 0 → 100644
  Diff comments   View file @d61ca41
... ... @@ -0,0 +1,174 @@
  1 +<template>
  2 + <div class="eagle-input-tag">
  3 + <el-tag :key="index" v-for="(tag, index) in model" closable disable-transitions @close="handleClose(tag)" size="mini" type="info">
  4 + {{ tag }}
  5 + </el-tag>
  6 + <input v-model="inputValue" @keydown.enter="handleInputConfirm" @keydown.delete="handleDelete" :placeholder="_placeholder" />
  7 + <div class="btn-clear" v-if="clearable && (inputValue || model.length > 0)">
  8 + <i class="el-icon-circle-close" @click="handleClear"></i>
  9 + </div>
  10 + </div>
  11 +</template>
  12 +
  13 +<script>
  14 +export default {
  15 + name: 'KeywordInput',
  16 + props: {
  17 + value: [Array, String],
  18 + placeholder: String,
  19 + unique: {
  20 + type: Boolean,
  21 + default: true,
  22 + },
  23 + deletable: {
  24 + type: Boolean,
  25 + default: false,
  26 + },
  27 + clearable: {
  28 + type: Boolean,
  29 + default: false,
  30 + },
  31 + type: {
  32 + type: String,
  33 + default: 'array', // array | string
  34 + },
  35 + },
  36 + data: () => ({
  37 + model: [],
  38 + inputValue: '',
  39 + }),
  40 + watch: {
  41 + value: {
  42 + handler(val) {
  43 + if (this.type === 'string') {
  44 + this.model = val
  45 + ? val
  46 + .replace(/，/, ',')
  47 + .replace(/\s+/g, '')
  48 + .split(',')
  49 + : [];
  50 + } else {
  51 + this.model = val || [];
  52 + }
  53 + if (!val || (val && val.length === 0)) {
  54 + this.inputValue = '';
  55 + }
  56 + },
  57 + immediate: true,
  58 + },
  59 + },
  60 + computed: {
  61 + _placeholder() {
  62 + if (!this.value || (this.value && this.value.length === 0)) {
  63 + return this.placeholder || this.i18n('eagle.input.input') || '请输入';
  64 + } else {
  65 + return undefined;
  66 + }
  67 + },
  68 + },
  69 + methods: {
  70 + handleClose(tag) {
  71 + this.model.splice(this.model.indexOf(tag), 1);
  72 + this.emitValue();
  73 + },
  74 + handleInputConfirm() {
  75 + let inputValue = this.inputValue;
  76 + if (inputValue) {
  77 + if (this.unique) {
  78 + let modelSet = new Set([...this.model]);
  79 + modelSet.add(inputValue);
  80 + this.model = Array.from(modelSet);
  81 + } else {
  82 + this.model.push(inputValue);
  83 + }
  84 + }
  85 + this.inputValue = '';
  86 + this.emitValue();
  87 + },
  88 + emitValue() {
  89 + if (this.type === 'string') {
  90 + this.$emit('input', this.model.join(','));
  91 + } else {
  92 + this.$emit('input', this.model);
  93 + }
  94 + },
  95 + handleDelete() {
  96 + if (!this.inputValue && this.model && this.model.length > 0 && this.deletable) {
  97 + this.model.splice(this.model.length - 1, 1);
  98 + this.emitValue();
  99 + }
  100 + },
  101 + handleClear() {
  102 + this.inputValue = '';
  103 + this.model = [];
  104 + this.emitValue();
  105 + },
  106 + },
  107 +};
  108 +</script>
  109 +
  110 +<style>
  111 +.eagle-input-tag {
  112 + display: flex;
  113 + align-items: center;
  114 + flex-wrap: wrap;
  115 + -webkit-appearance: none;
  116 + background-color: #ffffff;
  117 + background-image: none;
  118 + border-radius: 4px;
  119 + border: 1px solid #dcdfe6;
  120 + -webkit-box-sizing: border-box;
  121 + box-sizing: border-box;
  122 + color: #606266;
  123 + font-size: inherit;
  124 + outline: none;
  125 + padding: 5px 5px 0px 5px;
  126 + -webkit-transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  127 + transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  128 + width: 100%;
  129 +}
  130 +.eagle-input-tag:hover {
  131 + border-color: #c0c4cc;
  132 +}
  133 +.eagle-input-tag .el-tag:not(:last-child) {
  134 + margin-right: 5px;
  135 + margin-bottom: 5px;
  136 +}
  137 +.eagle-input-tag input {
  138 + flex: auto;
  139 + -webkit-appearance: none;
  140 + background-color: #ffffff;
  141 + background-image: none;
  142 + -webkit-box-sizing: border-box;
  143 + box-sizing: border-box;
  144 + color: #606266;
  145 + display: inline-block;
  146 + font-size: inherit;
  147 + outline: none;
  148 + padding: 0 5px;
  149 + margin-bottom: 5px;
  150 + -webkit-transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  151 + transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  152 + border: 0;
  153 + font-size: 14px;
  154 +
  155 + height: 20px;
  156 + padding: 0 5px;
  157 + line-height: 19px;
  158 +}
  159 +.eagle-input-tag .btn-clear {
  160 + height: 20px;
  161 + display: flex;
  162 + align-items: center;
  163 + justify-content: center;
  164 +}
  165 +.eagle-input-tag .btn-clear i {
  166 + cursor: pointer;
  167 + position: relative;
  168 + top: -2px;
  169 + color: #dcdfe6;
  170 +}
  171 +.eagle-input-tag .btn-clear i:hover {
  172 + color: #606266;
  173 +}
  174 +</style>
... ...