Skip to content

H
hello uni-app x

DCloud / hello uni-app x

通知 6018
Star 91
Fork 164
H
hello uni-app x
提交 6f43d7ec 编写于 作者: 辛宝Otto's avatar 辛宝Otto 🥊
浏览文件
操作

test: radio 组件补充相关 log 信息

上级 ae0d8a75
隐藏空白更改
内联 并排
Showing with 192 addition and 192 deletion
pages/component/radio/radio.uvue
浏览文件 @ 6f43d7ec
<script>
type ItemType = {
value : string
name : string
}
export default {
data() {
return {
items: [
{
value: 'CHN',
name: '中国',
},
{
value: 'USA',
name: '美国',
},
{
value: 'BRA',
name: '巴西',
},
{
value: 'JPN',
name: '日本',
},
{
value: 'ENG',
name: '英国',
},
{
value: 'FRA',
name: '法国',
},
] as ItemType[],
current: 0,
eventTest: false,
value: '',
text: '未选中',
wrapText: 'uni-app x，终极跨平台方案\nuts，大一统语言',
disabled: true,
checked: true,
color: '#007aff',
// 组件属性 autotest
checked_boolean: false,
disabled_boolean: false,
color_input: "#007AFF",
backgroundColor_input: "#ffffff",
borderColor_input: "#d1d1d1",
activeBackgroundColor_input: "#007AFF",
activeBorderColor_input: "",
iconColor_input: "#ffffff"
}
},
methods: {
radioChange(e : UniRadioGroupChangeEvent) {
// 自动化测试
console.log('test: radio event detail', e.target?.tagName, e.type)
if ((e.target?.tagName ?? '') == 'RADIO-GROUP' && e.type == 'change') {
this.eventTest = true
}
const selected = this.items.find((item) : boolean => {
return item.value == e.detail.value
})
uni.showToast({
icon: 'none',
title: '当前选中:' + selected?.name,
})
},
testChange(e : UniRadioGroupChangeEvent) {
this.value = e.detail.value
},
radio_click() { console.log("组件被点击时触发") },
radio_touchstart() { console.log("手指触摸动作开始") },
radio_touchmove() { console.log("手指触摸后移动") },
radio_touchcancel() { console.log("手指触摸动作被打断，如来电提醒，弹窗") },
radio_touchend() { console.log("手指触摸动作结束") },
radio_tap() { console.log("手指触摸后马上离开") },
radio_longpress() { console.log("如果一个组件被绑定了 longpress 事件，那么当用户长按这个组件时，该事件将会被触发。") },
change_checked_boolean(checked : boolean) { this.checked_boolean = checked },
change_disabled_boolean(checked : boolean) { this.disabled_boolean = checked },
confirm_color_input(value : string) { this.color_input = value },
confirm_backgroundColor_input(value : string) { this.backgroundColor_input = value },
confirm_borderColor_input(value : string) { this.borderColor_input = value },
confirm_activeBackgroundColor_input(value : string) { this.activeBackgroundColor_input = value },
confirm_activeBorderColor_input(value : string) { this.activeBorderColor_input = value },
confirm_iconColor_input(value : string) { this.iconColor_input = value }
}
}
</script>
<template>
<view class="main">
<radio :disabled="disabled_boolean" :checked="checked_boolean" :color="color_input"
:backgroundColor="backgroundColor_input" :borderColor="borderColor_input"
:activeBackgroundColor="activeBackgroundColor_input" :activeBorderColor="activeBorderColor_input"
:iconColor="iconColor_input" @click="radio_click" @touchstart="radio_touchstart" @touchmove="radio_touchmove"
@touchcancel="radio_touchcancel" @touchend="radio_touchend" @tap="radio_tap" @longpress="radio_longpress">
<text>uni-app-x</text>
</radio>
</view>
<scroll-view style="flex: 1">
<view class="content">
<page-head title="组件属性"></page-head>
<boolean-data :defaultValue="false" title="<radio/> 当前是否选中" @change="change_checked_boolean"></boolean-data>
<boolean-data :defaultValue="false" title="是否禁用" @change="change_disabled_boolean"></boolean-data>
<input-data defaultValue="#007AFF" title="radio的颜色" type="text" @confirm="confirm_color_input"></input-data>
<input-data defaultValue="#ffffff" title="radio默认的背景颜色" type="text"
@confirm="confirm_backgroundColor_input"></input-data>
<input-data defaultValue="#d1d1d1" title="radio默认的边框颜色" type="text"
@confirm="confirm_borderColor_input"></input-data>
<input-data defaultValue="#007AFF" title="radio选中时的背景颜色，优先级大于color属性" type="text"
@confirm="confirm_activeBackgroundColor_input"></input-data>
<input-data defaultValue="" title="radio选中时的边框颜色" type="text"
@confirm="confirm_activeBorderColor_input"></input-data>
<input-data defaultValue="#ffffff" title="radio的图标颜色" type="text" @confirm="confirm_iconColor_input"></input-data>
</view>
<view>
<page-head title="默认及使用"></page-head>
<view class="uni-padding-wrap">
<view class="uni-title uni-common-mt">
<text class="uni-title-text"> 默认样式 </text>
</view>
<radio-group class="uni-flex uni-row radio-group" @change="testChange" style="flex-wrap: wrap">
<radio id="trigger-change" value="r" :checked="checked" :color="color" style="margin-right: 15px"
class="radio r">选中
</radio>
<radio value="r1" style="margin-right: 15px" class="radio r1">{{
text
}}</radio>
<radio value="r2" :disabled="disabled" class="radio r2">禁用</radio>
<radio value="r3" class="radio r3" style="margin-top: 10px">{{
wrapText
}}</radio>
</radio-group>
</view>
<view class="uni-padding-wrap">
<view class="uni-title uni-common-mt">
<text class="uni-title-text"> 不同颜色和尺寸的radio </text>
</view>
<radio-group class="uni-flex uni-row radio-group">
<radio value="r1" :checked="true" color="#FFCC33" style="transform: scale(0.7); margin-right: 15px"
class="radio">选中
</radio>
<radio value="r2" color="#FFCC33" style="transform: scale(0.7)" class="radio">未选中</radio>
</radio-group>
</view>
<view class="uni-padding-wrap">
<view class="uni-title uni-common-mt">
<text class="uni-title-text"> 推荐展示样式 </text>
</view>
</view>
<view class="uni-list uni-common-pl">
<radio-group @change="radioChange" class="radio-group">
<radio class="uni-list-cell uni-list-cell-pd radio recommand" v-for="(item, index) in items" :key="item.value"
:class="index < items.length - 1 ? 'uni-list-cell-line' : ''" :value="item.value"
:checked="index === current">
{{ item.name }}
</radio>
</radio-group>
</view>
</view>
</scroll-view>
</template>
<style>
.main {
max-height: 250px;
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;
}
.uni-list-cell {
justify-content: flex-start;
}
<script>
type ItemType = {
value : string
name : string
}
export default {
data() {
return {
items: [
{
value: 'CHN',
name: '中国',
},
{
value: 'USA',
name: '美国',
},
{
value: 'BRA',
name: '巴西',
},
{
value: 'JPN',
name: '日本',
},
{
value: 'ENG',
name: '英国',
},
{
value: 'FRA',
name: '法国',
},
] as ItemType[],
current: 0,
eventTest: false,
value: '',
text: '未选中',
wrapText: 'uni-app x，终极跨平台方案\nuts，大一统语言',
disabled: true,
checked: true,
color: '#007aff',
// 组件属性 autotest
checked_boolean: false,
disabled_boolean: false,
color_input: "#007AFF",
backgroundColor_input: "#ffffff",
borderColor_input: "#d1d1d1",
activeBackgroundColor_input: "#007AFF",
activeBorderColor_input: "",
iconColor_input: "#ffffff"
}
},
methods: {
radioChange(e : UniRadioGroupChangeEvent) {
// 自动化测试
console.log('test: radio event detail', e.target?.tagName, e.type)
if ((e.target?.tagName ?? '') == 'RADIO-GROUP' && e.type == 'change') {
this.eventTest = true
}
const selected = this.items.find((item) : boolean => {
return item.value == e.detail.value
})
uni.showToast({
icon: 'none',
title: '当前选中:' + selected?.name,
})
},
testChange(e : UniRadioGroupChangeEvent) {
this.value = e.detail.value
},
radio_click() { console.log("组件被点击时触发") },
radio_touchstart() { console.log("手指触摸动作开始") },
radio_touchmove() { console.log("手指触摸后移动") },
radio_touchcancel() { console.log("手指触摸动作被打断，如来电提醒，弹窗") },
radio_touchend() { console.log("手指触摸动作结束") },
radio_tap() { console.log("手指触摸后马上离开") },
radio_longpress() { console.log("如果一个组件被绑定了 longpress 事件，那么当用户长按这个组件时，该事件将会被触发。") },
change_checked_boolean(checked : boolean) { this.checked_boolean = checked },
change_disabled_boolean(checked : boolean) { this.disabled_boolean = checked },
confirm_color_input(value : string) { this.color_input = value },
confirm_backgroundColor_input(value : string) { this.backgroundColor_input = value },
confirm_borderColor_input(value : string) { this.borderColor_input = value },
confirm_activeBackgroundColor_input(value : string) { this.activeBackgroundColor_input = value },
confirm_activeBorderColor_input(value : string) { this.activeBorderColor_input = value },
confirm_iconColor_input(value : string) { this.iconColor_input = value }
}
}
</script>
<template>
<view class="main">
<radio :disabled="disabled_boolean" :checked="checked_boolean" :color="color_input"
:backgroundColor="backgroundColor_input" :borderColor="borderColor_input"
:activeBackgroundColor="activeBackgroundColor_input" :activeBorderColor="activeBorderColor_input"
:iconColor="iconColor_input" @click="radio_click" @touchstart="radio_touchstart" @touchmove="radio_touchmove"
@touchcancel="radio_touchcancel" @touchend="radio_touchend" @tap="radio_tap" @longpress="radio_longpress">
<text>uni-app-x</text>
</radio>
</view>
<scroll-view style="flex: 1">
<view class="content">
<page-head title="组件属性"></page-head>
<boolean-data :defaultValue="false" title="<radio/> 当前是否选中" @change="change_checked_boolean"></boolean-data>
<boolean-data :defaultValue="false" title="是否禁用" @change="change_disabled_boolean"></boolean-data>
<input-data defaultValue="#007AFF" title="radio的颜色" type="text" @confirm="confirm_color_input"></input-data>
<input-data defaultValue="#ffffff" title="radio默认的背景颜色" type="text"
@confirm="confirm_backgroundColor_input"></input-data>
<input-data defaultValue="#d1d1d1" title="radio默认的边框颜色" type="text"
@confirm="confirm_borderColor_input"></input-data>
<input-data defaultValue="#007AFF" title="radio选中时的背景颜色，优先级大于color属性" type="text"
@confirm="confirm_activeBackgroundColor_input"></input-data>
<input-data defaultValue="" title="radio选中时的边框颜色" type="text"
@confirm="confirm_activeBorderColor_input"></input-data>
<input-data defaultValue="#ffffff" title="radio的图标颜色" type="text" @confirm="confirm_iconColor_input"></input-data>
</view>
<view>
<page-head title="默认及使用"></page-head>
<view class="uni-padding-wrap">
<view class="uni-title uni-common-mt">
<text class="uni-title-text"> 默认样式 </text>
</view>
<radio-group class="uni-flex uni-row radio-group" @change="testChange" style="flex-wrap: wrap">
<radio id="trigger-change" value="r" :checked="checked" :color="color" style="margin-right: 15px"
class="radio r">选中
</radio>
<radio value="r1" style="margin-right: 15px" class="radio r1">{{
text
}}</radio>
<radio value="r2" :disabled="disabled" class="radio r2">禁用</radio>
<radio value="r3" class="radio r3" style="margin-top: 10px">{{
wrapText
}}</radio>
</radio-group>
</view>
<view class="uni-padding-wrap">
<view class="uni-title uni-common-mt">
<text class="uni-title-text"> 不同颜色和尺寸的radio </text>
</view>
<radio-group class="uni-flex uni-row radio-group">
<radio value="r1" :checked="true" color="#FFCC33" style="transform: scale(0.7); margin-right: 15px"
class="radio">选中
</radio>
<radio value="r2" color="#FFCC33" style="transform: scale(0.7)" class="radio">未选中</radio>
</radio-group>
</view>
<view class="uni-padding-wrap">
<view class="uni-title uni-common-mt">
<text class="uni-title-text"> 推荐展示样式 </text>
</view>
</view>
<view class="uni-list uni-common-pl">
<radio-group @change="radioChange" class="radio-group">
<radio class="uni-list-cell uni-list-cell-pd radio recommand" v-for="(item, index) in items" :key="item.value"
:class="index < items.length - 1 ? 'uni-list-cell-line' : ''" :value="item.value"
:checked="index === current">
{{ item.name }}
</radio>
</radio-group>
</view>
</view>
</scroll-view>
</template>
<style>
.main {
max-height: 250px;
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;
}
.uni-list-cell {
justify-content: flex-start;
}
</style>
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或