upd(avatar): docs props

JihanLeo · Mar 30, 2021 · 21be302 · 21be302
1 parent 0dde459
commit 21be302
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 82 deletions.
diff --git a/src/docs/intro.md b/src/docs/intro.md
@@ -1,6 +1,6 @@
 # NutUI 3.0
 
-NutUI 是一套京东风格的 Vue 移动端组件库，开发和服务于移动Web界面的企业级产品。
+NutUI 是京东风格的 Vue 移动端组件库，开发和服务于移动Web界面的企业级产品。
 
 <div style="margin:30px 0;">
     <img src="https://img14.360buyimg.com/imagetools/jfs/t1/167902/2/8762/791358/603742d7E9b4275e3/e09d8f9a8bf4c0ef.png" width="150" alt="NutUI">

diff --git a/src/packages/avatar/demo.vue b/src/packages/avatar/demo.vue
@@ -1,31 +1,24 @@
 <template>
-  <div class="demo avatar-demo">
-    <h2>默认用法</h2>
-    <!-- <p>内置"small","normal","large"三种尺寸规格</p> -->
+  <div class="demo full">
+    <h2>默认用法 (内置"small","normal","large"三种尺寸规格)</h2>
     <nut-cell>
-      <nut-avatar
-        size="80"
-        bg-image="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"
-      >
-      </nut-avatar>
       <nut-avatar
         size="large"
-        bg-image="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"
+        src="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"
       >
       </nut-avatar>
       <nut-avatar
         size="normal"
-        bg-image="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"
+        src="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"
       >
       </nut-avatar>
       <nut-avatar
         size="small"
-        bg-image="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"
+        src="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"
       >
       </nut-avatar>
     </nut-cell>
     <h2>修改形状</h2>
-    <!-- <p>内置"small","normal","large"三种尺寸规格</p> -->
     <nut-cell>
       <nut-avatar shape="square"></nut-avatar>
       <nut-avatar shape="round"></nut-avatar>
@@ -37,17 +30,13 @@
     <h2>修改背景Icon</h2>
     <nut-cell>
       <nut-avatar
-        bg-icon="https://img30.360buyimg.com/uba/jfs/t1/84318/29/2102/10483/5d0704c1Eb767fa74/fc456b03fdd6cbab.png"
+        icon="https://img30.360buyimg.com/uba/jfs/t1/84318/29/2102/10483/5d0704c1Eb767fa74/fc456b03fdd6cbab.png"
       >
       </nut-avatar>
     </nut-cell>
     <h2>可以修改头像的内容</h2>
     <nut-cell>
-      <nut-avatar bg-icon>N</nut-avatar>
-    </nut-cell>
-    <h2>点击头像，触发事件</h2>
-    <nut-cell>
-      <nut-avatar @active-avatar="activeAvatar"></nut-avatar>
+      <nut-avatar icon>N</nut-avatar>
     </nut-cell>
   </div>
 </template>
@@ -57,26 +46,14 @@ const { createDemo } = createComponent('avatar');
 export default createDemo({
   props: {},
   setup() {
-    const activeAvatar = (event: Event) => {
-      alert('点击了头像');
-    };
-    return {
-      activeAvatar
+    const onError = (e: Event) => {
+      console.error(e);
     };
+    return { onError };
   }
 });
 </script>
 <style lang="scss" scoped>
-#app {
-  .avatar-demo {
-    padding-left: 0;
-    padding-right: 0;
-    & > h2 {
-      padding: 0 25px;
-    }
-  }
-}
-
 .nut-cell {
   align-items: flex-end;
   border-radius: 0;

diff --git a/src/packages/avatar/doc.md b/src/packages/avatar/doc.md
@@ -5,14 +5,12 @@
 用来代表用户或事物，支持图片、图标或字符展示。
 
 ### 安装
-
 ``` javascript
 import { createApp } from 'vue';
 import { Avatar } from '@nutui/nutui';
 
 const app = createApp();
 app.use(Avatar);
-
 ```
 
 ## 代码示例
@@ -22,29 +20,19 @@ app.use(Avatar);
 内置 smal / normal / large 三种尺寸规格
 
 ``` html
-<nut-avatar
-  size="80"
-  bg-image="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"
+<nut-avatar size="large" src="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"
 ></nut-avatar>
-<nut-avatar
-  size="large"
-  bg-image="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"
+<nut-avatar size="normal" src="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"
 ></nut-avatar>
-<nut-avatar
-  size="normal"
-  bg-image="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"
-></nut-avatar>
-<nut-avatar
-  size="small"
-  bg-image="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"
+<nut-avatar size="small" src="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"
 ></nut-avatar>  
 ```
 
 ### 修改形状类型
 
 ``` html
-<nut-avatar  shape="square"></nut-avatar>
-<nut-avatar  shape="round"></nut-avatar>
+<nut-avatar shape="square"></nut-avatar>
+<nut-avatar shape="round"></nut-avatar>
 ```
 
 ### 修改背景色
@@ -56,36 +44,28 @@ app.use(Avatar);
 ### 修改背景icon
 
 ``` html
-<nut-avatar
-  bg-icon="https://img30.360buyimg.com/uba/jfs/t1/84318/29/2102/10483/5d0704c1Eb767fa74/fc456b03fdd6cbab.png"
-></nut-avatar>
+<nut-avatar icon="https://img30.360buyimg.com/uba/jfs/t1/84318/29/2102/10483/5d0704c1Eb767fa74/fc456b03fdd6cbab.png"></nut-avatar>
 ```
 
 ### 设置头像的文本内容
 
 ``` html
-<nut-avatar bg-icon>N</nut-avatar>
+<nut-avatar icon>N</nut-avatar>
 ```
 
 
-### 点击头像，触发事件
-
-``` html
-<nut-avatar @active-avatar="activeAvatar"></nut-avatar>
-```
-
 ### Prop
 
-| 字段     | 说明                                                                          | 类型   | 默认值 |
-|----------|-------------------------------------------------------------------------------|--------|--------|
-| bg-color | 设置头像背景色                                                                | String | #eee   |
-| size     | 设置头像的大小，提供三种：large/normal/small，支持直接输入数字                | String | normal |
-| shape    | 设置头像的形状，默认是圆形，可以设置为square方形                              | String | round  |
-| bg-image | 设置头像的背景图片                                                            | String | ''     |
-| bg-icon  | 设置头像的icon图标, 优先级低于bg-image,类似Icon组件的name属性，支持名称和链接 | String | ''     |
+| 字段     | 说明                                                                     | 类型   | 默认值 |
+|----------|--------------------------------------------------------------------------|--------|--------|
+| bg-color | 设置头像背景色                                                           | String | #eee   |
+| size     | 设置头像的大小，提供三种：large/normal/small，支持直接输入数字           | String | normal |
+| shape    | 设置头像的形状，默认是圆形，可以设置为square方形                         | String | round  |
+| src      | 设置头像的背景图片                                                       | String | ''     |
+| icon     | 设置头像的icon图标, 优先级低于src,类似Icon组件的name属性，支持名称和链接 | String | ''     |
 
 ### Events
 
-| 字段          | 说明             | 类型     | 回调参数 |
-|---------------|------------------|----------|----------|
-| active-avatar | 点击头像触发事件 | Function | event    |
+| 字段     | 说明                 | 类型     | 回调参数 |
+|----------|----------------------|----------|----------|
+| on-error | 加载图片失败触发事件 | Function | event    |
diff --git a/src/packages/avatar/index.vue b/src/packages/avatar/index.vue
@@ -24,19 +24,19 @@ export default create({
       type: String,
       default: '#eee'
     },
-    bgIcon: {
+    icon: {
       type: String,
       default: ''
     },
-    bgImage: {
+    src: {
       type: String,
       default: ''
     }
   },
-  emits: ['active-avatar'],
+  emits: ['on-error'],
   setup(props, { emit, slots }) {
-    const { size, shape, bgColor, bgIcon, bgImage } = toRefs(props);
-    const sizeValue = ['large', 'middle', 'small'];
+    const { size, shape, bgColor, icon, src } = toRefs(props);
+    const sizeValue = ['large', 'normal', 'small'];
     const classes = computed(() => {
       const prefixCls = componentName;
       return {
@@ -50,29 +50,30 @@ export default create({
       return {
         width: sizeValue.indexOf(size.value) > -1 ? '' : `${size.value}px`,
         height: sizeValue.indexOf(size.value) > -1 ? '' : `${size.value}px`,
-        backgroundImage: bgImage.value ? `url(${bgImage.value})` : null,
+        backgroundImage: src.value ? `url(${src.value})` : null,
         backgroundColor: `${bgColor.value}`
       };
     });
 
     const iconStyles = computed(() => {
-      return !!bgIcon.value && !bgImage.value ? bgIcon.value : '';
+      return !!icon.value && !src.value ? icon.value : '';
     });
 
     const isShowText = computed(() => {
       return slots.default;
     });
 
-    const activeAvatar = (e: Event) => {
-      emit('active-avatar', e);
+    let image = new Image();
+    image.src = props.src;
+    image.onerror = event => {
+      emit('on-error', event);
     };
 
     return {
       classes,
       styles,
       iconStyles,
-      isShowText,
-      activeAvatar
+      isShowText
     };
   }
 });