mm-icon.vue 943 B

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253
  1. <!-- icon 组件 -->
  2. <script>
  3. export default {
  4. name: 'MmIcon',
  5. props: {
  6. type: {
  7. type: String,
  8. required: true
  9. },
  10. size: {
  11. type: Number,
  12. default: 16
  13. }
  14. },
  15. methods: {
  16. getIconCls() {
  17. return `icon-${this.type}`
  18. },
  19. getIconStyle() {
  20. return { fontSize: this.size + 'px' }
  21. },
  22. onClick(e) {
  23. this.$emit('click', e)
  24. }
  25. },
  26. render() {
  27. const Icon = (
  28. <i
  29. onClick={this.onClick}
  30. class={`iconfont ${this.getIconCls()}`}
  31. style={this.getIconStyle()}
  32. />
  33. )
  34. return Icon
  35. }
  36. }
  37. </script>
  38. <style lang="less">
  39. .iconfont {
  40. display: inline-block;
  41. font-style: normal;
  42. font-weight: normal;
  43. font-variant: normal;
  44. line-height: 1;
  45. vertical-align: baseline;
  46. text-transform: none;
  47. speak: none;
  48. /* Better Font Rendering =========== */
  49. -webkit-font-smoothing: antialiased;
  50. -moz-osx-font-smoothing: grayscale;
  51. }
  52. </style>