uni-icons.uvue 1.9 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091
  1. <template>
  2. <text class="uni-icons" :style="styleObj">
  3. <slot>{{unicode}}</slot>
  4. </text>
  5. </template>
  6. <script>
  7. import { fontData, IconsDataItem } from './uniicons_file'
  8. /**
  9. * Icons 图标
  10. * @description 用于展示 icon 图标
  11. * @tutorial https://ext.dcloud.net.cn/plugin?id=28
  12. * @property {Number} size 图标大小
  13. * @property {String} type 图标图案,参考示例
  14. * @property {String} color 图标颜色
  15. * @property {String} customPrefix 自定义图标
  16. * @event {Function} click 点击 Icon 触发事件
  17. */
  18. export default {
  19. name: "uni-icons",
  20. props: {
  21. type: {
  22. type: String,
  23. default: ''
  24. },
  25. color: {
  26. type: String,
  27. default: '#333333'
  28. },
  29. size: {
  30. type: Object,
  31. default: 16
  32. },
  33. fontFamily: {
  34. type: String,
  35. default: ''
  36. }
  37. },
  38. data() {
  39. return {};
  40. },
  41. computed: {
  42. unicode() : string {
  43. let codes = fontData.find((item : IconsDataItem) : boolean => { return item.font_class == this.type })
  44. if (codes !== null) {
  45. return codes.unicode
  46. }
  47. return ''
  48. },
  49. iconSize() : string {
  50. const size = this.size
  51. if (typeof size == 'string') {
  52. const reg = /^[0-9]*$/g
  53. return reg.test(size as string) ? '' + size + 'px' : '' + size;
  54. // return '' + this.size
  55. }
  56. return this.getFontSize(size as number)
  57. },
  58. styleObj() : UTSJSONObject {
  59. if (this.fontFamily !== '') {
  60. return { color: this.color, fontSize: this.iconSize, fontFamily: this.fontFamily }
  61. }
  62. return { color: this.color, fontSize: this.iconSize }
  63. }
  64. },
  65. created() { },
  66. methods: {
  67. /**
  68. * 字体大小
  69. */
  70. getFontSize(size : number) : string {
  71. return size + 'px';
  72. },
  73. },
  74. }
  75. </script>
  76. <style scoped>
  77. @font-face {
  78. font-family: UniIconsFontFamily;
  79. src: url('./uniicons.ttf');
  80. }
  81. .uni-icons {
  82. font-family: UniIconsFontFamily;
  83. font-size: 18px;
  84. font-style: normal;
  85. color: #333;
  86. }
  87. </style>