Vue 搜索历史功能的实现(增添，删除，隐藏，清空)

Vue刚入门，模仿了B站首页（部分）UI巩固所学知识，下面展示其中搜索历史功能的实现，项目完整代码和页面效果见文末链接

HTML：

<div class="search_record_box" id="search_record_box_id"><!-- 搜索框 --><div class="top_navigation_bar_input"><input @blur="hide_browsing_history1" @focus="show_browsing_history1" v-model="inputValue"@keyup.enter="add" type="text" placeholder="海贼王"><el-button class="el-icon-search"></el-button></div><!-- 浏览记录--><div class="browsing_history" v-show="browsing_history_show_or_not1"><ul><li class="browsing_history_li browsing_history_li_title"><label><strong>&emsp;搜索历史</strong></label><div class="browsing_history_clear"><button class="browsing_history_clear_button" @click="clear">清空</button></div></li><li v-for="(item,index) in home_top_navigation_list" class="browsing_history_li"><label>&emsp;{{index+1}}&emsp;{{item}}</label><el-button class="el-icon-close" @click.stop="remove(index)"></el-button></li></ul></div>
</div>

less：

.browsing_history {z-index: 1;margin-top: .1rem;height: auto;width: 33.45rem;display: flex;flex-direction: column;justify-content: start;.browsing_history_li {background-color: #FFFFFF;width: 33.45rem;height: 4rem;color: #A7A9AB;display: flex;flex-direction: row;justify-content: space-between;.el-icon-close {border-radius: 0;border: 0;height: 4rem;background-color: #FFFFFF;}}.browsing_history_li_title {font-size: 1.4rem;color: #000000;.browsing_history_clear {height: 4.0rem;width: 4.0rem;background-color: #FFFFFF;button:hover {color: #00A1D6;}.browsing_history_clear_button {background-color: #FFFFFF;border: 0;color: #A7A9AB;// justify-content: center;// align-content: center;}}}
}

Vue：

var app = new Vue({el: '.bilibili_home_page',data: {home_top_navigation_list: ["海贼王", "元龙", "狐妖小红娘"],content_subdivision_list_up:["动画","音乐","舞蹈","知识","生活","时尚","娱乐","放映厅"],content_subdivision_list_down:["番剧","国创","游戏","科技","鬼畜","咨讯","影视"],inputValue: "",browsing_history_show_or_not1: 0,},methods: {add: function () {this.home_top_navigation_list.push(this.inputValue);},remove: function (index) {// console.log("删除");// console.log(index);this.home_top_navigation_list.splice(index, 1);},clear: function () {this.home_top_navigation_list = [];},show_browsing_history1: function () {this.browsing_history_show_or_not1 = 1;},hide_browsing_history1: function () {document.addEventListener("click", e => {//box要覆盖到搜索历史框和搜索栏var box = document.getElementById("search_record_box_id");if (!box.contains(e.target)) {// console.log("在外");this.browsing_history_show_or_not1 = 0;}})},},
})

完整（也不太完整，正在持续更新中）项目代码见：
https://github.com/Ki-Wi-Berry/ki-wi-berry.github.io
页面效果详见：
https://ki-wi-berry.github.io/

Vue 搜索历史功能的实现(增添，删除，隐藏，清空)相关推荐

vue项目搜索历史功能的实现
vue项目搜索历史功能的实现播放器项目中歌曲搜素页面的首先需要在state定义搜索历史,在其中保存搜索历史 state.js:<br>// 搜索历史: searchHistory: [ ...
vue 实现搜索历史_微信小程序实现搜索历史功能
结合了微信给的资料,马马虎虎摸索出了一些东西,下面说一下微信小程里序搜索历史功能的实现,下图是实现效果. 首先,定义历史记录的显示风格和方式,在下用的是列表模式,没有使用什么比较酷炫的套路. {{it ...
Android浏览历史sqlite功能,[Android]greendao实现搜索历史功能
使用greendao实现搜索历史功能 ezgif-1-378e749b52.gif device-2017-08-31-103330.png 之前封装sqlite实现过这功能,不过原生封装使用sql语 ...
android的UDC功能,Android实现搜索历史功能
本文实例为大家分享了Android实现搜索历史的具体代码,供大家参考,具体内容如下 SharedPreferences实现本地搜索历史功能,覆盖搜索重复的文本,可清空 1. 判断搜索内容是否含表情,不 ...
微信小程序历史搜索历史的本地缓存和删除
wxml: <view class='search_history' wx:if="{{isShow}}"><view class='history_title' ...
App开发-使用Vue3+Vant组件实现历史搜索记录功能
使用Vue3+Vant组件实现App历史搜索记录功能最近在开发一款新的app项目,我自己也是第一次接触app开发,经过团队的一段时间研究调查,决定使用Vue3+Vant前端组件的模式进行开发,vue ...
微信小程序搜索，搜索历史，清除搜索历史，以及点击搜索历史实现搜索功能
微信小程序搜索,搜索历史,清除搜索历史,以及点击搜索历史实现搜索功能热搜内容一般从接口遍历的,实现方法基本和搜索历史差不多 wxml页面 <view class="search-he ...
vue搜索、历史记录功能简单实现
实现的功能 1.点击搜索,把搜索的值存入本地记录,并展示 2.搜索相同的值,要删除旧数据,把新数据放进数组首位 3.清空历史记录 <div class="srarch_main&quo ...
【uni-app微信小程序】搜索页面开发，可以保存用户搜索历史，删除历史（简单解释）
目录前言效果展示主体内容前言此篇文章纯代码较多,细节解释,今后会出更加详细的解释效果展示保存的内容,可以长按删除,视频时长原因就不一一展示,具体效果如下视频主体内容这里one-adv ...

Vue 搜索历史功能的实现(增添，删除，隐藏，清空)

Vue 搜索历史功能的实现(增添，删除，隐藏，清空)相关推荐

最新文章

热门文章