Skip to content

H
hello uni-app x

DCloud / hello uni-app x

通知 5995
Star 90
Fork 162
H
hello uni-app x
提交 e95542da 编写于 作者: Y yurj26
浏览文件
操作

feat: button custom text

上级 9cf25995
隐藏空白更改
内联 并排
Showing with 65 addition and 99 deletion
pages/component/button/button.uvue
浏览文件 @ e95542da
<script> <script>
import { type ItemType } from '@/components/enum-data/enum-data.vue' import { type ItemType } from '@/components/enum-data/enum-data.vue'
export default { export default {
data() { data() {
return { return {
plain_boolean: false, plain_boolean: false,
disabled_boolean: false, disabled_boolean: false,
default_style: false, default_style: false,
size_enum: [{ "value": 0, "name": "default" }, { "value": 1, "name": "mini" }] as ItemType[], size_enum: [{ "value": 0, "name": "default" }, { "value": 1, "name": "mini" }] as ItemType[],
size_enum_current: 0, size_enum_current: 0,
type_enum: [{ "value": 0, "name": "default" }, { "value": 1, "name": "primary" }, { "value": 2, "name": "warn" }] as ItemType[], type_enum: [{ "value": 0, "name": "default" }, { "value": 1, "name": "primary" }, { "value": 2, "name": "warn" }] as ItemType[],
type_enum_current: 0, type_enum_current: 0,
count: 0, count: 0,
text: 'uni-app-x' text: 'uni-app-x',
} style: 'color:#ffffff;backgroundColor:#1AAD19;borderColor:#1AAD19;'
}, }
methods: {
button_click() {
console.log("组件被点击时触发")
this.count++
}, },
button_touchstart() { console.log("手指触摸动作开始") }, methods: {
button_touchmove() { console.log("手指触摸后移动") }, button_click() {
button_touchcancel() { console.log("手指触摸动作被打断，如来电提醒，弹窗") }, console.log("组件被点击时触发")
button_touchend() { console.log("手指触摸动作结束") }, this.count++
button_tap() { console.log("手指触摸后马上离开") }, },
button_longpress() { console.log("如果一个组件被绑定了 longpress 事件，那么当用户长按这个组件时，该事件将会被触发。") }, button_touchstart() { console.log("手指触摸动作开始") },
change_plain_boolean(checked : boolean) { this.plain_boolean = checked }, button_touchmove() { console.log("手指触摸后移动") },
change_disabled_boolean(checked : boolean) { this.disabled_boolean = checked }, button_touchcancel() { console.log("手指触摸动作被打断，如来电提醒，弹窗") },
change_default_style(checked : boolean) { this.default_style = checked }, button_touchend() { console.log("手指触摸动作结束") },
radio_change_size_enum(checked : number) { this.size_enum_current = checked }, button_tap() { console.log("手指触摸后马上离开") },
radio_change_type_enum(checked : number) { this.type_enum_current = checked } 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> </script>
<template> <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 --> <!-- #ifdef APP -->
<scroll-view style="flex: 1"> <scroll-view style="flex: 1">
<!-- #endif --> <!-- #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"> <view class="content">
<boolean-data <boolean-data :defaultValue="false" title="按钮是否镂空，背景色透明" @change="change_plain_boolean"></boolean-data>
:defaultValue="false" <boolean-data :defaultValue="false" title="是否禁用" @change="change_disabled_boolean"></boolean-data>
title="按钮是否镂空，背景色透明" <boolean-data :defaultValue="false" title="修改默认样式和点击效果(高优先)" @change="change_default_style"></boolean-data>
@change="change_plain_boolean" <enum-data :items="size_enum" title="按钮的大小" @change="radio_change_size_enum"></enum-data>
></boolean-data> <enum-data :items="type_enum" title="按钮的类型" @change="radio_change_type_enum"></enum-data>
<boolean-data <input-data :defaultValue="text" title="按钮的文案" type="text" @confirm="confirm_text_input"></input-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>
</view> </view>
<!-- #ifdef APP --> <!-- #ifdef APP -->
</scroll-view> </scroll-view>
...@@ -96,23 +63,22 @@ export default { ...@@ -96,23 +63,22 @@ export default {
</template> </template>
<style> <style>
.main { .main {
max-height: 500rpx; padding: 10rpx 0;
padding: 10rpx 0; border-bottom: 1px solid rgba(0, 0, 0, 0.06);
border-bottom: 1px solid rgba(0, 0, 0, 0.06); flex-direction: row;
flex-direction: row; justify-content: center;
justify-content: center; }
}
.main .list-item { .main .list-item {
width: 100%; width: 100%;
height: 200rpx; height: 200rpx;
border: 1px solid #666; border: 1px solid #666;
} }
.is-hover { .is-hover {
color: rgba(255, 255, 255, 0.6); color: rgba(255, 255, 255, 0.6);
background-color: #179b16; background-color: #179b16;
border-color: #179b16; border-color: #179b16;
} }
</style> </style>
\ No newline at end of file
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或