@ebiz/designer-components 0.1.1 → 0.1.4

package/src/views/EbizAvatar.vue

@@ -1,224 +1,224 @@
-<template>
-  <div class="container">
-    <h1>EbizAvatar 头像组件示例</h1>
-    
-    <div class="section">
-      <h2>基础用法</h2>
-      <div class="example-block">
-        <ebiz-avatar content="用户" />
-      </div>
-      <div class="code-block">
-        <pre><code>&lt;ebiz-avatar content="用户" /&gt;</code></pre>
-      </div>
-    </div>
-    
-    <div class="section">
-      <h2>不同形状</h2>
-      <div class="example-block avatar-shape-container">
-        <div v-for="shape in shapeList" :key="shape" class="avatar-shape-item">
-          <ebiz-avatar
-            content="用户"
-            :shape="shape"
-          />
-          <div class="avatar-shape-text">shape: {{ shape }}</div>
-        </div>
-      </div>
-      <div class="code-block">
-        <pre><code>// 可选值: circle（默认）, round
-&lt;ebiz-avatar
-  content="用户"
-  shape="round"
-/&gt;</code></pre>
-      </div>
-    </div>
-    
-    <div class="section">
-      <h2>不同尺寸</h2>
-      <div class="example-block avatar-size-container">
-        <div v-for="size in sizeList" :key="size" class="avatar-size-item">
-          <ebiz-avatar
-            content="用户"
-            :size="size"
-          />
-          <div class="avatar-size-text">size: {{ size }}</div>
-        </div>
-      </div>
-      <div class="code-block">
-        <pre><code>// 可选值: small, medium（默认）, large
-&lt;ebiz-avatar
-  content="用户"
-  size="large"
-/&gt;</code></pre>
-      </div>
-    </div>
-    
-    <div class="section">
-      <h2>图片头像</h2>
-      <div class="example-block">
-        <ebiz-avatar
-          image="https://tdesign.tencent.com/vue-next/assets/image1.jpg"
-          alt="用户头像"
-        />
-      </div>
-      <div class="code-block">
-        <pre><code>&lt;ebiz-avatar
-  image="https://tdesign.tencent.com/vue-next/assets/image1.jpg"
-  alt="用户头像"
-/&gt;</code></pre>
-      </div>
-    </div>
-    
-    <div class="section">
-      <h2>自定义尺寸</h2>
-      <div class="example-block">
-        <ebiz-avatar
-          content="用户"
-          width="100px"
-          height="100px"
-        />
-      </div>
-      <div class="code-block">
-        <pre><code>&lt;ebiz-avatar
-  content="用户"
-  width="100px"
-  height="100px"
-/&gt;</code></pre>
-      </div>
-    </div>
-    
-    <div class="section">
-      <h2>带徽标的头像</h2>
-      <div class="example-block">
-        <ebiz-avatar
-          content="用户"
-          :badge-props="{ count: 5 }"
-        />
-      </div>
-      <div class="code-block">
-        <pre><code>&lt;ebiz-avatar
-  content="用户"
-  :badge-props="{ count: 5 }"
-/&gt;</code></pre>
-      </div>
-    </div>
-    
-    <div class="section">
-      <h2>图标头像</h2>
-      <div class="example-block">
-        <ebiz-avatar>
-          <template #icon>
-            <t-icon name="user" />
-          </template>
-        </ebiz-avatar>
-      </div>
-      <div class="code-block">
-        <pre><code>&lt;ebiz-avatar&gt;
-  &lt;template #icon&gt;
-    &lt;t-icon name="user" /&gt;
-  &lt;/template&gt;
-&lt;/ebiz-avatar&gt;</code></pre>
-      </div>
-    </div>
-    
-    <div class="section">
-      <h2>图片加载失败处理</h2>
-      <div class="example-block">
-        <ebiz-avatar
-          image="https://non-existent-image.jpg"
-          content="用户"
-          :hide-on-load-error="false"
-          @error="handleError"
-        />
-      </div>
-      <div class="code-block">
-        <pre><code>&lt;ebiz-avatar
-  image="https://non-existent-image.jpg"
-  content="用户"
-  :hide-on-load-error="false"
-  @error="handleError"
-/&gt;</code></pre>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import { EbizAvatar } from '../index.js'
-import { Icon as TIcon } from 'tdesign-vue-next'
-
-export default {
-  name: 'EbizAvatarDemo',
-  components: {
-    EbizAvatar,
-    TIcon
-  },
-  data() {
-    return {
-      shapeList: ['circle', 'round'],
-      sizeList: ['small', 'medium', 'large']
-    }
-  },
-  methods: {
-    handleError(context) {
-      console.log('图片加载失败', context)
-    }
-  }
-}
-</script>
-
-<style lang="less" scoped>
-.container {
-  padding: 20px;
-  
-  h1 {
-    margin-bottom: 20px;
-  }
-  
-  .section {
-    margin-bottom: 30px;
-    
-    h2 {
-      margin-bottom: 15px;
-    }
-    
-    .example-block {
-      margin-bottom: 15px;
-      padding: 20px;
-      border: 1px solid #eee;
-      border-radius: 4px;
-    }
-    
-    .code-block {
-      background-color: #f5f5f5;
-      padding: 15px;
-      border-radius: 4px;
-      
-      pre {
-        margin: 0;
-        white-space: pre-wrap;
-      }
-    }
-  }
-  
-  .avatar-shape-container,
-  .avatar-size-container {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 20px;
-  }
-  
-  .avatar-shape-item,
-  .avatar-size-item {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-  }
-  
-  .avatar-shape-text,
-  .avatar-size-text {
-    margin-top: 10px;
-    font-size: 14px;
-    color: #666;
-  }
-}
+<template>
+  <div class="container">
+    <h1>EbizAvatar 头像组件示例</h1>
+    
+    <div class="section">
+      <h2>基础用法</h2>
+      <div class="example-block">
+        <ebiz-avatar content="用户" />
+      </div>
+      <div class="code-block">
+        <pre><code>&lt;ebiz-avatar content="用户" /&gt;</code></pre>
+      </div>
+    </div>
+    
+    <div class="section">
+      <h2>不同形状</h2>
+      <div class="example-block avatar-shape-container">
+        <div v-for="shape in shapeList" :key="shape" class="avatar-shape-item">
+          <ebiz-avatar
+            content="用户"
+            :shape="shape"
+          />
+          <div class="avatar-shape-text">shape: {{ shape }}</div>
+        </div>
+      </div>
+      <div class="code-block">
+        <pre><code>// 可选值: circle（默认）, round
+&lt;ebiz-avatar
+  content="用户"
+  shape="round"
+/&gt;</code></pre>
+      </div>
+    </div>
+    
+    <div class="section">
+      <h2>不同尺寸</h2>
+      <div class="example-block avatar-size-container">
+        <div v-for="size in sizeList" :key="size" class="avatar-size-item">
+          <ebiz-avatar
+            content="用户"
+            :size="size"
+          />
+          <div class="avatar-size-text">size: {{ size }}</div>
+        </div>
+      </div>
+      <div class="code-block">
+        <pre><code>// 可选值: small, medium（默认）, large
+&lt;ebiz-avatar
+  content="用户"
+  size="large"
+/&gt;</code></pre>
+      </div>
+    </div>
+    
+    <div class="section">
+      <h2>图片头像</h2>
+      <div class="example-block">
+        <ebiz-avatar
+          image="https://tdesign.tencent.com/vue-next/assets/image1.jpg"
+          alt="用户头像"
+        />
+      </div>
+      <div class="code-block">
+        <pre><code>&lt;ebiz-avatar
+  image="https://tdesign.tencent.com/vue-next/assets/image1.jpg"
+  alt="用户头像"
+/&gt;</code></pre>
+      </div>
+    </div>
+    
+    <div class="section">
+      <h2>自定义尺寸</h2>
+      <div class="example-block">
+        <ebiz-avatar
+          content="用户"
+          width="100px"
+          height="100px"
+        />
+      </div>
+      <div class="code-block">
+        <pre><code>&lt;ebiz-avatar
+  content="用户"
+  width="100px"
+  height="100px"
+/&gt;</code></pre>
+      </div>
+    </div>
+    
+    <div class="section">
+      <h2>带徽标的头像</h2>
+      <div class="example-block">
+        <ebiz-avatar
+          content="用户"
+          :badge-props="{ count: 5 }"
+        />
+      </div>
+      <div class="code-block">
+        <pre><code>&lt;ebiz-avatar
+  content="用户"
+  :badge-props="{ count: 5 }"
+/&gt;</code></pre>
+      </div>
+    </div>
+    
+    <div class="section">
+      <h2>图标头像</h2>
+      <div class="example-block">
+        <ebiz-avatar>
+          <template #icon>
+            <t-icon name="user" />
+          </template>
+        </ebiz-avatar>
+      </div>
+      <div class="code-block">
+        <pre><code>&lt;ebiz-avatar&gt;
+  &lt;template #icon&gt;
+    &lt;t-icon name="user" /&gt;
+  &lt;/template&gt;
+&lt;/ebiz-avatar&gt;</code></pre>
+      </div>
+    </div>
+    
+    <div class="section">
+      <h2>图片加载失败处理</h2>
+      <div class="example-block">
+        <ebiz-avatar
+          image="https://non-existent-image.jpg"
+          content="用户"
+          :hide-on-load-error="false"
+          @error="handleError"
+        />
+      </div>
+      <div class="code-block">
+        <pre><code>&lt;ebiz-avatar
+  image="https://non-existent-image.jpg"
+  content="用户"
+  :hide-on-load-error="false"
+  @error="handleError"
+/&gt;</code></pre>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { EbizAvatar } from '../index.js'
+import { Icon as TIcon } from 'tdesign-vue-next'
+
+export default {
+  name: 'EbizAvatarDemo',
+  components: {
+    EbizAvatar,
+    TIcon
+  },
+  data() {
+    return {
+      shapeList: ['circle', 'round'],
+      sizeList: ['small', 'medium', 'large']
+    }
+  },
+  methods: {
+    handleError(context) {
+      console.log('图片加载失败', context)
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.container {
+  padding: 20px;
+  
+  h1 {
+    margin-bottom: 20px;
+  }
+  
+  .section {
+    margin-bottom: 30px;
+    
+    h2 {
+      margin-bottom: 15px;
+    }
+    
+    .example-block {
+      margin-bottom: 15px;
+      padding: 20px;
+      border: 1px solid #eee;
+      border-radius: 4px;
+    }
+    
+    .code-block {
+      background-color: #f5f5f5;
+      padding: 15px;
+      border-radius: 4px;
+      
+      pre {
+        margin: 0;
+        white-space: pre-wrap;
+      }
+    }
+  }
+  
+  .avatar-shape-container,
+  .avatar-size-container {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 20px;
+  }
+  
+  .avatar-shape-item,
+  .avatar-size-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+  
+  .avatar-shape-text,
+  .avatar-size-text {
+    margin-top: 10px;
+    font-size: 14px;
+    color: #666;
+  }
+}
 </style>