general-attribute.uvue

<template>
  <!-- #ifdef APP -->
  <scroll-view style="flex: 1">
    <!-- #endif -->
    <view>
      <page-head :title="title"></page-head>
      <view class="uni-padding-wrap uni-common-mt container">
        <view :id="generalId" :class="generalClass" :name="generalName" :title="generalTitle" :data-test="generalData" style="background-color: aqua" ref="general-target"> </view>
        <view class="btn uni-common-mt" @click="validateGeneralAttributes">
          <text class="btn-inner">{{ validateGeneralAttrText }}</text>
        </view>
        <view class="view-class" :hover-class="hoverClass" ref="view-target">
          <text class="text">按下 50 ms 后背景变红</text>
          <text class="text">抬起 400 ms 后背景恢复</text>
        </view>
        <view class="view-class" :hover-class="hoverClass" :hover-start-time="1000" :hover-stay-time="1000" ref="view-target">
          <text class="text">按下 1000 ms 后背景变红</text>
          <text class="text">抬起 1000 ms 后背景恢复</text>
        </view>
      </view>
    </view>
    <!-- #ifdef APP -->
  </scroll-view>
  <!-- #endif -->
</template>

<script lang="uts">
export default {
  data() {
    return {
      title: 'general-attribute',
      generalId: 'general-id',
      generalClass: 'general-class',
      generalName: 'general-name',
      generalTitle: 'general-title',
      generalData: 'general-data',
      validateGeneralAttrText: '验证基础属性',
      hoverClass: 'hover-class',
      validateViewAttrText: '验证 view 属性',
    }
  },
  methods: {
    validateGeneralAttributes() {
      const generalTarget = this.$refs.get('general-target') as INode
      const generalId = generalTarget.getAttribute('id')
      if (generalId != this.generalId) {
        this.validateGeneralAttrText = '基础属性 id 验证失败'
        return
      }
      const classList = generalTarget.ext['classList'] as string[]
      if (!classList.includes('general-class')) {
        this.validateGeneralAttrText = '基础属性 class 验证失败'
        return
      }
      const generalName = generalTarget.getAttribute('name')
      if (generalName != this.generalName) {
        this.validateGeneralAttrText = '基础属性 name 验证失败'
        return
      }
      const generalTitle = generalTarget.getAttribute('title')
      if (generalTitle != this.generalTitle) {
        this.validateGeneralAttrText = '基础属性 title 验证失败'
        return
      }
      const generalData = generalTarget.getAttribute('data-test')
      if (generalData != this.generalData) {
        this.validateGeneralAttrText = '基础属性 data-test 验证失败'
        return
      }
      this.validateGeneralAttrText = '基础属性验证成功'
    },
  },
}
</script>

<style>
.btn {
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #409eff;
  border-radius: 5px;
}
.btn-inner {
  color: #fff;
}
.general-class {
  margin: 20px 0 0 50px;
  width: 240px;
  height: 100px;
  background-color: antiquewhite;
}
.view-class {
  margin: 20px 0 0 50px;
  padding: 10px;
  width: 240px;
  height: 100px;
  background-color: antiquewhite;
}
.view-class .text {
  margin-top: 5px;
  text-align: center;
}
.hover-class {
  background-color: red;
}
</style>