新增输入框组件

@@ -7,19 +7,10 @@ export {}
 /* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
-    ElBreadcrumb: typeof import('element-ui/lib/breadcrumb')['default']
-    ElBreadcrumbItem: typeof import('element-ui/lib/breadcrumb-item')['default']
-    ElCarousel: typeof import('element-ui/lib/carousel')['default']
-    ElCarouselItem: typeof import('element-ui/lib/carousel-item')['default']
     ElCol: typeof import('element-ui/lib/col')['default']
-    ElCollapse: typeof import('element-ui/lib/collapse')['default']
-    ElCollapseItem: typeof import('element-ui/lib/collapse-item')['default']
     ElCollapseTransition: typeof import('element-ui/lib/transitions/collapse-transition')['default']
     ElImage: typeof import('element-ui/lib/image')['default']
-    ElInput: typeof import('element-ui/lib/input')['default']
-    ElOption: typeof import('element-ui/lib/option')['default']
     ElRow: typeof import('element-ui/lib/row')['default']
-    ElSelect: typeof import('element-ui/lib/select')['default']
     ElTooltip: typeof import('element-ui/lib/tooltip')['default']
     HagerBox: typeof import('./src/components/common/hagerBox.vue')['default']
     HagerCarousel: typeof import('./src/components/hagerCarousel.vue')['default']
@@ -27,6 +18,7 @@ declare module 'vue' {
     HagerH1: typeof import('./src/components/common/hagerH1.vue')['default']
     HagerHCarousel: typeof import('./src/components/hagerHCarousel.vue')['default']
     HagerHeader: typeof import('./src/components/common/hagerHeader.vue')['default']
+    HagerInput: typeof import('./src/components/common/hagerInput.vue')['default']
     HagerMenu: typeof import('./src/components/hagerMenu.vue')['default']
     HagerMore: typeof import('./src/components/hagerMore.vue')['default']
     HagerService: typeof import('./src/components/common/hagerService.vue')['default']

+<!--
+ * @Date: 2024-10-20 09:59:52
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2024-10-20 11:22:12
+ * @FilePath: /hager/src/components/common/hagerInput.vue
+ * @Description: 文件描述
+-->
+<template>
+  <div :class="['hager-input-page', required ? 'required': 'normal']">
+    <div :class="['input-box', disable ? 'disable': '']">
+      <div class="typeIcon" :style="{backgroundImage: 'url('+typeIcon+')'}"></div>
+      <input :value="value" @input="onInput" :disabled="disable" :placeholder="placeholder" />
+    </div>
+  </div>
+</template>
+
+<script>
+import mixin from 'common/mixin';
+
+export default {
+  mixins: [mixin.init],
+  props: {
+    value: {
+      type: String,
+      default: ''
+    },
+    placeholder: {
+      type: String,
+      default: '请输入内容'
+    },
+    type: {
+      type: String,
+      default: 'email'
+    },
+    required: {
+      type: Boolean,
+      default: false
+    },
+    disable: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data () {
+    return {
+
+    }
+  },
+  computed: {
+    typeIcon () {
+      switch (this.type) {
+        case 'email':
+          return 'https://cdn.ipadbiz.cn/hager/icon/input/%E9%82%AE%E7%AE%B1@2x.png';
+        case 'pwd':
+          return 'https://cdn.ipadbiz.cn/hager/icon/input/%E5%AF%86%E7%A0%81@2x.png';
+        case 'username':
+          return 'https://cdn.ipadbiz.cn/hager/icon/input/%E5%A7%93%E5%90%8D@2x.png';
+        case 'tel':
+          return 'https://cdn.ipadbiz.cn/hager/icon/input/%E7%94%B5%E8%AF%9D@2x.png';
+        case 'corp':
+          return 'https://cdn.ipadbiz.cn/hager/icon/input/%E5%85%AC%E5%8F%B8@2x.png';
+        case 'department':
+          return 'https://cdn.ipadbiz.cn/hager/icon/input/%E8%81%8C%E4%BD%8D@2x.png';
+      }
+    }
+  },
+  mounted () {
+
+  },
+  methods: {
+    // 当输入框内容发生变化时，触发父组件的 `input` 事件
+    onInput(event) {
+      // 使用 $emit 触发 input 事件，传递新的输入值
+      this.$emit('input', event.target.value);
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+  .hager-input-page {
+    display: flex;
+    align-items: center;
+    &.required::before {
+      content: '*';
+      color: #FF0000;
+      margin-right: 0.5rem;
+    }
+    &.normal {
+      margin-left: 1rem;
+    }
+
+    .input-box {
+      background: #FFFFFF;
+      border-radius: 5px;
+      border: 1px solid #DADADA;
+      padding: 0.5rem 0.75rem;
+      width: 100%;
+      margin: 0.5rem 0;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      &.disable {
+        background-color:#F9F9F9;
+        border: 1px solid #F9F9F9;
+        input {
+          background-color:#F9F9F9;
+          color: #666;
+        }
+      }
+      .typeIcon {
+        width: 1rem;
+        height: 0.9rem;
+        background-size: contain;
+        background-repeat: no-repeat;
+        background-position: center;
+        margin-right: 0.5rem;
+      }
+      input {
+        border: 0;
+        width: 100%;
+      }
+    }
+  }
+</style>