@ebiz/designer-components 0.0.18 → 0.0.19

package/src/views/TdesignImage.vue

@@ -0,0 +1,216 @@
+<template>
+  <div class="container">
+    <h1>TDesign 图片组件示例</h1>
+    
+    <div class="section">
+      <h2>基础用法</h2>
+      <div class="example-block">
+        <t-image src="https://tdesign.tencent.com/vue-next/assets/image1.jpg" :style="{ width: '100px', height: '100px' }" />
+      </div>
+      <div class="code-block">
+        <pre><code>&lt;t-image src="https://tdesign.tencent.com/vue-next/assets/image1.jpg" :style="{ width: '100px', height: '100px' }" /&gt;</code></pre>
+      </div>
+    </div>
+    
+    <div class="section">
+      <h2>不同填充模式</h2>
+      <div class="example-block image-fit-container">
+        <div v-for="fit in fitList" :key="fit" class="image-fit-item">
+          <t-image
+            :style="{ width: '100px', height: '100px' }"
+            src="https://tdesign.tencent.com/vue-next/assets/image1.jpg"
+            :fit="fit"
+          />
+          <div class="image-fit-text">fit: {{ fit }}</div>
+        </div>
+      </div>
+      <div class="code-block">
+        <pre><code>// 可选值: fill（默认）, contain, cover, none, scale-down
+&lt;t-image
+  :style="{ width: '100px', height: '100px' }"
+  src="https://tdesign.tencent.com/vue-next/assets/image1.jpg"
+  fit="cover"
+/&gt;</code></pre>
+      </div>
+    </div>
+    
+    <div class="section">
+      <h2>不同形状</h2>
+      <div class="example-block">
+        <div v-for="shape in shapeList" :key="shape" class="image-shape-item">
+          <t-image
+            :style="{ width: '100px', height: '100px' }"
+            src="https://tdesign.tencent.com/vue-next/assets/image1.jpg"
+            :shape="shape"
+          />
+          <div class="image-shape-text">shape: {{ shape }}</div>
+        </div>
+      </div>
+      <div class="code-block">
+        <pre><code>// 可选值: square（默认）, circle, round
+&lt;t-image
+  :style="{ width: '100px', height: '100px' }"
+  src="https://tdesign.tencent.com/vue-next/assets/image1.jpg"
+  shape="circle"
+/&gt;</code></pre>
+      </div>
+    </div>
+    
+    <div class="section">
+      <h2>图片加载状态</h2>
+      <div class="example-block">
+        <t-image
+          :style="{ width: '100px', height: '100px' }"
+          src="https://tdesign.tencent.com/vue-next/assets/image-error.jpg"
+          :error="'加载失败'"
+          :loading="'加载中...'"
+        />
+      </div>
+      <div class="code-block">
+        <pre><code>&lt;t-image
+  :style="{ width: '100px', height: '100px' }"
+  src="https://tdesign.tencent.com/vue-next/assets/image-error.jpg"
+  :error="'加载失败'"
+  :loading="'加载中...'"
+/&gt;</code></pre>
+      </div>
+    </div>
+    
+    <div class="section">
+      <h2>图片懒加载</h2>
+      <div class="example-block">
+        <t-image
+          :style="{ width: '100px', height: '100px' }"
+          src="https://tdesign.tencent.com/vue-next/assets/image1.jpg"
+          :lazy="true"
+        />
+      </div>
+      <div class="code-block">
+        <pre><code>&lt;t-image
+  :style="{ width: '100px', height: '100px' }"
+  src="https://tdesign.tencent.com/vue-next/assets/image1.jpg"
+  :lazy="true"
+/&gt;</code></pre>
+      </div>
+    </div>
+    
+    <div class="section">
+      <h2>图片上展示悬浮内容</h2>
+      <div class="example-block">
+        <t-image
+          :style="{ width: '100px', height: '100px' }"
+          src="https://tdesign.tencent.com/vue-next/assets/image1.jpg"
+          :overlay-content="'悬浮内容'"
+          overlay-trigger="hover"
+        />
+      </div>
+      <div class="code-block">
+        <pre><code>&lt;t-image
+  :style="{ width: '100px', height: '100px' }"
+  src="https://tdesign.tencent.com/vue-next/assets/image1.jpg"
+  :overlay-content="'悬浮内容'"
+  overlay-trigger="hover"
+/&gt;</code></pre>
+      </div>
+    </div>
+    
+    <div class="section">
+      <h2>图集模式</h2>
+      <div class="example-block">
+        <t-image
+          :style="{ width: '100px', height: '100px' }"
+          src="https://tdesign.tencent.com/vue-next/assets/image1.jpg"
+          :gallery="true"
+        />
+      </div>
+      <div class="code-block">
+        <pre><code>&lt;t-image
+  :style="{ width: '100px', height: '100px' }"
+  src="https://tdesign.tencent.com/vue-next/assets/image1.jpg"
+  :gallery="true"
+/&gt;</code></pre>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'TdesignImage',
+  setup() {
+    const fitList = ['fill', 'contain', 'cover', 'none', 'scale-down'];
+    const shapeList = ['square', 'round', 'circle'];
+    
+    return {
+      fitList,
+      shapeList
+    }
+  }
+}
+</script>
+
+<style scoped>
+.container {
+  padding: 20px;
+}
+
+h1 {
+  font-size: 28px;
+  margin-bottom: 24px;
+  color: #0052d9;
+}
+
+.section {
+  margin-bottom: 32px;
+}
+
+h2 {
+  font-size: 20px;
+  margin-bottom: 16px;
+  color: #333;
+}
+
+.example-block {
+  margin-bottom: 12px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px;
+}
+
+.code-block {
+  background-color: #f5f5f5;
+  padding: 12px;
+  border-radius: 4px;
+  font-family: monospace;
+}
+
+pre {
+  margin: 0;
+  white-space: pre-wrap;
+}
+
+code {
+  color: #333;
+}
+
+.image-fit-container,
+.image-shape-container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px;
+}
+
+.image-fit-item,
+.image-shape-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+}
+
+.image-fit-text,
+.image-shape-text {
+  font-size: 14px;
+  color: #666;
+}
+</style> 

package/src/views/TdesignImageViewer.vue

@@ -0,0 +1,199 @@
+<template>
+  <div class="container">
+    <h1>TDesign 图片查看器组件示例</h1>
+    
+    <div class="section">
+      <h2>基础用法</h2>
+      <div class="example-block">
+        <t-image-viewer
+          :images="baseImages"
+          :default-visible="false"
+          trigger-text="查看图片"
+        />
+      </div>
+      <div class="code-block">
+        <pre><code>&lt;t-image-viewer
+  :images="images"
+  :default-visible="false"
+  trigger-text="查看图片"
+/&gt;</code></pre>
+      </div>
+    </div>
+    
+    <div class="section">
+      <h2>自定义触发元素</h2>
+      <div class="example-block">
+        <t-image-viewer :images="baseImages">
+          <t-button theme="primary" variant="outline">自定义触发按钮</t-button>
+        </t-image-viewer>
+      </div>
+      <div class="code-block">
+        <pre><code>&lt;t-image-viewer :images="images"&gt;
+  &lt;t-button theme="primary" variant="outline"&gt;自定义触发按钮&lt;/t-button&gt;
+&lt;/t-image-viewer&gt;</code></pre>
+      </div>
+    </div>
+    
+    <div class="section">
+      <h2>以特定图片打开</h2>
+      <div class="example-block">
+        <t-image-viewer
+          :images="baseImages"
+          :default-index="2"
+          trigger-text="从第3张图片开始查看"
+        />
+      </div>
+      <div class="code-block">
+        <pre><code>&lt;t-image-viewer
+  :images="images"
+  :default-index="2"
+  trigger-text="从第3张图片开始查看"
+/&gt;</code></pre>
+      </div>
+    </div>
+    
+    <div class="section">
+      <h2>简洁模式</h2>
+      <div class="example-block">
+        <t-image-viewer
+          :images="baseImages"
+          mode="simple"
+          trigger-text="简洁模式查看图片"
+        />
+      </div>
+      <div class="code-block">
+        <pre><code>&lt;t-image-viewer
+  :images="images"
+  mode="simple"
+  trigger-text="简洁模式查看图片"
+/&gt;</code></pre>
+      </div>
+    </div>
+    
+    <div class="section">
+      <h2>拖拽调整</h2>
+      <div class="example-block">
+        <t-image-viewer
+          :images="baseImages"
+          :draggable="true"
+          trigger-text="支持拖拽调整位置"
+        />
+      </div>
+      <div class="code-block">
+        <pre><code>&lt;t-image-viewer
+  :images="images"
+  :draggable="true"
+  trigger-text="支持拖拽调整位置"
+/&gt;</code></pre>
+      </div>
+    </div>
+    
+    <div class="section">
+      <h2>使用受控属性</h2>
+      <div class="example-block">
+        <div style="margin-bottom: 16px;">
+          <t-button @click="visible = true">打开图片查看器</t-button>
+        </div>
+        <t-image-viewer
+          v-model:visible="visible"
+          :images="baseImages"
+        />
+      </div>
+      <div class="code-block">
+        <pre><code>&lt;t-button @click="visible = true"&gt;打开图片查看器&lt;/t-button&gt;
+
+&lt;t-image-viewer
+  v-model:visible="visible"
+  :images="images"
+/&gt;</code></pre>
+      </div>
+    </div>
+    
+    <div class="section">
+      <h2>自定义标题和无遮罩</h2>
+      <div class="example-block">
+        <t-image-viewer
+          :images="baseImages"
+          :show-overlay="false"
+          title="自定义标题"
+          trigger-text="无遮罩和自定义标题"
+        />
+      </div>
+      <div class="code-block">
+        <pre><code>&lt;t-image-viewer
+  :images="images"
+  :show-overlay="false"
+  title="自定义标题"
+  trigger-text="无遮罩和自定义标题"
+/&gt;</code></pre>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { ref } from 'vue';
+
+export default {
+  name: 'TdesignImageViewer',
+  setup() {
+    const visible = ref(false);
+    
+    // 示例图片数组
+    const baseImages = [
+      'https://tdesign.tencent.com/vue-next/assets/image1.jpg',
+      'https://tdesign.tencent.com/vue-next/assets/image2.jpg',
+      'https://tdesign.tencent.com/vue-next/assets/image3.jpg',
+      'https://tdesign.tencent.com/vue-next/assets/image4.jpg',
+      'https://tdesign.tencent.com/vue-next/assets/image5.jpg'
+    ];
+    
+    return {
+      visible,
+      baseImages
+    }
+  }
+}
+</script>
+
+<style scoped>
+.container {
+  padding: 20px;
+}
+
+h1 {
+  font-size: 28px;
+  margin-bottom: 24px;
+  color: #0052d9;
+}
+
+.section {
+  margin-bottom: 32px;
+}
+
+h2 {
+  font-size: 20px;
+  margin-bottom: 16px;
+  color: #333;
+}
+
+.example-block {
+  margin-bottom: 12px;
+}
+
+.code-block {
+  background-color: #f5f5f5;
+  padding: 12px;
+  border-radius: 4px;
+  font-family: monospace;
+}
+
+pre {
+  margin: 0;
+  white-space: pre-wrap;
+}
+
+code {
+  color: #333;
+}
+</style> 

package/src/views/TdesignInput.vue

@@ -0,0 +1,253 @@
+<template>
+  <div class="tdesign-input-demo">
+    <h2>TDesign 输入框示例</h2>
+    
+    <div class="section">
+      <h3>基础输入框</h3>
+      <div class="input-row">
+        <ebiz-tdesign-input placeholder="请输入内容" />
+      </div>
+    </div>
+    
+    <div class="section">
+      <h3>不同尺寸</h3>
+      <div class="input-row">
+        <ebiz-tdesign-input placeholder="小尺寸" size="small" />
+        <ebiz-tdesign-input placeholder="中尺寸" size="medium" />
+        <ebiz-tdesign-input placeholder="大尺寸" size="large" />
+      </div>
+    </div>
+    
+    <div class="section">
+      <h3>不同状态</h3>
+      <div class="input-row">
+        <ebiz-tdesign-input placeholder="默认状态" />
+        <ebiz-tdesign-input placeholder="禁用状态" disabled />
+        <ebiz-tdesign-input placeholder="只读状态" readonly />
+      </div>
+    </div>
+    
+    <div class="section">
+      <h3>带清除按钮的输入框</h3>
+      <div class="input-row">
+        <ebiz-tdesign-input placeholder="可清除内容" clearable />
+      </div>
+    </div>
+    
+    <div class="section">
+      <h3>带前缀和后缀的输入框</h3>
+      <div class="input-row">
+        <ebiz-tdesign-input placeholder="带前缀标签">
+          <template #label>
+            <span>账号：</span>
+          </template>
+        </ebiz-tdesign-input>
+        
+        <ebiz-tdesign-input placeholder="带后缀标签">
+          <template #suffix>
+            <span>元</span>
+          </template>
+        </ebiz-tdesign-input>
+      </div>
+    </div>
+    
+    <div class="section">
+      <h3>带前缀和后缀图标的输入框</h3>
+      <div class="input-row">
+        <ebiz-tdesign-input placeholder="带前缀图标">
+          <template #prefixIcon>
+            <ebiz-tdesign-icon name="search" />
+          </template>
+        </ebiz-tdesign-input>
+        
+        <ebiz-tdesign-input placeholder="带后缀图标">
+          <template #suffixIcon>
+            <ebiz-tdesign-icon name="lock-on" />
+          </template>
+        </ebiz-tdesign-input>
+      </div>
+    </div>
+    
+    <div class="section">
+      <h3>不同类型的输入框</h3>
+      <div class="input-row">
+        <ebiz-tdesign-input placeholder="文本输入框" type="text" />
+        <ebiz-tdesign-input placeholder="数字输入框" type="number" />
+        <ebiz-tdesign-input placeholder="密码输入框" type="password" />
+        <ebiz-tdesign-input placeholder="URL输入框" type="url" />
+      </div>
+    </div>
+    
+    <div class="section">
+      <h3>带字数限制的输入框</h3>
+      <div class="input-row">
+        <ebiz-tdesign-input 
+          placeholder="最多输入20个字符" 
+          maxlength="20" 
+          show-limit-number
+        />
+      </div>
+    </div>
+    
+    <div class="section">
+      <h3>带状态提示的输入框</h3>
+      <div class="input-row">
+        <ebiz-tdesign-input 
+          placeholder="成功状态" 
+          status="success" 
+          tips="验证通过" 
+        />
+        
+        <ebiz-tdesign-input 
+          placeholder="警告状态" 
+          status="warning" 
+          tips="请注意格式" 
+        />
+        
+        <ebiz-tdesign-input 
+          placeholder="错误状态" 
+          status="error" 
+          tips="输入有误，请重新输入" 
+        />
+      </div>
+    </div>
+    
+    <div class="section">
+      <h3>对齐方式</h3>
+      <div class="input-row">
+        <ebiz-tdesign-input placeholder="左对齐" align="left" />
+        <ebiz-tdesign-input placeholder="居中对齐" align="center" />
+        <ebiz-tdesign-input placeholder="右对齐" align="right" />
+      </div>
+    </div>
+    
+    <div class="section">
+      <h3>事件处理</h3>
+      <div class="input-row">
+        <ebiz-tdesign-input 
+          placeholder="监听输入与焦点事件" 
+          @input="handleInput"
+          @focus="handleFocus"
+          @blur="handleBlur"
+          @enter="handleEnter"
+        />
+      </div>
+      <div v-if="inputValue" class="event-output">
+        当前输入值: {{ inputValue }}
+      </div>
+      <div v-if="focusState" class="event-output focus">
+        输入框获得焦点
+      </div>
+      <div v-if="blurState" class="event-output blur">
+        输入框失去焦点
+      </div>
+      <div v-if="enterState" class="event-output enter">
+        按下回车键，输入值: {{ enterValue }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { EbizTdesignInput, EbizTdesignIcon } from '../index.js'
+
+export default {
+  name: 'TdesignInputDemo',
+  components: {
+    EbizTdesignInput,
+    EbizTdesignIcon
+  },
+  data() {
+    return {
+      inputValue: '',
+      focusState: false,
+      blurState: false,
+      enterState: false,
+      enterValue: ''
+    }
+  },
+  methods: {
+    handleInput(value) {
+      this.inputValue = value;
+      this.blurState = false;
+    },
+    handleFocus() {
+      this.focusState = true;
+      this.blurState = false;
+    },
+    handleBlur() {
+      this.blurState = true;
+      this.focusState = false;
+    },
+    handleEnter(value) {
+      this.enterState = true;
+      this.enterValue = value;
+      // 3秒后自动清除状态
+      setTimeout(() => {
+        this.enterState = false;
+      }, 3000);
+    }
+  }
+}
+</script>
+
+<style scoped>
+.tdesign-input-demo {
+  padding: 20px;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.section {
+  margin-bottom: 30px;
+  border-bottom: 1px solid #eee;
+  padding-bottom: 20px;
+}
+
+h2 {
+  margin-bottom: 20px;
+  font-size: 24px;
+  color: #0052d9;
+}
+
+h3 {
+  margin-bottom: 12px;
+  font-size: 18px;
+  color: #333;
+}
+
+.input-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+  margin-bottom: 10px;
+}
+
+.input-row > * {
+  min-width: 240px;
+  max-width: 100%;
+}
+
+.event-output {
+  margin-top: 10px;
+  padding: 8px;
+  background-color: #f5f5f5;
+  border-radius: 4px;
+  font-size: 14px;
+}
+
+.focus {
+  background-color: #e6f7ff;
+  color: #1890ff;
+}
+
+.blur {
+  background-color: #f6ffed;
+  color: #52c41a;
+}
+
+.enter {
+  background-color: #fff7e6;
+  color: #fa8c16;
+}
+</style>