搜索功能实现 - 搜索历史组件的封装 - 编辑状态和完成状态下不同的操作

<template>
  <div class="search-history">
    <div class="search-history">
      <van-cell title="搜索历史">
        <template v-if="isEdit && searchHistories.length">
          <!--  vue 是单向数据流动，不允许直接删除 props 的数据，要通知父组件删除然后子啊把值传递过来 -->
          <span @click="searchHistories.splice(0)">全部删除</span>&nbsp;
          <span @click="isEdit = false">完成</span>
          <!-- 点击删除可以删除 -->
        </template>
        <van-icon v-else name="delete" @click="isEdit = true" />
      </van-cell>
      <!-- 点击这一行，如果是编辑状态就会删除，不是编辑状态就搜索历史记录的结果 clickHandler -->
      <van-cell
        :title="item"
        v-for="(item, index) in searchHistories"
        :key="index"
        @click="clickHandler(index)"
      >
        <van-icon name="close" v-if="isEdit" />
      </van-cell>
    </div>
  </div>
</template>

<script>
export default {
  name: "searchHistory",
  props: {
    searchHistories: {
      type: Array,
      required: true,
    },
  },
  data() {
    return {
      isEdit: false, // 是否为编辑状态
    };
  },
  methods: {
    clickHandler(idx) {
      //   console.log(idx);
      if (this.isEdit) {
        // 删除行为 删除当前点击的数据 可以删除 但是不规范 应该委托给父组件删除 吊毛不是的  对于复杂的数据 这样是可以操作的 又没有改变地址 就不算是修改了数据 父组件也会随着更新
        this.searchHistories.splice(idx, 1);
      } else {
        // 跳转行为，一石三鸟 再次复用 search 方法
        // ps : 第一次使用 : 回车搜索  第二次: 点击建议项 第三次 : 点击搜索历史项
        this.$emit("search", this.searchHistories[idx]);
      }
    },
  },
};
</script>

<style>
</style>