buttonstatus.uvue

<script>
  import { ItemType } from '@/components/enum-data/enum-data'
  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 },
      confirm_text_input(value : string) { this.text = value }
    }
  }
</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"
      :class="default_style ? 'custom-btn' : ''" :hover-class="default_style ? 'is-hover' : 'button-hover'">
      {{ text }}
    </button>
  </view>
  <scroll-view style="flex: 1">
    <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>
      <input-data :defaultValue="text" title="按钮的文案" type="text" @confirm="confirm_text_input"></input-data>
    </view>
  </scroll-view>
</template>

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

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

  .custom-btn {
    color: #ffffff;
    background-color: #1AAD19;
    border-color: #1AAD19;
  }

  .is-hover {
    color: rgba(255, 255, 255, 0.6);
    background-color: #179b16;
    border-color: #179b16;
  }
</style>
<script>
  import { ItemType } from '@/components/enum-data/enum-data'
  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 },
      confirm_text_input(value : string) { this.text = value }
    }
  }
</script>

<template>
  <view class="main">
    <!--type-->
    <view class="container">
      <button style="margin: 10px;" :disabled="disabled_boolean" :size="size_enum[size_enum_current].name"
        :type="type_enum[0].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" :class="default_style ? 'custom-btn' : ''"
        :hover-class="default_style ? 'is-hover' : 'button-hover'">
        {{ text }}
      </button>
    </view>
    <view class="container">
      <button style="margin: 10px;" :disabled="disabled_boolean" :size="size_enum[size_enum_current].name"
        :type="type_enum[1].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" :class="default_style ? 'custom-btn' : ''"
        :hover-class="default_style ? 'is-hover' : 'button-hover'">
        {{ text }}
      </button>
    </view>
    <view class="container">
      <button style="margin: 10px;" :disabled="disabled_boolean" :size="size_enum[size_enum_current].name"
        :type="type_enum[2].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" :class="default_style ? 'custom-btn' : ''"
        :hover-class="default_style ? 'is-hover' : 'button-hover'">
        {{ text }}
      </button>
    </view>
    <!--size-->
    <view class="container">
      <button style="margin: 10px;" :disabled="disabled_boolean" :size="size_enum[0].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"
        :class="default_style ? 'custom-btn' : ''" :hover-class="default_style ? 'is-hover' : 'button-hover'">
        {{ text }}
      </button>
    </view>
    <view class="container">
      <button style="margin: 10px;" :disabled="disabled_boolean" :size="size_enum[1].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"
        :class="default_style ? 'custom-btn' : ''" :hover-class="default_style ? 'is-hover' : 'button-hover'">
        {{ text }}
      </button>
    </view>
    <!--plain-->
    <view class="container">
      <button style="margin: 10px;" :disabled="disabled_boolean" :size="size_enum[size_enum_current].name"
        :type="type_enum[type_enum_current].name" :plain="true" @click="button_click" @touchstart="button_touchstart"
        @touchmove="button_touchmove" @touchcancel="button_touchcancel" @touchend="button_touchend" @tap="button_tap"
        @longpress="button_longpress" class="btn" :class="default_style ? 'custom-btn' : ''"
        :hover-class="default_style ? 'is-hover' : 'button-hover'">
        {{ text }}
      </button>
    </view>
    <view class="container">
      <button style="margin: 10px;" :disabled="disabled_boolean" :size="size_enum[size_enum_current].name"
        :type="type_enum[type_enum_current].name" :plain="false" @click="button_click" @touchstart="button_touchstart"
        @touchmove="button_touchmove" @touchcancel="button_touchcancel" @touchend="button_touchend" @tap="button_tap"
        @longpress="button_longpress" class="btn" :class="default_style ? 'custom-btn' : ''"
        :hover-class="default_style ? 'is-hover' : 'button-hover'">
        {{ text }}
      </button>
    </view>
    <!--disable-->
    <view class="container">
      <button style="margin: 10px;" :disabled="false" :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"
        :class="default_style ? 'custom-btn' : ''" :hover-class="default_style ? 'is-hover' : 'button-hover'">
        {{ text }}
      </button>
    </view>
    <view class="container">
      <button style="margin: 10px;" :disabled="true" :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"
        :class="default_style ? 'custom-btn' : ''" :hover-class="default_style ? 'is-hover' : 'button-hover'">
        {{ text }}
      </button>
    </view>
  </view>
</template>

<style>
  .main {
    padding: 5px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    flex-direction: column;
    justify-content: center;
  }

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

  .custom-btn {
    color: #ffffff;
    background-color: #1AAD19;
    border-color: #1AAD19;
    border-radius: 5px;
    border-width: 0.5px;
    height: 53px;
  }

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

  .container {
    width: 100%;
    height: 60px;
    /* background-color: orange; */
  }
</style>