Skip to content

H
hello uni-app x

DCloud / hello uni-app x

通知 6007
Star 91
Fork 164
H
hello uni-app x
提交 b97cede3 编写于 作者: W WOSHIMAHAIFENG 提交者： shutao-dc
浏览文件
操作

添加 hover-class="none"的示例与disabled 样式更改示例

上级 d46d543f
隐藏空白更改
内联 并排
Showing with 185 addition and 177 deletion
pages/component/button/buttonstatus.uvue
浏览文件 @ b97cede3
<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'">
type-default
</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'">
type-primary
</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'">
type-warn
</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'">
size-default
</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'">
size-mini
</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'">
plain-true
</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'">
plain-false
</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'">
disable-false
</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'">
disable-true
</button>
</view>
<view class="container">
<button style="margin: 10px;position: relative;text-align:left;padding:5px;color: #ffffff;background-color: #1AAD19;
font-size: 10px;line-height: 2;">
custom-btn
</button>
</view>
<view class="container">
<button style="margin: 10px;
font-size: 15px;color: red;" type="warn" plain="true">
custom-btn-plain-warn
</button>
</view>
<view class="content">
<button style="margin: 10px;" type="primary" size="default" :disabled="disabled_boolean">uni-app x</button>
<button style="margin: 10px;" type="primary" @tap="change_disabled_boolean(!disabled_boolean)">修改disabled为{{!disabled_boolean}}</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; */
}
<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>
<scroll-view direction="vertical" style="flex:1">
<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'">
type-default
</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'">
type-primary
</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'">
type-warn
</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'">
size-default
</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'">
size-mini
</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'">
plain-true
</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'">
plain-false
</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'">
disable-false
</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'">
disable-true
</button>
</view>
<view class="container">
<button style="margin: 10px;position: relative;text-align:left;padding:5px;color: #ffffff;background-color: #1AAD19;
font-size: 10px;line-height: 2;">
custom-btn
</button>
</view>
<view class="container">
<button style="margin: 10px;
font-size: 15px;color: red;" type="warn" plain="true">
custom-btn-plain-warn
</button>
</view>
<view class="content">
<button style="margin: 10px;" type="primary" size="default" :disabled="disabled_boolean">uni-app x</button>
<button style="margin: 10px;" type="primary"
@tap="change_disabled_boolean(!disabled_boolean)">修改disabled为{{!disabled_boolean}}</button>
</view>
<view class="content">
<button style="margin: 10px;" type="primary" size="default" :disabled="disabled_boolean" hover-class="none">hover-class none</button>
</view>
</view>
</scroll-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>
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或