el-plus-crud 0.0.38 → 0.0.39

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

@@ -1,51 +1,53 @@
-<template>
-  <el-input :class="desc.class" :style="desc.style" :clearable="attrs.clearable ?? true" type="number" v-bind="attrs" v-on="onEvents" v-model="currentValue">
-    <template v-for="(item, key, index) of slots" #[key] :key="index">
-      <slot :name="key" />
-    </template>
-    <template v-if="desc.rtext" #append>{{ desc.rtext.text }}</template>
-  </el-input>
-</template>
-<script lang="ts">
-export default {
-  name: 'ElPlusFormNbinput',
-  inheritAttrs: false,
-  typeName: 'nbinput',
-  customOptions: {}
-}
-</script>
-<script lang="ts" setup>
-import { ref, useAttrs, useSlots, onBeforeMount } from 'vue'
-import { getAttrs, getEvents } from '../mixins'
-
-const props = defineProps<{
-  modelValue?: string | number | '' | null
-  field: string
-  loading?: boolean
-  desc: { [key: string]: any }
-  formData: { [key: string]: any }
-  rowIndex?: number
-}>()
-const emits = defineEmits(['update:modelValue'])
-const currentValue = ref(props.modelValue)
-emits('update:modelValue', currentValue)
-
-const slots = ref(Object.assign({}, useSlots(), props.desc.slots))
-const attrs = ref({} as any)
-const onEvents = ref(getEvents(props))
-
-onBeforeMount(async () => {
-  attrs.value = await getAttrs(props, { ...useAttrs() })
-})
-</script>
-<style lang="scss">
-/*input输入框屏蔽浏览器出现上下箭头*/
-input::-webkit-outer-spin-button,
-input::-webkit-inner-spin-button {
-  -webkit-appearance: none;
-}
-
-input[type='number'] {
-  -moz-appearance: textfield;
-}
-</style>
+<template>
+  <el-input v-if="isInit" :class="desc.class" :style="desc.style" :clearable="attrs.clearable ?? true" type="number" v-bind="attrs" v-on="onEvents" v-model="currentValue">
+    <template v-for="(item, key, index) of slots" #[key] :key="index">
+      <slot :name="key" />
+    </template>
+    <template v-if="desc.rtext" #append>{{ desc.rtext.text }}</template>
+  </el-input>
+</template>
+<script lang="ts">
+export default {
+  name: 'ElPlusFormNbinput',
+  inheritAttrs: false,
+  typeName: 'nbinput',
+  customOptions: {}
+}
+</script>
+<script lang="ts" setup>
+import { ref, useAttrs, useSlots, onBeforeMount } from 'vue'
+import { getAttrs, getEvents } from '../mixins'
+
+const props = defineProps<{
+  modelValue?: string | number | '' | null
+  field: string
+  loading?: boolean
+  desc: { [key: string]: any }
+  formData: { [key: string]: any }
+  rowIndex?: number
+}>()
+const emits = defineEmits(['update:modelValue'])
+const currentValue = ref(props.modelValue)
+emits('update:modelValue', currentValue)
+
+const slots = ref(Object.assign({}, useSlots(), props.desc.slots))
+const attrs = ref({} as any)
+const isInit = ref(false)
+const onEvents = ref(getEvents(props))
+
+onBeforeMount(async () => {
+  attrs.value = await getAttrs(props, { ...useAttrs() })
+  isInit.value = true
+})
+</script>
+<style lang="scss">
+/*input输入框屏蔽浏览器出现上下箭头*/
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+}
+
+input[type='number'] {
+  -moz-appearance: textfield;
+}
+</style>

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

@@ -1,144 +1,146 @@
-<template>
-  <el-input-number class="ElPlusFormNumber-panel" v-bind="attrs" v-on="onEvents" v-model="currentValue" @focus="handelFocus" @blur="handelBlur" onkeypress="return( /[\d\.]/.test(String.fromCharCode(event.keyCode)))" />
-</template>
-<script lang="ts">
-export default {
-  name: 'ElPlusFormNumber',
-  inheritAttrs: false,
-  typeName: 'number',
-  customOptions: {}
-}
-</script>
-<script lang="ts" setup>
-import { ref, computed, useAttrs, onBeforeMount, nextTick, inject } from 'vue'
-import { getAttrs, getEvents } from '../mixins'
-import { ElMessage } from 'element-plus'
-
-const defaultConf = inject('defaultConf') as ICRUDConfig
-
-const props = defineProps<{
-  modelValue?: number | null
-  field: string
-  loading?: boolean
-  desc: { [key: string]: any }
-  formData: { [key: string]: any }
-  rowIndex?: number
-}>()
-
-const emits = defineEmits(['update:modelValue', 'validateThis'])
-const currentValue = ref(props.modelValue)
-emits('update:modelValue', currentValue)
-const attrs = ref({} as any)
-const onEvents = ref(getEvents(props))
-
-const isDoChange = ref(false)
-
-onBeforeMount(async () => {
-  attrs.value = await getAttrs(props, { ...defaultConf.form?.leng.nbinput, ...useAttrs() })
-  delete attrs.value.min
-  delete attrs.value.max
-})
-
-/**
- * 获取焦点
- */
-function handelFocus() {
-  isDoChange.value = false
-}
-
-/**
- * 处理失去焦点
- * @param event
- */
-function handelBlur() {
-  if (!isDoChange.value) {
-    if (!currentValue.value) {
-      nextTick(() => {
-        currentValue.value = props.desc?.required ? numBindAttr.value.min : 0
-        if (!props.desc?.required) {
-          // 查看了源码，这里需要二次赋不一样的值，这里才会真正重新渲染
-          nextTick(() => {
-            currentValue.value = null
-          })
-        }
-      })
-    } else {
-      handelValChange(currentValue.value, 0)
-    }
-  }
-  nextTick(() => {
-    emits('validateThis')
-  })
-}
-
-/**
- * 绑定属性
- */
-const numBindAttr = computed(() => {
-  let numAttrs = props.desc.attrs || defaultConf.form?.leng.nbinput
-  if (typeof props.desc.attrs === 'function') {
-    numAttrs = props.desc.attrs(props.formData)
-  }
-  // 这里判断一下，最小和最大值的大小
-  if (numAttrs.min > numAttrs.max) {
-    numAttrs.min = numAttrs.max
-  } else if (numAttrs.max < numAttrs.min) {
-    numAttrs.max = numAttrs.min
-  }
-  return numAttrs
-})
-
-// 判断一下初始值
-if (currentValue.value !== undefined && currentValue.value !== null) {
-  if (currentValue.value < numBindAttr.value.min) {
-    currentValue.value = numBindAttr.value.min
-  } else if (currentValue.value > numBindAttr.value.max) {
-    currentValue.value = numBindAttr.value.max
-  }
-}
-
-const change = onEvents.value.change
-if (change) {
-  onEvents.value.change = (val: any, oldVal: any) => {
-    handelValChange(val, oldVal)
-  }
-} else {
-  onEvents.value.change = handelValChange
-}
-
-/**
- * 监听值改变
- * @param val
- */
-function handelValChange(val: any, oldVal: any) {
-  isDoChange.value = true
-  if (val !== oldVal) {
-    if (val < numBindAttr.value.min) {
-      ElMessage.warning(`${props.desc?.label || ''}最少不能低于${numBindAttr.value.min}`)
-      nextTick(() => {
-        currentValue.value = numBindAttr.value.min
-      })
-    } else if (val > numBindAttr.value.max) {
-      ElMessage.warning(`${props.desc?.label || ''}最多不能大于${numBindAttr.value.max}`)
-      nextTick(() => {
-        currentValue.value = numBindAttr.value.max
-        change && change()
-      })
-    } else {
-      change && change()
-    }
-  }
-}
-</script>
-<style lang="scss" scoped>
-.ElPlusFormNumber-panel {
-  width: 100% !important;
-  max-width: 100%;
-  :deep(.el-input__wrapper) {
-    // padding-left: 11px !important;
-    input {
-      text-align: left !important;
-    }
-  }
-}
-</style>
+<template>
+  <el-input-number v-if="isInit" class="ElPlusFormNumber-panel" v-bind="attrs" v-on="onEvents" v-model="currentValue" @focus="handelFocus" @blur="handelBlur" onkeypress="return( /[\d\.]/.test(String.fromCharCode(event.keyCode)))" />
+</template>
+<script lang="ts">
+export default {
+  name: 'ElPlusFormNumber',
+  inheritAttrs: false,
+  typeName: 'number',
+  customOptions: {}
+}
+</script>
+<script lang="ts" setup>
+import { ref, computed, useAttrs, onBeforeMount, nextTick, inject } from 'vue'
+import { getAttrs, getEvents } from '../mixins'
+import { ElMessage } from 'element-plus'
+
+const defaultConf = inject('defaultConf') as ICRUDConfig
+
+const props = defineProps<{
+  modelValue?: number | null
+  field: string
+  loading?: boolean
+  desc: { [key: string]: any }
+  formData: { [key: string]: any }
+  rowIndex?: number
+}>()
+
+const emits = defineEmits(['update:modelValue', 'validateThis'])
+const currentValue = ref(props.modelValue)
+emits('update:modelValue', currentValue)
+const attrs = ref({} as any)
+const isInit = ref(false)
+const onEvents = ref(getEvents(props))
+
+const isDoChange = ref(false)
+
+onBeforeMount(async () => {
+  attrs.value = await getAttrs(props, { ...defaultConf.form?.leng.nbinput, ...useAttrs() })
+  delete attrs.value.min
+  delete attrs.value.max
+  isInit.value = true
+})
+
+/**
+ * 获取焦点
+ */
+function handelFocus() {
+  isDoChange.value = false
+}
+
+/**
+ * 处理失去焦点
+ * @param event
+ */
+function handelBlur() {
+  if (!isDoChange.value) {
+    if (!currentValue.value) {
+      nextTick(() => {
+        currentValue.value = props.desc?.required ? numBindAttr.value.min : 0
+        if (!props.desc?.required) {
+          // 查看了源码，这里需要二次赋不一样的值，这里才会真正重新渲染
+          nextTick(() => {
+            currentValue.value = null
+          })
+        }
+      })
+    } else {
+      handelValChange(currentValue.value, 0)
+    }
+  }
+  nextTick(() => {
+    emits('validateThis')
+  })
+}
+
+/**
+ * 绑定属性
+ */
+const numBindAttr = computed(() => {
+  let numAttrs = props.desc.attrs || defaultConf.form?.leng.nbinput
+  if (typeof props.desc.attrs === 'function') {
+    numAttrs = props.desc.attrs(props.formData)
+  }
+  // 这里判断一下，最小和最大值的大小
+  if (numAttrs.min > numAttrs.max) {
+    numAttrs.min = numAttrs.max
+  } else if (numAttrs.max < numAttrs.min) {
+    numAttrs.max = numAttrs.min
+  }
+  return numAttrs
+})
+
+// 判断一下初始值
+if (currentValue.value !== undefined && currentValue.value !== null) {
+  if (currentValue.value < numBindAttr.value.min) {
+    currentValue.value = numBindAttr.value.min
+  } else if (currentValue.value > numBindAttr.value.max) {
+    currentValue.value = numBindAttr.value.max
+  }
+}
+
+const change = onEvents.value.change
+if (change) {
+  onEvents.value.change = (val: any, oldVal: any) => {
+    handelValChange(val, oldVal)
+  }
+} else {
+  onEvents.value.change = handelValChange
+}
+
+/**
+ * 监听值改变
+ * @param val
+ */
+function handelValChange(val: any, oldVal: any) {
+  isDoChange.value = true
+  if (val !== oldVal) {
+    if (val < numBindAttr.value.min) {
+      ElMessage.warning(`${props.desc?.label || ''}最少不能低于${numBindAttr.value.min}`)
+      nextTick(() => {
+        currentValue.value = numBindAttr.value.min
+      })
+    } else if (val > numBindAttr.value.max) {
+      ElMessage.warning(`${props.desc?.label || ''}最多不能大于${numBindAttr.value.max}`)
+      nextTick(() => {
+        currentValue.value = numBindAttr.value.max
+        change && change()
+      })
+    } else {
+      change && change()
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.ElPlusFormNumber-panel {
+  width: 100% !important;
+  max-width: 100%;
+  :deep(.el-input__wrapper) {
+    // padding-left: 11px !important;
+    input {
+      text-align: left !important;
+    }
+  }
+}
+</style>

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

@@ -1,5 +1,5 @@
 <template>
-  <el-input :class="desc.class" :show-password="true" v-bind="attrs" v-on="onEvents" v-model="currentValue">
+  <el-input v-if="isInit" :class="desc.class" :show-password="true" v-bind="attrs" v-on="onEvents" v-model="currentValue">
     <!-- 组件内部插槽 -->
     <template v-for="(item, key, index) in slots" #[key]="data" :key="index">
       <slot :name="key" :data="data" />
@@ -33,9 +33,11 @@ emits('update:modelValue', currentValue)
 
 const slots = ref(Object.assign({}, useSlots(), props.desc.slots))
 const attrs = ref({} as any)
+const isInit = ref(false)
 const onEvents = ref(getEvents(props))
 
 onBeforeMount(async () => {
   attrs.value = await getAttrs(props, { autocomplete: 'new-password', maxlength: defaultConf.form?.leng?.input || 0, ...useAttrs() })
+  isInit.value = true
 })
 </script>

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

@@ -1,92 +1,94 @@
-<template>
-  <el-input :class="desc.class" :style="desc.style" type="textarea" v-bind="attrs" v-model="currentValue" v-on="onEvents"> </el-input>
-  <div class="el-plus-form-quick-input">
-    <el-tag v-for="(option, index) in options" :key="index" type="info" @click="changeTip(option.label)">{{ option.label }}</el-tag>
-  </div>
-</template>
-<script lang="ts">
-export default {
-  name: 'ElPlusFormQuickinput',
-  inheritAttrs: false,
-  typeName: 'quickinput',
-  customOptions: {}
-}
-</script>
-<script lang="ts" setup>
-import { ref, useAttrs, watch, onBeforeMount, inject, reactive } from 'vue'
-import { getAttrs, getEvents } from '../mixins'
-import { isEqual } from 'lodash'
-
-const globalData = inject('globalData') as any
-const defaultConf = inject('defaultConf') as ICRUDConfig
-
-const props = defineProps<{
-  modelValue?: string | null
-  field: string
-  loading?: boolean
-  desc: { [key: string]: any }
-  formData: { [key: string]: any }
-}>()
-
-const emits = defineEmits(['update:modelValue', 'validateThis'])
-const attrs = ref({} as any)
-const onEvents = ref(getEvents(props))
-const options = reactive([] as any[])
-const currentValue = ref(props.modelValue)
-emits('update:modelValue', currentValue)
-
-onBeforeMount(async () => {
-  attrs.value = await getAttrs(props, { maxlength: defaultConf.form?.leng.textare, showWordLimit: true, rows: 3, ...useAttrs() })
-})
-
-/**
- *
- * @param text
- * 选中
- */
-function changeTip(text: any) {
-  currentValue.value = text
-  emits('validateThis')
-}
-
-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(
-  () => props.desc.options,
-  async (data) => {
-    if (typeof data === 'string') {
-      //   // 从全局数据中获取options
-      options.splice(0, options.length, ...(globalData[data] || []))
-    } else if (typeof data === 'function') {
-      options.splice(0, options.length, ...(await data(props.formData)))
-    } else if (Array.isArray(data)) {
-      if (data && options && !isEqual(data, options)) {
-        options.splice(0, options.length, ...data)
-      }
-    } else {
-      options.splice(0, options.length)
-    }
-  },
-  { immediate: true }
-)
-</script>
-<style lang="scss">
-.el-plus-form-quick-input {
-  width: 100%;
-  display: flex;
-  align-items: center;
-  margin-top: 10px;
-  .el-tag {
-    margin-right: 10px;
-  }
-}
-</style>
+<template>
+  <el-input v-if="isInit" :class="desc.class" :style="desc.style" type="textarea" v-bind="attrs" v-model="currentValue" v-on="onEvents"> </el-input>
+  <div class="el-plus-form-quick-input">
+    <el-tag v-for="(option, index) in options" :key="index" type="info" @click="changeTip(option.label)">{{ option.label }}</el-tag>
+  </div>
+</template>
+<script lang="ts">
+export default {
+  name: 'ElPlusFormQuickinput',
+  inheritAttrs: false,
+  typeName: 'quickinput',
+  customOptions: {}
+}
+</script>
+<script lang="ts" setup>
+import { ref, useAttrs, watch, onBeforeMount, inject, reactive } from 'vue'
+import { getAttrs, getEvents } from '../mixins'
+import { isEqual } from 'lodash'
+
+const globalData = inject('globalData') as any
+const defaultConf = inject('defaultConf') as ICRUDConfig
+
+const props = defineProps<{
+  modelValue?: string | null
+  field: string
+  loading?: boolean
+  desc: { [key: string]: any }
+  formData: { [key: string]: any }
+}>()
+
+const emits = defineEmits(['update:modelValue', 'validateThis'])
+const attrs = ref({} as any)
+const isInit = ref(false)
+const onEvents = ref(getEvents(props))
+const options = reactive([] as any[])
+const currentValue = ref(props.modelValue)
+emits('update:modelValue', currentValue)
+
+onBeforeMount(async () => {
+  attrs.value = await getAttrs(props, { maxlength: defaultConf.form?.leng.textare, showWordLimit: true, rows: 3, ...useAttrs() })
+  isInit.value = true
+})
+
+/**
+ *
+ * @param text
+ * 选中
+ */
+function changeTip(text: any) {
+  currentValue.value = text
+  emits('validateThis')
+}
+
+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(
+  () => props.desc.options,
+  async (data) => {
+    if (typeof data === 'string') {
+      //   // 从全局数据中获取options
+      options.splice(0, options.length, ...(globalData[data] || []))
+    } else if (typeof data === 'function') {
+      options.splice(0, options.length, ...(await data(props.formData)))
+    } else if (Array.isArray(data)) {
+      if (data && options && !isEqual(data, options)) {
+        options.splice(0, options.length, ...data)
+      }
+    } else {
+      options.splice(0, options.length)
+    }
+  },
+  { immediate: true }
+)
+</script>
+<style lang="scss">
+.el-plus-form-quick-input {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  margin-top: 10px;
+  .el-tag {
+    margin-right: 10px;
+  }
+}
+</style>