手把手实现 Select 组件

const props = defineProps<{
  value: {
    // 选中项的值（v-model)
    type: string | Array,
    default: () => [],
    required: true,
  }
  options: {
    // 下拉列表选项数据
    type: Array<{value, label}>,
    default: () => [],
  }
  mode: {
    // 多选模式（multiple）或标签模式（tag），不传则为单选模式
    type: string | undefined
  },
}>();

const emit = defineEmits(["update:value", "change", "focus", "blur", "deselect", "select"]);

const emit = defineEmits<{
  (e: 'update:value', value: string | [string]): void
  (e: 'change', value: string, value: string | [string]): void
  (e: 'focus'): void
  (e: 'blur): void
  (e: 'deselect, value: string): void
  (e: 'select', value: string): void
}>()

const inputRef = ref<HTMLInputElement | null>(null); // input元素的引用
const inputValRef = ref<string>(''); // input的值
const calculateRef = ref<string>(''); // 用于计算input宽度的隐藏元素
const selectContainerRef = ref<HTMLDivElement | null>(null);
const newWidth = ref<number>(0); // 用于计算input的宽度
const open = ref<boolean>(false); // 控制是否显示下拉选项列表
const focusRef = ref<boolean>(false); // 组件是否是聚焦状态

// 当为多选时计算input内容变化时input的宽度
// input 初始宽度为 4px，用于进行聚焦。因为 input 宽度的原因以及实际显示的输入框是div，因此聚焦和失焦事件需要祖先元素进行捕获处理。
const inputWidth = computed(() => {
  return props.mode === "tag" ? `${newWidth.value}px` : "4px"; // 计算input的宽度，8px为每个字符的平均宽度
});

const newOptions = computed(() => {
  // 依赖的响应式数据：
  // 1. props.mode
  // 2.inputValRef
  // 3.props.options
  // 判断props.options中是否包含inputValRef.value的值，如果包含则不添加，否则添加
  if (props.mode === "tag" && inputValRef.value) {
    const hasInputValue = props.options.some((item) => item.value === inputValRef.value);
    if (!hasInputValue) {
      return [{ label: inputValRef.value, value: inputValRef.value }].concat(props.options);
    }
  }
  return props.options;
});

// 计算选中的标签数据
const selected = computed(() => {
  const selectedList = newOptions.value.filter((item) => props.value.includes(item.value));
  return props.mode ? selectedList : selectedList[0];
})

// 处理用户输入
function handleInput(e) {
  open.value = true;
  // input输入为中文时计算input宽度（输入状态input框内暂时显示的是拼音，需要进行处理）
  calculateRef.value.textContent = inputValRef.value + e.data;
  newWidth.value = calculateRef.value.offsetWidth + 4;
  if (inputValRef.value === '') {
    newWidth.value = 0;
  }
}

// 添加选中标签
function changeSelect(value) {
  if (!props.mode) {
    open.value = false;
    emit("update:value", value);
    emit("change", value, value); // 参数1：选中或取消选中的值（id/value)，参数2：选中选项（单选是一个值，mode时为选中值组成的数组）
  } else {
    let list;
    if (props.value.includes(value)) {
      // 删除选择
      list = props.value.filter((item) => item !== value);
      emit("deselect", value);
    } else {
      // 添加选择
      list = [...props.value, value];
      emit("select", value);
    }
    emit("update:value", list);
    emit("change", value, list);
    if (props.mode === "tag" && value === inputValRef.value) {
      // 如果是tag模式且选中的是输入的内容，则清空输入框
      inputValRef.value = "";
    }
  }
}

// （多选）移除选中标签
function removeSelect(value) {
  const list = props.value.filter((item) => item !== value);
  emit("update:value", list);
  emit("change", value, list);
  emit("deselect", value);
}

// 展示/隐藏标签列表
function toggleSelectList() {
  open.value = !open.value;
  if (open.value) {
    inputRef.value.focus();
  }
  focusRef.value = true;
}

// 处理聚焦
function handleFocus(e) {
  if (!e.relatedTarget) {
    emit("focus");
  }
}

// 处理失焦
function handleBlur(e) {
  if (e.relatedTarget !== inputRef.value && e.relatedTarget !== selectContainerRef.value) {
    open.value = false;
    focusRef.value = false;
    emit("blur");
  }
}

const inputElement = document.querySelector('input[type="text"]');

inputElement.addEventListener("compositionstart", (event) => {
  console.log(`generated characters were: ${event.data}`);
});

// 事件绑定为冒泡阶段
ele.addEventListener("click", (event) => {
  //...
}, false);

// 事件绑定为捕获阶段
ele.addEventListener("click", (event) => {
  // ...
}, true);

const oInput = document.querySelector('input');
oInput.addEventListener("click", () => {
  console.log("click 事件")
})
oInput.addEventListener("mousedown", () => {
  console.log("mousedown 事件")
})
oInput.addEventListener("focus", () => {
  console.log("focus 事件")
})