vue 移动端搜索功能(带历史搜索记录)

 实现效果如图:

 实现的功能:
1.点击搜索,把搜索的值存入本地记录,并展示
2.搜索相同的值,要删除旧数据,把新数据放进数组首位
3.清空历史记录

html代码: 

<div class="searchinp">
      <span @click="back" class="totrain"></span>
      <div class="input_box">
        <img class="btn_img" src="../assets/search.png" alt="" />
        <input type="text" v-model="search_val"/>
      </div>

      <button @click="get_search">搜索</button>
    </div>
    <div class="history">
      <p class="note">
        <span>历史搜索</span>
        <button @click="empty">
          <van-icon class="icon" name="delete-o" />
          <span>清除记录</span>
        </button>
      </p>
      <ul v-if="historyList.length>0">
        <li
          v-for="(item, index) in historyList"
          :key="index"
          @click="goSearchDetail(item)"
        >
          {{ item }}
        </li>
      </ul>
      <p v-else style="text-align:center;margin:0 auto;font-size:16px;margin-top:20px">
          暂无搜索记录
      </p>
    </div>

 事件部分:

<script>
export default {
  name: "Search",
  data() {
    return {
      search_val: "", //搜索的内容
      historyList: [], //历史搜索记录,存本地
    };
  },
  mounted() {
    //如果本地存储的数据historyList有值,直接赋值给data中的historyList
    if (JSON.parse(localStorage.getItem("historyList"))) {
      this.historyList = JSON.parse(localStorage.getItem("historyList"));
    }
  },
  methods: {
    // 搜索
    get_search() {
      if (this.search_val == "") {
        // this.$toast("请输入搜索内容");
        this.$notify({ type: "primary", message: "请输入搜索内容" });
        return false;
      } else {
        // 没有搜索记录,把搜索值push进数组首位,存入本地
        if (!this.historyList.includes(this.search_val)) {
          this.historyList.unshift(this.search_val);
          localStorage.setItem("historyList", JSON.stringify(this.historyList));
        } else {
          //有搜索记录,删除之前的旧记录,将新搜索值重新push到数组首位
          let i = this.historyList.indexOf(this.search_val);
          this.historyList.splice(i, 1);
          this.historyList.unshift(this.search_val);
          localStorage.setItem("historyList", JSON.stringify(this.historyList));
        }
        //跳转到搜索结果页
        this.$router.push({
          path: "/home",      //home是列表页
          query: {
            keyword: this.search_val,
          },
        });
      }
    },
    //点击历史搜索,跳转搜索结果页
    goSearchDetail(title) {
      this.$router.push({
        path: "/home",
        query: {
          keyword:title,
        //   search_val: title,
        },
      });
    },

    //清空历史搜索记录
    empty() {
        this.$notify({ type: "success", message: "清空历史搜索成功" });
      localStorage.removeItem("historyList");
      this.historyList = [];
    },
  },
};
</script>

 

  • 7
    点赞
  • 18
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
Vue移动,你可以使用HTML5的MediaRecorder API来录制音频。下面是一个示例: 1. 创建一个录音组件,例如Record.vue: ```html <template> <div> <button v-on:touchstart="startRecording" v-on:touchend="stopRecording">开始录音</button> </div> </template> <script> export default { data() { return { chunks: [], mediaRecorder: null, isRecording: false }; }, methods: { startRecording() { navigator.mediaDevices.getUserMedia({ audio: true }) .then(stream => { this.mediaRecorder = new MediaRecorder(stream); this.mediaRecorder.start(); this.isRecording = true; this.mediaRecorder.addEventListener('dataavailable', event => { if (typeof event.data === 'undefined') return; if (event.data.size === 0) return; this.chunks.push(event.data); }); }) .catch(err => console.log(err)); }, stopRecording() { this.mediaRecorder.stop(); this.mediaRecorder.addEventListener('stop', () => { const audioBlob = new Blob(this.chunks, { 'type': 'audio/mp3' }); const audioURL = URL.createObjectURL(audioBlob); const audio = new Audio(audioURL); audio.play(); this.chunks = []; this.isRecording = false; }); } } } </script> ``` 2. 在需要使用录音功能的页面中引入Record组件,并使用: ```html <template> <div> <Record></Record> </div> </template> <script> import Record from './Record.vue'; export default { components: { Record } } </script> ``` 在上面的示例中,我们在Record组件中请求用户许可使用麦克风。一旦用户授权,我们就创建一个MediaRecorder实例并开始录制音频。在录制期间,我们将音频数据存储在一个数组中。当停止录制时,我们使用Blob对象将音频数据转换为Blob对象,这样我们就可以将其上传到服务器或将其保存到本地文件中。最后,我们创建一个Audio实例并将其播放,以便用户可以听到自己的录音。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值