uni-icons.vue 2.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110
  1. <template>
  2. <!-- #ifdef APP-NVUE -->
  3. <text :style="styleObj" class="uni-icons" @click="_onClick">{{unicode}}</text>
  4. <!-- #endif -->
  5. <!-- #ifndef APP-NVUE -->
  6. <text :style="styleObj" class="uni-icons" :class="['uniui-'+type,customPrefix,customPrefix?type:'']" @click="_onClick">
  7. <slot></slot>
  8. </text>
  9. <!-- #endif -->
  10. </template>
  11. <script>
  12. import { fontData } from './uniicons_file_vue.js';
  13. const getVal = (val) => {
  14. const reg = /^[0-9]*$/g
  15. return (typeof val === 'number' || reg.test(val)) ? val + 'px' : val;
  16. }
  17. // #ifdef APP-NVUE
  18. var domModule = weex.requireModule('dom');
  19. import iconUrl from './uniicons.ttf'
  20. domModule.addRule('fontFace', {
  21. 'fontFamily': "uniicons",
  22. 'src': "url('" + iconUrl + "')"
  23. });
  24. // #endif
  25. /**
  26. * Icons 图标
  27. * @description 用于展示 icons 图标
  28. * @tutorial https://ext.dcloud.net.cn/plugin?id=28
  29. * @property {Number} size 图标大小
  30. * @property {String} type 图标图案,参考示例
  31. * @property {String} color 图标颜色
  32. * @property {String} customPrefix 自定义图标
  33. * @event {Function} click 点击 Icon 触发事件
  34. */
  35. export default {
  36. name: 'UniIcons',
  37. emits: ['click'],
  38. props: {
  39. type: {
  40. type: String,
  41. default: ''
  42. },
  43. color: {
  44. type: String,
  45. default: '#333333'
  46. },
  47. size: {
  48. type: [Number, String],
  49. default: 16
  50. },
  51. customPrefix: {
  52. type: String,
  53. default: ''
  54. },
  55. fontFamily: {
  56. type: String,
  57. default: ''
  58. }
  59. },
  60. data() {
  61. return {
  62. icons: fontData
  63. }
  64. },
  65. computed: {
  66. unicode() {
  67. let code = this.icons.find(v => v.font_class === this.type)
  68. if (code) {
  69. return code.unicode
  70. }
  71. return ''
  72. },
  73. iconSize() {
  74. return getVal(this.size)
  75. },
  76. styleObj() {
  77. if (this.fontFamily !== '') {
  78. return `color: ${this.color}; font-size: ${this.iconSize}; font-family: ${this.fontFamily};`
  79. }
  80. return `color: ${this.color}; font-size: ${this.iconSize};`
  81. }
  82. },
  83. methods: {
  84. _onClick() {
  85. this.$emit('click')
  86. }
  87. }
  88. }
  89. </script>
  90. <style lang="scss">
  91. /* #ifndef APP-NVUE */
  92. @import './uniicons.css';
  93. @font-face {
  94. font-family: uniicons;
  95. src: url('./uniicons.ttf');
  96. }
  97. /* #endif */
  98. .uni-icons {
  99. font-family: uniicons;
  100. text-decoration: none;
  101. text-align: center;
  102. }
  103. </style>