el-plus-crud 0.0.74 → 0.0.75

package/CHANGELOG.md

@@ -2,6 +2,8 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.0.75](https://github.com/KDJack/el-plus-crud/compare/v0.0.74...v0.0.75) (2023-09-04)
+
 ### [0.0.74](https://github.com/KDJack/el-plus-crud/compare/v0.0.73...v0.0.74) (2023-09-04)
 
 ### [0.0.73](https://github.com/KDJack/el-plus-crud/compare/v0.0.72...v0.0.73) (2023-09-04)

package/dist/el-plus-crud.mjs

@@ -4040,7 +4040,7 @@ function Kj(d, s, l, o, p, g) {
   return D(), V("svg", Gj, Hj);
 }
 var Jj = /* @__PURE__ */ Nl(Wj, [["render", Kj], ["__file", "warning-filled.vue"]]);
-const $j = (d) => (Uu("data-v-e757586c"), d = d(), Vu(), d), qj = { class: "el-button el-plus-form-up-btn" }, Xj = /* @__PURE__ */ $j(() => /* @__PURE__ */ ve("div", null, null, -1)), ez = {
+const $j = (d) => (Uu("data-v-0866afea"), d = d(), Vu(), d), qj = { class: "el-button el-plus-form-up-btn" }, Xj = /* @__PURE__ */ $j(() => /* @__PURE__ */ ve("div", null, null, -1)), ez = {
   name: "ElPlusFormUpbtn",
   inheritAttrs: !1,
   typeName: "upbtn",
@@ -4136,7 +4136,7 @@ const $j = (d) => (Uu("data-v-e757586c"), d = d(), Vu(), d), qj = { class: "el-b
     };
   }
 });
-const Cl = /* @__PURE__ */ Ge(tz, [["__scopeId", "data-v-e757586c"]]), nz = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ __proto__: null, default: Cl }, Symbol.toStringTag, { value: "Module" })), lz = /* @__PURE__ */ ve("i", { class: "ele-ArrowDown el-icon--right" }, null, -1), rz = {
+const Cl = /* @__PURE__ */ Ge(tz, [["__scopeId", "data-v-0866afea"]]), nz = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ __proto__: null, default: Cl }, Symbol.toStringTag, { value: "Module" })), lz = /* @__PURE__ */ ve("i", { class: "ele-ArrowDown el-icon--right" }, null, -1), rz = {
   name: "ElPlusFormBtns",
   inheritAttrs: !1,
   typeName: "btns",
@@ -4720,7 +4720,7 @@ const Uz = (d = "", s, l = !1) => d ? (l ? Vz(d) : d.length) > s ? d.substring(0
     };
   }
 });
-const Zz = /* @__PURE__ */ Ge(Gz, [["__scopeId", "data-v-647fba8b"]]), Hz = {
+const Zz = /* @__PURE__ */ Ge(Gz, [["__scopeId", "data-v-d9487625"]]), Hz = {
   key: 1,
   class: "no-img-tip"
 }, Kz = {
@@ -4857,7 +4857,7 @@ const n2 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
       ]), 1040, ["disabled", "modelValue"])) : X("", !0);
     };
   }
-}), r2 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ __proto__: null, default: Wi }, Symbol.toStringTag, { value: "Module" })), u2 = (d) => (Uu("data-v-e5d0b5fa"), d = d(), Vu(), d), o2 = { class: "el-plus-form-link" }, s2 = {
+}), r2 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ __proto__: null, default: Wi }, Symbol.toStringTag, { value: "Module" })), u2 = (d) => (Uu("data-v-1574c09b"), d = d(), Vu(), d), o2 = { class: "el-plus-form-link" }, s2 = {
   style: { width: "100%" },
   class: "form-link-dialog"
 }, i2 = { class: "panel-left" }, a2 = {
@@ -5024,7 +5024,7 @@ const n2 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
     };
   }
 });
-const Gi = /* @__PURE__ */ Ge(d2, [["__scopeId", "data-v-e5d0b5fa"]]), g2 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ __proto__: null, default: Gi }, Symbol.toStringTag, { value: "Module" })), N2 = (d) => (Uu("data-v-a6b27e5a"), d = d(), Vu(), d), p2 = { class: "el-plus-form-link-user" }, j2 = {
+const Gi = /* @__PURE__ */ Ge(d2, [["__scopeId", "data-v-1574c09b"]]), g2 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ __proto__: null, default: Gi }, Symbol.toStringTag, { value: "Module" })), N2 = (d) => (Uu("data-v-aea8f33b"), d = d(), Vu(), d), p2 = { class: "el-plus-form-link-user" }, j2 = {
   style: { width: "100%" },
   class: "form-link-user-dialog"
 }, z2 = { class: "panel-left" }, y2 = { class: "dept-breadcrumb" }, D2 = { style: { display: "flex", "align-items": "center" } }, _2 = { class: "panel-right" }, m2 = /* @__PURE__ */ N2(() => /* @__PURE__ */ ve("div", { class: "right-title" }, "已选中项：", -1)), h2 = { class: "btn-panel" }, v2 = {
@@ -5361,7 +5361,7 @@ const Gi = /* @__PURE__ */ Ge(d2, [["__scopeId", "data-v-e5d0b5fa"]]), g2 = /* @
     };
   }
 });
-const Zi = /* @__PURE__ */ Ge(w2, [["__scopeId", "data-v-a6b27e5a"]]), A2 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ __proto__: null, default: Zi }, Symbol.toStringTag, { value: "Module" })), I2 = {
+const Zi = /* @__PURE__ */ Ge(w2, [["__scopeId", "data-v-aea8f33b"]]), A2 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ __proto__: null, default: Zi }, Symbol.toStringTag, { value: "Module" })), I2 = {
   name: "ElPlusFormNbinput",
   inheritAttrs: !1,
   typeName: "nbinput",
@@ -5486,7 +5486,7 @@ const Y2 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
     };
   }
 });
-const Ki = /* @__PURE__ */ Ge(T2, [["__scopeId", "data-v-8cf9fc98"]]), E2 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ __proto__: null, default: Ki }, Symbol.toStringTag, { value: "Module" })), b2 = {
+const Ki = /* @__PURE__ */ Ge(T2, [["__scopeId", "data-v-8f959b46"]]), E2 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ __proto__: null, default: Ki }, Symbol.toStringTag, { value: "Module" })), b2 = {
   name: "ElPlusFormPassword",
   inheritAttrs: !1,
   typeName: "password",
@@ -7198,7 +7198,7 @@ const ID = { class: "el-plus-table-edit-column" }, YD = { class: "select-panel"
     };
   }
 });
-const Yi = /* @__PURE__ */ Ge(TD, [["__scopeId", "data-v-9d331899"]]);
+const Yi = /* @__PURE__ */ Ge(TD, [["__scopeId", "data-v-9e07d863"]]);
 function ED() {
   return !!navigator.userAgent.match(/('phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone')/i);
 }
@@ -7532,7 +7532,7 @@ const VD = /* @__PURE__ */ Ge(UD, [["__scopeId", "data-v-43f282da"]]), QD = { st
     };
   }
 });
-const Li = /* @__PURE__ */ Ge(FD, [["__scopeId", "data-v-19d5e9b1"]]), RD = { class: "el-plus-table-content" }, WD = {
+const Li = /* @__PURE__ */ Ge(FD, [["__scopeId", "data-v-8f824803"]]), RD = { class: "el-plus-table-content" }, WD = {
   key: 1,
   class: "table-tabs-panel"
 }, GD = { class: "el-plus-table-main" }, ZD = { key: 1 }, HD = {

package/example/App.vue

@@ -1,68 +1,68 @@
-<template>
-  <el-config-provider :locale="zhCn">
-    <div class="layout-padding">
-      <ElPlusFormGroup v-model="formData" :formGroup="formGroupConfig">
-        <template #default0>default0插槽</template>
-        <template #default1>default1插槽</template>
-        <template #default2>default2插槽</template>
-      </ElPlusFormGroup>
-    </div>
-  </el-config-provider>
-</template>
-
-<script setup lang="ts" name="systemUser">
-import { reactive, ref, onMounted } from 'vue'
-import zhCn from 'element-plus/es/locale/lang/zh-cn'
-import { ElMessage } from 'element-plus'
-import { IFormBack, IFormDesc, IFormGroupConfig } from 'types/formList'
-
-let formData = reactive({
-  name: 'xiaoha'
-} as any)
-const formGroupConfig = ref({
-  column: 2,
-  // requestFn: () => {},
-  beforeRequest: (data: any) => {
-    return data
-  },
-  success: (formBack: IFormBack) => {
-    ElMessage.success('保存成功~')
-    // 表单回调
-    formBack.callBack && formBack.callBack()
-  },
-  group: [
-    {
-      title: '基本信息',
-      formDesc: {
-        name: { type: 'input', label: '名称', require: true, attrs: { maxlength: 30 } },
-        contactsName: { type: 'input', label: '联系人', require: true, attrs: { maxlength: 20 } },
-        contactsPhone: { type: 'input', label: '联系电话', rules: 'phone', require: true }
-      } as IFormDesc
-    },
-    {
-      title: '地址信息',
-      formDesc: {
-        // _area: { type: 'area', label: '所在地区', require: true },
-        address: { type: 'input', label: '详细地址', require: true, attrs: { maxlength: 50 } }
-      } as IFormDesc
-    },
-    // {
-    //   title: '文件上传',
-    //   formDesc: {
-    //     businessLicense: { type: 'upload', label: '营业执照', require: true, colspan: 2 },
-    //     appendix: { type: 'upload', upType: 'file', label: '附件', multiple: true, require: true, colspan: 2 }
-    //   } as IFormDesc
-    // },
-    {
-      title: '备注信息',
-      formDesc: {
-        remark: { type: 'textarea', label: '备注', colspan: 2, require: true }
-      } as IFormDesc
-    }
-  ]
-} as IFormGroupConfig)
-
-onMounted(async () => {
-  // 初始化部门列表
-})
-</script>
+<template>
+  <el-config-provider :locale="zhCn">
+    <div class="layout-padding">
+      <ElPlusFormGroup v-model="formData" :formGroup="formGroupConfig">
+        <template #default0>default0插槽</template>
+        <template #default1>default1插槽</template>
+        <template #default2>default2插槽</template>
+      </ElPlusFormGroup>
+    </div>
+  </el-config-provider>
+</template>
+
+<script setup lang="ts" name="systemUser">
+import { reactive, ref, onMounted } from 'vue'
+import zhCn from 'element-plus/es/locale/lang/zh-cn'
+import { ElMessage } from 'element-plus'
+import { IFormBack, IFormDesc, IFormGroupConfig } from 'types/formList'
+
+let formData = reactive({
+  name: 'xiaoha'
+} as any)
+const formGroupConfig = ref({
+  column: 2,
+  // requestFn: () => {},
+  beforeRequest: (data: any) => {
+    return data
+  },
+  success: (formBack: IFormBack) => {
+    ElMessage.success('保存成功~')
+    // 表单回调
+    formBack.callBack && formBack.callBack()
+  },
+  group: [
+    {
+      title: '基本信息',
+      formDesc: {
+        name: { type: 'input', label: '名称', require: true, attrs: { maxlength: 30 } },
+        contactsName: { type: 'input', label: '联系人', require: true, attrs: { maxlength: 20 } },
+        contactsPhone: { type: 'input', label: '联系电话', rules: 'phone', require: true }
+      } as IFormDesc
+    },
+    {
+      title: '地址信息',
+      formDesc: {
+        // _area: { type: 'area', label: '所在地区', require: true },
+        address: { type: 'input', label: '详细地址', require: true, attrs: { maxlength: 50 } }
+      } as IFormDesc
+    },
+    // {
+    //   title: '文件上传',
+    //   formDesc: {
+    //     businessLicense: { type: 'upload', label: '营业执照', require: true, colspan: 2 },
+    //     appendix: { type: 'upload', upType: 'file', label: '附件', multiple: true, require: true, colspan: 2 }
+    //   } as IFormDesc
+    // },
+    {
+      title: '备注信息',
+      formDesc: {
+        remark: { type: 'textarea', label: '备注', colspan: 2, require: true }
+      } as IFormDesc
+    }
+  ]
+} as IFormGroupConfig)
+
+onMounted(async () => {
+  // 初始化部门列表
+})
+</script>

package/lib/components/el-plus-form/ElPlusFormDialog.vue

@@ -1,89 +1,89 @@
-<template>
-  <el-dialog class="el-plus-form-dialog" v-model="currentShow" :title="props.title" v-bind="dialogAttrs" @closed="handelClosed">
-    <!-- title 插槽 -->
-    <template #header>
-      <slot name="header" />
-    </template>
-    <ElPlusForm ref="refElPlusDialogForm" style="padding: 20px" :isDialog="true" v-model="currentValue" v-bind="attrs" :success="dialogSuccess" @cancel="currentShow = false">
-      <template #top>
-        <slot name="top" />
-      </template>
-      <template #default>
-        <slot name="default" />
-      </template>
-    </ElPlusForm>
-  </el-dialog>
-</template>
-<script lang="ts">
-export default {
-  name: 'ElPlusFormDialog',
-  inheritAttrs: false,
-  customOptions: {}
-}
-</script>
-<script lang="ts" setup>
-import { ref, computed, useAttrs } from 'vue'
-import ElPlusForm from './ElPlusForm.vue'
-import { ElMessage } from 'element-plus'
-import { IFormBack } from 'types/formList'
-
-const emits = defineEmits(['update:show', 'update:modelValue'])
-const props = withDefaults(defineProps<{ modelValue?: { [key: string]: any } | {}; show?: boolean; title?: string; tableRef?: any; success?: Function; successTip?: string | ((data?: any) => string) }>(), {
-  title: '',
-  modelValue: () => {
-    return {}
-  },
-  show: false,
-  successTip: '操作成功!'
-})
-
-// 重新定义当前值
-const currentValue = computed({
-  get: () => props.modelValue,
-  set(val: any) {
-    emits('update:modelValue', val)
-  }
-})
-
-// 是否显示弹框
-const currentShow = computed({
-  get() {
-    return props.show
-  },
-  set(val: boolean) {
-    emits('update:show', val)
-  }
-})
-const refElPlusDialogForm = ref(null as any)
-
-// 合并属性
-const { width, top, modal, appendToBody, showClose, draggable, closeOnClickModal, ...attrs } = Object.assign({ width: '700px', draggable: true, top: '15vh', closeOnClickModal: false, showCancel: true }, useAttrs())
-// 弹框属性
-const dialogAttrs = { width, top, modal, appendToBody, showClose, draggable, closeOnClickModal }
-
-/**
- * 这里重新定义一下成功事件
- * @param formBack
- */
-function dialogSuccess(formBack: IFormBack) {
-  if (props.success) {
-    props.success(formBack)
-  } else {
-    if (props.tableRef) {
-      ElMessage.success(typeof props.successTip === 'function' ? props.successTip() : props.successTip)
-      props.tableRef.reload()
-      currentShow.value = false
-      setTimeout(() => {
-        formBack.callBack()
-      }, 200)
-    }
-  }
-}
-
-/**
- * 处理弹框关闭
- */
-function handelClosed() {
-  refElPlusDialogForm.value?.clear()
-}
-</script>
+<template>
+  <el-dialog class="el-plus-form-dialog" v-model="currentShow" :title="props.title" v-bind="dialogAttrs" @closed="handelClosed">
+    <!-- title 插槽 -->
+    <template #header>
+      <slot name="header" />
+    </template>
+    <ElPlusForm ref="refElPlusDialogForm" style="padding: 20px" :isDialog="true" v-model="currentValue" v-bind="attrs" :success="dialogSuccess" @cancel="currentShow = false">
+      <template #top>
+        <slot name="top" />
+      </template>
+      <template #default>
+        <slot name="default" />
+      </template>
+    </ElPlusForm>
+  </el-dialog>
+</template>
+<script lang="ts">
+export default {
+  name: 'ElPlusFormDialog',
+  inheritAttrs: false,
+  customOptions: {}
+}
+</script>
+<script lang="ts" setup>
+import { ref, computed, useAttrs } from 'vue'
+import ElPlusForm from './ElPlusForm.vue'
+import { ElMessage } from 'element-plus'
+import { IFormBack } from 'types/formList'
+
+const emits = defineEmits(['update:show', 'update:modelValue'])
+const props = withDefaults(defineProps<{ modelValue?: { [key: string]: any } | {}; show?: boolean; title?: string; tableRef?: any; success?: Function; successTip?: string | ((data?: any) => string) }>(), {
+  title: '',
+  modelValue: () => {
+    return {}
+  },
+  show: false,
+  successTip: '操作成功!'
+})
+
+// 重新定义当前值
+const currentValue = computed({
+  get: () => props.modelValue,
+  set(val: any) {
+    emits('update:modelValue', val)
+  }
+})
+
+// 是否显示弹框
+const currentShow = computed({
+  get() {
+    return props.show
+  },
+  set(val: boolean) {
+    emits('update:show', val)
+  }
+})
+const refElPlusDialogForm = ref(null as any)
+
+// 合并属性
+const { width, top, modal, appendToBody, showClose, draggable, closeOnClickModal, ...attrs } = Object.assign({ width: '700px', draggable: true, top: '15vh', closeOnClickModal: false, showCancel: true }, useAttrs())
+// 弹框属性
+const dialogAttrs = { width, top, modal, appendToBody, showClose, draggable, closeOnClickModal }
+
+/**
+ * 这里重新定义一下成功事件
+ * @param formBack
+ */
+function dialogSuccess(formBack: IFormBack) {
+  if (props.success) {
+    props.success(formBack)
+  } else {
+    if (props.tableRef) {
+      ElMessage.success(typeof props.successTip === 'function' ? props.successTip() : props.successTip)
+      props.tableRef.reload()
+      currentShow.value = false
+      setTimeout(() => {
+        formBack.callBack()
+      }, 200)
+    }
+  }
+}
+
+/**
+ * 处理弹框关闭
+ */
+function handelClosed() {
+  refElPlusDialogForm.value?.clear()
+}
+</script>

package/lib/components/el-plus-form/components/ElPlusFormFile.vue

@@ -1,48 +1,48 @@
-<template>
-  <div class="ele-form-file" :style="{ marginTop: props.modelValue && props.modelValue.length > 0 ? '10px' : '0' }">
-    <template v-if="props.modelValue && props.modelValue.length > 0">
-      <FileIcons :files="props.modelValue" showName preview />
-    </template>
-    <span v-else class="no-img-tip">暂无内容</span>
-  </div>
-</template>
-<script lang="ts">
-export default {
-  name: 'ElPlusFormFile',
-  inheritAttrs: false,
-  typeName: 'file',
-  customOptions: {}
-}
-</script>
-<script lang="ts" setup>
-import { IOssInfo } from 'types/formList'
-import FileIcons from './components/file-icons/FileIcons.vue'
-
-const props = defineProps<{
-  modelValue?: Array<IOssInfo>
-  field: string
-  loading?: boolean
-  desc: { [key: string]: any }
-  formData: { [key: string]: any }
-}>()
-</script>
-<style lang="scss">
-.ele-form-file {
-  width: 100%;
-  display: flex;
-  justify-content: center;
-  margin-top: 10px;
-
-  .form-file-list {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-  }
-
-  .no-img-tip {
-    width: 100%;
-    color: #999999;
-    padding-left: 20px;
-  }
-}
-</style>
+<template>
+  <div class="ele-form-file" :style="{ marginTop: props.modelValue && props.modelValue.length > 0 ? '10px' : '0' }">
+    <template v-if="props.modelValue && props.modelValue.length > 0">
+      <FileIcons :files="props.modelValue" showName preview />
+    </template>
+    <span v-else class="no-img-tip">暂无内容</span>
+  </div>
+</template>
+<script lang="ts">
+export default {
+  name: 'ElPlusFormFile',
+  inheritAttrs: false,
+  typeName: 'file',
+  customOptions: {}
+}
+</script>
+<script lang="ts" setup>
+import { IOssInfo } from 'types/formList'
+import FileIcons from './components/file-icons/FileIcons.vue'
+
+const props = defineProps<{
+  modelValue?: Array<IOssInfo>
+  field: string
+  loading?: boolean
+  desc: { [key: string]: any }
+  formData: { [key: string]: any }
+}>()
+</script>
+<style lang="scss">
+.ele-form-file {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  margin-top: 10px;
+
+  .form-file-list {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+  }
+
+  .no-img-tip {
+    width: 100%;
+    color: #999999;
+    padding-left: 20px;
+  }
+}
+</style>

package/lib/components/el-plus-form/components/ElPlusFormInput.vue

@@ -1,63 +1,63 @@
-<template>
-  <el-input v-if="isInit" style="display: flex" v-bind="attrs" v-on="onEvents" :disabled="disabled" v-model="currentValue">
-    <template v-for="(item, key, index) of slots" #[key] :key="index">
-      <slot :name="key" />
-    </template>
-  </el-input>
-</template>
-<script lang="ts">
-export default {
-  name: 'ElPlusFormInput',
-  inheritAttrs: false,
-  typeName: 'input',
-  customOptions: {}
-}
-</script>
-<script lang="ts" setup>
-import { ref, watch, useAttrs, useSlots, onBeforeMount, inject } from 'vue'
-import { getAttrs, getEvents } from '../mixins'
-import { ICRUDConfig } from 'types/formList'
-
-const defaultConf = inject('defaultConf') as ICRUDConfig
-
-const props = defineProps<{
-  modelValue?: string | null
-  field: string
-  desc: { [key: string]: any }
-  formData: { [key: string]: any }
-  disabled?: boolean
-}>()
-
-const emits = defineEmits(['update:modelValue', 'validateThis'])
-const slots = ref(Object.assign({}, useSlots(), props.desc.slots))
-const attrs = ref({} as any)
-const isInit = ref(false)
-const onEvents = ref(getEvents(props))
-
-const currentValue = ref()
-emits('update:modelValue', currentValue)
-
-onBeforeMount(async () => {
-  attrs.value = await getAttrs(props, { autocomplete: 'new-password', maxlength: defaultConf.form?.leng?.input || 0, clearable: true, ...useAttrs() })
-  isInit.value = true
-})
-
-watch(
-  () => props.modelValue,
-  (data: string | null | undefined) => {
-    // 这里要截取一下字符串长度
-    if (data && data.length > attrs.value.maxlength) {
-      data = data.substring(0, attrs.value.maxlength)
-    }
-    currentValue.value = data
-  },
-  { immediate: true }
-)
-
-watch(
-  () => currentValue.value,
-  () => {
-    emits('validateThis')
-  }
-)
-</script>
+<template>
+  <el-input v-if="isInit" style="display: flex" v-bind="attrs" v-on="onEvents" :disabled="disabled" v-model="currentValue">
+    <template v-for="(item, key, index) of slots" #[key] :key="index">
+      <slot :name="key" />
+    </template>
+  </el-input>
+</template>
+<script lang="ts">
+export default {
+  name: 'ElPlusFormInput',
+  inheritAttrs: false,
+  typeName: 'input',
+  customOptions: {}
+}
+</script>
+<script lang="ts" setup>
+import { ref, watch, useAttrs, useSlots, onBeforeMount, inject } from 'vue'
+import { getAttrs, getEvents } from '../mixins'
+import { ICRUDConfig } from 'types/formList'
+
+const defaultConf = inject('defaultConf') as ICRUDConfig
+
+const props = defineProps<{
+  modelValue?: string | null
+  field: string
+  desc: { [key: string]: any }
+  formData: { [key: string]: any }
+  disabled?: boolean
+}>()
+
+const emits = defineEmits(['update:modelValue', 'validateThis'])
+const slots = ref(Object.assign({}, useSlots(), props.desc.slots))
+const attrs = ref({} as any)
+const isInit = ref(false)
+const onEvents = ref(getEvents(props))
+
+const currentValue = ref()
+emits('update:modelValue', currentValue)
+
+onBeforeMount(async () => {
+  attrs.value = await getAttrs(props, { autocomplete: 'new-password', maxlength: defaultConf.form?.leng?.input || 0, clearable: true, ...useAttrs() })
+  isInit.value = true
+})
+
+watch(
+  () => props.modelValue,
+  (data: string | null | undefined) => {
+    // 这里要截取一下字符串长度
+    if (data && data.length > attrs.value.maxlength) {
+      data = data.substring(0, attrs.value.maxlength)
+    }
+    currentValue.value = data
+  },
+  { immediate: true }
+)
+
+watch(
+  () => currentValue.value,
+  () => {
+    emits('validateThis')
+  }
+)
+</script>