@ebiz/designer-components 0.1.2 → 0.1.4

package/src/components/TdesignInput.vue

@@ -1,243 +1,243 @@
-<template>
-    <t-input 
-        :align="align"
-        :autocomplete="autocomplete"
-        :autofocus="autofocus"
-        :clearable="clearable"
-        :disabled="disabled"
-        :format="format"
-        :label="label"
-        :maxcharacter="maxcharacter"
-        :maxlength="maxlength"
-        :name="name"
-        :placeholder="placeholder"
-        :readonly="readonly"
-        :show-clear-icon-on-empty="showClearIconOnEmpty"
-        :show-limit-number="showLimitNumber"
-        :size="size"
-        :status="status"
-        :tips="tips"
-        :type="type"
-        :value="modelValue"
-        @blur="handleBlur"
-        @change="handleChange"
-        @clear="handleClear"
-        @enter="handleEnter"
-        @focus="handleFocus"
-        @input="handleInput"
-        @keydown="handleKeydown"
-        @keypress="handleKeypress"
-        @keyup="handleKeyup"
-        @mouseenter="handleMouseenter"
-        @mouseleave="handleMouseleave"
-    >
-        <!-- 前置图标插槽 -->
-        <template v-if="$slots.prefixIcon" #prefix-icon>
-            <slot name="prefixIcon"></slot>
-        </template>
-        
-        <!-- 后置图标插槽 -->
-        <template v-if="$slots.suffixIcon" #suffix-icon>
-            <slot name="suffixIcon"></slot>
-        </template>
-        
-        <!-- 前置内容插槽 -->
-        <template v-if="$slots.label" #label>
-            <slot name="label"></slot>
-        </template>
-        
-        <!-- 后置内容插槽 -->
-        <template v-if="$slots.suffix" #suffix>
-            <slot name="suffix"></slot>
-        </template>
-    </t-input>
-</template>
-
-<script>
-export default {
-    name: "EbizTdesignInput"
-}
-</script>
-
-<script setup>
-import { defineProps, defineEmits } from 'vue';
-import { Input as TInput } from 'tdesign-vue-next';
-
-const _props = defineProps({
-    // 对齐方式
-    align: {
-        type: String,
-        default: 'left',
-        validator: (val) => ['left', 'center', 'right'].includes(val)
-    },
-    // 自动完成
-    autocomplete: {
-        type: String,
-        default: undefined
-    },
-    // 自动获取焦点
-    autofocus: {
-        type: Boolean,
-        default: false
-    },
-    // 是否可清空
-    clearable: {
-        type: Boolean,
-        default: false
-    },
-    // 是否禁用
-    disabled: {
-        type: Boolean,
-        default: false
-    },
-    // 格式化函数
-    format: {
-        type: Function,
-        default: undefined
-    },
-    // 左侧文本
-    label: {
-        type: String,
-        default: ''
-    },
-    // 用户最多可以输入的字符个数
-    maxcharacter: {
-        type: Number,
-        default: undefined
-    },
-    // 用户最多可以输入的字符长度
-    maxlength: {
-        type: Number,
-        default: undefined
-    },
-    // 输入框名称
-    name: {
-        type: String,
-        default: ''
-    },
-    // 占位符
-    placeholder: {
-        type: String,
-        default: undefined
-    },
-    // 只读状态
-    readonly: {
-        type: Boolean,
-        default: false
-    },
-    // 输入框为空时是否显示清除按钮
-    showClearIconOnEmpty: {
-        type: Boolean,
-        default: false
-    },
-    // 是否显示字数限制
-    showLimitNumber: {
-        type: Boolean,
-        default: false
-    },
-    // 输入框尺寸
-    size: {
-        type: String,
-        default: 'medium',
-        validator: (val) => ['small', 'medium', 'large'].includes(val)
-    },
-    // 输入框状态
-    status: {
-        type: String,
-        default: undefined,
-        validator: (val) => ['default', 'success', 'warning', 'error'].includes(val)
-    },
-    // 提示文本
-    tips: {
-        type: String,
-        default: ''
-    },
-    // 输入框类型
-    type: {
-        type: String,
-        default: 'text',
-        validator: (val) => ['text', 'number', 'url', 'tel', 'password', 'search', 'submit', 'hidden'].includes(val)
-    },
-    // v-model绑定值
-    modelValue: {
-        type: [String, Number],
-        default: ''
-    }
-});
-
-const emit = defineEmits([
-    'update:modelValue',
-    'blur',
-    'change',
-    'clear',
-    'enter',
-    'focus',
-    'input',
-    'keydown',
-    'keypress',
-    'keyup',
-    'mouseenter',
-    'mouseleave'
-]);
-
-// 处理输入事件
-const handleInput = (value, context) => {
-    emit('input', value, context);
-};
-
-// 处理变化事件
-const handleChange = (value, context) => {
-    emit('update:modelValue', value);
-    emit('change', value, context);
-};
-
-// 处理失去焦点事件
-const handleBlur = (value, context) => {
-    emit('blur', value, context);
-};
-
-// 处理获取焦点事件
-const handleFocus = (value, context) => {
-    emit('focus', value, context);
-};
-
-// 处理回车事件
-const handleEnter = (value, context) => {
-    emit('enter', value, context);
-};
-
-// 处理清空事件
-const handleClear = (context) => {
-    emit('update:modelValue', '');
-    emit('clear', context);
-};
-
-// 处理键盘按下事件
-const handleKeydown = (value, context) => {
-    emit('keydown', value, context);
-};
-
-// 处理键盘按键事件
-const handleKeypress = (value, context) => {
-    emit('keypress', value, context);
-};
-
-// 处理键盘弹起事件
-const handleKeyup = (value, context) => {
-    emit('keyup', value, context);
-};
-
-// 处理鼠标进入事件
-const handleMouseenter = (value, context) => {
-    emit('mouseenter', value, context);
-};
-
-// 处理鼠标离开事件
-const handleMouseleave = (value, context) => {
-    emit('mouseleave', value, context);
-};
-</script>
-
-<style lang="less" scoped>
-/* 自定义样式 */
+<template>
+    <t-input 
+        :align="align"
+        :autocomplete="autocomplete"
+        :autofocus="autofocus"
+        :clearable="clearable"
+        :disabled="disabled"
+        :format="format"
+        :label="label"
+        :maxcharacter="maxcharacter"
+        :maxlength="maxlength"
+        :name="name"
+        :placeholder="placeholder"
+        :readonly="readonly"
+        :show-clear-icon-on-empty="showClearIconOnEmpty"
+        :show-limit-number="showLimitNumber"
+        :size="size"
+        :status="status"
+        :tips="tips"
+        :type="type"
+        :value="modelValue"
+        @blur="handleBlur"
+        @change="handleChange"
+        @clear="handleClear"
+        @enter="handleEnter"
+        @focus="handleFocus"
+        @input="handleInput"
+        @keydown="handleKeydown"
+        @keypress="handleKeypress"
+        @keyup="handleKeyup"
+        @mouseenter="handleMouseenter"
+        @mouseleave="handleMouseleave"
+    >
+        <!-- 前置图标插槽 -->
+        <template v-if="$slots.prefixIcon" #prefix-icon>
+            <slot name="prefixIcon"></slot>
+        </template>
+        
+        <!-- 后置图标插槽 -->
+        <template v-if="$slots.suffixIcon" #suffix-icon>
+            <slot name="suffixIcon"></slot>
+        </template>
+        
+        <!-- 前置内容插槽 -->
+        <template v-if="$slots.label" #label>
+            <slot name="label"></slot>
+        </template>
+        
+        <!-- 后置内容插槽 -->
+        <template v-if="$slots.suffix" #suffix>
+            <slot name="suffix"></slot>
+        </template>
+    </t-input>
+</template>
+
+<script>
+export default {
+    name: "EbizTdesignInput"
+}
+</script>
+
+<script setup>
+import { defineProps, defineEmits } from 'vue';
+import { Input as TInput } from 'tdesign-vue-next';
+
+const _props = defineProps({
+    // 对齐方式
+    align: {
+        type: String,
+        default: 'left',
+        validator: (val) => ['left', 'center', 'right'].includes(val)
+    },
+    // 自动完成
+    autocomplete: {
+        type: String,
+        default: undefined
+    },
+    // 自动获取焦点
+    autofocus: {
+        type: Boolean,
+        default: false
+    },
+    // 是否可清空
+    clearable: {
+        type: Boolean,
+        default: false
+    },
+    // 是否禁用
+    disabled: {
+        type: Boolean,
+        default: false
+    },
+    // 格式化函数
+    format: {
+        type: Function,
+        default: undefined
+    },
+    // 左侧文本
+    label: {
+        type: String,
+        default: ''
+    },
+    // 用户最多可以输入的字符个数
+    maxcharacter: {
+        type: Number,
+        default: undefined
+    },
+    // 用户最多可以输入的字符长度
+    maxlength: {
+        type: Number,
+        default: undefined
+    },
+    // 输入框名称
+    name: {
+        type: String,
+        default: ''
+    },
+    // 占位符
+    placeholder: {
+        type: String,
+        default: undefined
+    },
+    // 只读状态
+    readonly: {
+        type: Boolean,
+        default: false
+    },
+    // 输入框为空时是否显示清除按钮
+    showClearIconOnEmpty: {
+        type: Boolean,
+        default: false
+    },
+    // 是否显示字数限制
+    showLimitNumber: {
+        type: Boolean,
+        default: false
+    },
+    // 输入框尺寸
+    size: {
+        type: String,
+        default: 'medium',
+        validator: (val) => ['small', 'medium', 'large'].includes(val)
+    },
+    // 输入框状态
+    status: {
+        type: String,
+        default: undefined,
+        validator: (val) => ['default', 'success', 'warning', 'error'].includes(val)
+    },
+    // 提示文本
+    tips: {
+        type: String,
+        default: ''
+    },
+    // 输入框类型
+    type: {
+        type: String,
+        default: 'text',
+        validator: (val) => ['text', 'number', 'url', 'tel', 'password', 'search', 'submit', 'hidden'].includes(val)
+    },
+    // v-model绑定值
+    modelValue: {
+        type: [String, Number],
+        default: ''
+    }
+});
+
+const emit = defineEmits([
+    'update:modelValue',
+    'blur',
+    'change',
+    'clear',
+    'enter',
+    'focus',
+    'input',
+    'keydown',
+    'keypress',
+    'keyup',
+    'mouseenter',
+    'mouseleave'
+]);
+
+// 处理输入事件
+const handleInput = (value, context) => {
+    emit('input', value, context);
+};
+
+// 处理变化事件
+const handleChange = (value, context) => {
+    emit('update:modelValue', value);
+    emit('change', value, context);
+};
+
+// 处理失去焦点事件
+const handleBlur = (value, context) => {
+    emit('blur', value, context);
+};
+
+// 处理获取焦点事件
+const handleFocus = (value, context) => {
+    emit('focus', value, context);
+};
+
+// 处理回车事件
+const handleEnter = (value, context) => {
+    emit('enter', value, context);
+};
+
+// 处理清空事件
+const handleClear = (context) => {
+    emit('update:modelValue', '');
+    emit('clear', context);
+};
+
+// 处理键盘按下事件
+const handleKeydown = (value, context) => {
+    emit('keydown', value, context);
+};
+
+// 处理键盘按键事件
+const handleKeypress = (value, context) => {
+    emit('keypress', value, context);
+};
+
+// 处理键盘弹起事件
+const handleKeyup = (value, context) => {
+    emit('keyup', value, context);
+};
+
+// 处理鼠标进入事件
+const handleMouseenter = (value, context) => {
+    emit('mouseenter', value, context);
+};
+
+// 处理鼠标离开事件
+const handleMouseleave = (value, context) => {
+    emit('mouseleave', value, context);
+};
+</script>
+
+<style lang="less" scoped>
+/* 自定义样式 */
 </style>