feat(组件): 添加MemoInput组件并实现输入记忆功能
新增MemoInput组件用于存储用户输入历史,通过storageKey与enum.js中定义的键进行校验 替换ProductSelect和RawMaterialSelect组件中的el-input为MemoInput
This commit is contained in:
@@ -19,7 +19,7 @@
|
||||
@keyup.enter.native="handleQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item label="产品名称">
|
||||
<el-input v-model="queryParams.productName" placeholder="请输入产品名称" clearable
|
||||
<MemoInput storageKey="productName" v-model="queryParams.productName" placeholder="请输入产品名称" clearable
|
||||
@keyup.enter.native="handleQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item label="规格">
|
||||
|
||||
@@ -19,7 +19,7 @@
|
||||
@keyup.enter.native="handleQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item label="名称">
|
||||
<el-input v-model="queryParams.rawMaterialName" placeholder="请输入原材料名称" clearable
|
||||
<MemoInput storageKey="productName" v-model="queryParams.rawMaterialName" placeholder="请输入原材料名称" clearable
|
||||
@keyup.enter.native="handleQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item label="规格">
|
||||
|
||||
@@ -5,6 +5,8 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { MemoInputStorageKey } from '@/utils/enum';
|
||||
|
||||
export default {
|
||||
name: 'LocalStorageAutocomplete',
|
||||
props: {
|
||||
@@ -16,7 +18,13 @@ export default {
|
||||
storageKey: {
|
||||
type: String,
|
||||
required: true,
|
||||
validator: (value) => value.trim() !== '' // 校验非空
|
||||
validator: (value) => {
|
||||
// 校验storageKey是否在MemoInputStorageKey中
|
||||
if (!MemoInputStorageKey[value]) {
|
||||
throw new Error(`storageKey ${value} is not valid`);
|
||||
}
|
||||
return value.trim() !== ''
|
||||
} // 校验非空
|
||||
},
|
||||
// 输入框占位符,默认“请输入内容”
|
||||
placeholder: {
|
||||
|
||||
Reference in New Issue
Block a user