Browse Source

upd: icon name 支持图片链接

richard1015 5 years ago
parent
commit
b8356c4211
4 changed files with 29 additions and 12 deletions
  1. 7 0
      src/packages/icon/demo.vue
  2. 1 0
      src/packages/icon/doc.md
  3. 6 0
      src/packages/icon/index.scss
  4. 15 12
      src/packages/icon/index.vue

+ 7 - 0
src/packages/icon/demo.vue

@@ -5,6 +5,13 @@
       <nut-icon name="dongdong"></nut-icon>
       <nut-icon name="JD"></nut-icon>
     </nut-cell>
+    <h2>图片链接</h2>
+    <nut-cell>
+      <nut-icon
+        size="40px"
+        name="https://img11.360buyimg.com/imagetools/jfs/t1/137646/13/7132/1648/5f4c748bE43da8ddd/a3f06d51dcae7b60.png"
+      ></nut-icon>
+    </nut-cell>
     <h2>图标颜色</h2>
     <nut-cell>
       <nut-icon name="dongdong" color="#fa2c19"></nut-icon>

+ 1 - 0
src/packages/icon/doc.md

@@ -24,6 +24,7 @@ app.use(Icon);
 ```html
 <nut-icon name="dongdong"></nut-icon>
 <nut-icon name="JD"></nut-icon>
+<nut-icon size="40px"  name="https://img11.360buyimg.com/imagetools/jfs/t1/137646/13/7132/1648/5f4c748bE43da8ddd/a3f06d51dcae7b60.png"></nut-icon>
 ```
 
 ### 图标颜色

+ 6 - 0
src/packages/icon/index.scss

@@ -4,4 +4,10 @@
   height: 20px;
   line-height: 20px;
   text-align: right;
+
+  &__img {
+    width: 20px;
+    height: 20px;
+    object-fit: contain;
+  }
 }

+ 15 - 12
src/packages/icon/index.vue

@@ -26,24 +26,27 @@ export default create({
       default: 'i'
     }
   },
-  components: {},
   emits: ['click'],
 
   setup(props, { emit, slots }) {
     const handleClick = (event: Event) => {
       emit('click', event);
     };
-
-    return () =>
-      h(
-        props.tag,
-        {
-          class: `${props.classPrefix} ${componentName}-${props.name}`,
-          style: { color: props.color, fontSize: props.size },
-          onClick: handleClick
-        },
-        slots.default?.()
-      );
+    const isImage = () => {
+      return props.name ? props.name.indexOf('/') !== -1 : false;
+    };
+    const styleOptions = {
+      class: `${props.classPrefix} ${componentName}-${props.name}`,
+      style: { color: props.color, fontSize: props.size },
+      onClick: handleClick
+    } as any;
+    if (isImage()) {
+      styleOptions.class = `${componentName}__img`;
+      styleOptions.src = props.name;
+      styleOptions.style['width'] = props.size;
+      styleOptions.style['height'] = props.size;
+    }
+    return () => h(isImage() ? 'img' : props.tag, styleOptions, slots.default?.());
   }
 });
 </script>