Skip to content

H
hello uni-app x

DCloud / hello uni-app x

通知 5995
Star 90
Fork 162
H
hello uni-app x
提交 8f0bd60a 编写于 作者: W WOSHIMAHAIFENG
浏览文件
操作

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

上级 f0dca21a
隐藏空白更改
内联 并排
Showing with 185 addition and 177 deletion
pages/component/button/buttonstatus.uvue
浏览文件 @ 8f0bd60a
<script> <script>
import { ItemType } from '@/components/enum-data/enum-data' import { ItemType } from '@/components/enum-data/enum-data'
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'
} }
}, },
methods: { methods: {
button_click() { button_click() {
console.log("组件被点击时触发") console.log("组件被点击时触发")
this.count++ this.count++
}, },
button_touchstart() { console.log("手指触摸动作开始") }, button_touchstart() { console.log("手指触摸动作开始") },
button_touchmove() { console.log("手指触摸后移动") }, button_touchmove() { console.log("手指触摸后移动") },
button_touchcancel() { console.log("手指触摸动作被打断，如来电提醒，弹窗") }, button_touchcancel() { console.log("手指触摸动作被打断，如来电提醒，弹窗") },
button_touchend() { console.log("手指触摸动作结束") }, button_touchend() { console.log("手指触摸动作结束") },
button_tap() { console.log("手指触摸后马上离开") }, button_tap() { console.log("手指触摸后马上离开") },
button_longpress() { console.log("如果一个组件被绑定了 longpress 事件，那么当用户长按这个组件时，该事件将会被触发。") }, button_longpress() { console.log("如果一个组件被绑定了 longpress 事件，那么当用户长按这个组件时，该事件将会被触发。") },
change_plain_boolean(checked : boolean) { this.plain_boolean = checked }, change_plain_boolean(checked : boolean) { this.plain_boolean = checked },
change_disabled_boolean(checked : boolean) { this.disabled_boolean = checked }, change_disabled_boolean(checked : boolean) { this.disabled_boolean = checked },
change_default_style(checked : boolean) { this.default_style = checked }, change_default_style(checked : boolean) { this.default_style = checked },
radio_change_size_enum(checked : number) { this.size_enum_current = checked }, radio_change_size_enum(checked : number) { this.size_enum_current = checked },
radio_change_type_enum(checked : number) { this.type_enum_current = checked }, radio_change_type_enum(checked : number) { this.type_enum_current = checked },
confirm_text_input(value : string) { this.text = value } confirm_text_input(value : string) { this.text = value }
} }
} }
</script> </script>
<template> <template>
<view class="main"> <scroll-view direction="vertical" style="flex:1">
<!--type--> <view class="main">
<view class="container">
<button style="margin: 10px;" :disabled="disabled_boolean" :size="size_enum[size_enum_current].name" <!--type-->
:type="type_enum[0].name" :plain="plain_boolean" @click="button_click" @touchstart="button_touchstart" <view class="container">
@touchmove="button_touchmove" @touchcancel="button_touchcancel" @touchend="button_touchend" @tap="button_tap" <button style="margin: 10px;" :disabled="disabled_boolean" :size="size_enum[size_enum_current].name"
@longpress="button_longpress" class="btn" :class="default_style ? 'custom-btn' : ''" :type="type_enum[0].name" :plain="plain_boolean" @click="button_click" @touchstart="button_touchstart"
:hover-class="default_style ? 'is-hover' : 'button-hover'"> @touchmove="button_touchmove" @touchcancel="button_touchcancel" @touchend="button_touchend" @tap="button_tap"
type-default @longpress="button_longpress" class="btn" :class="default_style ? 'custom-btn' : ''"
</button> :hover-class="default_style ? 'is-hover' : 'button-hover'">
</view> type-default
<view class="container"> </button>
<button style="margin: 10px;" :disabled="disabled_boolean" :size="size_enum[size_enum_current].name" </view>
:type="type_enum[1].name" :plain="plain_boolean" @click="button_click" @touchstart="button_touchstart" <view class="container">
@touchmove="button_touchmove" @touchcancel="button_touchcancel" @touchend="button_touchend" @tap="button_tap" <button style="margin: 10px;" :disabled="disabled_boolean" :size="size_enum[size_enum_current].name"
@longpress="button_longpress" class="btn" :class="default_style ? 'custom-btn' : ''" :type="type_enum[1].name" :plain="plain_boolean" @click="button_click" @touchstart="button_touchstart"
:hover-class="default_style ? 'is-hover' : 'button-hover'"> @touchmove="button_touchmove" @touchcancel="button_touchcancel" @touchend="button_touchend" @tap="button_tap"
type-primary @longpress="button_longpress" class="btn" :class="default_style ? 'custom-btn' : ''"
</button> :hover-class="default_style ? 'is-hover' : 'button-hover'">
</view> type-primary
<view class="container"> </button>
<button style="margin: 10px;" :disabled="disabled_boolean" :size="size_enum[size_enum_current].name" </view>
:type="type_enum[2].name" :plain="plain_boolean" @click="button_click" @touchstart="button_touchstart" <view class="container">
@touchmove="button_touchmove" @touchcancel="button_touchcancel" @touchend="button_touchend" @tap="button_tap" <button style="margin: 10px;" :disabled="disabled_boolean" :size="size_enum[size_enum_current].name"
@longpress="button_longpress" class="btn" :class="default_style ? 'custom-btn' : ''" :type="type_enum[2].name" :plain="plain_boolean" @click="button_click" @touchstart="button_touchstart"
:hover-class="default_style ? 'is-hover' : 'button-hover'"> @touchmove="button_touchmove" @touchcancel="button_touchcancel" @touchend="button_touchend" @tap="button_tap"
type-warn @longpress="button_longpress" class="btn" :class="default_style ? 'custom-btn' : ''"
</button> :hover-class="default_style ? 'is-hover' : 'button-hover'">
</view> type-warn
<!--size--> </button>
<view class="container"> </view>
<button style="margin: 10px;" :disabled="disabled_boolean" :size="size_enum[0].name" <!--size-->
:type="type_enum[type_enum_current].name" :plain="plain_boolean" @click="button_click" <view class="container">
@touchstart="button_touchstart" @touchmove="button_touchmove" @touchcancel="button_touchcancel" <button style="margin: 10px;" :disabled="disabled_boolean" :size="size_enum[0].name"
@touchend="button_touchend" @tap="button_tap" @longpress="button_longpress" class="btn" :type="type_enum[type_enum_current].name" :plain="plain_boolean" @click="button_click"
:class="default_style ? 'custom-btn' : ''" :hover-class="default_style ? 'is-hover' : 'button-hover'"> @touchstart="button_touchstart" @touchmove="button_touchmove" @touchcancel="button_touchcancel"
size-default @touchend="button_touchend" @tap="button_tap" @longpress="button_longpress" class="btn"
</button> :class="default_style ? 'custom-btn' : ''" :hover-class="default_style ? 'is-hover' : 'button-hover'">
</view> size-default
<view class="container"> </button>
<button style="margin: 10px;" :disabled="disabled_boolean" :size="size_enum[1].name" </view>
:type="type_enum[type_enum_current].name" :plain="plain_boolean" @click="button_click" <view class="container">
@touchstart="button_touchstart" @touchmove="button_touchmove" @touchcancel="button_touchcancel" <button style="margin: 10px;" :disabled="disabled_boolean" :size="size_enum[1].name"
@touchend="button_touchend" @tap="button_tap" @longpress="button_longpress" class="btn" :type="type_enum[type_enum_current].name" :plain="plain_boolean" @click="button_click"
:class="default_style ? 'custom-btn' : ''" :hover-class="default_style ? 'is-hover' : 'button-hover'"> @touchstart="button_touchstart" @touchmove="button_touchmove" @touchcancel="button_touchcancel"
size-mini @touchend="button_touchend" @tap="button_tap" @longpress="button_longpress" class="btn"
</button> :class="default_style ? 'custom-btn' : ''" :hover-class="default_style ? 'is-hover' : 'button-hover'">
</view> size-mini
<!--plain--> </button>
<view class="container"> </view>
<button style="margin: 10px;" :disabled="disabled_boolean" :size="size_enum[size_enum_current].name" <!--plain-->
:type="type_enum[type_enum_current].name" :plain="true" @click="button_click" @touchstart="button_touchstart" <view class="container">
@touchmove="button_touchmove" @touchcancel="button_touchcancel" @touchend="button_touchend" @tap="button_tap" <button style="margin: 10px;" :disabled="disabled_boolean" :size="size_enum[size_enum_current].name"
@longpress="button_longpress" class="btn" :class="default_style ? 'custom-btn' : ''" :type="type_enum[type_enum_current].name" :plain="true" @click="button_click" @touchstart="button_touchstart"
:hover-class="default_style ? 'is-hover' : 'button-hover'"> @touchmove="button_touchmove" @touchcancel="button_touchcancel" @touchend="button_touchend" @tap="button_tap"
plain-true @longpress="button_longpress" class="btn" :class="default_style ? 'custom-btn' : ''"
</button> :hover-class="default_style ? 'is-hover' : 'button-hover'">
</view> plain-true
<view class="container"> </button>
<button style="margin: 10px;" :disabled="disabled_boolean" :size="size_enum[size_enum_current].name" </view>
:type="type_enum[type_enum_current].name" :plain="false" @click="button_click" @touchstart="button_touchstart" <view class="container">
@touchmove="button_touchmove" @touchcancel="button_touchcancel" @touchend="button_touchend" @tap="button_tap" <button style="margin: 10px;" :disabled="disabled_boolean" :size="size_enum[size_enum_current].name"
@longpress="button_longpress" class="btn" :class="default_style ? 'custom-btn' : ''" :type="type_enum[type_enum_current].name" :plain="false" @click="button_click" @touchstart="button_touchstart"
:hover-class="default_style ? 'is-hover' : 'button-hover'"> @touchmove="button_touchmove" @touchcancel="button_touchcancel" @touchend="button_touchend" @tap="button_tap"
plain-false @longpress="button_longpress" class="btn" :class="default_style ? 'custom-btn' : ''"
</button> :hover-class="default_style ? 'is-hover' : 'button-hover'">
</view> plain-false
<!--disable--> </button>
<view class="container"> </view>
<button style="margin: 10px;" :disabled="false" :size="size_enum[size_enum_current].name" <!--disable-->
:type="type_enum[type_enum_current].name" :plain="plain_boolean" @click="button_click" <view class="container">
@touchstart="button_touchstart" @touchmove="button_touchmove" @touchcancel="button_touchcancel" <button style="margin: 10px;" :disabled="false" :size="size_enum[size_enum_current].name"
@touchend="button_touchend" @tap="button_tap" @longpress="button_longpress" class="btn" :type="type_enum[type_enum_current].name" :plain="plain_boolean" @click="button_click"
:class="default_style ? 'custom-btn' : ''" :hover-class="default_style ? 'is-hover' : 'button-hover'"> @touchstart="button_touchstart" @touchmove="button_touchmove" @touchcancel="button_touchcancel"
disable-false @touchend="button_touchend" @tap="button_tap" @longpress="button_longpress" class="btn"
</button> :class="default_style ? 'custom-btn' : ''" :hover-class="default_style ? 'is-hover' : 'button-hover'">
</view> disable-false
<view class="container"> </button>
<button style="margin: 10px;" :disabled="true" :size="size_enum[size_enum_current].name" </view>
:type="type_enum[type_enum_current].name" :plain="plain_boolean" @click="button_click" <view class="container">
@touchstart="button_touchstart" @touchmove="button_touchmove" @touchcancel="button_touchcancel" <button style="margin: 10px;" :disabled="true" :size="size_enum[size_enum_current].name"
@touchend="button_touchend" @tap="button_tap" @longpress="button_longpress" class="btn" :type="type_enum[type_enum_current].name" :plain="plain_boolean" @click="button_click"
:class="default_style ? 'custom-btn' : ''" :hover-class="default_style ? 'is-hover' : 'button-hover'"> @touchstart="button_touchstart" @touchmove="button_touchmove" @touchcancel="button_touchcancel"
disable-true @touchend="button_touchend" @tap="button_tap" @longpress="button_longpress" class="btn"
</button> :class="default_style ? 'custom-btn' : ''" :hover-class="default_style ? 'is-hover' : 'button-hover'">
</view> disable-true
<view class="container"> </button>
<button style="margin: 10px;position: relative;text-align:left;padding:5px;color: #ffffff;background-color: #1AAD19; </view>
font-size: 10px;line-height: 2;"> <view class="container">
custom-btn <button style="margin: 10px;position: relative;text-align:left;padding:5px;color: #ffffff;background-color: #1AAD19;
</button> font-size: 10px;line-height: 2;">
</view> custom-btn
<view class="container"> </button>
<button style="margin: 10px; </view>
font-size: 15px;color: red;" type="warn" plain="true"> <view class="container">
custom-btn-plain-warn <button style="margin: 10px;
</button> font-size: 15px;color: red;" type="warn" plain="true">
</view> custom-btn-plain-warn
<view class="content"> </button>
<button style="margin: 10px;" type="primary" size="default" :disabled="disabled_boolean">uni-app x</button> </view>
<button style="margin: 10px;" type="primary" @tap="change_disabled_boolean(!disabled_boolean)">修改disabled为{{!disabled_boolean}}</button> <view class="content">
</view> <button style="margin: 10px;" type="primary" size="default" :disabled="disabled_boolean">uni-app x</button>
</view> <button style="margin: 10px;" type="primary"
</template> @tap="change_disabled_boolean(!disabled_boolean)">修改disabled为{{!disabled_boolean}}</button>
</view>
<style> <view class="content">
.main { <button style="margin: 10px;" type="primary" size="default" :disabled="disabled_boolean" hover-class="none">hover-class none</button>
padding: 5px 0; </view>
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
flex-direction: column; </view>
justify-content: center; </scroll-view>
} </template>
.main .list-item { <style>
width: 100%; .main {
height: 100px; padding: 5px 0;
border: 1px solid #666; border-bottom: 1px solid rgba(0, 0, 0, 0.06);
} flex-direction: column;
justify-content: center;
.custom-btn { }
color: #ffffff;
background-color: #1AAD19; .main .list-item {
border-color: #1AAD19; width: 100%;
border-radius: 5px; height: 100px;
border-width: 0.5px; border: 1px solid #666;
height: 53px; }
}
.custom-btn {
.is-hover { color: #ffffff;
color: rgba(255, 255, 255, 0.6); background-color: #1AAD19;
background-color: #179b16; border-color: #1AAD19;
border-color: #179b16; border-radius: 5px;
} border-width: 0.5px;
height: 53px;
.container { }
width: 100%;
height: 60px; .is-hover {
/* background-color: orange; */ color: rgba(255, 255, 255, 0.6);
} background-color: #179b16;
border-color: #179b16;
}
.container {
width: 100%;
height: 60px;
/* background-color: orange; */
}
</style> </style>
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或