初始版本提交

src/components/Input/index.ts

@@ -0,0 +1,5 @@
+import { withInstall } from '/@/utils';
+import input from './src/Input.vue';
+import codeArea from './src/CodeTextArea.vue';
+export const XjrInput = withInstall(input);
+export const CodeTextArea = withInstall(codeArea);

src/components/Input/src/CodeTextArea.vue

@@ -0,0 +1,77 @@
+<template>
+  <div class="relative">
+    <a-textarea
+      v-model:value="value"
+      :placeholder="placeholder"
+      :maxlength="parseInt(maxlength)"
+      :rows="rows"
+      :disabled="disabled"
+      :readonly="readonly"
+      @change="handleChange"
+      @blur="emit('blur')"
+    />
+    <!-- <a
+      class="absolute bottom-0.25 right-2 bg-white left-1 text-right pb-1"
+      href="https://liteflow.yomahub.com/pages/5816c5/"
+      target="_blank"
+      >{{ t('查看操作手册') }} <Icon icon="material-symbols:arrow-right-alt-rounded"
+    /></a> -->
+  </div>
+</template>
+<script lang="ts" setup>
+  import { ref, watch } from 'vue';
+  // import { Icon } from '/@/components/Icon';
+  // import { useI18n } from '/@/hooks/web/useI18n';
+  // const { t } = useI18n();
+  const props = defineProps({
+    value: {
+      type: String,
+      default: '',
+    },
+    defaultValue: {
+      type: String,
+      default: '',
+    },
+    placeholder: String,
+    maxlength: {
+      type: [String, Number],
+      default: '',
+    },
+    rows: Number,
+    disabled: Boolean,
+    readonly: Boolean,
+    tips: String,
+  });
+  const value = ref('');
+  const emit = defineEmits(['update:value', 'change', 'blur']);
+  watch(
+    () => props.value,
+    (val) => {
+      value.value = val;
+    },
+    {
+      immediate: true,
+    },
+  );
+  watch(
+    () => props.defaultValue,
+    (val) => {
+      if (val) {
+        emit('update:value', val);
+      }
+    },
+    {
+      immediate: true,
+    },
+  );
+  const handleChange = (e) => {
+    emit('update:value', e.target.value);
+    emit('change', e);
+    value.value = props.value === undefined ? e.target.value : props.value;
+  };
+</script>
+<style scoped>
+  textarea.ant-input {
+    padding-bottom: 28px;
+  }
+</style>

src/components/Input/src/Input.vue

@@ -0,0 +1,86 @@
+<template>
+  <div v-if="!isSave">
+    <a-input
+      :size="size"
+      v-model:value="value"
+      :placeholder="placeholder"
+      :maxlength="parseInt(maxlength)"
+      :addonBefore="addonBefore"
+      :addonAfter="addonAfter"
+      :allowClear="allowClear"
+      :disabled="disabled"
+      :readonly="readonly"
+      :bordered="bordered"
+      @change="handleChange"
+      @blur="emit('blur')"
+    >
+      <template #prefix v-if="prefix">
+        <Icon :icon="prefix" />
+      </template>
+      <template #suffix v-if="suffix">
+        <Icon :icon="suffix" />
+      </template>
+    </a-input>
+  </div>
+  <div v-else>{{ value }}</div>
+</template>
+<script lang="ts" setup>
+  import { ref, watch } from 'vue';
+  import { Icon } from '/@/components/Icon';
+
+  const props = defineProps({
+    size: String,
+    value: {
+      type: String,
+      default: '',
+    },
+    defaultValue: {
+      type: String,
+      default: '',
+    },
+    placeholder: String,
+    maxlength: {
+      type: [String, Number],
+      default: '',
+    },
+    addonBefore: String,
+    addonAfter: String,
+    allowClear: Boolean,
+    disabled: Boolean,
+    readonly: Boolean,
+    prefix: String,
+    suffix: String,
+    bordered: {
+      type: Boolean,
+      default: true,
+    },
+    isSave: Boolean,
+  });
+  const value = ref('');
+  const emit = defineEmits(['update:value', 'change', 'blur']);
+  watch(
+    () => props.value,
+    (val) => {
+      value.value = val;
+    },
+    {
+      immediate: true,
+    },
+  );
+  watch(
+    () => props.defaultValue,
+    (val) => {
+      if (val) {
+        emit('update:value', val);
+      }
+    },
+    {
+      immediate: true,
+    },
+  );
+  const handleChange = (e) => {
+    emit('update:value', e.target.value);
+    emit('change', e);
+    value.value = props.value === undefined ? e.target.value : props.value;
+  };
+</script>