feat: button custom text

pages/component/button/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++
+  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',
+        style: 'color:#ffffff;backgroundColor:#1AAD19;borderColor:#1AAD19;'
+      }
     },
-    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 }
+    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"
-      :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="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 ? style : ''" :hover-class="default_style ? 'is-hover' : 'button-hover'">
+        {{ text }}
+      </button>
+    </view>
     <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>
+      <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>
     <!-- #ifdef APP -->
   </scroll-view>
@@ -96,23 +63,22 @@ export default {
 </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 {
+    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;
-}
+  .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>
+  .is-hover {
+    color: rgba(255, 255, 255, 0.6);
+    background-color: #179b16;
+    border-color: #179b16;
+  }
+</style>
\ No newline at end of file