提交 f9658086 编写于 作者: D DCloud_LXH

chore: update button.uvue

上级 a17f3bc7
<template> <script>
<!-- #ifdef APP --> import { type ItemType } from '@/components/enum-data/enum-data.vue'
<scroll-view style="flex: 1">
<!-- #endif -->
<view>
<page-head :title="title"></page-head>
<view class="uni-padding-wrap uni-common-mt">
<button
:type="type"
:size="size"
:plain="plain"
:disabled="disabled"
class="button test-button"
>
页面主操作 Normal
</button>
<!-- <button type="primary" :loading="loading" class="button">页面主操作 Loading</button> -->
<button type="primary" :disabled="true" class="button">
页面主操作 Disabled
</button>
<button type="default" class="button default-button" @click="addCount">
页面次要操作 Normal
</button>
<button type="default" :disabled="true" class="button disabled-button">
页面次要操作 Disabled
</button>
<button type="warn" class="button">警告类操作 Normal</button>
<button type="warn" :disabled="true" class="button">
警告类操作 Disabled
</button>
<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>
<button type="default" :plain="true" class="button">
按钮 plain背景镂空
</button>
<button type="default" :disabled="true" :plain="true" class="button">
按钮 Disabled
</button>
<view class="uni-flex uni-row">
<button class="button mini-btn" type="primary" size="mini">
按钮 mini
</button>
<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 { export default {
data() { data() {
return { return {
title: 'button', plain_boolean: false,
loading: false, disabled_boolean: false,
_timer: 0, size_enum: [{"value":0,"name":"default"},{"value":1,"name":"mini"}] as ItemType[],
text: '文字来自data绑定', size_enum_current: 0,
type: 'primary', type_enum: [{"value":0,"name":"default"},{"value":1,"name":"primary"},{"value":2,"name":"warn"}] as ItemType[],
size: 'default', type_enum_current: 0
plain: false,
disabled: false,
count: 0,
} }
}, },
onShow() {
// this.clearTimer();
// this._timer = setTimeout(() => {
// // this.loading = true;
// }, 300)
},
onUnload() {
// this.clearTimer();
// this.loading = false;
},
methods: { methods: {
// clearTimer() { change_plain_boolean(checked : boolean) { this.plain_boolean = checked },
// if (this._timer != 0) { change_disabled_boolean(checked : boolean) { this.disabled_boolean = checked },
// clearTimeout(this._timer); radio_change_size_enum(checked : number) { this.size_enum_current = checked },
// } radio_change_type_enum(checked : number) { this.type_enum_current = checked }
// } }
addCount() {
this.count++
},
},
} }
</script> </script>
<style> <template>
.button { <view class="uni-flex-row">
margin-top: 30rpx; <button :disabled="disabled_boolean" :size="size_enum[size_enum_current].name" :type="type_enum[type_enum_current].name" :plain="plain_boolean" :loading="loading_boolean">uni-app-x</button>
} </view>
<!-- #ifdef APP -->
<scroll-view style="flex:1">
<!-- #endif -->
<view class="content nvue">
.button-sp-area { <boolean-data :defaultValue="false" title="按钮是否镂空,背景色透明" @change="change_plain_boolean"></boolean-data>
margin: 0 auto;
width: 90%; <boolean-data :defaultValue="false" title="是否禁用" @change="change_disabled_boolean"></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>
.mini-btn {
margin-right: 10rpx;
margin-bottom: 30rpx;
}
</style> </style>
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册