OmniCard/mpuniapp/pages/component/view/view.uvue

<template>
  <page-head title="view"></page-head>
  <scroll-view style="flex: 1">
    <view class="uni-padding-wrap uni-common-mt">
      <!-- view样式大合集 -->
      <text class="uni-title-text">view样式大合集</text>
      <view class="styled-view-row">
        <view class="styled-view">
          <text class="demo-text">普通view</text>
        </view>
        <view class="styled-view" flatten>
          <text class="demo-text" flatten>拍平view</text>
        </view>
      </view>

      <text class="uni-title-text">自定义组件：右边拍平</text>
      <view class="styled-view-row">
        <child></child>
        <child flatten></child>
      </view>

      <text class="uni-title-text uni-common-mt">Hover 点击态效果</text>
      <view id="view" class="main" :hover-class="data.hover_class ? 'is-parent-hover' : 'none'">
        <view id="view-child1" class="test-view" :class="isDarkMode ? 'theme-dark' : 'theme-light'" :hover-class="data.hover_class ? 'is-hover' : 'none'" :hover-stop-propagation="data.stop_propagation"
          :hover-start-time="data.start_time" :hover-stay-time="data.stay_time">
        </view>
      </view>

      <view class="content">
        <boolean-data :defaultValue="false" title="是否指定按下去的样式类" @change="change_hover_class_boolean"></boolean-data>
        <boolean-data :defaultValue="false" title="是否阻止本节点的祖先节点出现点击态"
          @change="change_stop_propagation_boolean"></boolean-data>
        <enum-data :items="data.start_time_enum" title="按住后多久出现点击态" @change="radio_change_start_time_enum"></enum-data>
        <enum-data :items="data.stay_time_enum" title="手指松开后点击态保留时间" @change="radio_change_stay_time_enum"></enum-data>
      </view>

      <!-- #ifdef VUE3-VAPOR -->
      <navigator url="/pages/template/4050/4050">
        <button style="margin:20px;">组件性能测试</button>
      </navigator>
      <!-- #endif -->
    </view>
  </scroll-view>

</template>
<script setup lang="uts">
  import { ItemType } from '@/components/enum-data/enum-data-types'
  import { state } from '@/store/index.uts'
  import Child from './child.uvue'

  type DataType = {
    hover_class: boolean;
    stop_propagation: boolean;
    start_time: number;
    stay_time: number;
    start_time_enum: ItemType[];
    stay_time_enum: ItemType[];
  }

  // 使用reactive解决ref数据在自动化测试中无法访问
  const data = reactive({
    hover_class: false,
    stop_propagation: false,
    start_time: 50,
    stay_time: 400,
    start_time_enum: [{ "value": 50, "name": "50毫秒" }, { "value": 200, "name": "200毫秒" }],
    stay_time_enum: [{ "value": 400, "name": "400毫秒" }, { "value": 200, "name": "200毫秒" }]
  } as DataType)

  const isDarkMode = computed((): boolean => {
    return state.isDarkMode
  })

  const change_hover_class_boolean = (checked: boolean) => {
    data.hover_class = checked
  }

  const change_stop_propagation_boolean = (checked: boolean) => {
    data.stop_propagation = checked
  }

  const radio_change_start_time_enum = (time: number) => {
    data.start_time = time
  }

  const radio_change_stay_time_enum = (time: number) => {
    data.stay_time = time
  }

  defineExpose({
    data
  })
</script>

<style>
  .styled-view-row {
    flex-direction: row;
    background: #fff;
    justify-content: space-around;
    height: 120px;
    align-items: center;
  }

  /* view样式大合集 */
  .styled-view {
    width: 80px;
    height: 80px;
    margin: 5px;
    padding: 5px;
    border: 2px solid #007aff;
    border-radius: 8px;
    background-color: #f0f8ff;
    box-shadow: 0 2px 4px rgba(0, 122, 255, 0.2);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0.95;
    position: relative;
    transform: rotate(45deg);
  }

  .demo-text {
    font-size: 12px;
    color: #007aff;
    font-weight: 500;
  }

  .main {
    padding: 5px 0;
    flex-direction: row;
    justify-content: center;
  }

  .test-view {
    height: 200px;
    width: 200px;
    --view-child1-hover-bg: #179b16;
    background-color: var(--list-background-color,#ffffff);
  }

  .is-hover {
    background-color: var(--view-child1-hover-bg, #179b16);
  }

  .is-parent-hover {
    background-color: #aa0000;
  }

</style>