vue 搜索框

 效果

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

<div class="top-wrapper">
<div class="search el-input el-input--suffix">
<input
type="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;
});
});

原文地址：https://blog.csdn.net/2301_78133614/article/details/140656747

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！