button.uvue

<script>
import { type ItemType } from '@/components/enum-data/enum-data.vue'
export default {
  data() {
    return {
      plain_boolean: false,
      disabled_boolean: false,
      default_style: false,
      size_enum: [{ "value": 0, "name": "default" }, { "value": 1, "name": "mini" }] as ItemType[],
      size_enum_current: 0,
      type_enum: [{ "value": 0, "name": "default" }, { "value": 1, "name": "primary" }, { "value": 2, "name": "warn" }] as ItemType[],
      type_enum_current: 0,
      count: 0,
      text: 'uni-app-x'
    }
  },
  methods: {
    button_click() {
      console.log("组件被点击时触发")
      this.count++
    },
    button_touchstart() { console.log("手指触摸动作开始") },
    button_touchmove() { console.log("手指触摸后移动") },
    button_touchcancel() { console.log("手指触摸动作被打断，如来电提醒，弹窗") },
    button_touchend() { console.log("手指触摸动作结束") },
    button_tap() { console.log("手指触摸后马上离开") },
    button_longpress() { console.log("如果一个组件被绑定了 longpress 事件，那么当用户长按这个组件时，该事件将会被触发。") },
    change_plain_boolean(checked : boolean) { this.plain_boolean = checked },
    change_disabled_boolean(checked : boolean) { this.disabled_boolean = checked },
    change_default_style(checked : boolean) { this.default_style = checked },
    radio_change_size_enum(checked : number) { this.size_enum_current = checked },
    radio_change_type_enum(checked : number) { this.type_enum_current = checked }
  }
}
</script>

<template>
  <view class="main">
    <button
      :disabled="disabled_boolean"
      :size="size_enum[size_enum_current].name"
      :type="type_enum[type_enum_current].name"
      :plain="plain_boolean"
      @click="button_click"
      @touchstart="button_touchstart"
      @touchmove="button_touchmove"
      @touchcancel="button_touchcancel"
      @touchend="button_touchend"
      @tap="button_tap"
      @longpress="button_longpress"
      class="btn"
      :style="
        default_style
          ? 'color:#ffffff;backgroundColor:#1AAD19;borderColor:#1AAD19;'
          : ''
      "
      :hover-class="default_style ? 'is-hover' : 'button-hover'"
    >
      {{ text }}
    </button>
  </view>

  <!-- #ifdef APP -->
  <scroll-view style="flex: 1">
    <!-- #endif -->
    <view class="content">
      <boolean-data
        :defaultValue="false"
        title="按钮是否镂空，背景色透明"
        @change="change_plain_boolean"
      ></boolean-data>
      <boolean-data
        :defaultValue="false"
        title="是否禁用"
        @change="change_disabled_boolean"
      ></boolean-data>
      <boolean-data
        :defaultValue="false"
        title="修改默认样式和点击效果(高优先)"
        @change="change_default_style"
      ></boolean-data>
      <enum-data
        :items="size_enum"
        title="按钮的大小"
        @change="radio_change_size_enum"
      ></enum-data>
      <enum-data
        :items="type_enum"
        title="按钮的类型"
        @change="radio_change_type_enum"
      ></enum-data>
    </view>
    <!-- #ifdef APP -->
  </scroll-view>
  <!-- #endif -->
</template>

<style>
.main {
  max-height: 500rpx;
  padding: 10rpx 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  flex-direction: row;
  justify-content: center;
}

.main .list-item {
  width: 100%;
  height: 200rpx;
  border: 1px solid #666;
}

.is-hover {
  color: rgba(255, 255, 255, 0.6);
  background-color: #179b16;
  border-color: #179b16;
}
</style>