vue3实现搜索，并标红关键字，内容两行省略，展示出现关键字的部分，没有就内容从头排序

以下是一个简单的实现：

<template>
  <div>
    <input v-model="searchText" placeholder="请输入关键字" @input="search" />
    <ul>
      <li v-for="(item, index) in filteredList" :key="index">
        <div v-html="highlight(item.content)"></div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { id: 1, content: "这是一段测试文本，没有关键字" },
        { id: 2, content: "这是一段含有关键字的测试文本" },
        { id: 3, content: "关键字可能出现在文本的任何位置，比如这里" },
        { id: 4, content: "文本也可能包含多个关键字，比如这里的关键字和关键字" },
        { id: 5, content: "关键字也可能出现在文本的首尾，比如这个关键字和这个关键字" },
      ],
      searchText: "",
    };
  },
  computed: {
    filteredList() {
      if (this.searchText === "") {
        return this.list;
      } else {
        const regex = new RegExp(this.searchText, "gi");
        return this.list.filter((item) => regex.test(item.content)).sort((a, b) => {
          const indexA = a.content.indexOf(this.searchText);
          const indexB = b.content.indexOf(this.searchText);
          if (indexA === -1 || indexB === -1) {
            return indexA - indexB;
          } else {
            return indexA - indexB || a.content.localeCompare(b.content);
          }
        });
      }
    },
  },
  methods: {
    search() {
      // 触发computed的filteredList更新
    },
    highlight(text) {
      const regex = new RegExp(this.searchText, "gi");
      return text.replace(regex, "<span style='color:red'>$&</span>").split("\n").slice(0, 2).join("<br/>") + "...";
    },
  },
};
</script>

在这个实现中，我们首先使用`v-model`指令绑定搜索框的值，然后使用`@input`监听输入框的输入事件，在输入改变时触发`search`方法更新过滤后的列表。

`filteredList`是一个计算属性，它根据`searchText`过滤原始列表，并按照以下规则排序：

1. 如果两个文本都不包含关键字，则按照原始顺序排序。
2. 如果只有一个文本包含关键字，则包含关键字的文本排在前面。
3. 如果两个文本都包含关键字，则关键字第一次出现的位置靠前的文本排在前面。如果两个文本的关键字位置相同，则按照文本内容的字典序排序。

`highlight`方法将匹配的关键字用`<span>`标签包裹，并将文本分成两行，只展示前两行内容。