general-attribute.uvue

<template>
  <!-- #ifdef APP -->
  <scroll-view style="flex: 1">
    <!-- #endif -->
    <view>
      <page-head :title="title"></page-head>
      <view class="uni-padding-wrap container">
        <view
          :id="generalId"
          :class="generalClass"
          :name="generalName"
          :title="generalTitle"
          :data-test="generalData"
          :style="generalStyle"
          ref="general-target"
        >
          <text>id: {{ generalId }}</text>
          <text>class: {{ generalClass }}</text>
          <text>name: {{ generalName }}</text>
          <text>title: {{ generalTitle }}</text>
          <text>data-test: {{ generalData }}</text>
          <text>style: {{ generalStyle }}</text>
        </view>
        <view
          class="btn btn-style uni-common-mt"
          @click="validateGeneralAttributes"
        >
          <text class="btn-inner">{{ validateGeneralAttrText }}</text>
        </view>
        <view class="btn btn-ref uni-common-mt" @click="changeHeight">
          <text class="btn-inner">{{changeHeightByRefText}}</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',
      generalStyle: 'background-color: aqua',
      validateGeneralAttrText: '验证基础属性',
      hoverClass: 'hover-class',
      validateViewAttrText: '验证 view 属性',
      changeHeightByRefText: '通过 ref 修改高度',
    }
  },
  methods: {
    validateGeneralAttributes() {
      const generalTarget = this.$refs['general-target'] as UniElement
      const generalId = generalTarget.getAttribute('id')
      if (generalId != this.generalId) {
        this.validateGeneralAttrText = '基础属性 id 验证失败'
        return
      }
      // #ifdef APP
      if (!generalTarget.classList.includes('general-class')) {
      // #endif
      // #ifdef WEB
      if (!Array.from(generalTarget.classList).includes('general-class')) {
      // #endif
        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 = '基础属性验证成功'
    },
    changeHeight(){
      const generalTarget = this.$refs['general-target'] as Element
      this.changeHeightByRefText = '已通过 ref 修改高度'
      generalTarget.style.setProperty('height', '200px')
    }
  },
}
</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-left: 40px;
  padding: 10px;
  width: 260px;
  height: 160px;
  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>