提交 351ca91c 编写于 作者: D dongwei 提交者: wanggang

add test cases

Signed-off-by: Ndongwei <dongwei@kaihongdigi.com>
上级 d54678a6
/**
* 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.
*/
.container {
flex-direction:row;
width:100%;
height:100%;
}
.title{
width: 100%;
font-size: 18px;
margin: 2px;
padding: 2px;
font-weight: bold;
text-align: center;
}
.sub-title{
width: 100%;
font-size: 14px;
text-align: left;
margin: 2px;
padding: 2px;
}
.prop-container{
flex-direction: column;
flex-weight: 1;
}
#idProp {
visibility: visible;
}
.classProp {
visibility: visible;
}
#classPropNone {
visibility: visible;
}
.idPropDiv{
background-color: yellowgreen;
width: 100%;
height: 50px;
}
.classPropDiv{
background-color: greenyellow;
width: 100%;
height: 50px;
}
.classPropNoneDiv{
background-color: yellow;
width: 100%;
height: 50px;
}
.stylePropDiv{
background-color: green;
width: 100%;
height: 50px;
}
.specific-container{
flex-direction: column;
flex-weight: 1;
}
\ 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.
*/-->
<div class="container">
<div class="prop-container">
<text class="title">
richtext通用属性
</text>
<text class="sub-title">
通用属性 -- id
</text>
<div class="idPropDiv">
<richtext id="idProp">{{ content }}
</richtext>
</div>
<text class="sub-title">
通用属性 -- class
</text>
<div class="classPropDiv">
<richtext id="classProp"
class="classProp">
{{ content }}
</richtext>
</div>
<div class="classPropNoneDiv">
<richtext id="classPropNone"
class="">
{{ content }}
</richtext>
</div>
<text class="sub-title">
通用属性 -- style
</text>
<div class="stylePropDiv">
<richtext id="styleProp"
style="visibility: visible;">
{{ content }}
</richtext>
</div>
</div>
<div style="background-color: #000000; width: 2px; height: 100%;">
</div>
<div class="specific-container">
<text class="title">
richtext特有属性
</text>
</div>
</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:{
content: `
<div class="flex-direction: column; background-color: #ffffff; padding: 30px; margin-bottom: 30px;" style="background-color: #FFFFFF">
<style>h1{color: yellow;}</style>
<p class="item-title">h1</p>
<h1>文本测试(h1测试)</h1>
<p class="item-title">h2</p>
<h2>文本测试(h2测试)</h2>
</div>
`,
listOne:[{}],
listThree:[{},{},{}],
idProp : null,
classProp : null,
classPropNone : null,
styleProp : null
},
onShow(){
this.getCommonPropValues();
this.getSpecificPropValues();
globalThis.value = {
idProp : this.idProp,
classProp : this.classProp,
classPropNone : this.classPropNone,
styleProp : this.styleProp
}
},
getCommonPropValues(){
this.idProp = this.$element("idProp").getInspector()
this.classProp = this.$element("classProp").getInspector()
this.classPropNone = this.$element("classPropNone").getInspector()
this.styleProp = this.$element("styleProp").getInspector()
},
getSpecificPropValues(){
}
}
/**
* 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.
*/
.container {
flex-direction:row;
width:100%;
height:100%;
padding: 1px;
}
.sub-container{
flex-direction: column;
height: 100%;
flex-weight: 1;
}
.style-container{
flex-direction: column;
height: 70%;
}
.title{
width: 100%;
font-size: 18px;
margin: 2px;
padding: 2px;
font-weight: bold;
text-align: center;
}
.sub-title{
width: 100%;
font-size: 14px;
text-align: left;
margin: 2px;
padding: 2px;
}
.yellowgreenDiv{
background-color: yellowgreen;
width: 100%;
height: 50px;
}
.greenyellowDiv{
background-color: greenyellow;
width: 100%;
height: 50px;
}
.yellowDiv{
background-color: yellow;
width: 100%;
height: 50px;
}
.style1{
display: flex;
}
.style2{
visibility: visible;
}
.style3{
width: 100%;
padding: 10px;
margin: 5px;
border-left: 1px solid #000000;
border-right: 2px dashed #00ff00;
border-top: 1.5px dotted #0000ff;
border-bottom: 2.5px dotted #fff000;
background-image:url('common/images/image.png');
background-size:cover;
background-repeat: repeat-x;
background-position: center;
flex:1;
flex-grow: 2;
flex-basis: 10px;
flex-shrink: 1;
}
.style4{
width: 60%;
height: 5%;
padding: 10px;
margin: 5px;
border: 2px solid #000000;
}
.contain1{
width: 100%;
height: 70px;
flex-direction: column;
}
.style5{
width: 50%;
height: 30px;
background-color: yellow;
border-image-source: url('/common/images/image.png');
border-image-slice: 1px 2px 3px 4px;
border-image-width: 2px 3px 4px 5px;
border-image-outset: 3px 4px 5px 6px;
border-image-repeat: repeat;
}
.style6{
width: 70px;
height: 30px;
position: absolute;
left: 10px;
top: 35px;
bottom: 5px;
right: 10px;
background-color: pink;
border-image: url('common/images/icon.png') 1px 2px 3px 4px 2px 3px 4px 5px 3px 4px 5px 6px round;
}
.style7 {
flex-direction: column;
flex-wrap:wrap;
justify-content:flex-start;
align-items: flex-end;
align-content:space-around;
display: flex;
height: 40px;
}
.style8{
flex-direction: row;
flex-wrap:nowrap;
scrollbar-color: yellow;
scrollbar-width: 10px;
overscroll-effect:spring;
height: 20px;
overflow:scroll;
}
.flex-item {
width: 50%;
height: 20px;
border-radius: 16px;
}
.style9{
flex-direction: row;
flex-wrap:nowrap;
scrollbar-color: yellow;
scrollbar-width: 10px;
overscroll-effect:spring;
height: 20px;
overflow:scroll;
}
.color-red {
color: red;
}
.color-white {
color: white;
}
.font-size16 {
font-size: 16;
}
.font-size20 {
font-size: 20;
}
.allow-scale{
allow-scale:true
}
.placeholder-color{
placeholder-color:pink
}
.font-weight3{
font-weight:300
}
.font-weight6{
font-weight:600
}
.color-success {
background-color: cornflowerblue;
}
.grid-child {
width: 100%;
border-radius: 2px;
}
.grid-left-top {
width: 20px;
height: 20px;
border-radius: 10px;
border: 1px solid plum;
background: linear-gradient(pink, purple);
box-shadow: 0px 0px 1px 1px pink;
grid-row-start: 0;
grid-column-start: 0;
grid-row-end: 0;
grid-column-end: 0;
}
.grid-left-bottom {
width: 20px;
height: 20px;
border-radius: 5px;
border: 1px solid plum;
background: linear-gradient(pink, #00aaee);
box-shadow: 0px 0px 1px 1px pink;
grid-row-start: 1;
grid-column-start: 0;
grid-row-end: 1;
grid-column-end: 0;
}
.grid-right-top {
width: 20px;
height: 20px;
border-radius: 3px;
border: 1px dotted plum;
background: linear-gradient(mediumpurple, #00aaee);
box-shadow: 0px 0px 1px 1px pink;
grid-row-start: 0;
grid-column-start: 1;
grid-row-end: 0;
grid-column-end: 1;
}
.grid-right-bottom {
width: 20px;
height: 20px;
border-radius: 5px;
border: 1px dotted plum;
background: linear-gradient(pink, mediumpurple);
box-shadow: 0px 0px 2px 2px pink;
grid-row-start: 1;
grid-column-start: 1;
grid-row-end: 1;
grid-column-end: 1;
}
.event-container{
flex-direction: column;
flex-weight: 1;
}
.event1{
visibility: visible;
}
.event2{
visibility: visible;
}
.event3{
visibility: visible;
}
.event4{
visibility: visible;
}
.event5{
visibility: visible;
}
.prop-container{
flex-direction: column;
}
#prop1 {
visibility: visible;
}
.prop2 {
visibility: visible;
}
.prop3 {
visibility: visible;
}
.ani-container{
flex-direction: column;
height: 100%;
flex-weight: 1;
}
.ani1{
background-color: #72ac33;
width: 55px;
height: 55px;
margin: 5px;
transform-origin: 0% 0%;
animation: ani1Go 3s infinite;
}
@keyframes ani1Go
{
from {
background-color: #f76160;
opacity:0.3;
width:50px;
height: 50px;
transform:translate(20px) rotate(10deg) scale(0.2);
background-position:10% 10%
}
30% {
background-color: #60f761;
opacity:0.5;
width:70px;
height: 70px;
background-position:12% 12%;
transform:translateX(10px) translateY(5px) rotateX(20deg) rotateY(25deg) scaleX(0.6) scaleY(0.5)
}
to {
background-color: #6160f7;
opacity:1;
width:90px;
height: 90px;
background-position:22% 22%;
transform:rotate(180deg) scale(2)
}
}
.ani2{
background-color: #ad4e2a;
width: 55px;
height: 55px;
margin: 5px;
}
.gradient-container{
flex-direction: column;
height: 20%;
}
.gradient1{
width: 100%;
height: 20px;
margin: 5px;
background: linear-gradient(red, #00ff00);
}
.gradient2{
width: 100%;
height: 20px;
margin: 5px;
background: linear-gradient(45deg, rgb(255,0,0),rgb(0, 255, 0));
}
.gradient3{
width: 100%;
height: 20px;
margin: 5px;
background: linear-gradient(to right, rgb(255,0,0) 90px, rgb(0, 255, 0) 60%);
}
.gradient4{
width: 100%;
height: 20px;
margin: 5px;
background: repeating-linear-gradient(to right, rgba(255, 255, 0, 1) 30px,rgba(0, 0, 255, .5) 60px);
}
.access-container{
flex-direction: column;
height: 20%;
}
.access1{
background-color: #321124;
margin: 5px;
width: 90%;
height: 30px;
}
.atom-container{
flex-direction: column;
height: 50%;
}
.multiMode-container{
flex-direction: column;
height: 50%;
}
.multiMode1{
background-color: #978666;
width: 100%;
height: 30px;
margin: 5px;
}
.function-container{
flex-direction: column;
height: 10%;
}
\ 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.
*/-->
<div class="container">
<div class="sub-container">
<div class="style-container">
<text class="title">
通用样式
</text>
<text class="sub-title">
richtext通用样式1
</text>
<div class="yellowgreenDiv">
<richtext class="style1" id="style1">
</richtext>
</div>
<text class="sub-title">
richtext通用样式2
</text>
<div class="greenyellowDiv">
<richtext class="style2" id="style2">
</richtext>
</div>
</div>
<divider style="color: #000000; stroke-width: 2px;" vertical="false">
</divider>
<div class="ani-container">
<text class="title">
动画样式
</text>
</div>
</div>
<div style="background-color: #000000; width: 2px; height: 100%;">
</div>
<div class="sub-container">
<div class="prop-container">
<text class="title">
通用属性
</text>
<text class="sub-title">
richtext通用属性1
</text>
<div class="greenyellowDiv">
<richtext id="prop1">
</richtext>
</div>
<text class="sub-title">
richtext通用属性2
</text>
<div class="yellowDiv">
<richtext id="prop2" style="visibility: visible;">
</richtext>
</div>
<text class="sub-title">
richtext通用属性3
</text>
<div class="greenyellowDiv">
<richtext id="prop3" class="prop3">
</richtext>
</div>
</div>
<div style="background-color: #000000; width: 100%; height: 2px;">
</div>
<div class="event-container" >
<text class="title">
通用事件
</text>
<text class="sub-title">
richtext通用事件1
</text>
<div class="greenyellowDiv">
<richtext class ="event1" ontouchstart="touchStart" ontouchmove="touchMove"
ontouchend="touchEnd" ontouchcancel="touchCancel">
</richtext>
</div>
<text class="sub-title">
richtext通用事件2
</text>
<div class="yellowDiv">
<richtext class ="event2" onclick="click" ondoubleclick="doubleClick"
onlongpress="longPress" onfocus="focus" onblur="blur" onkey="key"
onswipe="swipe" onattached="attached" ondetached="detached">
</richtext>
</div>
<text class="sub-title">
richtext通用事件3
</text>
<div class="greenyellowDiv">
<richtext class ="event3" onpinchstart="pinchStart" onpinchupdate="pinchUpdate"
onpinchend="pinchEnd" onpinchcancel="pinchCancel"
ondragstart="dragStart" ondrag="drag"
ondragend="dragEnd" ondragenter="dragEnter"
ondragover="dragOver" ondragleave="dragLeave"
ondrop="drop">
</richtext>
</div>
<text class="sub-title">
richtext特有事件1
</text>
<div class="yellowgreenDiv">
<richtext class ="event4"
onstart="start">
</richtext>
</div>
<text class="sub-title">
richtext特有事件2
</text>
<div class="yellowDiv">
<richtext class ="event5"
oncomplete="complete"
onaccessibility="accessibility">
</richtext>
</div>
</div>
<div style="background-color: #000000; width: 100%; height: 2px;">
</div>
<div class="function-container">
<text class="title">
通用方法
</text>
</div>
</div>
<div style="background-color: #000000; width: 2px; height: 100%;">
</div>
<div class="sub-container">
<div class="gradient-container">
<text class="title">
渐变样式
</text>
</div>
<div style="background-color: #000000; width: 100%; height: 2px;">
</div>
<div class="access-container">
<text class="title">
无障碍
</text>
</div>
<div style="background-color: #000000; width: 100%; height: 2px;">
</div>
<div class="atom-container">
<div class="multiMode-container">
<text class="title">
原子布局
</text>
</div>
<div style="background-color: #000000; width: 100%; height: 2px;">
</div>
<div class="multiMode-container">
<text class="title">
多模输入
</text>
</div>
</div>
</div>
</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';
var options = {
duration: 1500,
easing: 'friction',
delay: 100,
fill: 'forwards',
iterations: 2,
direction: 'normal',
};
var frames = [
{
transform: {
translate: '-120px',
rotate:'10deg',
scale:0.2,
skew:'40deg'
},
opacity: 0.1,
offset: 0.0,
width: '40%',
height:'20px',
backgroundColor:'#ff0000',
backgroundPosition:'10px 20px',
transformOrigin:'left top'
},
{
transform: {
translateX: '0px',
translateY: '5px',
rotateX:'10deg',
rotateY:'10deg',
scaleX:0.5,
scaleY:0.7,
skewX:'22deg',
skewY:'30deg'
},
opacity: 0.6,
offset: 2.0,
width: '60%',
height:'30px',
backgroundColor:'#ff00ff',
backgroundPosition:'15px 25px',
transformOrigin:'center top'
},
{
transform: {
translateX: '100px',
translateY: '0px',
translateZ: '20px',
rotateX:'0deg',
rotateY:'0deg',
rotateZ:'30deg',
scaleX:1,
scaleY:1,
scaleZ:2,
skewX:'0',
skewY:'0',
skewZ:'30deg'
},
opacity: 1,
offset: 0.0,
width: '100%',
height:'30px',
backgroundColor:'#ffff00',
backgroundPosition:'0px',
transformOrigin:'center center'
},
];
export default {
onShow(){
// 通用属性
var prop1 = this.$element('prop1');
var name1 = prop1.dataSet.name
var prop2 = this.$refs.prop2;
var name2 = prop2.dataSet.name
prompt.showToast({
message: 'prop1--' + name1 + '\nprop2--' + name2
});
},
touchStart(event){
var globalX = event.touches[0].globalX
var globalY = event.touches[0].globalY
var localX = event.touches[0].localX
var localY = event.touches[0].localY
var size = event.touches[0].size
var force = event.touches[0].force
var changeGlobalX = event.changedTouches[0].globalX
var changeGlobalY = event.changedTouches[0].globalY
var changeLocalX = event.changedTouches[0].localX
var changeLocalY = event.changedTouches[0].localY
var changeSize = event.changedTouches[0].size
var changeForce = event.changedTouches[0].force
var message = 'globalX--' + globalX + ',globalY--' + globalY +
',localX--' + localX + ',localY--' + localY + ',size--' + size + ',force--' + force +
',changeGlobalX--' + changeGlobalX + ',changeGlobalY--' + changeGlobalY +
',changeLocalX--' + changeLocalX + ',changeLocalY--' + changeLocalY +
',changeSize--' + changeSize + ',changeForce--' + changeForce;
prompt.showToast({
message: 'touchstart:\n' + message
});
},
touchMove(event){
var globalX = event.touches[0].globalX
var globalY = event.touches[0].globalY
var localX = event.touches[0].localX
var localY = event.touches[0].localY
var size = event.touches[0].size
var force = event.touches[0].force
var changeGlobalX = event.changedTouches[0].globalX
var changeGlobalY = event.changedTouches[0].globalY
var changeLocalX = event.changedTouches[0].localX
var changeLocalY = event.changedTouches[0].localY
var changeSize = event.changedTouches[0].size
var changeForce = event.changedTouches[0].force
var message = 'globalX--' + globalX + ',globalY--' + globalY +
',localX--' + localX + ',localY--' + localY + ',size--' + size + ',force--' + force +
',changeGlobalX--' + changeGlobalX + ',changeGlobalY--' + changeGlobalY +
',changeLocalX--' + changeLocalX + ',changeLocalY--' + changeLocalY +
',changeSize--' + changeSize + ',changeForce--' + changeForce;
prompt.showToast({
message: 'touchMove:\n' +message
});
},
touchEnd(event){
var globalX = event.touches[0].globalX
var globalY = event.touches[0].globalY
var localX = event.touches[0].localX
var localY = event.touches[0].localY
var size = event.touches[0].size
var force = event.touches[0].force
var changeGlobalX = event.changedTouches[0].globalX
var changeGlobalY = event.changedTouches[0].globalY
var changeLocalX = event.changedTouches[0].localX
var changeLocalY = event.changedTouches[0].localY
var changeSize = event.changedTouches[0].size
var changeForce = event.changedTouches[0].force
var message = 'globalX--' + globalX + ',globalY--' + globalY +
',localX--' + localX + ',localY--' + localY + ',size--' + size + ',force--' + force +
',changeGlobalX--' + changeGlobalX + ',changeGlobalY--' + changeGlobalY +
',changeLocalX--' + changeLocalX + ',changeLocalY--' + changeLocalY +
',changeSize--' + changeSize + ',changeForce--' + changeForce;
prompt.showToast({
message: 'touchEnd:\n' +message
});
},
touchCancel(event){
var globalX = event.touches[0].globalX
var globalY = event.touches[0].globalY
var localX = event.touches[0].localX
var localY = event.touches[0].localY
var size = event.touches[0].size
var force = event.touches[0].force
var changeGlobalX = event.changedTouches[0].globalX
var changeGlobalY = event.changedTouches[0].globalY
var changeLocalX = event.changedTouches[0].localX
var changeLocalY = event.changedTouches[0].localY
var changeSize = event.changedTouches[0].size
var changeForce = event.changedTouches[0].force
var message = 'globalX--' + globalX + ',globalY--' + globalY +
',localX--' + localX + ',localY--' + localY + ',size--' + size + ',force--' + force +
',changeGlobalX--' + changeGlobalX + ',changeGlobalY--' + changeGlobalY +
',changeLocalX--' + changeLocalX + ',changeLocalY--' + changeLocalY +
',changeSize--' + changeSize + ',changeForce--' + changeForce;
prompt.showToast({
message: 'touchCancel:\n' +message
});
},
click(){
prompt.showToast({
message: 'click'
});
},
doubleClick(){
prompt.showToast({
message: 'doubleClick'
});
},
longPress(){
prompt.showToast({
message: 'longPress'
});
},
focus(){
prompt.showToast({
message: 'focus'
});
},
blur(){
prompt.showToast({
message: 'blur'
});
},
key(event){
var code = event.code;
var action = event.action;
var repeatCount = event.repeatCount;
var timestampStart = event.timestampStart;
var message = 'code--' + code + ',action--' + action +
',repeatCount--' + repeatCount + ',timestampStart--' + timestampStart;
prompt.showToast({
message: 'key:\n' + message
});
},
swipe(event){
var direction = event.direction;
var distance = event.distance;
var message = 'direction--' + direction + ',distance--' + distance;
prompt.showToast({
message: 'swipe:\n' + message
});
},
attached(){
prompt.showToast({
message: 'attached'
});
},
detached(){
prompt.showToast({
message: 'detached'
});
},
pinchStart(event){
var scale = event.scale
var pinchCenterX = event.pinchCenterX
var pinchCenterY = event.pinchCenterY
var message = 'scale--' + scale + ',pinchCenterX--' + pinchCenterX +
',pinchCenterY--' + pinchCenterY;
prompt.showToast({
message: 'pinchStart:\n' + message
});
},
pinchUpdate(event){
var scale = event.scale
var pinchCenterX = event.pinchCenterX
var pinchCenterY = event.pinchCenterY
var message = 'scale--' + scale + ',pinchCenterX--' + pinchCenterX +
',pinchCenterY--' + pinchCenterY;
prompt.showToast({
message: 'pinchUpdate:\n' + message
});
},
pinchEnd(event){
var scale = event.scale
var pinchCenterX = event.pinchCenterX
var pinchCenterY = event.pinchCenterY
var message = 'scale--' + scale + ',pinchCenterX--' + pinchCenterX +
',pinchCenterY--' + pinchCenterY;
prompt.showToast({
message: 'pinchUpdate:\n' + message
});
},
pinchCancel(event){
var scale = event.scale
var pinchCenterX = event.pinchCenterX
var pinchCenterY = event.pinchCenterY
var message = 'scale--' + scale + ',pinchCenterX--' + pinchCenterX +
',pinchCenterY--' + pinchCenterY;
prompt.showToast({
message: 'pinchCancel:\n' + message
});
},
dragStart(event){
var type = event.type
var globalX = event.globalX
var globalY = event.globalY
var timestamp = event.timestamp
var message = 'type--' + type + ',globalX--' + globalX +
',globalY--' + globalY + ',timestamp--' + timestamp;
prompt.showToast({
message: 'dragStart:\n' + message
});
},
drag(event){
var type = event.type
var globalX = event.globalX
var globalY = event.globalY
var timestamp = event.timestamp
var message = 'type--' + type + ',globalX--' + globalX +
',globalY--' + globalY + ',timestamp--' + timestamp;
prompt.showToast({
message: 'drag:\n' + message
});
},
dragEnd(event){
var type = event.type
var globalX = event.globalX
var globalY = event.globalY
var timestamp = event.timestamp
var message = 'type--' + type + ',globalX--' + globalX +
',globalY--' + globalY + ',timestamp--' + timestamp;
prompt.showToast({
message: 'dragEnd:\n' + message
});
},
dragEnter(event){
var type = event.type
var globalX = event.globalX
var globalY = event.globalY
var timestamp = event.timestamp
var message = 'type--' + type + ',globalX--' + globalX +
',globalY--' + globalY + ',timestamp--' + timestamp;
prompt.showToast({
message: 'dragEnter:\n' + message
});
},
dragOver(event){
var type = event.type
var globalX = event.globalX
var globalY = event.globalY
var timestamp = event.timestamp
var message = 'type--' + type + ',globalX--' + globalX +
',globalY--' + globalY + ',timestamp--' + timestamp;
prompt.showToast({
message: 'dragOver:\n' + message
});
},
dragLeave(event){
var type = event.type
var globalX = event.globalX
var globalY = event.globalY
var timestamp = event.timestamp
var message = 'type--' + type + ',globalX--' + globalX +
',globalY--' + globalY + ',timestamp--' + timestamp;
prompt.showToast({
message: 'dragLeave:\n' + message
});
},
drop(event){
var type = event.type
var globalX = event.globalX
var globalY = event.globalY
var timestamp = event.timestamp
var message = 'type--' + type + ',globalX--' + globalX +
',globalY--' + globalY + ',timestamp--' + timestamp;
prompt.showToast({
message: 'drop:\n' + message
});
},
start(event){
prompt.showToast({
message: "开始加载时触发。"
});
},
complete(event){
prompt.showToast({
message: "加载完成时触发。"
});
},
accessibility(event){
prompt.showToast({
message: JSON.stringify(event)
});
}
}
/**
* 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.
*/
.container {
flex-direction:row;
width:100%;
height:100%;
padding: 1px;
}
.title{
width: 100%;
font-size: 18px;
margin: 2px;
padding: 2px;
font-weight: bold;
text-align: center;
}
.sub-title{
width: 100%;
font-size: 14px;
text-align: left;
margin: 2px;
padding: 2px;
}
.style-container{
flex-direction: column;
width: 50%;
}
#styleOne{
display:flex;
width: 150px;
height: 20px;
}
#styleTwo{
display:none;
width: 150px;
height: 20px;
}
#styleThree{
visibility: visible;
width: 50px;
height: 20px;
}
#styleFour{
visibility: hidden;
width: 50px;
height: 20px;
}
#styleOneDiv{
display:flex;
background-color:red;
width: 100%;
height: 50px;
}
#styleTwoDiv{
display:none;
background-color:yellow;
width: 100%;
height: 50px;
}
#styleThreeDiv{
visibility: visible;
background-color:black;
width: 100%;
height: 50px;
}
#styleFourDiv{
visibility: hidden;
background-color:red;
width: 100%;
height: 50px;
}
<!--/**
* 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.
*/-->
<div class="container">
<div class="style-container">
<text class="title">
input通用样式
</text>
<text class="sub-title">
通用样式1 display
</text>
<div id="styleOneDiv">
<richtext id="styleOne">
</richtext>
</div>
<div id="styleTwoDiv">
<richtext id="styleTwo">
</richtext>
</div>
<text class="sub-title">
通用样式2 visibility
</text>
<div id="styleThreeDiv">
<richtext id="styleThree">
</richtext>
</div>
<div id="styleFourDiv">
<richtext id="styleFour">
</richtext>
</div>
</div>
<div style="background-color: #000000; width: 2px; height: 100%;">
</div>
<div class="specific-container">
<text class="title">
input特有样式
</text>
</div>
</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 {
}
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册