提交 8e295b91 编写于 作者: B bayanxing

新增组件路由测试用例

Signed-off-by: Nbayanxing <bayanxing@kaihongdigi.com>
上级 9671d820
......@@ -2,9 +2,9 @@
"description": "Configuration for aceceshi Tests",
"driver": {
"type": "JSUnitTest",
"test-timeout": "80000",
"test-timeout": "100000",
"package": "com.example.aceceshi",
"shell-timeout": "80000"
"shell-timeout": "100000"
},
"kits": [
{
......
......@@ -65,7 +65,16 @@
"pages/toolbar/index",
"pages/textarea/index",
"pages/menu/index",
"pages/search/index"
"pages/span/index",
"pages/switch/index",
"pages/toggle/index",
"pages/option/index",
"pages/picker/index",
"pages/pickerView/index",
"pages/piece/index",
"pages/progress/index",
"pages/qrcode/index",
"pages/select/index"
],
"name": "default",
"window": {
......
.container {
flex-direction: column;
align-items: flex-start;
justify-content: center;
}
.title-text {
margin: 20px;
}
.menu-option1 {
color:red;
font-size:40px;
allow-scale:true;
letter-spacing:5px;
min-width: 25px;
min-height: 10px;
max-width: 300px;
max-height: 100px;
font-style:normal;
font-weight:200;
font-family:sans-serif;
text-decoration: line-through;
}
.menu-option2 {
color:pink;
font-size:30px;
allow-scale:true;
letter-spacing:5px;
min-width: 25px;
min-height: 10px;
max-width: 300px;
max-height: 50px;
font-style:normal;
font-weight:200;
font-family:sans-serif;
text-decoration: underline;
}
.menu-option3 {
color:cadetblue;
font-size:20px;
allow-scale:true;
letter-spacing:5px;
min-width: 25px;
min-height: 10px;
max-width: 300px;
max-height: 50px;
font-style:normal;
font-weight:200;
font-family:sans-serif;
text-decoration: none;
}
.select-option1 {
color:red;
font-size:40px;
allow-scale:true;
letter-spacing:5px;
min-width: 25px;
min-height: 10px;
max-width: 300px;
max-height: 50px;
font-style:normal;
font-weight:200;
font-family:sans-serif;
text-decoration: line-through;
}
.select-option2 {
color:yellow;
font-size:40px;
allow-scale:true;
letter-spacing:5px;
min-width: 25px;
min-height: 10px;
max-width: 300px;
max-height: 50px;
font-style:normal;
font-weight:200;
font-family:sans-serif;
text-decoration: underline;
}
\ No newline at end of file
<div class="container">
<text onclick="onTextClick" class="title-text">Click show popup menu1.</text>
<menu id="apiMenu" onselected="onMenuSelected" show="true">
<option class="menu-option1" icon="common/images/icon.png" value="menu option 1">Item 1</option>
<option class="menu-option2" icon="common/images/icon.png" value="menu option 2">Item 2</option>
<option class="menu-option3" icon="common/images/icon.png" value="menu option 3">Item 3</option>
</menu>
<text class="title-text">Select Option</text>
<select @change="changeFruit" style="background-color: pink; margin-left: 20px; height: 50px; width: 200px;">
<option class="select-option1" value="bananaValue" icon="common/images/icon.png">
Banana
</option>
<option value="appleValue" class="select-option2" selected="true" icon="common/images/icon.png">
Apple
</option>
<option show="true" class="select-option3" value="pearValue" icon="common/images/icon.png">
Pear
</option>
</select>
</div>
\ No newline at end of file
/**
* Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import prompt from '@system.prompt';
export default {
data: {
testArray:['item1', 'item2', 'item3']
},
onMenuSelected(e) {
prompt.showToast({
message: e.value
})
},
onTextClick() {
this.$element("apiMenu").show({x:280,y:120});
},
changeFruit(e) {
prompt.showToast({
message: e.newValue
})
}
}
.container {
flex-direction: column;
justify-content: center;
align-items: center;
}
picker{
width:60%;
height:80px;
min-width: 25px;
min-height: 10px;
max-width: 300px;
max-height: 100px;
margin: 10px;
padding: 20px;
border-radius:20px;
text-color:white;
font-size:15px;
margin-left:20%;
background-color: pink;
}
select{
background-color: #efecec;
height: 50px;
width: 60%;
margin-left: 20%;
margin-top: 30px;
margin-bottom: 50px;
font-size: 22px;
}
#picker0{
text-color: plum;
font-size: 30px;
allow-scale: true;
letter-spacing: 2px;
text-decoration: underline;
font-style: normal;
font-family: sans-serif;
line-height: 30px;
column-height: 300px;
background-color:#4747e3;
border: 3px dotted brown;
}
#picker1{
text-color: pink;
font-size: 30px;
allow-scale: true;
letter-spacing: 5px;
text-decoration: line-through;
font-style: normal;
font-family: sans-serif;
line-height: 30px;
column-height: 300px;
border: 3px solid brown;
background-color:deepskyblue;
}
#picker2{
text-color: gray;
font-size: 20px;
allow-scale: true;
letter-spacing: 10px;
text-decoration: underline;
font-style: normal;
font-family: sans-serif;
line-height: 30px;
column-height: 300px;
background-color: orange;
}
\ No newline at end of file
<!-- xxx.hml -->
<div class="container">
<select @change="selectChange">
<option value="{{ item }}" for="item in selectList">
{{ item }}
</option>
</select>
<picker id="picker0" type="text" value="{{textvalue}}" selected="{{textselect}}" range="{{rangetext}}" onchange="textonchange"
oncancel="textoncancel" class="pickertext"></picker>
<picker id="picker1" type="date" value="{{datevalue}}" start="2002-2-5" end="2030-6-5" selected="{{dateselect}}" lunarswitch="true"
onchange="dateonchange" oncancel="dateoncancel" class="pickerdate" show="true"></picker>
<picker id="picker2" type="time" value="{{timevalue}}" containsecond="{{containsecond}}" selected="{{timeselect}}" hours="12"
onchange="timeonchange" oncancel="timeoncancel" class="pickertime" show="true"></picker>
<picker id="picker3" type="datetime" value="{{datetimevalue}}" selected="{{datetimeselect}}" hours="24" lunarswitch="true"
onchange="datetimeonchange" oncancel="datetimeoncancel" class="pickerdatetime" show="true"></picker>
<picker id="picker4" type="multi-text" value="{{multitextvalue}}" columns="3" range="{{multitext}}" selected="{{multitextselect}}"
onchange="multitextonchange" oncancel="multitextoncancel" class="pickermuitl" show="true"></picker>
</div>
\ No newline at end of file
/**
* Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import prompt from '@system.prompt';
export default {
data: {
selectList:["text","data","time","datetime","multitext"],
rangetext:['15', "20", "25"],
multitext:[["a", "b", "c"], ["e", "f", "g"], ["h", "i"], ["k", "l", "m"]],
textvalue:'default textvalue',
datevalue:'default datevalue',
timevalue:'default timevalue',
datetimevalue:'default datetimevalue',
multitextvalue:'default multitextvalue',
containsecond:true,
multitextselect:[1,2,0],
datetimeselect:'2012-5-6-11-25',
timeselect:'11:22:30',
dateselect:'2021-3-2',
textselect:'2'
},
selectChange(e){
for(let i = 0;i<this.selectList.length;i++){
if(e.newValue == this.selectList[i]){
this.$element("picker"+i).show();
}
}
},
textonchange(e) {
this.textvalue = e.newValue;
prompt.showToast({ message:"text:"+e.newValue+",newSelected:"+e.newSelected })
},
textoncancel(e) {
prompt.showToast({ message:"text: textoncancel" })
},
dateonchange(e) {
this.datevalue = e.year + "-" + e.month + "-" + e.day;
prompt.showToast({ message:"date:"+e.year+"-"+(e.month+1)+"-"+e.day })
},
dateoncancel() {
prompt.showToast({ message:"date: dateoncancel" })
},
timeonchange(e) {
if(this.containsecond){
this.timevalue=e.hour+":"+e.minute+":"+e.second;
prompt.showToast({ message:"Time:" + e.hour + ":" + e.minute + ":" + e.second })
} else {
this.timevalue=e.hour+":"+e.minute;
prompt.showToast({ message:"Time:" + e.hour + ":" + e.minute })
}},
timeoncancel() {
prompt.showToast({ message:"timeoncancel" })
},
datetimeonchange(e) {
this.datetimevalue=e.year+"-"+e.month+"-"+e.day+" "+e.hour+":"+e.minute;
prompt.showToast({ message:"Time:"+(e.month+1)+"-"+e.day+" "+e.hour+":"+e.minute })
},
datetimeoncancel() {
prompt.showToast({ message:"datetimeoncancel" })
},
multitextonchange(e) {
this.multitextvalue=e.newValue;
prompt.showToast({ message:"Multi-column text change" + e.newValue })
},
multitextoncancel() {
prompt.showToast({ message:"multitextoncancel" })
},
popup_picker() {
this.$element("picker_text").show();
},
}
\ No newline at end of file
.container {
flex-direction: column;
justify-content: center;
align-items: center;
left: 0px;
top: 0px;
width: 454px;
height: 454px;
}
.title {
font-size: 30px;
text-align: center;
}
.time-picker1 {
width: 500px;
height: 200px;
min-width: 25px;
min-height: 10px;
max-width: 600px;
max-height: 250px;
padding: 5px;
margin-top: 10px;
color: pink;
font-size: 30px;
selected-color: cornflowerblue;
selected-font-size: 46px;
focus-color: brown;
focus-font-size: 40px;
disappear-color: pink;
disappear-font-size: 16px;
font-family: sans-serif;
box-shadow :10px 5px 5px 10px #888888;
border: 3px solid brown;
opacity: 0.5;
}
.time-picker2 {
width: 500px;
height: 200px;
min-width: 25px;
min-height: 10px;
max-width: 600px;
max-height: 250px;
padding: 20px;
margin-top: 50px;
color: pink;
font-size: 20px;
selected-color: blueviolet;
selected-font-size: 46px;
focus-color: brown;
focus-font-size: 40px;
disappear-color: pink;
disappear-font-size: 16px;
font-family: sans-serif;
box-shadow : 2px 2px 5px 2px pink;
opacity: 1;
}
\ No newline at end of file
<div class="container" @swipe="handleSwipe">
<text class="title">
Selected:{{time}}
</text>
<picker-view class="time-picker1" type="time" selected="{{defaultTime}}" @change="handleChange"></picker-view>
<picker-view class="time-picker2" type="time" selected="{{defaultTime}}" @change="handleChange"></picker-view>
</div>
\ No newline at end of file
/**
* Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
export default {
data: {
defaultTime: "",
time: "",
},
onInit() {
this.defaultTime = this.now();
},
handleChange(data) {
this.time = this.concat(data.hour, data.minute);
},
now() {
const date = new Date();
const hours = date.getHours();
const minutes = date.getMinutes();
return this.concat(hours, minutes);
},
fill(value) {
return (value > 9 ? "" : "0") + value;
},
concat(hours, minutes) {
return `${this.fill(hours)}:${this.fill(minutes)}`;
},
}
\ No newline at end of file
.container {
width: 100%;
height: 100%;
align-items: center;
justify-content: center;
}
.piece1 {
width: 100px;
height: 50;
margin: 20px;
padding: 5px;
min-width: 60px;
min-height: 40px;
max-width: 200px;
max-height: 80px;
background-color: pink;
border: 3px solid green;
box-shadow :1px 2px 1px 2px #888888;
opacity: 0.8;
}
.piece2 {
width: 100px;
height: 50;
margin: 10px;
min-width: 60px;
min-height: 40px;
max-width: 200px;
max-height: 80px;
background-color: darksalmon;
border: 3px dotted green;
box-shadow :2px 1px 2px 1px #888888;
opacity: 0.5;
}
\ No newline at end of file
<div class="container" >
<piece class="piece1" if="{{first}}" content="example"></piece>
<piece class="piece2" if="{{second}}" content="example" closable="true" onclose="closeSecond"></piece>
</div>
\ No newline at end of file
/**
* Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
export default {
data: {
first: true,
second: true
},
closeSecond(e) {
this.second = false;
}
}
\ No newline at end of file
.container {
flex-direction: column;
/* height: 100%;*/
width: 100%;
align-items: center;
}
.min-progress {
width: 250px;
height: 250px;
}
.progress2{
color:red;
secondary-color:red;
scale-width:20;
scale-number:60;
}
.progress4{
color: red;
stroke-width:10px;
secondary-color:red
}
.arc1{
color:red;
stroke-width:30px;
}
.arc2{
color:yellow;
stroke-width:30px;
total-angle:360;
/* center-x:10;*/
/* center-y:10;*/
/* radius:5;*/
}
.eclipse{
color:crimson;
background-color: antiquewhite;
}
\ No newline at end of file
<div class="container">
<progress class="min-progress progress1" type="scale-ring" percent= "10" secondarypercent="50" clockwise="false" ></progress>
<progress class="min-progress progress2" type="scale-ring" percent= "10" secondarypercent="50" clockwise="true"></progress>
<progress class="min-progress " type="horizontal" percent= "10" secondarypercent="50"></progress>
<progress class="min-progress progress4" type="horizontal" percent= "10" secondarypercent="50"></progress>
<progress class="min-progress " type="ring" percent= "10" secondarypercent="50" stroke-width="10"></progress>
<progress class="min-progress arc1" type="arc" percent= "10" ></progress>
<progress class="min-progress arc2" type="arc" percent= "10" ></progress>
<progress class="min-progress " type="eclipse" percent= "10" ></progress>
<progress class="min-progress eclipse" type="eclipse" percent= "10" ></progress>
<progress class="min-progress " type="circular" percent= "10" ></progress>
<progress class="min-progress " type="circular" percent= "10" style="color:red"></progress>
</div>
\ No newline at end of file
/**
* Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
export default {
data: {
title: "World"
},
}
\ No newline at end of file
.container {
width: 100%;
height: 100%;
flex-direction: column;
justify-content: center;
align-items: center;
}
.txt {
font-size: 24px;
color: orangered;
}
select{
margin-top: 40px;
margin-bottom: 40px;
}
\ No newline at end of file
<div class="container">
<qrcode value="{{qr_value}}" type="{{qr_type}}"
style="color: {{qr_col}};background-color: {{qr_bcol}};width: {{qr_size}};height: {{qr_size}};margin-bottom: 70px;"></qrcode>
<text class="txt">Type</text>
<switch showtext="true" checked="true" texton="rect" textoff="circle" onchange="settype"></switch>
<text class="txt">Color</text>
<select onchange="setcol">
<option for="{{col_list}}" value="{{$item}}">{{$item}}</option>
</select>
<text class="txt">Background Color</text>
<select onchange="setbcol">
<option for="{{bcol_list}}" value="{{$item}}">{{$item}}</option>
</select>
</div>
/**
* Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
export default {
data: {
qr_type: 'rect',
qr_size: '300px',
qr_col: '#87ceeb',
col_list: ['#87ceeb','#fa8072','#da70d6','#80ff00ff','#00ff00ff'],
qr_bcol: '#f0ffff',
bcol_list: ['#f0ffff','#ffffe0','#d8bfd8']
},
settype(e) {
if (e.checked) {
this.qr_type = 'rect'
} else {
this.qr_type = 'circle'
}
},
setvalue(e) {
this.qr_value = e.newValue
},
setcol(e) {
this.qr_col = e.newValue
},
setbcol(e) {
this.qr_bcol = e.newValue
}
}
\ No newline at end of file
.container {
flex-direction: column;
align-items: flex-start;
justify-content: center;
}
.select1{
color:red;
font-size:20px;
allow-scale:true;
letter-spacing:5px;
font-style:normal;
font-weight:200;
font-family:sans-serif;
min-width: 25px;
min-height: 10px;
max-width: 600px;
max-height: 150px;
padding-left: 10px;
padding-top: 20px;
padding-right: 15px;
padding-bottom: 5px;
margin-left: 10px;
margin-top: 20px;
margin-right: 15px;
margin-bottom: 5px;
}
.select2{
color:rebeccapurple;
font-size:30px;
allow-scale:false;
letter-spacing:5px;
font-style:italic;
font-weight:300;
font-family:sans-serif;
margin: 20px;
}
.select3{
color:beige;
font-size:30px;
allow-scale:true;
letter-spacing:5px;
font-style:normal;
font-weight:200;
font-family:sans-serif;
margin: 20px;
background-color: black;
padding:10px;
}
.select4{
color:aqua;
font-size:40px;
allow-scale:false;
letter-spacing:5px;
font-style:italic;
font-weight:200;
font-family:sans-serif;
margin: 20px;
background-color: red;
padding:10px;
}
\ No newline at end of file
<div class="container">
<select @change="changeFruit" class="select1">
<option value="bananaValue">
Banana
</option>
<option value="appleValue" selected="true">
Apple
</option>
<option value="pearValue">
Pear
</option>
</select>
<select @change="changeFruit" class="select2">
<option value="bananaValue">
Banana
</option>
<option value="appleValue" selected="true">
Apple
</option>
<option value="pearValue">
Pear
</option>
</select>
<select @change="changeFruit" class="select3">
<option value="bananaValue">
Banana
</option>
<option value="appleValue" selected="true">
Apple
</option>
<option value="pearValue">
Pear
</option>
</select>
<select @change="changeFruit" class="select4">
<option value="bananaValue">
Banana
</option>
<option value="appleValue" selected="true">
Apple
</option>
<option value="pearValue">
Pear
</option>
</select>
</div>
\ No newline at end of file
/**
* Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import prompt from '@system.prompt';
export default {
data: {
title: 'World'
},
changeFruit(e){
console.log(JSON.stringify(e))
prompt.showToast({
message: e.newValue
});
}
}
\ No newline at end of file
.container {
flex-direction: column;
align-items: flex-start;
justify-content: center;
}
.title {
font-size: 30px;
text-align: center;
width: 100%;
height: 10%;
}
.spanTxt1{
text-color:red;
font-size:30px;
allow-scale:true;
text-decoration:underline;
letter-spacing:5px;
font-style:normal;
font-weight:200;
font-family:sans-serif;
min-width: 25px;
min-height: 10px;
max-width: 300px;
max-height: 50px;
padding-left: 10px;
padding-top: 20px;
padding-right: 15px;
padding-bottom: 5px;
margin-left: 10px;
margin-top: 20px;
margin-right: 15px;
margin-bottom: 5px;
}
.spanTxt2{
text-color:yellow;
font-size:30px;
allow-scale:false;
text-decoration:line-through;
text-decoration:none;
letter-spacing:5px;
font-style:italic;
font-weight:300;
font-family:sans-serif;
margin: 5px;
}
.spanTxt3{
text-color:beige;
font-size:30px;
allow-scale:true;
letter-spacing:5px;
font-style:normal;
font-weight:200;
font-family:sans-serif;
margin: 5px;
}
.spanTxt4{
text-color:aqua;
font-size:30px;
allow-scale:false;
letter-spacing:5px;
font-style:italic;
font-weight:200;
font-family:sans-serif;
margin: 5px;
}
.contain1{
width: 100%;
height: 100px;
margin-left: 28%;
flex-direction: column;
}
.spanTxt5{
text-color:saddlebrown;
font-size:30px;
allow-scale:true;
letter-spacing:5px;
font-style:normal;
font-weight:300;
font-family:sans-serif;
margin: 5px;
}
.spanTxt6{
text-color:darkcyan;
font-size:30px;
allow-scale:false;
letter-spacing:5px;
font-style:italic;
font-weight:200;
font-family:sans-serif;
margin: 10px;
}
.spanTxt7 {
text-color:navajowhite;
font-size:30px;
allow-scale:true;
letter-spacing:10px;
font-style:normal;
font-weight:500;
font-family:sans-serif;
margin: 5px;
}
<div class="container">
<!-- 样式1 -->
<text class="title">
<span class="spanTxt1">span1</span>
</text>
<!-- 样式2 -->
<text class="title">
<span class="spanTxt2">span2</span>
</text>
<!-- 样式3 -->
<text class="title">
<span class="spanTxt3">span3</span>
</text>
<!-- 样式4 -->
<text class="title">
<span class="spanTxt4">span4</span>
</text>
<text class="contain1">
<!-- 样式5 -->
<span class="spanTxt5">span5</span>
<!-- 样式6 -->
<span class="spanTxt6">span6</span>
</text>
<!-- 样式7 -->
<text class="title">
<span class="spanTxt7">span7</span>
</text>
</div>
\ No newline at end of file
/**
* Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
export default {
}
\ No newline at end of file
.container {
flex-direction: column;
align-items: flex-start;
justify-content: center;
}
switch{
texton-color:#002aff;
textoff-color:silver;
text-padding:5px;
}
.switch1{
text-color:red;
font-size:20px;
allow-scale:true;
letter-spacing:5px;
font-style:normal;
font-weight:200;
font-family:sans-serif;
min-width: 25px;
min-height: 10px;
max-width: 600px;
max-height: 50px;
padding-left: 10px;
padding-top: 5px;
padding-right: 15px;
padding-bottom: 5px;
margin-left: 10px;
margin-top: 3%;
margin-right: 15px;
margin-bottom: 3%;
texton-color:red;
textoff-color:blue;
}
.switch2{
text-color:yellow;
max-height: 50px;
font-size:20px;
allow-scale:false;
letter-spacing:5px;
font-style:italic;
font-weight:300;
font-family:sans-serif;
margin: 3%;
texton-color:yellow;
textoff-color:aqua;
}
.switch3{
text-color:beige;
max-height: 50px;
font-size:20px;
allow-scale:true;
letter-spacing:5px;
font-style:normal;
font-weight:200;
font-family:sans-serif;
margin: 3%;
}
.switch4{
text-color:aqua;
max-height: 50px;
font-size:20px;
allow-scale:false;
letter-spacing:5px;
font-style:italic;
font-weight:200;
font-family:sans-serif;
margin: 3%;
}
.container1{
height: 24%;
flex-direction: column;
}
.switch5{
text-color:saddlebrown;
font-size:22px;
allow-scale:true;
letter-spacing:5px;
font-style:normal;
font-weight:300;
font-family:sans-serif;
margin: 3%;
}
.switch6{
text-color:darkcyan;
font-size:25px;
allow-scale:false;
letter-spacing:5px;
font-style:italic;
font-weight:200;
font-family:sans-serif;
margin-left: 8%;
}
.switch7 {
text-color:navajowhite;
font-size:30px;
allow-scale:true;
letter-spacing:10px;
font-style:normal;
font-weight:500;
font-family:sans-serif;
margin: 3%;
}
<div class="container">
<switch class="switch1" showtext="true" texton="开启" textoff="关闭" checked="true" @change="switchChange">
</switch>
<switch class="switch2" showtext="true" texton="开启" textoff="关闭" checked="false" @change="switchChange">
</switch>
<switch class="switch3" showtext="true" texton="开启" textoff="关闭" checked="true" @change="switchChange">
</switch>
<switch class="switch4" showtext="true" texton="开启" textoff="关闭" checked="true" @change="switchChange">
</switch>
<div class="container1">
<switch class="switch5" showtext="true" texton="开启" textoff="关闭" checked="true" @change="switchChange">
</switch>
<switch class="switch6" showtext="true" texton="开启" textoff="关闭" checked="true" @change="switchChange">
</switch>
</div>
<switch class="switch7" showtext="true" texton="开启" textoff="关闭" checked="true" @change="switchChange">
</switch>
</div>
/**
* Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import prompt from '@system.prompt';
export default {
data: {
title: 'World'
},
switchChange(e){
if(e.checked){
prompt.showToast({
message: "打开开关"
});
}else{
prompt.showToast({
message: "关闭开关"
});
}
}
}
\ No newline at end of file
.container {
flex-direction: column;
align-items: flex-start;
justify-content: center;
padding: 10px;
}
.margin {
margin-right: 8%;
font-size: 15px;
}
.margin1 {
font-size: 15px;
margin-top: 2%;
}
.toggle1{
text-color:red;
font-size:15px;
allow-scale:true;
letter-spacing:5px;
font-style:normal;
font-weight:200;
font-family:sans-serif;
min-width: 25px;
min-height: 10px;
max-width: 300px;
max-height: 50px;
padding-left: 10px;
padding-top: 2px;
padding-right: 15px;
padding-bottom: 1px;
margin-left: 10px;
margin-top: 5px;
margin-right: 15px;
margin-bottom: 2%;
}
.toggle2{
text-color:yellow;
font-size:15px;
max-height: 50px;
allow-scale:false;
letter-spacing:5px;
font-style:italic;
font-weight:300;
font-family:sans-serif;
margin: 2%;
}
.toggle3{
text-color:beige;
font-size:15px;
max-height: 50px;
allow-scale:true;
letter-spacing:5px;
font-style:normal;
font-weight:200;
font-family:sans-serif;
margin: 2%;
}
.toggle4{
text-color:aqua;
font-size:15px;
max-height: 50px;
allow-scale:false;
letter-spacing:5px;
font-style:italic;
font-weight:200;
font-family:sans-serif;
margin: 2%;
}
.container1{
flex-direction: column;
}
.toggle5{
text-color:saddlebrown;
max-height: 50px;
font-size:15px;
allow-scale:true;
letter-spacing:5px;
font-style:normal;
font-weight:300;
font-family:sans-serif;
}
.toggle6{
text-color:darkcyan;
max-height: 50px;
font-size:15px;
allow-scale:false;
letter-spacing:5px;
font-style:italic;
font-weight:200;
font-family:sans-serif;
margin-left: 2%;
}
.toggle7 {
text-color:navajowhite;
max-height: 50px;
font-size:15px;
allow-scale:true;
letter-spacing:10px;
font-style:normal;
font-weight:500;
font-family:sans-serif;
margin: 5px;
}
<div class="container" style="flex-direction: column;">
<text class="margin">1. Multiple choice example</text>
<div style="flex-wrap: wrap">
<toggle class="margin toggle1" for="{{toggles}}">{{$item}}</toggle>
</div>
<text class="margin">2. Single choice example</text>
<div style="flex-wrap: wrap">
<toggle class="margin toggle2" for="{{toggle_list}}" id="{{$item.id}}" checked="{{$item.checked}}"
value="{{$item.name}}" @change="allchange" @click="allclick({{$item.id}})"></toggle>
</div>
<text class="margin">3. Multiple choice example</text>
<div style="flex-wrap: wrap">
<toggle class="margin toggle3" for="{{toggles}}">{{$item}}</toggle>
</div>
<text class="margin">4. Single choice example</text>
<div style="flex-wrap: wrap">
<toggle class="margin toggle4" for="{{toggle_list}}" id="{{$item.id}}" checked="{{$item.checked}}"
value="{{$item.name}}" @change="allchange" @click="allclick({{$item.id}})"></toggle>
</div>
<div class="container1">
<text class="margin margin5">5. Multiple</text>
<div style="flex-wrap: wrap">
<toggle class="margin toggle5" for="{{toggles}}">{{$item}}</toggle>
</div>
<text class="margin margin5">6. Single</text>
<div style="flex-wrap: wrap">
<toggle class="margin toggle6" for="{{toggle_list}}" id="{{$item.id}}" checked="{{$item.checked}}"
value="{{$item.name}}" @change="allchange" @click="allclick({{$item.id}})"></toggle>
</div>
</div>
<text class="margin1">7. Multiple choice example</text>
<div style="flex-wrap: wrap">
<toggle class="margin toggle7" for="{{toggles}}">{{$item}}</toggle>
</div>
</div>
\ No newline at end of file
/**
* Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
export default {
data: {
toggle_list: [
{ "id":"1001", "name":"Living room", "checked":true },
{ "id":"1002", "name":"Bedroom", "checked":false },
{ "id":"1003", "name":"Second bedroom", "checked":false },
{ "id":"1004", "name":"Study", "checked":false },
],
toggles: ["Living room","Bedroom","Study"],
idx: ""
},
allclick(arg) {
this.idx = arg
},
allchange(e) {
if (e.checked === true) {
for (var i = 0; i < this.toggle_list.length; i++) {
if (this.toggle_list[i].id === this.idx) {
this.toggle_list[i].checked = true
} else {
this.toggle_list[i].checked = false
}
}
}
}
}
\ No newline at end of file
......@@ -337,9 +337,219 @@ describe('aceJsTest', function () {
} catch (err) {
result = err
}
await sleep(5000)
await sleep(1000)
let pages = router.getState();
expect("pages/textarea/").assertEqual(pages.path);
done();
});
/**
* @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
* @tc.name testSpanComponent
* @tc.desc ACE
*/
it('testSpanComponent', 0, async function (done) {
let result;
let options = {
uri: 'pages/span/index'
}
try {
result = router.push(options)
} catch (err) {
result = err
}
await sleep(1000)
let pages = router.getState();
expect("pages/span/").assertEqual(pages.path);
done();
});
/**
* @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
* @tc.name testSwitchComponent
* @tc.desc ACE
*/
it('testSwitchComponent', 0, async function (done) {
let result;
let options = {
uri: 'pages/switch/index'
}
try {
result = router.push(options)
} catch (err) {
result = err
}
await sleep(1000)
let pages = router.getState();
expect("pages/switch/").assertEqual(pages.path);
done();
});
/**
* @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
* @tc.name testToggleComponent
* @tc.desc ACE
*/
it('testToggleComponent', 0, async function (done) {
let result;
let options = {
uri: 'pages/toggle/index'
}
try {
result = router.push(options)
} catch (err) {
result = err
}
await sleep(1000)
let pages = router.getState();
expect("pages/toggle/").assertEqual(pages.path);
done();
});
/**
* @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
* @tc.name testOptionComponent
* @tc.desc ACE
*/
it('testOptionComponent', 0, async function (done) {
let result;
let options = {
uri: 'pages/option/index'
}
try {
result = router.push(options)
} catch (err) {
result = err
}
await sleep(1000)
let pages = router.getState();
expect("pages/option/").assertEqual(pages.path);
done();
});
/**
* @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
* @tc.name testPickerComponent
* @tc.desc ACE
*/
it('testPickerComponent', 0, async function (done) {
let result;
let options = {
uri: 'pages/picker/index'
}
try {
result = router.push(options)
} catch (err) {
result = err
}
await sleep(1000)
let pages = router.getState();
expect("pages/picker/").assertEqual(pages.path);
done();
});
/**
* @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
* @tc.name testPickerViewComponent
* @tc.desc ACE
*/
it('testPickerViewComponent', 0, async function (done) {
let result;
let options = {
uri: 'pages/pickerView/index'
}
try {
result = router.push(options)
} catch (err) {
result = err
}
await sleep(1000)
let pages = router.getState();
expect("pages/pickerView/").assertEqual(pages.path);
done();
});
/**
* @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
* @tc.name testPieceViewComponent
* @tc.desc ACE
*/
it('testPieceViewComponent', 0, async function (done) {
let result;
let options = {
uri: 'pages/piece/index'
}
try {
result = router.push(options)
} catch (err) {
result = err
}
await sleep(1000)
let pages = router.getState();
expect("pages/piece/").assertEqual(pages.path);
done();
});
/**
* @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
* @tc.name testProgressComponent
* @tc.desc ACE
*/
it('testProgressComponent', 0, async function (done) {
let result;
let options = {
uri: 'pages/progress/index'
}
try {
result = router.push(options)
} catch (err) {
result = err
}
await sleep(1000)
let pages = router.getState();
expect("pages/progress/").assertEqual(pages.path);
done();
});
/**
* @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
* @tc.name testQrcodeComponent
* @tc.desc ACE
*/
it('testQrcodeComponent', 0, async function (done) {
let result;
let options = {
uri: 'pages/qrcode/index'
}
try {
result = router.push(options)
} catch (err) {
result = err
}
await sleep(1000)
let pages = router.getState();
expect("pages/qrcode/").assertEqual(pages.path);
done();
});
/**
* @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
* @tc.name testSelectComponent
* @tc.desc ACE
*/
it('testSelectComponent', 0, async function (done) {
let result;
let options = {
uri: 'pages/select/index'
}
try {
result = router.push(options)
} catch (err) {
result = err
}
await sleep(5000)
let pages = router.getState();
expect("pages/select/").assertEqual(pages.path);
done();
});
});
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册