@aochuang/common 1.0.0 → 1.0.1

package/components/icon/icon.vue

@@ -0,0 +1,96 @@
+<script>
+export default {
+  name: 'UiIcon',
+  functional: true,
+  props: {
+    /**
+     * 除了支持font名称以外，还支持通过require方式引入的图片地址
+    */
+    name: {
+      type: String,
+      required: true
+    },
+    size: {
+      type: Number
+    },
+    color: {
+      type: String
+    }
+  },
+  render (h, context) {
+    const { props, data } = context
+    const style = {}
+    if (props.color) {
+      style.color = props.color
+    }
+    let nextClass = ['ui-icon']
+    const className = data.staticClass || data.class || (data.props ? data.props.class : null)
+    if (className) {
+      if (Array.isArray(className)) {
+        nextClass = nextClass.concat(className)
+      } else {
+        nextClass.push(className)
+      }
+    }
+    // 有后缀的就认为是url地址
+    if (/\.\w+$/.test(props.name)) {
+      nextClass = nextClass.concat(['ui-icon--image'])
+      style['background-image'] = `url(${props.name})`
+      if (props.size) {
+        style.width = props.size + 'px'
+        style.height = props.size + 'px'
+      }
+      return h('span', {
+        class: nextClass,
+        style,
+        attrs: context.data.attrs,
+        on: {
+          click (evt) {
+            if (context.listeners.click) {
+              context.listeners.click(evt)
+            }
+          }
+        }
+      })
+    } else {
+      if (props.size) {
+        style['font-size'] = props.size + 'px'
+      }
+      nextClass = nextClass.concat(['ui-icon--font', 'iconfont', `icon-${props.name}`])
+      return h('span', {
+        class: nextClass,
+        style,
+        attrs: context.data.attrs,
+        on: {
+          click (evt) {
+            if (context.listeners.click) {
+              context.listeners.click(evt)
+            }
+          }
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="less">
+@import './iconfont.css';
+.ui-icon.icon-loading{
+  display: inline-block;
+  animation: rotating 1s linear infinite;
+}
+.ui-icon--image {
+  display: inline-block;
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: 50% 50%;
+}
+@keyframes rotating{
+  0% {
+      transform: rotate(0);
+  }
+  100% {
+      transform: rotate(1turn);
+  }
+}
+</style>