@ebiz/designer-components 0.1.2 → 0.1.4

package/src/views/WatermarkDemo.vue

@@ -1,86 +1,86 @@
-<template>
-  <div class="watermark-demo">
-    <h1>水印组件演示</h1>
-    <div class="demo-section">
-      <h2>基础用法</h2>
-      <div class="demo-card">
-        <EbizWatermark :watermarkContent="{ text: 'TDesign 水印示例' }">
-          <div class="content-box">
-            <p>这是被水印覆盖的内容</p>
-            <p>水印会显示在此内容之上</p>
-          </div>
-        </EbizWatermark>
-      </div>
-    </div>
-
-    <t-watermark :watermark-content="{ text: '文字水印' }" :y="120" :x="80" :width="120" :height="60">
-      <div style="width: 100%; height: 300px" />
-    </t-watermark>
-
-    <div class="demo-section">
-      <h2>自定义透明度和角度</h2>
-      <div class="demo-card">
-        <EbizWatermark :watermarkContent="{ text: 'TDesign 水印' }" :alpha="0.2" :rotate="0">
-          <div class="content-box">
-            <p>此水印透明度为0.2且角度为0</p>
-          </div>
-        </EbizWatermark>
-      </div>
-    </div>
-
-    <div class="demo-section">
-      <h2>自定义间距和大小</h2>
-      <div class="demo-card">
-        <EbizWatermark :watermarkContent="{ text: '自定义水印' }" :width="150" :height="80" :gapX="100" :gapY="100">
-          <div class="content-box">
-            <p>此水印设置了自定义的宽高和间距</p>
-          </div>
-        </EbizWatermark>
-      </div>
-    </div>
-
-    <div class="demo-section">
-      <h2>可移动水印</h2>
-      <div class="demo-card">
-        <EbizWatermark :watermarkContent="{ text: '可移动水印' }" :movable="true">
-          <div class="content-box">
-            <p>此水印可以随着页面滚动而移动</p>
-          </div>
-        </EbizWatermark>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { EbizWatermark } from '../index.js';
-import { Watermark as TWatermark } from 'tdesign-vue-next';
-</script>
-
-<style scoped>
-.watermark-demo {
-  padding: 20px;
-}
-
-.demo-section {
-  margin-bottom: 30px;
-}
-
-.demo-card {
-  border: 1px solid #eee;
-  border-radius: 8px;
-  margin-top: 10px;
-  background-color: #fafafa;
-  overflow: hidden;
-}
-
-.content-box {
-  padding: 40px;
-  height: 200px;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  text-align: center;
-}
+<template>
+  <div class="watermark-demo">
+    <h1>水印组件演示</h1>
+    <div class="demo-section">
+      <h2>基础用法</h2>
+      <div class="demo-card">
+        <EbizWatermark :watermarkContent="{ text: 'TDesign 水印示例' }">
+          <div class="content-box">
+            <p>这是被水印覆盖的内容</p>
+            <p>水印会显示在此内容之上</p>
+          </div>
+        </EbizWatermark>
+      </div>
+    </div>
+
+    <t-watermark :watermark-content="{ text: '文字水印' }" :y="120" :x="80" :width="120" :height="60">
+      <div style="width: 100%; height: 300px" />
+    </t-watermark>
+
+    <div class="demo-section">
+      <h2>自定义透明度和角度</h2>
+      <div class="demo-card">
+        <EbizWatermark :watermarkContent="{ text: 'TDesign 水印' }" :alpha="0.2" :rotate="0">
+          <div class="content-box">
+            <p>此水印透明度为0.2且角度为0</p>
+          </div>
+        </EbizWatermark>
+      </div>
+    </div>
+
+    <div class="demo-section">
+      <h2>自定义间距和大小</h2>
+      <div class="demo-card">
+        <EbizWatermark :watermarkContent="{ text: '自定义水印' }" :width="150" :height="80" :gapX="100" :gapY="100">
+          <div class="content-box">
+            <p>此水印设置了自定义的宽高和间距</p>
+          </div>
+        </EbizWatermark>
+      </div>
+    </div>
+
+    <div class="demo-section">
+      <h2>可移动水印</h2>
+      <div class="demo-card">
+        <EbizWatermark :watermarkContent="{ text: '可移动水印' }" :movable="true">
+          <div class="content-box">
+            <p>此水印可以随着页面滚动而移动</p>
+          </div>
+        </EbizWatermark>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { EbizWatermark } from '../index.js';
+import { Watermark as TWatermark } from 'tdesign-vue-next';
+</script>
+
+<style scoped>
+.watermark-demo {
+  padding: 20px;
+}
+
+.demo-section {
+  margin-bottom: 30px;
+}
+
+.demo-card {
+  border: 1px solid #eee;
+  border-radius: 8px;
+  margin-top: 10px;
+  background-color: #fafafa;
+  overflow: hidden;
+}
+
+.content-box {
+  padding: 40px;
+  height: 200px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+}
 </style> 

package/src/components/EbizDropdown.vue

@@ -1,117 +0,0 @@
-<template>
-    <t-dropdown :disabled="disabled" :direction="direction" :hideAfterItemClick="hideAfterItemClick"
-        :max-column-width="maxColumnWidth" :max-height="maxHeight" :min-column-width="minColumnWidth" :options="options"
-        :placement="placement" :popupProps="popupProps" :trigger="trigger" @click="handleClick"
-        @visible-change="handleVisibleChange">
-        <!-- 默认触发器内容插槽 -->
-        <template v-if="$slots.default" #default>
-            <slot></slot>
-        </template>
-
-        <!-- 下拉菜单插槽 -->
-        <template v-if="$slots.dropdown" #dropdown>
-            <slot name="dropdown"></slot>
-        </template>
-
-        <!-- 自定义选项内容插槽 -->
-        <template v-if="$slots.options" #options>
-            <slot name="options"></slot>
-        </template>
-    </t-dropdown>
-</template>
-
-<script>
-export default {
-    name: "EbizDropdown"
-}
-</script>
-
-<script setup>
-import { defineProps, defineEmits } from 'vue';
-import { Dropdown as TDropdown } from 'tdesign-vue-next';
-
-defineProps({
-    // 是否禁用组件
-    disabled: {
-        type: Boolean,
-        default: false
-    },
-    // 多层级操作时，子层级展开方向
-    direction: {
-        type: String,
-        default: 'right',
-        validator: (val) => ['left', 'right'].includes(val)
-    },
-    // 点击选项后是否自动隐藏弹层
-    hideAfterItemClick: {
-        type: Boolean,
-        default: true
-    },
-    // 选项最大宽度，内容超出时，显示为省略号
-    maxColumnWidth: {
-        type: String,
-        default: '100px'
-    },
-    // 弹窗最大高度，单位：px
-    maxHeight: {
-        type: Number,
-        default: 300
-    },
-    // 选项最小宽度
-    minColumnWidth: {
-        type: String,
-        default: '10px'
-    },
-    // 下拉操作项
-    options: {
-        type: Array,
-        default: () => []
-    },
-    // 弹窗出现位置
-    placement: {
-        type: String,
-        default: 'bottom-left',
-        validator: (val) => [
-            'top', 'top-left', 'top-right',
-            'bottom', 'bottom-left', 'bottom-right',
-            'left', 'left-top', 'left-bottom',
-            'right', 'right-top', 'right-bottom'
-        ].includes(val)
-    },
-    // 透传 Popup 组件属性
-    popupProps: {
-        type: Object,
-        default: () => ({})
-    },
-    // 触发下拉显示的方式
-    trigger: {
-        type: String,
-        default: 'hover',
-        validator: (val) => ['hover', 'click', 'focus', 'context-menu'].includes(val)
-    }
-});
-
-const emit = defineEmits(['click', 'visible-change']);
-
-const handleClick = (data) => {
-    emit('click', data);
-};
-
-const handleVisibleChange = (visible, context) => {
-    emit('visible-change', visible, context);
-};
-</script>
-
-<style lang="less" scoped>
-/* TDesign主题样式定制 */
-:deep(.t-dropdown) {
-    .t-dropdown__trigger {
-        cursor: pointer;
-    }
-}
-
-:deep(.t-dropdown__menu) {
-    max-height: 300px;
-    overflow-y: auto;
-}
-</style>

package/src/components/EbizDropdownItem.vue

@@ -1,81 +0,0 @@
-<template>
-    <t-dropdown-item :content="content" :disabled="disabled" :divider="divider" :value="value" @click="handleClick">
-        <!-- 默认内容插槽 -->
-        <template v-if="$slots.default" #default>
-            <slot></slot>
-        </template>
-
-        <!-- 前缀图标插槽 -->
-        <template v-if="$slots.prefixIcon" #prefixIcon>
-            <slot name="prefixIcon"></slot>
-        </template>
-
-        <!-- 后缀图标插槽 -->
-        <template v-if="$slots.suffixIcon" #suffixIcon>
-            <slot name="suffixIcon"></slot>
-        </template>
-    </t-dropdown-item>
-</template>
-
-<script>
-export default {
-    name: "EbizDropdownItem"
-}
-</script>
-
-<script setup>
-import { defineProps, defineEmits } from 'vue';
-import { DropdownItem as TDropdownItem } from 'tdesign-vue-next';
-
-defineProps({
-    // 下拉操作项内容
-    content: {
-        type: [String, Function],
-        default: ''
-    },
-    // 是否禁用
-    disabled: {
-        type: Boolean,
-        default: false
-    },
-    // 是否显示操作项之间的分隔线（分隔线默认在下方）
-    divider: {
-        type: Boolean,
-        default: false
-    },
-    // 下拉操作项唯一标识
-    value: {
-        type: [String, Number, Object],
-        default: undefined
-    }
-});
-
-const emit = defineEmits(['click']);
-
-const handleClick = (data, context) => {
-    emit('click', data, context);
-};
-</script>
-
-<style lang="less" scoped>
-/* TDesign主题样式定制 */
-:deep(.t-dropdown-item) {
-    &:hover {
-        background-color: var(--td-bg-color-container-hover);
-    }
-
-    &.t-is-disabled {
-        color: var(--td-text-color-disabled);
-        cursor: not-allowed;
-
-        &:hover {
-            background-color: transparent;
-        }
-    }
-}
-
-:deep(.t-dropdown-item__divider) {
-    margin: 4px 0;
-    border-bottom: 1px solid var(--td-border-level-1-color);
-}
-</style>