Skip to content

H
hello uni-app x

黄粱一梦--Y / hello uni-app x
与 Fork 源项目一致

Fork自 DCloud / hello uni-app x

通知 1
Star 0
Fork 0
H
hello uni-app x

体验新版 GitCode，发现更多精彩内容 >>

提交 a09a3dc8 编写于 作者: Y yurj26
浏览文件
操作

feat: checkbox、radio

上级 3ca102f4
隐藏空白更改
内联 并排
Showing with 86 addition and 77 deletion
pages/component/checkbox/checkbox.test.js
浏览文件 @ a09a3dc8
......@@ -30,7 +30,7 @@ describe('Checkbox.uvue', () => {
const checkboxGroupElements = await page.$$('.checkbox-group')
expect(checkboxGroupElements.length).toBe(3)
const checkboxElements = await page.$$('.checkbox')
expect(checkboxElements.length).toBe(11)
expect(checkboxElements.length).toBe(12)
})
it('text', async () => {
const cb = await page.$('.cb1')
......
pages/component/checkbox/checkbox.uvue
浏览文件 @ a09a3dc8
......@@ -8,11 +8,14 @@
</text>
</view>
<view>
<checkbox-group class="uni-flex uni-row checkbox-group" @change="testChange">
<checkbox-group class="uni-flex uni-row checkbox-group" @change="testChange" style="flex-wrap: wrap;">
<checkbox value="cb" :checked="checked" :color="color" style="margin-right: 30rpx;"
class="checkbox cb">选中</checkbox>
<checkbox value="cb1" style="margin-right: 30rpx;" class="checkbox cb1">{{text}}</checkbox>
<checkbox value="cb2" :disabled="disabled" class="checkbox cb2">禁用</checkbox>
<checkbox value="cb3" style="margin-top: 20rpx;" class="checkbox cb3">
{{wrapText}}
</checkbox>
</checkbox-group>
</view>
<view class="uni-title uni-common-mt">
......@@ -35,9 +38,6 @@
<text class="uni-title-text">
推荐展示样式
</text>
<text class="uni-subtitle-text">
使用 uni-list 布局
</text>
</view>
</view>
<view class="uni-list uni-common-pl">
......@@ -61,57 +61,59 @@
data() {
return {
title: 'checkbox 复选框',
items: [{
value: 'USA',
name: '美国',
checked: false
},
{
value: 'CHN',
name: '中国',
checked: true
},
{
value: 'BRA',
name: '巴西',
checked: false
},
{
value: 'JPN',
name: '日本',
checked: false
},
{
value: 'ENG',
name: '英国',
checked: false
},
{
value: 'FRA',
name: '法国',
checked: false
}
items: [
{
value: 'CHN',
name: '中国',
checked: true
},
{
value: 'USA',
name: '美国',
checked: false
},
{
value: 'BRA',
name: '巴西',
checked: false
},
{
value: 'JPN',
name: '日本',
checked: false
},
{
value: 'ENG',
name: '英国',
checked: false
},
{
value: 'FRA',
name: '法国',
checked: false
}
] as ItemType[],
text: '未选中',
wrapText: 'uni-app x，终极跨平台方案\nuts，大一统语言',
value: [] as string[],
disabled: true,
checked: true,
color: '#007aff'
color: '#007aff',
}
},
methods: {
checkboxChange: function (e : CheckboxGroupChangeEvent) {
var items = this.items,
values = e.detail.value;
for (var i = 0, lenI = items.length; i < lenI; ++i) {
const item = items[i]
if (values.indexOf(item.value) >= 0) {
item.checked = true
} else {
item.checked = false
const selectedNames : string[] = []
this.items.forEach(item => {
if (e.detail.value.includes(item.value)) {
selectedNames.push(item.name)
}
}
})
uni.showToast({
icon: 'none',
title: '当前选中:' + selectedNames.join(',')
})
},
testChange: function (e : CheckboxGroupChangeEvent) {
this.value = e.detail.value
......
pages/component/radio/radio.test.js
浏览文件 @ a09a3dc8
......@@ -28,7 +28,7 @@ describe('Radio.uvue', () => {
const radioGroupElements = await page.$$('.radio-group')
expect(radioGroupElements.length).toBe(3)
const radioElements = await page.$$('.radio')
expect(radioElements.length).toBe(11)
expect(radioElements.length).toBe(12)
})
it('text', async () => {
const radio = await page.$('.r1')
......
pages/component/radio/radio.uvue
浏览文件 @ a09a3dc8
......@@ -7,13 +7,15 @@
默认样式
</text>
</view>
<radio-group class="uni-flex uni-row radio-group" @change="testChange">
<radio-group class="uni-flex uni-row radio-group" @change="testChange" style="flex-wrap: wrap;">
<radio value="r" :checked="checked" :color="color" style="margin-right: 30rpx;" class="radio r">选中
</radio>
<radio value="r1" style="margin-right: 30rpx;" class="radio r1">{{text}}</radio>
<radio value="r2" :disabled="disabled" class="radio r2">禁用</radio>
<radio value="r3" class="radio r3" style="margin-top: 20rpx;">{{wrapText}}</radio>
</radio-group>
</view>
<view class="uni-padding-wrap">
<view class="uni-title uni-common-mt">
<text class="uni-title-text">
......@@ -27,6 +29,7 @@
<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">
......@@ -54,35 +57,38 @@
data() {
return {
title: 'radio 单选框',
items: [{
value: 'USA',
name: '美国'
},
{
value: 'CHN',
name: '中国'
},
{
value: 'BRA',
name: '巴西'
},
{
value: 'JPN',
name: '日本'
},
{
value: 'ENG',
name: '英国'
},
{
value: 'FRA',
name: '法国'
},
items: [
{
value: 'CHN',
name: '中国'
},
{
value: 'USA',
name: '美国'
},
{
value: 'BRA',
name: '巴西'
},
{
value: 'JPN',
name: '日本'
},
{
value: 'ENG',
name: '英国'
},
{
value: 'FRA',
name: '法国'
},
] as ItemType[],
current: 0,
value: '',
text: '未选中',
wrapText: 'uni-app x，终极跨平台方案\nuts，大一统语言',
disabled: true,
checked: true,
color: '#007aff'
......@@ -90,12 +96,13 @@
},
methods: {
radioChange(e : RadioGroupChangeEvent) {
for (let i = 0; i < this.items.length; i++) {
if (this.items[i].value === e.detail.value) {
this.current = i;
break;
}
}
const selected = this.items.find((item) : boolean => {
return item.value == e.detail.value
})
uni.showToast({
icon: 'none',
title: '当前选中:' + selected?.name
})
},
testChange(e : RadioGroupChangeEvent) {
this.value = e.detail.value
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或