EveryLike/pages/component/view/view.uvue

<template>
  <page-head title="view"></page-head>
  <view id="view" class="main" :hover-class="hover_class ? 'is-parent-hover' : 'none'">
    <view id="view-child1" class="test-view" :class="isDarkMode ? 'theme-dark' : 'theme-light'" :hover-class="hover_class ? 'is-hover' : 'none'" :hover-stop-propagation="stop_propagation"
      :hover-start-time="start_time" :hover-stay-time="stay_time">
    </view>
  </view>
  <scroll-view style="flex: 1">
    <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="start_time_enum" title="按住后多久出现点击态" @change="radio_change_start_time_enum"></enum-data>
      <enum-data :items="stay_time_enum" title="手指松开后点击态保留时间" @change="radio_change_stay_time_enum"></enum-data>
    </view>
  </scroll-view>
</template>
<script>
  import { ItemType } from '@/components/enum-data/enum-data-types'
  import { state } from '@/store/index.uts'
  export default {
    data() {
      return {
        hover_class: false,
        stop_propagation: false,
        start_time: 50,
        stay_time: 400,
        start_time_enum: [{ "value": 50, "name": "50毫秒" }, { "value": 200, "name": "200毫秒" }] as ItemType[],
        stay_time_enum: [{ "value": 400, "name": "400毫秒" }, { "value": 200, "name": "200毫秒" }] as ItemType[]
      }
    },
    computed: {
      isDarkMode() : boolean {
        return state.isDarkMode
      }
    },
    methods: {
      change_hover_class_boolean(checked : boolean) {
        this.hover_class = checked
      },
      change_stop_propagation_boolean(checked : boolean) {
        this.stop_propagation = checked
      },
      radio_change_start_time_enum(time : number) {
        this.start_time = time
      },
      radio_change_stay_time_enum(time : number) {
        this.stay_time = time
      }
    }
  }
</script>

<style>
  .main {
    padding: 5px 0;
    flex-direction: row;
    justify-content: center;
  }
  .test-view {
    height: 200px;
    width: 200px;
    background-color: var(--list-background-color,#ffffff);
  }
  .is-hover {
    background-color: #179b16;
  }
  .is-parent-hover {
    background-color: #aa0000;
  }
</style>