封装 ~ 智能搜索

最新推荐文章于 2022-03-29 16:19:40 发布
最新推荐文章于 2022-03-29 16:19:40 发布
阅读量125 收藏
点赞数 2
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/estrusKing/article/details/119045002
版权

文章目录

封装Search组件搜索框

App.vue

<template>
  <div>
    <!-- 搜索页面 -->

    <!-- 搜索框 插槽 -->
    <search shape="round" :clearable="true"> 
      <template v-slot:button>
        <h1>搜索</h1>
      </template> 
    </search>


    <!-- 搜索记录 -->



    <!-- 智能提示 -->


  </div>
</template>

<script>
import Search from './views/Search.vue'
export default {
  components: {
    Search
  }
}
</script>

<style>

</style>

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => {
    return h(App)
  } 
}).$mount('#app')

Search.vue

<template>
  <div class="search-body">

      
      <!-- 搜索输入框 -->
      
      <div class="search-input-body">
        <input type="text" v-model="kw" class="search-input-el" :style="{borderRadius: rarius}">
        <span class="clear-btn" @click="clearKw" v-show="kw.length > 0 && clearable">×</span>
      </div>

      <!-- 提交按钮 -->
      <button>搜索</button>

       <slot name="button"></slot>

     
  </div>
</template>

<script>
export default {
    props: {
        shape: {
            type: String,
            default: 'square',
            validator: function(val){
                return ['square','round'].includes(val)
            }
        },
        clearable: {
            type: Boolean,
            default: true
        }
    },
    data(){
        return {
            // rarius: '' //设置当前搜索框的形状
            kw: '' ,//搜索关键字
        }
    },
    watch: {
        kw(val,oldVal){
            if(val.length > 20){
                this.kw = oldVal
            }
        }
    },
    computed: {
        rarius(){
            let val

            if(this.shape === 'round'){
                val = '20px'
            }else if(this.shape === 'square'){
                val = '0'
            }

            return val
        }
    },
    methods: {
        clearKw(){
            this.kw = ''
        }
    }
}
</script>

<style scoped>
.search-body{
    display: flex;
}
.search-input-body{
    /* border: 1px solid #000; */
    width: 200px;
    height: 30px;
    line-height: 30px;
    position: relative;
    margin-right: 10px;
}
.search-input-el{
    width: 200px;
    height: 30px;
    text-indent: 10px;
    border: 0;
    outline: none;
    background-color: #eee;
    /* border-radius: 20px; */
}
.clear-btn{
    position: absolute;
    top: 0px;
    right: 10px;
    cursor: pointer;
}
</style>

router 里的 index.js

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [

]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

store 里的 index.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

封装Tag组件并保持搜索记录

App.vue

<template>
  <div>
    <!-- 搜索页面 -->

    <!-- 搜索框 插槽 -->


    <!-- 搜索记录 -->
    <div class="history-body">
      <div class="history-top">
        <span>搜索记录</span>
        <span class="iconfont icon-shanchu1" @click="clearHistory"></span>
      </div>
      <div class="history-list">
        <tag v-for="(item,index) in historyList" :key="index" :text="item"></tag>
      </div>
    </div>


    <!-- 智能提示 -->


  </div>
</template>

<script>

import Tag from './views/Tag.vue'
 export default {
  components: {
    Tag,
  },
  data(){
    return {
      historyList: [],
    }
  },
  watch: {
    historyList(list){
      localStorage.historyList = JSON.stringify(list)
    }
  },
  created(){
    let list = localStorage.historyList
    if(list){
       this.historyList = JSON.parse(list)
    }
  },
  methods: {
    search(val){ //在搜索上的回车事件
      //搜索
      console.log('搜索：', val)

      //保存记录

      let index = this.historyList.indexOf(val)
      // if(index == -1){
      //   this.historyList.unshift(val)
      // }else{
      //   this.historyList.splice(index,1)
      //   this.historyList.unshift(val)
      // }

      if(index != -1){
        this.historyList.splice(index,1)
      }
      this.historyList.unshift(val)


      // this.historyList.push(val)
    },
    clearHistory(){
      let rel = confirm('确定要清空吗？')
      if(!rel) return
      this.historyList = []
    }
  }
}
</script>

<style scoped>
.history-top{
  font-size: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 300px;
  margin: 30px 0px;
}
.iconfont{
  color: #888;
  font-size: 14px;
  cursor: pointer;
}
.iconfont:hover{
  color: red;
}
</style>

Tag.vue

<template>
  <span class="tag" :style="{color}">
      {{text}}
  </span>
</template>

<script>
export default {
  props: {
    text: String,
    color: String
  }
}
</script>

<style scoped>
.tag{
  background-color: #ccc;
  color: #333;
  padding: 3px 10px;
  font-size: 14px;
  margin: 10px;
  border-radius: 5px;
}
</style>

封装Cell组件

App.vue

<template>
  <div>
    <!-- 搜索页面 -->

    <!-- 搜索框 插槽 -->


    <!-- 搜索记录 -->
  


    <!-- 智能提示 -->
	<div class="message-list" v-show="kwVal.length > 0">
      <cell title="男装" text="200" @click="search"></cell>
    </div>

  </div>

  </div>
</template>

<script>

import Cell from './views/Cell.vue'
 export default {
  components: {

    Cell,
 },
  data(){
	return {
      kwVal: '',
   }
  },
  
  methods: {
      searchInput(val){
      this.kwVal = val
    },
  }
}
</script>

<style scoped>
.message-list{
  width: 200px;
  height: 500px;
  border: 1px solid #bbb;
  position: absolute;
  top: 40px;
  background-color: #fff;
}
</style>

Cell.vue

<template>
  <div class="cell-body" @click="handleClick">
      <span class="title">{{title}}</span>
      <tag :text="text"></tag>
  </div>
</template>

<script>
import Tag from './Tag.vue'
export default {
  props: ['title','text'],
  components: {
    Tag
  },
  methods: {
    handleClick(){
      this.$emit('click',this.title)
    }
  }
}
</script>

<style scoped>
.cell-body{
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 0px 10px;
  height: 40px;
  border-bottom: 1px solid #eee;
}
.title{
  font-size: 14px;
}
</style>

axios搜索接口调用

App.vue

<template>
  <div>
    <!-- 搜索页面 -->

    <!-- 搜索框 插槽 -->


    <!-- 搜索记录 -->
  


    <!-- 智能提示 -->
	
  </div>

  </div>
</template>

<script>
import axios from 'axios'
 export default {

  data(){
	return {
      guess: [] ,//搜索联想词
   }
  },
   watch: {
    kwVal(val){
      if(val.trim() === '') return

      axios.get('http://api.web1024.cn/taobao/guess',{
        params: {
          key: '',
          kw: val
        }
      }).then(res=>{
        // console.log(res.data.data)
        this.guess = res.data.data
      })
    }
  },
 
  }
}
</script>

<style scoped>


</style>

参考文件 目录

参考文件 目录
— — assets
— — components
— — router
	— — index.js
— — store
	 — — index.js
— — views
	 — — Cell.vue
	 — — Search.vue
	 — — Tag.vue
— — App.vue
— — main.js

整合

— — router — — index.js

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [

]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

— — store — — index.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

— — views — — Cell.vue

<template>
  <div class="cell-body" @click="handleClick">
      <span class="title">{{title}}</span>
      <tag :text="text"></tag>
  </div>
</template>

<script>
import Tag from './Tag.vue'
export default {
  props: {
    title: String,
    text: [String,Number]
  },
  components: {
    Tag
  },
  methods: {
    handleClick(){
      this.$emit('click',this.title)
    }
  }
}
</script>

<style scoped>
.cell-body{
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 0px 10px;
  height: 40px;
  border-bottom: 1px solid #eee;
}
.title{
  font-size: 14px;
}
</style>

— — views — — Search.vue

<template>
  <div class="search-body">

      
      <!-- 搜索输入框 -->
      
      <div class="search-input-body">
        <input type="text" v-model="kw" class="search-input-el" @input="handleInput" @keypress.enter="handlePress" :style="{borderRadius: rarius}">
        <span class="clear-btn" @click="clearKw" v-show="kw.length > 0 && clearable">×</span>
      </div>

      <!-- 提交按钮 -->
      <!-- <button>搜索</button> -->

       <slot name="button"></slot>

     
  </div>
</template>

<script>
export default {
    props: {
        shape: {
            type: String,
            default: 'square',
            validator: function(val){
                return ['square','round'].includes(val)
            }
        },
        clearable: {
            type: Boolean,
            default: true
        },
        // value: String
    },
    data(){
        return {
            // rarius: '' //设置当前搜索框的形状
            kw: '' ,//搜索关键字
        }
    },
    watch: {
        kw(val,oldVal){
            if(val.length > 20){
                this.kw = oldVal
            }
        }
    },
    computed: {
        rarius(){
            let val

            if(this.shape === 'round'){
                val = '20px'
            }else if(this.shape === 'square'){
                val = '0px'
            }

            return val
        }
    },
    methods: {
        clearKw(){ //点击清空按钮事件
            this.kw = ''
            this.$emit('input',this.kw)
        },
        handlePress(){ //输入框的回车事件
            this.$emit('enter',this.kw)
        },
        handleInput(){
            this.$emit('input',this.kw)
        }
    }
}
</script>

<style scoped>
.search-body{
    display: flex;
}
.search-input-body{
    /* border: 1px solid #000; */
    width: 200px;
    height: 30px;
    line-height: 30px;
    position: relative;
    margin-right: 10px;
}
.search-input-el{
    width: 200px;
    height: 30px;
    text-indent: 10px;
    border: 0;
    outline: none;
    background-color: #eee;
    /* border-radius: 20px; */
}
.clear-btn{
    position: absolute;
    top: 0px;
    right: 10px;
    cursor: pointer;
}
</style>

— — views — — Tag.vue

<template>
  <span class="tag" :style="{color}">
      {{text}}
  </span>
</template>

<script>
export default {
  props: {
    text: String,
    color: String
  }
}
</script>

<style scoped>
.tag{
  background-color: #ccc;
  color: #333;
  padding: 3px 10px;
  font-size: 12px;
  margin: 10px;
  border-radius: 5px;
}
</style>

— — App.vue

<template>
  <div>
    <!-- 搜索页面 -->

    <!-- 搜索框 插槽 -->
    <search shape="round" :clearable="true" @enter="search" @input="searchInput"> 
      <template v-slot:button>
        <button>搜索</button>
      </template> 
    </search>


    <!-- 搜索记录 -->
    <div class="history-body">
      <div class="history-top">
        <span>搜索记录</span>
        <span class="iconfont icon-shanchu1" @click="clearHistory"></span>
      </div>
      <div class="history-list">
        <tag v-for="(item,index) in historyList" :key="index" :text="item"></tag>
      </div>
    </div>


    <!-- 智能提示 -->
    <div class="message-list" v-show="kwVal.length > 0">
      <cell v-for="(item,index) in guess" :key="index" :title="item.kw" :text="item.total" @click="search"></cell>
    </div>

  </div>
</template>

<script>
import Search from './views/Search.vue'
import Tag from './views/Tag.vue'
import Cell from './views/Cell.vue'
import axios from 'axios'
export default {
  components: {
    Search,
    Tag,
    Cell
  },
  data(){
    return {
      historyList: [],
      kwVal: '',
      guess: [] //搜索联想词
    }
  },
  watch: {
    historyList(list){
      localStorage.historyList = JSON.stringify(list)
    },
    kwVal(val){
      if(val.trim() === '') return

      axios.get('http://api.web1024.cn/taobao/guess',{
        params: {
          key: '',
          kw: val
        }
      }).then(res=>{
        // console.log(res.data.data)
        this.guess = res.data.data
      })
    }
  },
  created(){
    let list = localStorage.historyList
    if(list){
       this.historyList = JSON.parse(list)
    }
  },
  methods: {
    search(val){ //在搜索上的回车事件
      console.log(this.kwVal)
      //搜索
      console.log('搜索：', val)

      //保存记录

      let index = this.historyList.indexOf(val)
      // if(index == -1){
      //   this.historyList.unshift(val)
      // }else{
      //   this.historyList.splice(index,1)
      //   this.historyList.unshift(val)
      // }

      if(index != -1){
        this.historyList.splice(index,1)
      }
      this.historyList.unshift(val)


      // this.historyList.push(val)
    },
    clearHistory(){
      let rel = confirm('确定要清空吗？')
      if(!rel) return
      this.historyList = []
    },
    searchInput(val){
      this.kwVal = val
    }
  }
}
</script>

<style scoped>
.history-top{
  font-size: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 300px;
  margin: 30px 0px;
}
.iconfont{
  color: #888;
  font-size: 14px;
  cursor: pointer;
}
.iconfont:hover{
  color: red;
}
.message-list{
  width: 200px;
  /* height: 500px; */
  border: 1px solid #bbb;
  position: absolute;
  top: 40px;
  background-color: #fff;
}
</style>

— — main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => {
    return h(App)
  } 
}).$mount('#app')
半生过往
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
封装搜索功能，方便多组件使用
Nlovely的博客
05-21 278
自定义一个搜索功能组件，这里用到了mint-ui组件库 <template> <div class="search"> <mt-field class="search-input" :placeholder="placeholder" v-model="value"></mt-field> <mt-button class="search-button" type="primary" size="small" @click.nativa="se
vue封装搜索组件
Shmily的博客
06-01 960
vue封装搜索组件 1、引入搜索组件 <Serach v-on:inputValue="inputValue" /> 2、引入搜索组件路径 import Serach from './Search' 3、事件处理代码 export default { components: { Serach }, methods: { inputValue (inpVal) { console.log(inpVal) } } } 搜索框组件代码 <
封装历史搜索记录功能 & 样式的搜索框.
10-26
Search_Layout-master封装历史搜索记录功能 & 样式的搜索框.zip
封装搜索框组件
guanguan0_0的博客
01-23 1354
后台管理系统多是以表格和表单为主，有列表就一定会有列表的筛选功能，所以在此把列表头部的搜索功能拆分出一个公共组件，方便使用。 大致样式如下图： 这里我使用的是ng-zorro蚂蚁金服的angular组件库 index.html: &lt;div nz-form class="ant-advanced-search-form"&gt; &lt;nz-row [nzGutter]="...
Android通用搜索页的分析与封装
冷不冷的博客
03-30 2327
前言之前写过一篇文章是关于搜索框的封装( Android通用的搜索框),当时只是对搜索栏部分进行简单的封装,把搜索逻辑、页面和数据处理封装了一下,而搜索页的处理(包括数据源,控件等)还需要手动的去创建和修改,用起来还是比较麻烦,最近不太忙,刚好需要用到这部分内容,于是又进一步的封装了一下.(文章只适用于数据量不太大的本地搜索,例如通讯录,城市列表,本地订单等)还是先看一下效果图吧主要看一下封装的实现
人工智能-项目实践-搜索引擎-基于java开发的搜索引擎一个封装
最新发布
02-26
搜索引擎一个封装
人工智能-项目实践-搜索引擎-tf-idf 模型封装类，包含计算所有文档的tf-idf值，实现了基于tf-idf搜索引擎功能
02-25
tf-idf 模型封装类，包含计算所有文档的tf-idf值，实现了基于tf-idf搜索引擎功能 tf-idf 模型封装类，包含计算所有文档的tf-idf值，实现了基于tf-idf搜索引擎功能 根据query，计算与每个文档的相似度，返回与query...
Ajax+servlet实现搜索框智能提示
03-19
找到匹配的搜索建议后，将其封装成JSON格式的响应数据。 5. **响应处理**：Ajax请求返回后，JavaScript处理响应。通常，我们需要解析JSON数据，然后动态地在搜索框下方显示匹配的提示列表。 6. **UI更新**：使用...
人工智能-项目实践-搜索引擎-java编写，获取百度和360搜索引擎，关键词对应网站的排名
02-26
在本项目实践中，我们将深入探讨如何使用Java编程语言来实现一个人工智能应用，具体目标是构建一个搜索引擎排名抓取工具，它可以获取特定关键词在百度和360搜索引擎上的对应网站排名。这个工具对于SEO（搜索引擎优化...
android-ble蓝牙封装lib
06-01
本项目“android-ble蓝牙封装lib”是针对这种技术的一个实用库，旨在简化开发者的使用过程，提供更高效、便捷的方式来处理BLE设备的搜索、连接和数据交换。 首先，关于BLE的基础知识：BLE是一种优化的蓝牙协议，...
vue3组件封装之搜索组件的封装
呵呵的牛
03-03 3421
vue3组件封装之搜索组件的封装复用
封装搜索组件
海绵宝宝
05-31 266
子组件的代码： <template> <div> <input type="text" v-model="dd" @keydown.enter="chui" @keydown.delete="del" @keydown.up="up" @keydown.down="down" /> <div v-for="(item,key) in chu" :key="key"&g
封装一个搜索的功能
feiyan939的博客
09-13 604
html> head lang="en"> meta charset="utf-8"> meta http-equiv="X-UA-Compatible" content="IE=Edge"/> title>可选日期范围的jQuery时间日期插件title> link type="text/css" rel="stylesheet" href="css/bootst
自己封装一个简单的自定义检索
qq_24864211的博客
02-24 486
使用了Icheck.js  bootstrap的样式自己封装了一个自定义高级查询的插件。拼接条件：  AdvancedSearch.prototype.getSearchCondition = function (callback) { var tr = $('.search_content tr'); var list = []; for (va...
Vue 引入路径正确的，但一直报错： Already included file name ‘××ב differs from file name ‘××ב only in casing.
热门推荐
estrusKing的博客
06-25 3万+
Vue 引入路径 import ××× from ‘×××’ 报错 引入的文件名和地址都是正确的，但是还是报错误 Already included file name ‘×××’ differs from file name ‘×××’ only in casing. 这时候我们只要把文件名的后缀vue去掉就好了 解决方案 解决方式一：把文件名的后缀vue去掉就好了 解决方式二：把路径前面的点改成@ ...
Vue 路由 跳转【返回、刷新、跳转】
estrusKing的博客
03-23 1万+
Vue 路由 跳转【返回、刷新、跳转】this.$router.go(-1)this.$router.back()this.$router.pushthis.$router.replace this.$router.go(-1) 原页面表单中的内容会丢失； 向前或者向后跳转n个页面，n可为正整数或负整数 this.$router.go(-1)：后退+刷新 this.$router.go(0)：刷新； this.$router.go(1) ：前进 this.$router.back() 原页表表单中的内
vue-wxlogin微信扫码登录插件【使用笔记】
estrusKing的博客
11-03 7632
文章目录1.安装2.直接界面引入3.使用4.使用例子 官方文档：https://www.npmjs.com/package/vue-wxlogin 一个简单的微信登陆组件，方便组件化模块化工程化引入 组件中没有访问dom，并且没有使用hook，所以支持ssr 使用参数与微信官方文档一致 url：https://developers.weixin.qq.com/doc/oplatform/Website_App/WeChat_Login/Wechat_Login.html 1.安装 npm ins
vue 获取 后台管理系统 当前登录用户 信息
estrusKing的博客
03-29 4293
vue 获取 后台管理系统 当前登录用户 信息 let name = '' name = localStorage.getItem("name"); console.log( name ) //新增测试
在Vue中使用QRCode生成二维码 插件【使用笔记】
estrusKing的博客
11-24 3072
文章目录方法一方法二 方法一 1. 首先安装依赖包 npm install --save qrcode 2. mian.js引入 //Vue使用QRCode插件，生成二维码 import QRCode from 'qrcode' Vue.prototype.$QRCode = QRCode 3. 使用封装（可以直接拿去用修改一下二维码大小） <template> <div> <canvas id="canvas"></canvas> &l
封装gitlab界面
09-08
例如，在代码托管功能上，可以添加快速导航和搜索功能，使用户能够快速定位到特定的项目或文件；在代码审核功能上，可以提供智能的代码提示和自动补全功能，帮助用户更快地编写高质量的代码；在项目协作功能上，可以...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

半生过往

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值