spring.factories再idea项目中哪里查找到

以下是一个简单的 Vue2 实现的 input 查询组件：

<template>
  <div>
    <input v-model="query" @input="handleInput" />
    <ul>
      <li v-for="(item, index) in filteredList" :key="index">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: ["apple", "banana", "orange", "peach", "pear"],
      query: "",
    };
  },
  computed: {
    filteredList() {
      return this.list.filter((item) =>
        item.toLowerCase().includes(this.query.toLowerCase())
      );
    },
  },
  methods: {
    handleInput(event) {
      this.query = event.target.value;
    },
  },
};
</script>

这个组件包含一个 `input` 元素和一个显示查询结果的列表。当用户在输入框中输入内容时，`query` 数据会立即更新，然后通过 `computed` 计算属性过滤出符合条件的列表项并渲染到页面上。

同时，这个组件也支持用户通过点击列表项来选择一个值。你可以在 `li` 元素上添加 `@click` 事件来实现这个功能。

下面是一个简单的 Vue2 实现的 checkbox 下拉列表组件：

<template>
  <div class="dropdown">
    <input type="checkbox" v-model="checked" @click="toggleDropdown" />
    <label>{{ label }}</label>
    <ul v-show="isOpen">
      <li v-for="(item, index) in options" :key="index">
        <input
          type="checkbox"
          :id="item.value"
          v-model="selectedItems"
          :value="item.value"
          @change="handleChange"
        />
        <label :for="item.value">{{ item.label }}</label>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    label: {
      type: String,
      default: "Choose options",
    },
    options: {
      type: Array,
      required: true,
    },
  },
  data() {
    return {
      isOpen: false,
      checked: false,
      selectedItems: [],
    };
  },
  methods: {
    toggleDropdown() {
      this.isOpen = !this.isOpen;
    },
    handleChange() {
      this.$emit("change", this.selectedItems);
    },
  },
};
</script>

这个组件包含一个 `input[type=checkbox]` 元素和一个下拉的选项列表。当用户点击复选框时，下拉列表会展开或者收起。用户可以通过勾选多个复选框来选择多个值，这些值保存在 `selectedItems` 数据中，并通过 `change` 事件传递给父组件。

你可以在 `options` 属性中传入一个包含选项的数组，每个选项都包含一个 `label` 和一个 `value` 属性。这个数组会被循环遍历，然后渲染到下拉列表中的 `li` 元素上。同时，你也可以通过 `label` 属性来设置复选框的标签文本。