cuiqian2004
4 天以前 2af5f043b60c1f7ac38ecccc8f5bf44743134325
uni_modules/uni-icons/components/uni-icons/uni-icons.uvue
@@ -1,91 +1,91 @@
<template>
  <text class="uni-icons" :style="styleObj">
    <slot>{{unicode}}</slot>
  </text>
   <text class="uni-icons" :style="styleObj">
      <slot>{{unicode}}</slot>
   </text>
</template>
<script>
  import { fontData, IconsDataItem } from './uniicons_file'
   import { fontData, IconsDataItem } from './uniicons_file'
  /**
   * Icons 图标
   * @description 用于展示 icon 图标
   * @tutorial https://ext.dcloud.net.cn/plugin?id=28
   * @property {Number,String} size 图标大小
   * @property {String} type 图标图案,参考示例
   * @property {String} color 图标颜色
   * @property {String} customPrefix 自定义图标
   * @event {Function} click 点击 Icon 触发事件
   */
  export default {
    name: "uni-icons",
    props: {
      type: {
        type: String,
        default: ''
      },
      color: {
        type: String,
        default: '#333333'
      },
      size: {
   /**
    * Icons 图标
    * @description 用于展示 icon 图标
    * @tutorial https://ext.dcloud.net.cn/plugin?id=28
    * @property {Number} size 图标大小
    * @property {String} type 图标图案,参考示例
    * @property {String} color 图标颜色
    * @property {String} customPrefix 自定义图标
    * @event {Function} click 点击 Icon 触发事件
    */
   export default {
      name: "uni-icons",
      props: {
         type: {
            type: String,
            default: ''
         },
         color: {
            type: String,
            default: '#333333'
         },
         size: {
        type: [Number, String],
        default: 16
      },
      fontFamily: {
        type: String,
        default: ''
      }
    },
    data() {
      return {};
    },
    computed: {
      unicode() : string {
        let codes = fontData.find((item : IconsDataItem) : boolean => { return item.font_class == this.type })
        if (codes !== null) {
          return codes.unicode
        }
        return ''
      },
      iconSize() : string {
        const size = this.size
        if (typeof size == 'string') {
          const reg = /^[0-9]*$/g
          return reg.test(size as string) ? '' + size + 'px' : '' + size;
          // return '' + this.size
        }
        return this.getFontSize(size as number)
      },
      styleObj() : UTSJSONObject {
        if (this.fontFamily !== '') {
          return { color: this.color, fontSize: this.iconSize, fontFamily: this.fontFamily }
        }
        return { color: this.color, fontSize: this.iconSize }
      }
    },
    created() { },
    methods: {
      /**
       * 字体大小
       */
      getFontSize(size : number) : string {
        return size + 'px';
      },
    },
  }
         },
         fontFamily: {
            type: String,
            default: ''
         }
      },
      data() {
         return {};
      },
      computed: {
         unicode() : string {
            let codes = fontData.find((item : IconsDataItem) : boolean => { return item.font_class == this.type })
            if (codes !== null) {
               return codes.unicode
            }
            return ''
         },
         iconSize() : string {
            const size = this.size
            if (typeof size == 'string') {
              const reg = /^[0-9]*$/g
              return reg.test(size as string) ? '' + size + 'px' : '' + size;
              // return '' + this.size
            }
            return this.getFontSize(size as number)
         },
         styleObj() : UTSJSONObject {
            if (this.fontFamily !== '') {
               return { color: this.color, fontSize: this.iconSize, fontFamily: this.fontFamily }
            }
            return { color: this.color, fontSize: this.iconSize }
         }
      },
      created() { },
      methods: {
         /**
          * 字体大小
          */
         getFontSize(size : number) : string {
            return size + 'px';
         },
      },
   }
</script>
<style scoped>
  @font-face {
    font-family: UniIconsFontFamily;
    src: url('./uniicons.ttf');
  }
   @font-face {
      font-family: UniIconsFontFamily;
      src: url('./uniicons.ttf');
   }
  .uni-icons {
    font-family: UniIconsFontFamily;
    font-size: 18px;
    font-style: normal;
    color: #333;
  }
   .uni-icons {
      font-family: UniIconsFontFamily;
      font-size: 18px;
      font-style: normal;
      color: #333;
   }
</style>