提交 2d7c9d87 编写于 作者: W WOSHIMAHAIFENG

补充button状态

上级 b078ce77
...@@ -145,6 +145,12 @@ ...@@ -145,6 +145,12 @@
"navigationBarTitleText": "button" "navigationBarTitleText": "button"
} }
}, },
{
"path": "pages/component/button/buttonstatus",
"style": {
"navigationBarTitleText": "buttonstatus"
}
},
{ {
"path": "pages/component/radio/radio", "path": "pages/component/radio/radio",
"style": { "style": {
......
<script>
import { ItemType } from '@/components/enum-data/enum-data'
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++
},
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"
:class="default_style ? 'custom-btn' : ''" :hover-class="default_style ? 'is-hover' : 'button-hover'">
{{ text }}
</button>
</view>
<scroll-view style="flex: 1">
<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>
<input-data :defaultValue="text" title="按钮的文案" type="text" @confirm="confirm_text_input"></input-data>
</view>
</scroll-view>
</template>
<style>
.main {
padding: 5px 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
flex-direction: row;
justify-content: center;
}
.main .list-item {
width: 100%;
height: 100px;
border: 1px solid #666;
}
.custom-btn {
color: #ffffff;
background-color: #1AAD19;
border-color: #1AAD19;
}
.is-hover {
color: rgba(255, 255, 255, 0.6);
background-color: #179b16;
border-color: #179b16;
}
</style>
<script>
import { ItemType } from '@/components/enum-data/enum-data'
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++
},
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">
<!--type-->
<view class="container">
<button style="margin: 10px;" :disabled="disabled_boolean" :size="size_enum[size_enum_current].name"
:type="type_enum[0].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" :class="default_style ? 'custom-btn' : ''"
:hover-class="default_style ? 'is-hover' : 'button-hover'">
{{ text }}
</button>
</view>
<view class="container">
<button style="margin: 10px;" :disabled="disabled_boolean" :size="size_enum[size_enum_current].name"
:type="type_enum[1].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" :class="default_style ? 'custom-btn' : ''"
:hover-class="default_style ? 'is-hover' : 'button-hover'">
{{ text }}
</button>
</view>
<view class="container">
<button style="margin: 10px;" :disabled="disabled_boolean" :size="size_enum[size_enum_current].name"
:type="type_enum[2].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" :class="default_style ? 'custom-btn' : ''"
:hover-class="default_style ? 'is-hover' : 'button-hover'">
{{ text }}
</button>
</view>
<!--size-->
<view class="container">
<button style="margin: 10px;" :disabled="disabled_boolean" :size="size_enum[0].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"
:class="default_style ? 'custom-btn' : ''" :hover-class="default_style ? 'is-hover' : 'button-hover'">
{{ text }}
</button>
</view>
<view class="container">
<button style="margin: 10px;" :disabled="disabled_boolean" :size="size_enum[1].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"
:class="default_style ? 'custom-btn' : ''" :hover-class="default_style ? 'is-hover' : 'button-hover'">
{{ text }}
</button>
</view>
<!--plain-->
<view class="container">
<button style="margin: 10px;" :disabled="disabled_boolean" :size="size_enum[size_enum_current].name"
:type="type_enum[type_enum_current].name" :plain="true" @click="button_click" @touchstart="button_touchstart"
@touchmove="button_touchmove" @touchcancel="button_touchcancel" @touchend="button_touchend" @tap="button_tap"
@longpress="button_longpress" class="btn" :class="default_style ? 'custom-btn' : ''"
:hover-class="default_style ? 'is-hover' : 'button-hover'">
{{ text }}
</button>
</view>
<view class="container">
<button style="margin: 10px;" :disabled="disabled_boolean" :size="size_enum[size_enum_current].name"
:type="type_enum[type_enum_current].name" :plain="false" @click="button_click" @touchstart="button_touchstart"
@touchmove="button_touchmove" @touchcancel="button_touchcancel" @touchend="button_touchend" @tap="button_tap"
@longpress="button_longpress" class="btn" :class="default_style ? 'custom-btn' : ''"
:hover-class="default_style ? 'is-hover' : 'button-hover'">
{{ text }}
</button>
</view>
<!--disable-->
<view class="container">
<button style="margin: 10px;" :disabled="false" :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"
:class="default_style ? 'custom-btn' : ''" :hover-class="default_style ? 'is-hover' : 'button-hover'">
{{ text }}
</button>
</view>
<view class="container">
<button style="margin: 10px;" :disabled="true" :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"
:class="default_style ? 'custom-btn' : ''" :hover-class="default_style ? 'is-hover' : 'button-hover'">
{{ text }}
</button>
</view>
</view>
</template>
<style>
.main {
padding: 5px 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
flex-direction: column;
justify-content: center;
}
.main .list-item {
width: 100%;
height: 100px;
border: 1px solid #666;
}
.custom-btn {
color: #ffffff;
background-color: #1AAD19;
border-color: #1AAD19;
border-radius: 5px;
border-width: 0.5px;
height: 53px;
}
.is-hover {
color: rgba(255, 255, 255, 0.6);
background-color: #179b16;
border-color: #179b16;
}
.container {
width: 100%;
height: 60px;
/* background-color: orange; */
}
</style>
...@@ -8,7 +8,8 @@ const pages = [ ...@@ -8,7 +8,8 @@ const pages = [
"pages/component/text/text-props", "pages/component/text/text-props",
"pages/component/progress/progress", "pages/component/progress/progress",
"pages/component/form/form", "pages/component/form/form",
"pages/component/button/button", "pages/component/button/button",
"pages/component/button/buttonstatus",
"pages/component/radio/radio", "pages/component/radio/radio",
"pages/component/rich-text/rich-text", "pages/component/rich-text/rich-text",
"pages/component/rich-text/rich-text-tags", "pages/component/rich-text/rich-text-tags",
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册