提交代码

src/components/MyComponents/Email/index.vue

@@ -0,0 +1,80 @@
+<template>
+  <div class="form-item-box zj-email-wrap" :style="{ width: width }">
+    <el-autocomplete v-model="email" v-bind="$attrs" :placeholder="placeholder" :fetch-suggestions="querySearch"
+      :trigger-on-focus="false" class="inline-input" @select="handleSelect" @input="onInput" />
+    <!-- <el-icon class="errorIcon">
+      <circle-close-filled />
+    </el-icon>
+    <el-icon class="checkIcon">
+      <circle-check-filled />
+    </el-icon> -->
+  </div>
+</template>
+
+<script setup>
+import { COMPONENT_WIDTH } from '@/constant';
+import { ref, defineProps, defineEmits, defineExpose, onMounted } from "vue";
+const props = defineProps({
+  //获取组件传值
+  placeholder: {
+    default: "请填写邮箱",
+    type: String
+  },
+  email: {
+    default: "",
+    type: String
+  },
+  width: {
+    default: COMPONENT_WIDTH,
+    type: String
+  }
+});
+
+const emits = defineEmits(["update:email"]);
+const onInput = (e) => {
+  emits("update:email", e);
+};
+const restaurants = ref([]);
+const createFilter = (queryString) => {
+  return (item) => {
+    return item.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0;
+  };
+};
+const querySearch = (queryString, callback) => {
+  let results = JSON.parse(JSON.stringify(restaurants.value)); //把数组的浅复制换成深复制
+  if (queryString.indexOf("@") > -1) {
+    results.length = 0;
+    callback(results);
+    return false;
+  }
+  for (let item in results) {
+    results[item].value = queryString + "" + restaurants.value[item].value;
+  }
+  callback(results);
+};
+
+const loadAll = () => {
+  return [
+    { value: "@qq.com" },
+    { value: "@mosty.com" },
+    { value: "@163.com" },
+    { value: "@outlook.com" },
+    { value: "@sohu.com" }
+  ];
+};
+const handleSelect = (item) => {
+  emits("update:email", item.value);
+};
+
+onMounted(() => {
+  restaurants.value = loadAll();
+});
+</script>
+
+<style lang="scss" scoped>
+.zj-email-wrap {
+  ::v-deep .el-autocomplete {
+    width: 100%;
+  }
+}
+</style>