@ebiz/designer-components 0.0.18-beta.2 → 0.0.18-beta.3

package/src/views/TdesignImage.vue

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