@ebiz/designer-components 0.0.58 → 0.0.59

package/src/views/TdesignImageViewer.vue

@@ -1,199 +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;
-}
+<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>