OmniCard/mpuniapp/pages/CSS/text/letter-spacing.uvue

<template>
  <!-- #ifdef APP && !VUE3-VAPOR -->
  <scroll-view style="flex: 1">
  <!-- #endif -->
    <template v-if="autoTestData.begin">
      <view>
        <text id="testText"
          :style="`letter-spacing:${letterSpacing_mix}px;`">
          uni-app 是一个使用 Vue.js
          开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、鸿蒙Next、Web（响应式）、以及各种小程序（微信/支付宝/百度/抖音/飞书/QQ/快手/钉钉/淘宝/京东/小红书）、快应用、鸿蒙元服务等多个平台。</text>
        <view style="flex-direction: row;">
          <button @click="plusLetterSpacing">+字宽</button>
          <button @click="minusLetterSpacing">-字宽</button>
        </view>
      </view>
    </template>
    <view style="flex-grow: 1;">
      <view class="box">
        <text class="common">letter-spacing</text>
        <text class="common" style="letter-spacing: 5px;">letter-spacing: 5px</text>
        <text class="common" style="letter-spacing: -2px;">letter-spacing: -2px</text>
        <text class="common" style="letter-spacing: 4rpx;">letter-spacing: 4rpx</text>
      </view>
      <text class="uni-title-text">拍平</text>
      <view class="box">
        <text class="common">letter-spacing</text>
        <text class="common" style="letter-spacing: 5px;" flatten>letter-spacing: 5px</text>
        <text class="common" style="letter-spacing: -2px;" flatten>letter-spacing: -2px</text>
        <text class="common" style="letter-spacing: 4rpx;" flatten>letter-spacing: 4rpx</text>
      </view>

      <view class="uni-common-mt">
        <text class="uni-title-text">setProperty 设置与 getPropertyValue 获取</text>
      </view>

      <view class="common-box">
        <!-- 普通版本 -->
        <view class="uni-common-mt">
          <text class="uni-title-text">letter-spacing</text>
          <text class="uni-info">设置值: {{data.letterSpacing}}</text>
          <text class="uni-info">获取值: {{data.letterSpacingActual}}</text>
          <view class="test-box">
            <text ref="textRef" class="common-text" :style="{ letterSpacing: data.letterSpacing }">当前 letter-spacing: {{data.letterSpacing}}</text>
          </view>
        </view>

        <!-- 拍平版本 -->
        <view class="uni-common-mt">
          <text class="uni-title-text">拍平</text>
          <text class="uni-info">设置值: {{data.letterSpacing}}</text>
          <text class="uni-info">获取值: {{data.letterSpacingActualFlat}}</text>
          <view class="test-box">
            <text ref="textRefFlat" class="common-text" :style="{ letterSpacing: data.letterSpacing }" flatten>当前 letter-spacing: {{data.letterSpacing}}</text>
          </view>
        </view>
      </view>

      <view class="uni-common-mt uni-common-mb">
          <text class="uni-tips">第一个枚举值，'' (空字符串) - 空值情况</text>
          <enum-data :items="letterSpacingEnum" title="letter-spacing 枚举值" @change="radioChangeLetterSpacing" :compact="true"></enum-data>
          <input-data :defaultValue="data.letterSpacing" title="letter-spacing 自定义值" type="text" @confirm="inputChangeLetterSpacing"></input-data>
      </view>
    </view>
  <!-- #ifdef APP && !VUE3-VAPOR -->
  </scroll-view>
  <!-- #endif -->
</template>

<script setup lang="uts">
	import { ItemType } from '@/components/enum-data/enum-data-types'

	const letterSpacingEnum: ItemType[] = [
		{ value: 0, name: '' },
		{ value: 1, name: '0' },
		{ value: 2, name: '0px' },
		{ value: 3, name: '-2px' },
		{ value: 4, name: '2px' },
		{ value: 5, name: '5px' },
		{ value: 6, name: '10px' },
		{ value: 7, name: '2rpx' },
		{ value: 8, name: '10rpx' }
	]

	const data = reactive({
		letterSpacing: '0px',
		letterSpacingActual: '',
		letterSpacingActualFlat: ''
	})
	const letterSpacing_mix = ref(1)
	const textRef = ref(null as UniTextElement | null)
	const textRefFlat = ref(null as UniTextElement | null)

	const getPropertyValues = () => {
		data.letterSpacingActual = textRef.value?.style.getPropertyValue('letter-spacing') ?? ''
		data.letterSpacingActualFlat = textRefFlat.value?.style.getPropertyValue('letter-spacing') ?? ''
	}


	const changeLetterSpacing = (value: string) => {
		data.letterSpacing = value
		textRef.value?.style.setProperty('letter-spacing', value)
		textRefFlat.value?.style.setProperty('letter-spacing', value)
		// 使用 nextTick 确保样式已应用后再获取值
		nextTick(() => {
			getPropertyValues()
		})
	}

	const radioChangeLetterSpacing = (index: number) => {
		const selectedItem = letterSpacingEnum.find((item): boolean => item.value === index)
		if (selectedItem != null) {
			changeLetterSpacing(selectedItem.name)
		}
	}

	const inputChangeLetterSpacing = (value: string) => {
		changeLetterSpacing(value)
	}

  /**
   * * * * * * * * * * * * * *
   * 自动化测试
   * * * * * * * * * * * * * *
   */
  type AutoTextData = {
    begin: boolean
  }
  const autoTestData = reactive<AutoTextData>({
    begin: false
  } as AutoTextData)

  function plusLetterSpacing() {
    letterSpacing_mix.value += 0.2
  }
  function minusLetterSpacing() {
    letterSpacing_mix.value -= 0.2
  }
  function getLetterSpacing() {
    const testText = uni.getElementById('testText')
    if (testText != null) {
      return parseFloat(testText.style.getPropertyValue('letter-spacing'))
    }
    return 0
  }

  defineExpose({
    autoTestData,
    getLetterSpacing,
    plusLetterSpacing,
    minusLetterSpacing,
    radioChangeLetterSpacing,
    data
  })
  /**
   * * * * * * * * * * * * * *
   * 自动化测试 END
   * * * * * * * * * * * * * *
   */

	onReady(() => {
		getPropertyValues()
	})
</script>

<style>
	.common {
		font-size: 20px;
	}
  .box{
    height: 110px;
    background-color: gray;
    justify-content: center;
    align-items: center;
  }
  .common-text{
    font-size: 14px;
  }

  .common-box{
    flex-direction: row;
    justify-content: space-around;
  }

  .test-box {
    width: 180px;
    height: 80px;
    background-color: gray;
    justify-content: center;
    align-items: center;
  }

</style>