revert(component): Button

b607faf4 · DCloud-WZF · 824c1828 · b607faf4
隐藏空白更改
内联并排

Showing with 109 addition and 37 deletion

pages/component/button/button.uvue pages/component/button/button.uvue +109 -37

未找到文件。
--- a/pages/component/button/button.uvue
+++ b/pages/component/button/button.uvue
-<script>
+<template>
-import { type ItemType } from '@/components/enum-data/enum-data.vue'
+  <!-- #ifdef APP -->
-export default {
+  <scroll-view style="flex: 1">
-	data() {
+    <!-- #endif -->
-		return {
+    <view>
-      plain_boolean: false,
+      <page-head :title="title"></page-head>
-      disabled_boolean: false,
+      <view class="uni-padding-wrap uni-common-mt">
-      size_enum: [{"value":0,"name":"default"},{"value":1,"name":"mini"}] as ItemType[],
+        <button
-      size_enum_current: 0,
+          :type="type"
-      type_enum: [{"value":0,"name":"default"},{"value":1,"name":"primary"},{"value":2,"name":"warn"}] as ItemType[],
+          :size="size"
-      type_enum_current: 0
+          :plain="plain"
-		}
+          :disabled="disabled"
-	},
+          class="button test-button"
-	methods: {
+        >
-    change_plain_boolean(checked : boolean) { this.plain_boolean = checked },
+          页面主操作 Normal
-    change_disabled_boolean(checked : boolean) { this.disabled_boolean = checked },
+        </button>
-    radio_change_size_enum(checked : number) { this.size_enum_current = checked },
+        <!-- <button type="primary" :loading="loading" class="button">页面主操作 Loading</button> -->
-    radio_change_type_enum(checked : number) { this.type_enum_current = checked }
+        <button type="primary" :disabled="true" class="button">
-	}
+          页面主操作 Disabled
-}
+        </button>
-</script>
-<template>
+        <button type="default" class="button default-button" @click="addCount">
-	<view class="uni-flex-row">
+          页面次要操作 Normal
-<button :disabled="disabled_boolean" :size="size_enum[size_enum_current].name" :type="type_enum[type_enum_current].name" :plain="plain_boolean">uni-app-x</button>
+        </button>
-	</view>
+        <button type="default" :disabled="true" class="button disabled-button">
-<!-- #ifdef APP -->
+          页面次要操作 Disabled
-<scroll-view style="flex:1">
+        </button>
-<!-- #endif -->
-<view class="content nvue">
-    <boolean-data :defaultValue="false" title="按钮是否镂空，背景色透明" @change="change_plain_boolean"></boolean-data>
+        <button type="warn" class="button">警告类操作 Normal</button>
+        <button type="warn" :disabled="true" class="button">
+          警告类操作 Disabled
+        </button>
-    <boolean-data :defaultValue="false" title="是否禁用" @change="change_disabled_boolean"></boolean-data>
+        <view class="button-sp-area">
+          <button type="primary" :plain="true" class="button text-button">
+            {{ text }}
+          </button>
+          <button type="primary" :disabled="true" :plain="true" class="button">
+            不可点击的按钮
+          </button>
-    <enum-data :items="size_enum" title="按钮的大小" @change="radio_change_size_enum"></enum-data>
+          <button type="default" :plain="true" class="button">
+            按钮 plain背景镂空
+          </button>
+          <button type="default" :disabled="true" :plain="true" class="button">
+            按钮 Disabled
+          </button>
-    <enum-data :items="type_enum" title="按钮的类型" @change="radio_change_type_enum"></enum-data>
+          <view class="uni-flex uni-row">
-</view>
+            <button class="button mini-btn" type="primary" size="mini">
-<!-- #ifdef APP -->
+              按钮 mini
-</scroll-view>
+            </button>
-<!-- #endif -->
+            <button class="button mini-btn" type="default" size="mini">
+              按钮 mini
+            </button>
+            <button class="button mini-btn" type="warn" size="mini">
+              按钮 mini
+            </button>
+          </view>
+        </view>
+      </view>
+    </view>
+    <!-- #ifdef APP -->
+  </scroll-view>
+  <!-- #endif -->
 </template>
+<script lang="ts">
+export default {
+  data() {
+    return {
+      title: 'button',
+      loading: false,
+      _timer: 0,
+      text: '文字来自data绑定',
+      type: 'primary',
+      size: 'default',
+      plain: false,
+      disabled: false,
+      count: 0,
+    }
+  },
+  onShow() {
+    // this.clearTimer();
+    // this._timer = setTimeout(() => {
+    //     // this.loading = true;
+    // }, 300)
+  },
+  onUnload() {
+    // this.clearTimer();
+    // this.loading = false;
+  },
+  methods: {
+    // clearTimer() {
+    //     if (this._timer != 0) {
+    //         clearTimeout(this._timer);
+    //     }
+    // }
+    addCount() {
+      this.count++
+    },
+  },
+}
+</script>
 <style>
+.button {
+  margin-top: 30rpx;
+}
+.button-sp-area {
+  margin: 0 auto;
+  width: 90%;
+}
+.mini-btn {
+  margin-right: 10rpx;
+  margin-bottom: 30rpx;
+}
 </style>