Commit d61ca41aa0bf59101b9ff4ce48d0c0d4a7674ea9
1 parent
8ddcc27b
Exists in
master
and in
1 other branch
新增关键词输入器组件
Showing
7 changed files
with
253 additions
and
3 deletions
Show diff stats
examples/router/routes.js
| @@ -30,6 +30,12 @@ const _components = [ | @@ -30,6 +30,12 @@ const _components = [ | ||
| 30 | meta: { title: 'Select 选择器' }, | 30 | meta: { title: 'Select 选择器' }, |
| 31 | component: () => import('@/views/docs/component/select.md'), | 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 | { |
| @@ -0,0 +1,62 @@ | @@ -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 | \ No newline at end of file | 63 | \ No newline at end of file |
examples/views/layout/component.vue
| @@ -2,7 +2,7 @@ | @@ -2,7 +2,7 @@ | ||
| 2 | <el-container> | 2 | <el-container> |
| 3 | <layout-header></layout-header> | 3 | <layout-header></layout-header> |
| 4 | <el-container class="layout-container__component"> | 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 | <el-menu :default-active="activeMenu" class="layout-aside-menu__component" @select="handleSelect"> | 6 | <el-menu :default-active="activeMenu" class="layout-aside-menu__component" @select="handleSelect"> |
| 7 | <h4 class="side-menu__group">开发指南</h4> | 7 | <h4 class="side-menu__group">开发指南</h4> |
| 8 | <el-menu-item v-for="(doc, index) in guideList" :key="`doc-${index}`" :index="doc.name">{{ doc.meta.title }}</el-menu-item> | 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,7 +201,7 @@ export default { | ||
| 201 | } | 201 | } |
| 202 | } | 202 | } |
| 203 | .layout-main__component { | 203 | .layout-main__component { |
| 204 | - margin-left: 200px; | 204 | + margin-left: 240px; |
| 205 | margin-right: 150px; | 205 | margin-right: 150px; |
| 206 | padding: 20px 40px; | 206 | padding: 20px 40px; |
| 207 | } | 207 | } |
lang/i18n.js
| @@ -41,6 +41,9 @@ export default { | @@ -41,6 +41,9 @@ export default { | ||
| 41 | select: { | 41 | select: { |
| 42 | select: '请选择', | 42 | select: '请选择', |
| 43 | }, | 43 | }, |
| 44 | + input: { | ||
| 45 | + input: '请输入' | ||
| 46 | + } | ||
| 44 | }, | 47 | }, |
| 45 | }, | 48 | }, |
| 46 | 'en-US': { | 49 | 'en-US': { |
| @@ -85,6 +88,9 @@ export default { | @@ -85,6 +88,9 @@ export default { | ||
| 85 | select: { | 88 | select: { |
| 86 | select: 'Select', | 89 | select: 'Select', |
| 87 | }, | 90 | }, |
| 91 | + input: { | ||
| 92 | + input: 'Input' | ||
| 93 | + } | ||
| 88 | }, | 94 | }, |
| 89 | } | 95 | } |
| 90 | } | 96 | } |
| 91 | \ No newline at end of file | 97 | \ No newline at end of file |
packages/index.js
| @@ -8,6 +8,7 @@ import Form from './form' | @@ -8,6 +8,7 @@ import Form from './form' | ||
| 8 | import ImageUpload from './Image-upload' | 8 | import ImageUpload from './Image-upload' |
| 9 | import ImageUploadMultiple from './Image-upload/multiple' | 9 | import ImageUploadMultiple from './Image-upload/multiple' |
| 10 | import ImageView from './image-view' | 10 | import ImageView from './image-view' |
| 11 | +import KeywordInput from './keyword-input' | ||
| 11 | import RadioGroup from './radio-group' | 12 | import RadioGroup from './radio-group' |
| 12 | import Scheme from './scheme' | 13 | import Scheme from './scheme' |
| 13 | import Search from './search' | 14 | import Search from './search' |
| @@ -28,6 +29,7 @@ const components = { | @@ -28,6 +29,7 @@ const components = { | ||
| 28 | ImageUpload, | 29 | ImageUpload, |
| 29 | ImageUploadMultiple, | 30 | ImageUploadMultiple, |
| 30 | ImageView, | 31 | ImageView, |
| 32 | + KeywordInput, | ||
| 31 | RadioGroup, | 33 | RadioGroup, |
| 32 | Scheme, | 34 | Scheme, |
| 33 | Search, | 35 | Search, |
| @@ -0,0 +1,174 @@ | @@ -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> |