From 2d7c9d87b38f64e02b28093b978d842d9993cdd3 Mon Sep 17 00:00:00 2001
From: WOSHIMAHAIFENG <mhf19890603>
Date: Mon, 4 Mar 2024 12:23:03 +0800
Subject: [PATCH] =?UTF-8?q?=E8=A1=A5=E5=85=85button=E7=8A=B6=E6=80=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages.json                                    |   6 +
 pages/component/button/buttonstatus.uvue      | 247 ++++++++++++++++++
 .../webview-screenshot-comparison.test.js     |   3 +-
 3 files changed, 255 insertions(+), 1 deletion(-)
 create mode 100644 pages/component/button/buttonstatus.uvue

diff --git a/pages.json b/pages.json
index 6acb3d8e..7e2e5caa 100644
--- a/pages.json
+++ b/pages.json
@@ -145,6 +145,12 @@
         "navigationBarTitleText": "button"
       }
     },
+    {
+      "path": "pages/component/button/buttonstatus",
+      "style": {
+        "navigationBarTitleText": "buttonstatus"
+      }
+    },
     {
       "path": "pages/component/radio/radio",
       "style": {
diff --git a/pages/component/button/buttonstatus.uvue b/pages/component/button/buttonstatus.uvue
new file mode 100644
index 00000000..7fb577ea
--- /dev/null
+++ b/pages/component/button/buttonstatus.uvue
@@ -0,0 +1,247 @@
+<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>
diff --git a/pages/webview-screenshot-comparison/webview-screenshot-comparison.test.js b/pages/webview-screenshot-comparison/webview-screenshot-comparison.test.js
index 8a4712e2..b3a0f718 100644
--- a/pages/webview-screenshot-comparison/webview-screenshot-comparison.test.js
+++ b/pages/webview-screenshot-comparison/webview-screenshot-comparison.test.js
@@ -8,7 +8,8 @@ const pages = [
   "pages/component/text/text-props",
   "pages/component/progress/progress",
   "pages/component/form/form",
-  "pages/component/button/button",
+  "pages/component/button/button",
+  "pages/component/button/buttonstatus",
   "pages/component/radio/radio",
   "pages/component/rich-text/rich-text",
   "pages/component/rich-text/rich-text-tags",
-- 
GitLab