Text.vue 801 B

12345678910111213141516171819202122232425262728293031323334
  1. <template>
  2. <view v-if="(allowChildNode || $slots.default) && !forceNoSlotWhenNestForMp" :id="id" :class="innerClass" :style="style" @click="onClick"><slot>{{ text }}</slot></view>
  3. <text v-else :id="id" :class="innerClass" :style="style" @click="onClick">{{ text }}</text>
  4. </template>
  5. <script lang="ts" setup>
  6. import { useText, type TextProps } from './Text';
  7. /**
  8. * 组件说明:文字封装,支持点击事件,颜色,阴影。
  9. */
  10. const props = withDefaults(defineProps<TextProps>(), {
  11. shadowColor: '#000',
  12. wrap: true,
  13. });
  14. const emit = defineEmits([ 'click' ]);
  15. const {
  16. id,
  17. style,
  18. measureTextWidth,
  19. onClick,
  20. } = useText(props, emit);
  21. defineExpose({
  22. measureTextWidth,
  23. })
  24. defineOptions({
  25. options: {
  26. virtualHost: true,
  27. styleIsolation: "shared",
  28. },
  29. });
  30. </script>