Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
DCloud
hello uni-app x
提交
f9658086
H
hello uni-app x
项目概览
DCloud
/
hello uni-app x
通知
6005
Star
91
Fork
164
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
18
列表
看板
标记
里程碑
合并请求
1
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
H
hello uni-app x
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
18
Issue
18
列表
看板
标记
里程碑
合并请求
1
合并请求
1
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
提交
f9658086
编写于
8月 17, 2023
作者:
D
DCloud_LXH
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
chore: update button.uvue
上级
a17f3bc7
变更
1
显示空白变更内容
内联
并排
Showing
1 changed file
with
46 addition
and
118 deletion
+46
-118
pages/component/button/button.uvue
pages/component/button/button.uvue
+46
-118
未找到文件。
pages/component/button/button.uvue
浏览文件 @
f9658086
<template>
<!-- #ifdef APP -->
<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">
<script>
import { type ItemType } from '@/components/enum-data/enum-data.vue'
export default {
data() {
return {
title: 'button',
loading: false,
_timer: 0,
text: '文字来自data绑定',
type: 'primary',
size: 'default',
plain: false,
disabled: false,
count: 0,
plain_boolean: false,
disabled_boolean: 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
}
},
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++
},
},
change_plain_boolean(checked : boolean) { this.plain_boolean = checked },
change_disabled_boolean(checked : boolean) { this.disabled_boolean = checked },
radio_change_size_enum(checked : number) { this.size_enum_current = checked },
radio_change_type_enum(checked : number) { this.type_enum_current = checked }
}
}
</script>
<style>
.button {
margin-top: 30rpx;
}
<template>
<view class="uni-flex-row">
<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 {
margin: 0 auto;
width: 90%;
}
<boolean-data :defaultValue="false" title="按钮是否镂空,背景色透明" @change="change_plain_boolean"></boolean-data>
<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>
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录