vue实现简单搜索功能 |
您所在的位置：网站首页 › 怎么用照片搜索车 › vue实现简单搜索功能 |
vue实现简单搜索功能
|
目录
1、概述2、功能逻辑2.1功能流程2.2 流程图
3、功能实现3.1 vue组件化3.2 代码3.3 动态效果
1、概述
在vue项目中，搜索功能是我们经常需要使用的一个场景，最常用的是在列表数据中搜索一个想要的，今天的例子就是我们实现vue从列表数据中搜索，并展示。如下图所示： 这里我们进行简单搜索功能，搜索逻辑是只要用户输入值与产品的名称进行模糊匹配，符合条件的数据进行展示，不符合条件的数据过滤。流程描述如下： 用户点击搜索框，输入内容；检测到搜索框值变化，取用户输入值；对用户输入值进行判断，若为空，则展示原列表，不为空则进行筛选；将用户输入值与所有列表数据进行遍历匹配，若匹配，则展示匹配条目，完成搜索。 2.2 流程图
实现如上图功能，我们肯定是使用vue的组件特性，将搜索以及，产品列表抽成组件，以提高代码复用性，抽成组件之后，该页面将由三个部分组成，数据在以下三个组件之间传递： 父组件：主页面，用于数据逻辑处理；搜索组件：给父组件传递用户输入值；列表：展示从父组件接收的值。 3.2 代码父组件：index.vue import TitleBar from "@/components/TitleBar"; import SearchInput from "./components/SearchInput"; import PrdItem from './components/PrdItem'; export default { name: "", components: { TitleBar, SearchInput, PrdItem }, data() { return { title: "产品列表", searchPlhText: "请输入产品名称", productList: {}, // 产品列表 productListRst: {}, // 搜索筛选之后的产品列表 } }, created() { // 初始化页面参数，按照生命周期，子组件需要的参数父组件需要在created生命周期取值 this.initParams(); }, methods: { // 返回方法 goback() { // this.$emit("GoBack"); }, // 初始化页面参数,获取产品列表 initParams() { this.productList = [ { imgPath: 'apple-1001.png', name: 'Apple iPad Air 平板电脑(2020新款)', price: '4799.00', sale: '5', ranking: '10000+评价 平板热卖第5名', prdShopName: 'Apple官方旗舰店' }, { imgPath: 'apple-1002.png', name: 'Apple iPhone 11手机', price: '4999.00', sale: '5', ranking: '375万+评价', prdShopName: 'Apple官方旗舰店' }, { imgPath: 'apple-1003.jpg', name: 'Apple AirPods 配充电盒 Apple蓝牙耳机', price: '1246.00', sale: '5', ranking: '200万+评价', prdShopName: 'Apple官方旗舰店' }, ]; this.productListRst = this.productList; }, // 每次search框变化则进行筛选,对数据进行逻辑处理 searchInputChange(value) { // 若未输入值，则展示所有数据 if(null === value || undefined === value){ this.productListRst = this.productList; } else { this.productListRst = []; // 结果列表置空 let regStr = ''; // 初始化正则表达式 for(let i=0; i let name = this.productList[i].name; //按照名字匹配 let regMatch = name.match(reg); if(null !== regMatch) {// 将匹配的数据放入结果列表中 this.productListRst.push(this.productList[i]); } } } }, // 去往产品详情页 toPrdDetail(){ this.$router.push({path: 'detail'}) } } }; #page-title { width: 100%; background-color: #fff; display: flex; justify-content: center; } .backImg { width: 20px; }主要的逻辑处理是 searchInputChange，对于更复杂的搜索逻辑，也可以在里面进行处理。 搜索组件：searchInput.vue export default { name: "searchInput", // 搜索输入框 props: { // input框占位文字 plhText: { type: String, default: "请输入搜索内容" } }, data() { return { inputValue: "" //输入框的值 }; }, methods: { // 每次输入框变化刷新列表 inputChange() { // 使用emit给父组件传值 this.$emit('input-changed', this.inputValue); } } };列表组件：productList.vue {{ prd.name }} {{ prd.price }} 12期免息 新品 {{ prd.ranking }} {{ prd.prdShopName }} export default { props: { // 传入产品对象，必传属性为imgPath,name,price,shop prd: { type: Object, } }, methods: { // 跳转产品详情页面 toPrdDetail() { this.$emit("to-prd-detail",this.prd.Id); } } };标题头组件：titleBar {{ title }} export default { name: "titleBar", props: { // 标题 title: { type: String, //规定数据类型 default: "标题" //默认值 }, showRightArea: { type: Boolean, default: false }, rightImgPath: { type: String } }, methods: { // 返回方法 goBack() { this.$emit("go-back"); } } }; .page-title { width: 100%; background-color: #fff; display: flex; padding: 10px 0; justify-content: flex-start; } .backImg { width: 15%; text-align: center; img { margin: 0 auto; width: 24px; } } .titleText { font-size: 18px; height: 26px; width: 70%; text-align: center; label { margin: 0 auto; } } .rightImg { width: 15%; text-align: center; img { margin: 0 auto; width: 24px; } }以上代码为部分代码，css代码不包含在内。 3.3 动态效果以上代码实现的效果如下动态图： |
这张图仅代表最简单的搜索流程，若需要进行一些复杂的处理，可以进行修改，比如说匹配的商品名称关键字变色等。
【本文地址】
今日新闻 |
推荐新闻 |