#

whycq

2023-10-04 d78a337df4af502f6e886dd4cb1533f2ec02843c

 uni_modules/uni-icons/components/uni-icons/uni-icons.vue

New file
@@ -0,0 +1,96 @@
<template>
   <!-- #ifdef APP-NVUE -->
   <text :style="{ color: color, 'font-size': iconSize }" class="uni-icons" @click="_onClick">{{unicode}}</text>
   <!-- #endif -->
   <!-- #ifndef APP-NVUE -->
   <text :style="{ color: color, 'font-size': iconSize }" class="uni-icons" :class="['uniui-'+type,customPrefix,customPrefix?type:'']" @click="_onClick"></text>
   <!-- #endif -->
</template>

<script>
   import icons from './icons.js';
   const getVal = (val) => {
      const reg = /^[0-9]*$/g
      return (typeof val === 'number' ||　reg.test(val) )? val + 'px' : val;
   } 
   // #ifdef APP-NVUE
   var domModule = weex.requireModule('dom');
   import iconUrl from './uniicons.ttf'
   domModule.addRule('fontFace', {
      'fontFamily': "uniicons",
      'src': "url('"+iconUrl+"')"
   });
   // #endif

   /**
    * Icons 图标
    * @description 用于展示 icons 图标
    * @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: 'UniIcons',
      emits:['click'],
      props: {
         type: {
            type: String,
            default: ''
         },
         color: {
            type: String,
            default: '#333333'
         },
         size: {
            type: [Number, String],
            default: 16
         },
         customPrefix:{
            type: String,
            default: ''
         }
      },
      data() {
         return {
            icons: icons.glyphs
         }
      },
      computed:{
         unicode(){
            let code = this.icons.find(v=>v.font_class === this.type)
            if(code){
               return unescape(`%u${code.unicode}`)
            }
            return ''
         },
         iconSize(){
            return getVal(this.size)
         }
      },
      methods: {
         _onClick() {
            this.$emit('click')
         }
      }
   }
</script>

<style lang="scss">
   /* #ifndef APP-NVUE */
   @import './uniicons.css';
   @font-face {
      font-family: uniicons;
      src: url('./uniicons.ttf') format('truetype');
   }

   /* #endif */
   .uni-icons {
      font-family: uniicons;
      text-decoration: none;
      text-align: center;
   }

</style>