init
This commit is contained in:
32
xhs-mini-demos/component-case/checkbox/checkbox.css
Normal file
32
xhs-mini-demos/component-case/checkbox/checkbox.css
Normal file
@@ -0,0 +1,32 @@
|
||||
._dflex > * {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.checkbox {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.select-base {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
|
||||
.select-base > view {
|
||||
display: flex;
|
||||
margin-right: 10px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.select-suppose {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.select-base-large radio {
|
||||
transform: scale(1.15);
|
||||
}
|
||||
|
||||
.select-base-small radio {
|
||||
transform: scale(0.8);
|
||||
}
|
||||
132
xhs-mini-demos/component-case/checkbox/checkbox.js
Normal file
132
xhs-mini-demos/component-case/checkbox/checkbox.js
Normal file
@@ -0,0 +1,132 @@
|
||||
const __templateJs = require("./templates.js");
|
||||
const __mergePageOptions = require("../../util/mergePageOptions.js");
|
||||
Page(__mergePageOptions({
|
||||
onShareAppMessage() {
|
||||
return {
|
||||
title: 'checkbox',
|
||||
path: 'page/component/pages/checkbox/checkbox'
|
||||
};
|
||||
},
|
||||
data: {
|
||||
items: [{
|
||||
value: 'USA',
|
||||
name: '美国'
|
||||
}, {
|
||||
value: 'CHN',
|
||||
name: '中国',
|
||||
checked: 'true'
|
||||
}, {
|
||||
value: 'BRA',
|
||||
name: '巴西'
|
||||
}, {
|
||||
value: 'JPN',
|
||||
name: '日本'
|
||||
}, {
|
||||
value: 'ENG',
|
||||
name: '英国'
|
||||
}, {
|
||||
value: 'FRA',
|
||||
name: '法国'
|
||||
}],
|
||||
curValue: '',
|
||||
checked: true,
|
||||
disabled: false,
|
||||
color: 'red',
|
||||
radio1Checked: false,
|
||||
radio2Checked: true,
|
||||
r1: true,
|
||||
r2: true,
|
||||
r3: true,
|
||||
isAgree: false
|
||||
},
|
||||
changeAgree(e) {
|
||||
xhs.showToast({
|
||||
icon: 'none',
|
||||
title: '您第一次点击同意'
|
||||
});
|
||||
console.log('changeAgree', e);
|
||||
// this.setData({
|
||||
// isAgree: !this.data.isAgree
|
||||
// })
|
||||
},
|
||||
|
||||
continue() {
|
||||
if (this.data.isAgree) {
|
||||
xhs.showToast({
|
||||
icon: 'none',
|
||||
title: '您已同意'
|
||||
});
|
||||
} else {
|
||||
xhs.showToast({
|
||||
icon: 'none',
|
||||
title: '您还没有点击同意'
|
||||
});
|
||||
}
|
||||
},
|
||||
changeisAgree() {
|
||||
this.setData({
|
||||
isAgree: !this.data.isAgree
|
||||
});
|
||||
},
|
||||
checkboxChange(e) {
|
||||
const items = this.data.items;
|
||||
const values = e.detail.value;
|
||||
for (let i = 0, lenI = items.length; i < lenI; ++i) {
|
||||
items[i].checked = false;
|
||||
for (let j = 0, lenJ = values.length; j < lenJ; ++j) {
|
||||
if (items[i].value === values[j]) {
|
||||
items[i].checked = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 这里 this.setData({items}) 没有反应
|
||||
console.log(this.data.items);
|
||||
this.setData({
|
||||
curValue: e.detail.value.join(',')
|
||||
});
|
||||
},
|
||||
changeChecked() {
|
||||
this.setData({
|
||||
checked: !this.data.checked
|
||||
});
|
||||
},
|
||||
changeDisabled() {
|
||||
this.setData({
|
||||
disabled: !this.data.disabled
|
||||
});
|
||||
},
|
||||
changeColor({
|
||||
detail
|
||||
}) {
|
||||
this.setData({
|
||||
color: detail.value
|
||||
});
|
||||
},
|
||||
handleRadio1Checked() {
|
||||
this.setData({
|
||||
radio1Checked: !this.data.radio1Checked
|
||||
});
|
||||
},
|
||||
handleRadio2Checked() {
|
||||
this.setData({
|
||||
radio2Checked: !this.data.radio2Checked
|
||||
});
|
||||
},
|
||||
handelR1() {
|
||||
this.setData({
|
||||
r1: !this.data.r1
|
||||
});
|
||||
},
|
||||
handelR2() {
|
||||
this.setData({
|
||||
r2: !this.data.r2
|
||||
});
|
||||
},
|
||||
handelR3() {
|
||||
this.setData({
|
||||
r3: !this.data.r3
|
||||
});
|
||||
}
|
||||
}, __templateJs));
|
||||
7
xhs-mini-demos/component-case/checkbox/checkbox.json
Normal file
7
xhs-mini-demos/component-case/checkbox/checkbox.json
Normal file
@@ -0,0 +1,7 @@
|
||||
{
|
||||
"navigationBarTitleText": "单项/多项选择器",
|
||||
"usingComponents": {
|
||||
"showbox": "../../common/component/showbox/index",
|
||||
"box": "../../common/component/container/index"
|
||||
}
|
||||
}
|
||||
93
xhs-mini-demos/component-case/checkbox/checkbox.xhsml
Normal file
93
xhs-mini-demos/component-case/checkbox/checkbox.xhsml
Normal file
@@ -0,0 +1,93 @@
|
||||
<view class="container">
|
||||
<showbox title="基础样式">
|
||||
<box>
|
||||
<view class="_ui-space">
|
||||
<view class="_dflex _jc_space-between _ai_center">
|
||||
<text>大</text>
|
||||
<view class="select-base select-base-large">
|
||||
<view>
|
||||
<radio value="1" checked="{{radio1Checked}}" style="--dd04dc74: flex;" bindtap="handleRadio1Checked" color="#FF2442" /> 未选中
|
||||
</view>
|
||||
<view>
|
||||
<radio checked="{{radio2Checked}}" style="--dd04dc74: flex;" color="#FF2442" bindtap="handleRadio2Checked"/> 选中
|
||||
</view>
|
||||
<view>
|
||||
<radio style="--dd04dc74: flex;" disabled color="#FF2442" /> 禁用
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="_dflex _jc_space-between _ai_center">
|
||||
<text>中</text>
|
||||
<view class="select-base">
|
||||
<view>
|
||||
<radio value="1" checked="{{radio1Checked}}" style="--dd04dc74: flex;" bindtap="handleRadio1Checked" color="#FF2442" /> 未选中
|
||||
</view>
|
||||
<view>
|
||||
<radio checked="{{radio2Checked}}" style="--dd04dc74: flex;" color="#FF2442" bindtap="handleRadio2Checked"/> 选中
|
||||
</view>
|
||||
<view>
|
||||
<radio style="--dd04dc74: flex;" disabled color="#FF2442" /> 禁用
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="_dflex _jc_space-between _ai_center">
|
||||
<text>小</text>
|
||||
<view class="select-base select-base-small">
|
||||
<view>
|
||||
<radio value="1" checked="{{radio1Checked}}" style="--dd04dc74: flex;" bindtap="handleRadio1Checked" color="#FF2442" /> 未选中
|
||||
</view>
|
||||
<view>
|
||||
<radio checked="{{radio2Checked}}" style="--dd04dc74: flex;" color="#FF2442" bindtap="handleRadio2Checked"/> 选中
|
||||
</view>
|
||||
<view>
|
||||
<radio style="--dd04dc74: flex;" disabled color="#FF2442" /> 禁用
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</box>
|
||||
</showbox>
|
||||
|
||||
<showbox title="推荐展示样式">
|
||||
<box>
|
||||
<view class="_ui-space">
|
||||
<view class="select-suppose">
|
||||
<text>标题描述</text>
|
||||
<view>
|
||||
<radio-group>
|
||||
<radio value="1" style="--dd04dc74: flex;" checked color="#FF2442" /> 单选
|
||||
<radio value="2" class="xhs-a-radio" style="--dd04dc74: flex;" color="#FF2442" /> 单选
|
||||
</radio-group>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="select-suppose">
|
||||
<view class="_dflex _fd_column">
|
||||
<text style="font-size: 14px;line-height: 18px;">标题描述</text>
|
||||
<text style="font-size: 12px; color: #33333366;line-height: 20px;">可添加二级描述文本</text>
|
||||
</view>
|
||||
<view>
|
||||
<radio checked="{{r1}}" style="--dd04dc74: flex;" color="#FF2442" bindtap="handelR1"/> 复选
|
||||
<radio checked="{{r2}}" style="--dd04dc74: flex;" color="#FF2442" bindtap="handelR2"/> 复选
|
||||
<radio checked="{{r3}}" style="--dd04dc74: flex;" color="#FF2442" bindtap="handelR3"/> 复选
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</box>
|
||||
</showbox>
|
||||
|
||||
<showbox title="点击同意按钮再继续">
|
||||
<box>
|
||||
<radio-group bindchange="changeAgree">
|
||||
<radio value="isagree" style="--dd04dc74: flex;" color="#FF2442" checked="{{isAgree}}" bindtap="changeisAgree"/> 您需要同意再继续
|
||||
</radio-group>
|
||||
|
||||
<button bindtap="continue">点击同意再继续</button>
|
||||
</box>
|
||||
</showbox>
|
||||
</view>
|
||||
|
||||
<include src="templates.xhsml" />
|
||||
53
xhs-mini-demos/component-case/checkbox/templates.js
Normal file
53
xhs-mini-demos/component-case/checkbox/templates.js
Normal file
@@ -0,0 +1,53 @@
|
||||
/** 以下内容为自动生成，请勿手动修改 */
|
||||
|
||||
module.exports = {
|
||||
data: {
|
||||
page_data_0: ``,
|
||||
|
||||
page_data_1: false,
|
||||
|
||||
page_data_2: false,
|
||||
|
||||
page_data_3: `#09BB07`,
|
||||
|
||||
page_data_4: ``,
|
||||
|
||||
page_data_5: false,
|
||||
|
||||
page_data_6: false,
|
||||
|
||||
page_data_7: `#09BB07`,
|
||||
},
|
||||
|
||||
page_fun_0(e) {
|
||||
this.setData("page_data_0", e.detail.value);
|
||||
},
|
||||
|
||||
page_fun_1(e) {
|
||||
this.setData("page_data_1", e.detail.value);
|
||||
},
|
||||
|
||||
page_fun_2(e) {
|
||||
this.setData("page_data_2", e.detail.value);
|
||||
},
|
||||
|
||||
page_fun_3(e) {
|
||||
this.setData("page_data_3", e.detail.value);
|
||||
},
|
||||
|
||||
page_fun_4(e) {
|
||||
this.setData("page_data_4", e.detail.value);
|
||||
},
|
||||
|
||||
page_fun_5(e) {
|
||||
this.setData("page_data_5", e.detail.value);
|
||||
},
|
||||
|
||||
page_fun_6(e) {
|
||||
this.setData("page_data_6", e.detail.value);
|
||||
},
|
||||
|
||||
page_fun_7(e) {
|
||||
this.setData("page_data_7", e.detail.value);
|
||||
},
|
||||
};
|
||||
163
xhs-mini-demos/component-case/checkbox/templates.xhsml
Normal file
163
xhs-mini-demos/component-case/checkbox/templates.xhsml
Normal file
@@ -0,0 +1,163 @@
|
||||
<!-- 以下内容为自动生成，请勿手动修改 -->
|
||||
|
||||
<view class="container">
|
||||
<showbox title="radio演示">
|
||||
<box>
|
||||
<view class="_ui-space">
|
||||
<view>
|
||||
<radio
|
||||
value="{{page_data_0}}"
|
||||
checked="{{page_data_1}}"
|
||||
disabled="{{page_data_2}}"
|
||||
color="{{page_data_3}}"
|
||||
>
|
||||
</radio>
|
||||
</view>
|
||||
|
||||
<view class="_dflex">
|
||||
<view style="flex: 4" class="_dflex _ai_center"
|
||||
><text>value</text></view
|
||||
>
|
||||
<view style="flex: 6" class="_ui-input">
|
||||
<input
|
||||
value="{{page_data_0}}"
|
||||
placeholder="value"
|
||||
type="text"
|
||||
bindinput="page_fun_0"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="_dflex _jc_space-between">
|
||||
<view class="_dflex _ai_center">
|
||||
<text>是否开启checked</text>
|
||||
</view>
|
||||
<switch
|
||||
checked="{{page_data_1}}"
|
||||
color="rgba(255, 36, 66, 1)"
|
||||
bindchange="page_fun_1"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<view class="_dflex _jc_space-between">
|
||||
<view class="_dflex _ai_center">
|
||||
<text>是否开启disabled</text>
|
||||
</view>
|
||||
<switch
|
||||
checked="{{page_data_2}}"
|
||||
color="rgba(255, 36, 66, 1)"
|
||||
bindchange="page_fun_2"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<view class="_dflex">
|
||||
<view style="flex: 4" class="_dflex _ai_center"
|
||||
><text>color</text></view
|
||||
>
|
||||
<view style="flex: 6" class="_ui-input">
|
||||
<input
|
||||
value="{{page_data_3}}"
|
||||
placeholder="color"
|
||||
type="text"
|
||||
bindinput="page_fun_3"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</box>
|
||||
</showbox>
|
||||
|
||||
<showbox title="radio-group演示">
|
||||
<box>
|
||||
<view class="_ui-space">
|
||||
<view>
|
||||
<radio-group>
|
||||
<radio value="1"></radio>
|
||||
<radio value="2"></radio>
|
||||
<radio value="3"></radio>
|
||||
</radio-group>
|
||||
</view>
|
||||
</view>
|
||||
</box>
|
||||
</showbox>
|
||||
|
||||
<showbox title="checkbox演示">
|
||||
<box>
|
||||
<view class="_ui-space">
|
||||
<view>
|
||||
<checkbox
|
||||
value="{{page_data_4}}"
|
||||
disabled="{{page_data_5}}"
|
||||
checked="{{page_data_6}}"
|
||||
color="{{page_data_7}}"
|
||||
>
|
||||
</checkbox>
|
||||
</view>
|
||||
|
||||
<view class="_dflex">
|
||||
<view style="flex: 4" class="_dflex _ai_center"
|
||||
><text>value</text></view
|
||||
>
|
||||
<view style="flex: 6" class="_ui-input">
|
||||
<input
|
||||
value="{{page_data_4}}"
|
||||
placeholder="value"
|
||||
type="text"
|
||||
bindinput="page_fun_4"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="_dflex _jc_space-between">
|
||||
<view class="_dflex _ai_center">
|
||||
<text>是否开启disabled</text>
|
||||
</view>
|
||||
<switch
|
||||
checked="{{page_data_5}}"
|
||||
color="rgba(255, 36, 66, 1)"
|
||||
bindchange="page_fun_5"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<view class="_dflex _jc_space-between">
|
||||
<view class="_dflex _ai_center">
|
||||
<text>是否开启checked</text>
|
||||
</view>
|
||||
<switch
|
||||
checked="{{page_data_6}}"
|
||||
color="rgba(255, 36, 66, 1)"
|
||||
bindchange="page_fun_6"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<view class="_dflex">
|
||||
<view style="flex: 4" class="_dflex _ai_center"
|
||||
><text>color</text></view
|
||||
>
|
||||
<view style="flex: 6" class="_ui-input">
|
||||
<input
|
||||
value="{{page_data_7}}"
|
||||
placeholder="color"
|
||||
type="text"
|
||||
bindinput="page_fun_7"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</box>
|
||||
</showbox>
|
||||
|
||||
<showbox title="checkbox-group演示">
|
||||
<box>
|
||||
<view class="_ui-space">
|
||||
<view>
|
||||
<checkbox-group>
|
||||
<checkbox value="1"></checkbox>
|
||||
<checkbox value="2"></checkbox>
|
||||
<checkbox value="3"></checkbox>
|
||||
</checkbox-group>
|
||||
</view>
|
||||
</view>
|
||||
</box>
|
||||
</showbox>
|
||||
</view>
|
||||
Reference in New Issue
Block a user