customer-icon.vue 1.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657
  1. <template>
  2. <!--本地 icon 资源, uniapp 打包到 app 仅支持标签 image, 打包小程序和 H5 均可支持标签 img -->
  3. <div class="common-icon-container">
  4. <image
  5. v-if="isApp"
  6. class="common-icon"
  7. :src="props.src"
  8. :style="{ width: props.width, height: props.height }"
  9. />
  10. <img
  11. v-else
  12. class="common-icon"
  13. :src="props.src"
  14. :style="{ width: props.width, height: props.height }"
  15. >
  16. </div>
  17. </template>
  18. <script lang="ts">
  19. import { isApp } from '../utils/env';
  20. interface Props {
  21. src: string;
  22. width?: string;
  23. height?: string;
  24. }
  25. export default {
  26. props: {
  27. src: {
  28. type: String,
  29. default: '',
  30. },
  31. width: {
  32. type: String,
  33. default: '16px',
  34. },
  35. height: {
  36. type: String,
  37. default: '16px',
  38. },
  39. },
  40. setup(props: Props) {
  41. return {
  42. props,
  43. isApp,
  44. };
  45. },
  46. };
  47. </script>
  48. <style lang="scss" scoped>
  49. .common-icon-container {
  50. display: flex;
  51. justify-content: center;
  52. align-items: center;
  53. }
  54. </style>