@ebiz/designer-components 0.0.18-tj.1

package/src/components/TdesignImageViewer.vue

@@ -0,0 +1,201 @@
+<template>
+    <div>
+        <!-- 触发器 -->
+        <div @click="toggleShow" class="image-viewer-trigger">
+            <slot>
+                <t-button v-if="!triggerElement" theme="primary">
+                    {{ triggerText }}
+                </t-button>
+            </slot>
+        </div>
+        
+        <!-- 图片查看器 -->
+        <t-image-viewer
+            v-model:visible="visible"
+            :closeBtn="closeBtn"
+            :closeOnEscKeydown="closeOnEscKeydown"
+            :closeOnOverlay="closeOnOverlay"
+            :draggable="draggable"
+            :imageReferrerpolicy="imageReferrerpolicy"
+            :imageScale="imageScale"
+            :images="images"
+            :index="currentIndex"
+            :mode="mode"
+            :showOverlay="showOverlay"
+            :title="title"
+            :viewerScale="viewerScale"
+            :zIndex="zIndex"
+            @change="handleChange"
+            @close="handleClose"
+            @scale="handleScale"
+        >
+            <!-- 控制按钮插槽 -->
+            <template v-if="$slots.control" #control>
+                <slot name="control"></slot>
+            </template>
+            
+            <!-- 额外操作按钮插槽 -->
+            <template v-if="$slots.operation" #operation>
+                <slot name="operation"></slot>
+            </template>
+            
+            <!-- 缩略图底部插槽 -->
+            <template v-if="$slots.thumbnailsBottom" #thumbnails-bottom>
+                <slot name="thumbnailsBottom"></slot>
+            </template>
+            
+            <!-- 标题插槽 -->
+            <template v-if="$slots.title" #title>
+                <slot name="title"></slot>
+            </template>
+        </t-image-viewer>
+    </div>
+</template>
+
+<script setup>
+import { defineProps, defineEmits, ref, watch } from 'vue';
+import { ImageViewer as TImageViewer, Button as TButton } from 'tdesign-vue-next';
+
+const props = defineProps({
+    // 是否显示关闭按钮
+    closeBtn: {
+        type: Boolean,
+        default: true
+    },
+    // 按下 ESC 时是否触发图片预览器关闭
+    closeOnEscKeydown: {
+        type: Boolean,
+        default: true
+    },
+    // 点击遮罩层时是否触发关闭
+    closeOnOverlay: {
+        type: Boolean,
+        default: true
+    },
+    // 缩略图默认显示下标
+    defaultIndex: {
+        type: Number,
+        default: 0
+    },
+    // 是否允许拖拽调整位置
+    draggable: {
+        type: Boolean,
+        default: true
+    },
+    // 图片预览中的图片引用策略
+    imageReferrerpolicy: {
+        type: String,
+        default: 'never'
+    },
+    // 图片缩放相关配置
+    imageScale: {
+        type: Object,
+        default: () => ({
+            max: 3,
+            min: 0.1,
+            step: 0.1
+        })
+    },
+    // 图片数组
+    images: {
+        type: Array,
+        default: () => []
+    },
+    // 特殊的模式，包括常规模式和简洁模式
+    mode: {
+        type: String,
+        default: 'normal',
+        validator: (val) => ['normal', 'simple'].includes(val)
+    },
+    // 是否显示遮罩层
+    showOverlay: {
+        type: Boolean,
+        default: true
+    },
+    // 自定义触发元素
+    triggerElement: {
+        type: [String, Function],
+        default: ''
+    },
+    // 触发按钮文本
+    triggerText: {
+        type: String,
+        default: '查看图片'
+    },
+    // 标题
+    title: {
+        type: [String, Function],
+        default: ''
+    },
+    // 是否显示（非受控）
+    defaultVisible: {
+        type: Boolean,
+        default: false
+    },
+    // 是否显示（受控）
+    visible: {
+        type: Boolean,
+        default: undefined
+    },
+    // 查看器缩放相关配置
+    viewerScale: {
+        type: Object,
+        default: () => ({
+            max: 10,
+            min: 0.1,
+            step: 0.1
+        })
+    },
+    // 层级
+    zIndex: {
+        type: Number,
+        default: 2000
+    }
+});
+
+const emit = defineEmits(['change', 'close', 'scale', 'update:visible']);
+
+// 内部可见状态
+const visible = ref(props.defaultVisible);
+
+// 同步外部visible和内部visible
+watch(() => props.visible, (newValue) => {
+    if (newValue !== undefined) {
+        visible.value = newValue;
+    }
+});
+
+// 当前索引
+const currentIndex = ref(props.defaultIndex);
+
+// 切换显示状态
+const toggleShow = () => {
+    visible.value = !visible.value;
+    emit('update:visible', visible.value);
+};
+
+// 处理图片切换事件
+const handleChange = (index, context) => {
+    currentIndex.value = index;
+    emit('change', index, context);
+};
+
+// 处理关闭事件
+const handleClose = (context) => {
+    visible.value = false;
+    emit('update:visible', false);
+    emit('close', context);
+};
+
+// 处理缩放事件
+const handleScale = (scale, context) => {
+    emit('scale', scale, context);
+};
+</script>
+
+<style lang="less" scoped>
+.image-viewer-trigger {
+    display: inline-block;
+    cursor: pointer;
+}
+</style> 

package/src/components/TdesignInput.vue

@@ -0,0 +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, { e }) => {
+    emit('update:modelValue', value);
+    emit('input', value, { e });
+};
+
+// 处理变化事件
+const handleChange = (value, { e }) => {
+    emit('change', value, { e });
+};
+
+// 处理失去焦点事件
+const handleBlur = (value, { e }) => {
+    emit('blur', value, { e });
+};
+
+// 处理获取焦点事件
+const handleFocus = (value, { e }) => {
+    emit('focus', value, { e });
+};
+
+// 处理回车事件
+const handleEnter = (value, { e }) => {
+    emit('enter', value, { e });
+};
+
+// 处理清空事件
+const handleClear = ({ e }) => {
+    emit('update:modelValue', '');
+    emit('clear', { e });
+};
+
+// 处理键盘按下事件
+const handleKeydown = (value, { e }) => {
+    emit('keydown', value, { e });
+};
+
+// 处理键盘按键事件
+const handleKeypress = (value, { e }) => {
+    emit('keypress', value, { e });
+};
+
+// 处理键盘弹起事件
+const handleKeyup = (value, { e }) => {
+    emit('keyup', value, { e });
+};
+
+// 处理鼠标进入事件
+const handleMouseenter = (value, { e }) => {
+    emit('mouseenter', value, { e });
+};
+
+// 处理鼠标离开事件
+const handleMouseleave = (value, { e }) => {
+    emit('mouseleave', value, { e });
+};
+</script>
+
+<style lang="less" scoped>
+/* 自定义样式 */
+</style>