@ebiz/designer-components 0.1.0 → 0.1.2

package/src/components/TdesignIcon.vue

@@ -1,68 +1,68 @@
-<template>
-  <t-icon
-    :name="name"
-    :size="size"
-    :url="url"
-    :style="customStyle"
-    @click="handleClick"
-  />
-</template>
-
-<script>
-export default {
-  name: "EbizTdesignIcon"
-}
-</script>
-
-<script setup>
-import { defineProps, defineEmits, computed } from 'vue';
-import { Icon as TIcon } from 'tdesign-vue-next';
-
-const props = defineProps({
-  // 图标名称
-  name: {
-    type: String,
-    required: true
-  },
-  // 图标尺寸
-  size: {
-    type: String,
-    default: 'medium',
-    validator: (val) => ['small', 'medium', 'large'].includes(val) || /^(\d+px|\d+em|\d+rem|\d+%)$/.test(val)
-  },
-  // 图标颜色
-  color: {
-    type: String,
-    default: ''
-  },
-  // 图标地址
-  url: {
-    type: [String, Array],
-    default: undefined
-  },
-  // 是否加载组件库内置图标
-  loadDefaultIcons: {
-    type: Boolean,
-    default: true
-  }
-});
-
-const emit = defineEmits(['click']);
-
-// 处理点击事件
-const handleClick = (e) => {
-  emit('click', { e });
-};
-
-// 计算样式
-const customStyle = computed(() => {
-  if (props.color) {
-    return { color: props.color };
-  }
-  return {};
-});
-</script>
-
-<style lang="less" scoped>
-/* 自定义样式 */
+<template>
+  <t-icon
+    :name="name"
+    :size="size"
+    :url="url"
+    :style="customStyle"
+    @click="handleClick"
+  />
+</template>
+
+<script>
+export default {
+  name: "EbizTdesignIcon"
+}
+</script>
+
+<script setup>
+import { defineProps, defineEmits, computed } from 'vue';
+import { Icon as TIcon } from 'tdesign-vue-next';
+
+const props = defineProps({
+  // 图标名称
+  name: {
+    type: String,
+    required: true
+  },
+  // 图标尺寸
+  size: {
+    type: String,
+    default: 'medium',
+    validator: (val) => ['small', 'medium', 'large'].includes(val) || /^(\d+px|\d+em|\d+rem|\d+%)$/.test(val)
+  },
+  // 图标颜色
+  color: {
+    type: String,
+    default: ''
+  },
+  // 图标地址
+  url: {
+    type: [String, Array],
+    default: undefined
+  },
+  // 是否加载组件库内置图标
+  loadDefaultIcons: {
+    type: Boolean,
+    default: true
+  }
+});
+
+const emit = defineEmits(['click']);
+
+// 处理点击事件
+const handleClick = (e) => {
+  emit('click', { e });
+};
+
+// 计算样式
+const customStyle = computed(() => {
+  if (props.color) {
+    return { color: props.color };
+  }
+  return {};
+});
+</script>
+
+<style lang="less" scoped>
+/* 自定义样式 */
 </style> 

package/src/components/TdesignImage.vue

@@ -1,163 +1,163 @@
-<template>
-    <t-image 
-        :alt="alt"
-        :error="error"
-        :fit="fit"
-        :gallery="gallery"
-        :lazy="lazy"
-        :loading="loading"
-        :overlay-content="overlayContent"
-        :overlay-trigger="overlayTrigger"
-        :placeholder="placeholder"
-        :position="position"
-        :referrer-policy="referrerPolicy"
-        :shape="shape"
-        :src="src"
-        :style="customStyle"
-        @error="handleError"
-        @load="handleLoad"
-        @click="handleClick"
-    >
-        <!-- 默认插槽 -->
-        <slot></slot>
-        
-        <!-- 加载中占位内容插槽 -->
-        <template v-if="$slots.loading" #loading>
-            <slot name="loading"></slot>
-        </template>
-        
-        <!-- 加载失败占位内容插槽 -->
-        <template v-if="$slots.error" #error>
-            <slot name="error"></slot>
-        </template>
-        
-        <!-- 自定义悬浮内容插槽 -->
-        <template v-if="$slots.overlayContent" #overlay-content>
-            <slot name="overlayContent"></slot>
-        </template>
-        
-        <!-- 自定义占位符插槽 -->
-        <template v-if="$slots.placeholder" #placeholder>
-            <slot name="placeholder"></slot>
-        </template>
-    </t-image>
-</template>
-
-<script setup>
-import { defineProps, defineEmits, computed } from 'vue';
-import { Image as TImage } from 'tdesign-vue-next';
-
-const props = defineProps({
-    // 图片描述
-    alt: {
-        type: String,
-        default: ''
-    },
-    // 图片加载失败时显示的内容，默认为空
-    error: {
-        type: [String, Function],
-        default: ''
-    },
-    // 图片填充模式
-    fit: {
-        type: String,
-        default: 'fill',
-        validator: (val) => ['contain', 'cover', 'fill', 'none', 'scale-down'].includes(val)
-    },
-    // 是否展示为图集模式
-    gallery: {
-        type: Boolean,
-        default: false
-    },
-    // 是否开启图片懒加载
-    lazy: {
-        type: Boolean,
-        default: false
-    },
-    // 图片加载中时显示的内容，默认为空
-    loading: {
-        type: [String, Function],
-        default: ''
-    },
-    // 自定义图片的宽度
-    width: {
-        type: [String, Number],
-        default: ''
-    },
-    // 自定义图片的高度
-    height: {
-        type: [String, Number],
-        default: ''
-    },
-    // 悬浮显示的内容
-    overlayContent: {
-        type: [String, Function],
-        default: ''
-    },
-    // 悬浮内容出现的时机
-    overlayTrigger: {
-        type: String,
-        default: 'hover',
-        validator: (val) => ['hover', 'always'].includes(val)
-    },
-    // 占位符
-    placeholder: {
-        type: [String, Function],
-        default: ''
-    },
-    // 等同于原生的 object-position
-    position: {
-        type: String,
-        default: 'center'
-    },
-    // 等同于原生的 referrerPolicy
-    referrerPolicy: {
-        type: String,
-        default: ''
-    },
-    // 图片圆角类型
-    shape: {
-        type: String,
-        default: 'square',
-        validator: (val) => ['circle', 'round', 'square'].includes(val)
-    },
-    // 图片链接
-    src: {
-        type: String,
-        default: ''
-    }
-});
-
-const emit = defineEmits(['error', 'load', 'click']);
-
-// 处理加载失败事件
-const handleError = (context) => {
-    emit('error', context);
-};
-
-// 处理加载成功事件
-const handleLoad = (context) => {
-    emit('load', context);
-};
-
-// 处理点击事件
-const handleClick = (context) => {
-    emit('click', context);
-};
-
-// 计算样式
-const customStyle = computed(() => {
-    const style = {};
-    if (props.width) {
-        style.width = typeof props.width === 'number' ? `${props.width}px` : props.width;
-    }
-    if (props.height) {
-        style.height = typeof props.height === 'number' ? `${props.height}px` : props.height;
-    }
-    return style;
-});
-</script>
-
-<style lang="less" scoped>
-/* 自定义样式 */
+<template>
+    <t-image 
+        :alt="alt"
+        :error="error"
+        :fit="fit"
+        :gallery="gallery"
+        :lazy="lazy"
+        :loading="loading"
+        :overlay-content="overlayContent"
+        :overlay-trigger="overlayTrigger"
+        :placeholder="placeholder"
+        :position="position"
+        :referrer-policy="referrerPolicy"
+        :shape="shape"
+        :src="src"
+        :style="customStyle"
+        @error="handleError"
+        @load="handleLoad"
+        @click="handleClick"
+    >
+        <!-- 默认插槽 -->
+        <slot></slot>
+        
+        <!-- 加载中占位内容插槽 -->
+        <template v-if="$slots.loading" #loading>
+            <slot name="loading"></slot>
+        </template>
+        
+        <!-- 加载失败占位内容插槽 -->
+        <template v-if="$slots.error" #error>
+            <slot name="error"></slot>
+        </template>
+        
+        <!-- 自定义悬浮内容插槽 -->
+        <template v-if="$slots.overlayContent" #overlay-content>
+            <slot name="overlayContent"></slot>
+        </template>
+        
+        <!-- 自定义占位符插槽 -->
+        <template v-if="$slots.placeholder" #placeholder>
+            <slot name="placeholder"></slot>
+        </template>
+    </t-image>
+</template>
+
+<script setup>
+import { defineProps, defineEmits, computed } from 'vue';
+import { Image as TImage } from 'tdesign-vue-next';
+
+const props = defineProps({
+    // 图片描述
+    alt: {
+        type: String,
+        default: ''
+    },
+    // 图片加载失败时显示的内容，默认为空
+    error: {
+        type: [String, Function],
+        default: ''
+    },
+    // 图片填充模式
+    fit: {
+        type: String,
+        default: 'fill',
+        validator: (val) => ['contain', 'cover', 'fill', 'none', 'scale-down'].includes(val)
+    },
+    // 是否展示为图集模式
+    gallery: {
+        type: Boolean,
+        default: false
+    },
+    // 是否开启图片懒加载
+    lazy: {
+        type: Boolean,
+        default: false
+    },
+    // 图片加载中时显示的内容，默认为空
+    loading: {
+        type: [String, Function],
+        default: ''
+    },
+    // 自定义图片的宽度
+    width: {
+        type: [String, Number],
+        default: ''
+    },
+    // 自定义图片的高度
+    height: {
+        type: [String, Number],
+        default: ''
+    },
+    // 悬浮显示的内容
+    overlayContent: {
+        type: [String, Function],
+        default: ''
+    },
+    // 悬浮内容出现的时机
+    overlayTrigger: {
+        type: String,
+        default: 'hover',
+        validator: (val) => ['hover', 'always'].includes(val)
+    },
+    // 占位符
+    placeholder: {
+        type: [String, Function],
+        default: ''
+    },
+    // 等同于原生的 object-position
+    position: {
+        type: String,
+        default: 'center'
+    },
+    // 等同于原生的 referrerPolicy
+    referrerPolicy: {
+        type: String,
+        default: ''
+    },
+    // 图片圆角类型
+    shape: {
+        type: String,
+        default: 'square',
+        validator: (val) => ['circle', 'round', 'square'].includes(val)
+    },
+    // 图片链接
+    src: {
+        type: String,
+        default: ''
+    }
+});
+
+const emit = defineEmits(['error', 'load', 'click']);
+
+// 处理加载失败事件
+const handleError = (context) => {
+    emit('error', context);
+};
+
+// 处理加载成功事件
+const handleLoad = (context) => {
+    emit('load', context);
+};
+
+// 处理点击事件
+const handleClick = (context) => {
+    emit('click', context);
+};
+
+// 计算样式
+const customStyle = computed(() => {
+    const style = {};
+    if (props.width) {
+        style.width = typeof props.width === 'number' ? `${props.width}px` : props.width;
+    }
+    if (props.height) {
+        style.height = typeof props.height === 'number' ? `${props.height}px` : props.height;
+    }
+    return style;
+});
+</script>
+
+<style lang="less" scoped>
+/* 自定义样式 */
 </style>