学做网站零基础,如何设计网站,一键清空wordpress文章,wordpress meta_key效果 创建搜索组件#xff1a; 在Vue项目中#xff0c;首先需要创建一个搜索组件。这个组件通常包含一个输入框和一个搜索按钮。使用v-model指令将输入框与组件的数据属性#xff08;如searchKeyword#xff09;进行双向绑定#xff0c;以便获取用户输入的关键词。处理搜索… 效果 创建搜索组件 在Vue项目中首先需要创建一个搜索组件。这个组件通常包含一个输入框和一个搜索按钮。使用v-model指令将输入框与组件的数据属性如searchKeyword进行双向绑定以便获取用户输入的关键词。处理搜索逻辑 为搜索按钮绑定一个点击事件处理函数如handleSearch该函数负责在用户点击时触发搜索操作。在事件处理函数中可以使用Vue的异步请求库如Axios向后端服务器发送搜索请求并将用户输入的关键词作为请求参数。展示搜索结果 后端服务器处理搜索请求后将返回搜索结果。在Vue组件中可以使用计算属性computed properties或观察者watchers来监听搜索结果的变化并相应地更新组件的模板以展示搜索结果。优化搜索体验 可以为搜索组件添加一些辅助功能如自动完成、搜索历史记录等以提升用户体验。使用正则表达式或模糊匹配算法来实现更复杂的搜索逻辑。
div classtop-wrapperdiv classsearch el-input el-input--suffixinputtypetextautocompleteoffplaceholder输入指标名称搜索classel-input__innerv-modelsearchKeywordkeydown.entersearchchangesearchChange/span classel-input__suffixspan classel-input__suffix-innerel-icon clicksearchSearch //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 refstring();
const keyword refstring();
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;});
});
