当前位置：首页 > news >正文

vue 搜索框

news 来源：原创 2024/9/22 23:23:09

效果

创建搜索组件：
- 在Vue项目中，首先需要创建一个搜索组件。这个组件通常包含一个输入框和一个搜索按钮。
- 使用v-model指令将输入框与组件的数据属性（如searchKeyword）进行双向绑定，以便获取用户输入的关键词。
处理搜索逻辑：
- 为搜索按钮绑定一个点击事件处理函数（如handleSearch），该函数负责在用户点击时触发搜索操作。
- 在事件处理函数中，可以使用Vue的异步请求库（如Axios）向后端服务器发送搜索请求，并将用户输入的关键词作为请求参数。
展示搜索结果：
- 后端服务器处理搜索请求后，将返回搜索结果。
- 在Vue组件中，可以使用计算属性（computed properties）或观察者（watchers）来监听搜索结果的变化，并相应地更新组件的模板以展示搜索结果。
优化搜索体验：
- 可以为搜索组件添加一些辅助功能，如自动完成、搜索历史记录等，以提升用户体验。
- 使用正则表达式或模糊匹配算法来实现更复杂的搜索逻辑。

<div class="top-wrapper"><div class="search el-input el-input--suffix"><inputtype="text"autocomplete="off"placeholder="输入指标名称搜索"class="el-input__inner"v-model="searchKeyword"@keydown.enter="search"@change="searchChange"/><span class="el-input__suffix"><span class="el-input__suffix-inner"><el-icon @click="search"><Search /></el-icon></span></span></div></div>

.top-wrapper {display: flex;justify-content: flex-start;margin-bottom: 16px;
}.top-wrapper .search {width: 250px;
}
.el-input .el-input__suffix .el-input__icon {line-height: 32px;
}.el-input__icon {height: 100%;width: 25px;text-align: center;transition: all 0.3s;line-height: 40px;
}
.el-input__suffix {right: 5px;transition: all 0.3s;pointer-events: none;
}.el-input__prefix,
.el-input__suffix {position: absolute;top: 0;-webkit-transition: all 0.3s;height: 100%;color: #c0c4cc;text-align: center;
}.el-input__suffix-inner {pointer-events: all;
}.el-input__icon:after {content: "";height: 100%;width: 0;display: inline-block;vertical-align: middle;
}
.top-wrapper {display: flex;justify-content: flex-start;margin-bottom: 16px;
}.top-wrapper .search {width: 250px;
}.el-input {position: relative;font-size: 14px;
}.el-input__inner {-webkit-appearance: none;background-color: #fff;background-image: none;border-radius: 4px;border: 1px solid #dcdfe6;box-sizing: border-box;color: #606266;display: inline-block;height: 40px;line-height: 40px;outline: 0;padding: 0 15px;transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);width: 100%;font-size: inherit;-webkit-transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
}.el-dialog .el-dialog__body .el-input .el-input__inner {padding-left: 8px;color: #333;
}.el-input .el-input__inner {height: 32px;line-height: 32px;border-radius: 2px;
}

const columnsList = ref([]);
const searchKeyword = ref<string>("");
const keyword = ref<string>("");
const leftGroups = ref([]);
const rightGroups = (groupName) => {return columns.filter((item) =>searchKeyword.value? item.groupName == groupName && item.label.indexOf(searchKeyword.value) > -1: item.groupName == groupName).sort((a, b) => a.orderNum - b.orderNum);
};
const searchChange = () => {columnsList.value = columns.filter((item) => item.label.indexOf(searchKeyword.value) > -1);
};
const search = () => {columnsList.value = columns.filter((item) => item.label.indexOf(searchKeyword.value) > -1);
};
const lockList = ref([]);
onMounted(() => {columnsList.value = columns;
});
watchEffect(() => {if(searchKeyword.value){columnsList.value = columns.filter((item) => item.label.indexOf(searchKeyword.value) > -1);}if(!searchKeyword.value){columnsList.value = columns;}drag.value = columns.filter((item) => item.checked && !item.disabled);lockList.value = columns.filter((item) => item.disabled).sort((a, b) => a.orderNum - b.orderNum);const seen = new Set();leftGroups.value = columnsList.value.map((item) => {return {prop: item.prop,groupName: item.groupName,checked: false,orderNum: item.orderNum,active: item.active ? item.active : false};}).filter((item) => {if (!seen.has(item.groupName)) {seen.add(item.groupName);return true;}return false;});
});