shuiyu1123
467a42bf60
- 修复 index.ux 中 showToast 属性名与方法名冲突导致 toast 功能失效 - 修复 about.ux 版权年份 2024→2026 - 修复 package.json 名称与应用名不匹配 - 修复 detail.ux/offline.ux 中 toast 使用 transform 不兼容快应用 - 修复 detail.ux/offline.ux 中 toast 文字颜色不可见(#000→#fff) - 修复 InputMethod.ux 中乱码注释和拼写错误(tookit→toolkit) - 修复 home.ux 底部版本文字显示旧名称 - 修复 index.ux 错误信息使用模板字符串兼容性问题 - 将 * 按钮从保存离线页改为添加收藏功能
783 lines
37 KiB
XML
783 lines
37 KiB
XML
<template>
|
|
<div class="page" style="flex-direction: column;" show="{{!hide}}">
|
|
<div style="background-color:black" >
|
|
<!-- 圆屏62 -->
|
|
<div if="{{screentype==='circle'}}" style="width: 480px;height: 321px;">
|
|
<!-- 全键盘 -->
|
|
<div if="{{keyboardtype!='T9'}}" style="width: 480px;height: 321px;">
|
|
<img src="/components/InputMethod/assets/full/back2.png" style="position: absolute;top:38px;left:7px;width:466px;height:52px;" @click="onBtnClick('switchCn')" show="{{numFlag}}" />
|
|
<img src="/components/InputMethod/assets/full/123.png" style="position: absolute;top:266px;left:119px;width:120px;height:48px;" @click="onBtnClick('switchNum')" show="{{downFlag==='' && !numFlag && lang==='cn'}}" />
|
|
<img src="/components/InputMethod/assets/full/bigA.png" style="position: absolute;top:266px;left:119px;width:120px;height:48px;" @click="onBtnClick('switchLow')" show="{{downFlag==='' && upperFlag && lang==='en'}}" />
|
|
<img src="/components/InputMethod/assets/full/A.png" style="position: absolute;top:266px;left:119px;width:120px;height:48px;" @click="onBtnClick('switchUpper')" show="{{downFlag==='' && !upperFlag && lang==='en'}}" />
|
|
<div style="position: absolute;top:38px;left:78px;width:324px;height:52px;background-color:rgb(38,38,38);border-radius: 12px;border: 3px solid #333333" show="{{downFlag===''&& !numFlag}}"></div>
|
|
<img show="{{resultList.length > 0}}" style="position: absolute;top:43px;left:355px;" src="/components/InputMethod/assets/full/down.png" @click="onBtnClick('down')" />
|
|
<!-- 带变量的相对路径在 aiot-toolkit 2.0.4 中修复-->
|
|
<img if="{{lang==='cn'}}" src="/components/InputMethod/assets/full/cn.png" style="position: absolute;top:38px;left:7px;width:67px;height:52px;" @click="onBtnClick('lang')" show="{{downFlag==='' && !numFlag}}" />
|
|
<img if="{{lang==='en'}}" src="/components/InputMethod/assets/full/en.png" style="position: absolute;top:38px;left:7px;width:67px;height:52px;" @click="onBtnClick('lang')" show="{{downFlag==='' && !numFlag}}" />
|
|
<div style="position: absolute;top:-4px;left:78px;width:324px;" show="{{downFlag==='' && !numFlag && cval}}">
|
|
<text class="caltext" style="width:296px;"> {{cval}}_ </text>
|
|
</div>
|
|
<div style="position: absolute;top:38px;left:80px;width:277px" show="{{lang === 'cn'&& !numFlag}}">
|
|
<div class="item column center" for="{{cvalList}}">
|
|
<input show='{{resultList.length > $idx}}' class="calbtn0" type="button" value="{{resultList[$idx]}}" @click="onRsSelect(resultList[$idx])" />
|
|
</div>
|
|
</div>
|
|
<div style="position: absolute;top:38px;left:80px;width:320px;height:52px;align-content: center;align-items: center;justify-content: center" show="{{downFlag==='' && !numFlag && lang==='en'}}" @click="onBtnClick('switchNum')" >
|
|
<img src="/components/InputMethod/assets/full/123_boardless.png" />
|
|
</div>
|
|
<!-- 这里使用show会导致每次输入都会加载全部候选列表，很卡 -->
|
|
<list class="list3" if="{{downFlag==='down'}}">
|
|
<list-item type="waitingRows62t9" class="item3" for="{{itemArray in resultList2}}">
|
|
<div class="item column center" style="height:52px;" for="{{item in itemArray}}">
|
|
<input class="calbtn0" type="button" value="{{item}}" @click="onRsSelect(item)" />
|
|
</div>
|
|
</list-item>
|
|
</list>
|
|
<div style="position: absolute;top:95px;left:8px;width:464px;height:52px;" show="{{downFlag===''&&!numFlag}}">
|
|
<img src="/components/InputMethod/assets/full/Q.png" style="width:54px;height:52px;margin-right: 4px;" @click="onSelect('Q')" />
|
|
<text class="calbtnfull" for="{{item in keys['full62'][0]}}" @click="onSelect(item)">{{item}}</text>
|
|
<img src="/components/InputMethod/assets/full/P.png" style="width:54px;height:52px;" @click="onSelect('P')" />
|
|
</div>
|
|
<div style="position: absolute;top:152px;left:23px;width:438px;height:52px;" show="{{downFlag===''&&!numFlag}}">
|
|
<img src="/components/InputMethod/assets/full/btA.png" style="width:60px;height:52px;margin-right: 4px;" @click="onSelect('A')" />
|
|
<text class="calbtnfull" for="{{item in keys['full62'][1]}}" @click="onSelect(item)">{{item}}</text>
|
|
<img src="/components/InputMethod/assets/full/L.png" style="width:60px;height:52px;" @click="onSelect('L')" />
|
|
</div>
|
|
<div style="position: absolute;top:209px;left:56px;width:368px;height:52px;" show="{{downFlag===''&&!numFlag}}">
|
|
<img src="/components/InputMethod/assets/full/Z.png" style="width:72px;height:52px;margin-right: 4px;" @click="onSelect('Z')" />
|
|
<text class="calbtnfull" for="{{item in keys['full62'][2]}}" @click="onSelect(item)">{{item}}</text>
|
|
<img src="/components/InputMethod/assets/full/M.png" style="width:72px;height:52px;" @click="onSelect('M')" />
|
|
</div>
|
|
<div style="position: absolute;top:95px;left:8px;width:464px;height:52px;" show="{{numFlag}}">
|
|
<img src="/components/InputMethod/assets/full/1.png" style="width:54px;height:52px;margin-right: 4px;" @click="onSelect('1')" />
|
|
<text class="calbtnfull" for="{{item in keys['sign62'][0]}}" @click="onSelect(item)">{{item}}</text>
|
|
<img src="/components/InputMethod/assets/full/0.png" style="width:54px;height:52px;" @click="onSelect('0')" />
|
|
</div>
|
|
<div style="position: absolute;top:152px;left:23px;width:438px;height:52px;" show="{{numFlag}}">
|
|
<img src="/components/InputMethod/assets/full/2-1.png" style="width:60px;height:52px;margin-right: 4px;" @click="onSelect('~')" />
|
|
<text class="calbtnfull" for="{{item in keys['sign62'][1]}}" @click="onSelect(item)">{{item}}</text>
|
|
<img src="/components/InputMethod/assets/full/2-2.png" style="width:60px;height:52px;" @click="onSelect('?')" />
|
|
</div>
|
|
<div style="position: absolute;top:209px;left:56px;width:368px;height:52px;" show="{{numFlag}}">
|
|
<img src="/components/InputMethod/assets/full/3-1.png" style="width:72px;height:52px;margin-right: 4px;" @click="onSelect('(')" />
|
|
<text class="calbtnfull" for="{{item in keys['sign62'][2]}}" @click="onSelect(item)">{{item}}</text>
|
|
<img src="/components/InputMethod/assets/full/3-2.png" style="width:72px;height:52px;" @click="onSelect(')')" />
|
|
</div>
|
|
<img src="/components/InputMethod/assets/full/del.png" style="position: absolute;top:38px;left:406px;width:67px;height:52px;" @click="onBtnClick('D')" show="{{downFlag==='' && !numFlag }}" />
|
|
<img src="/components/InputMethod/assets/full/space.png" style="position: absolute;top:266px;left:242px;width:120px;height:48px;" @click="onBtnClick('space')" show="{{downFlag==='' && !numFlag }}" />
|
|
<img src="/components/InputMethod/assets/full/4-2.png" style="position: absolute;top:266px;left:242px;width:120px;height:48px;" @click="onSelect(''')" show="{{numFlag }}" />
|
|
<img src="/components/InputMethod/assets/full/4-1.png" style="position: absolute;top:266px;left:119px;width:120px;height:48px;" @click="onSelect(',')" show="{{numFlag }}" />
|
|
<img style="position: absolute;top:204px;left:78px;" src="/components/InputMethod/assets/full/up.png" @click="onBtnClick('down')" show="{{downFlag==='down'}}" />
|
|
</div>
|
|
<!-- 九键 -->
|
|
<div else style="width: 480px;height: 321px;">
|
|
<img src="/components/InputMethod/assets/t9/back2.png" style="position: absolute;top:35px;left:31px;width: 60px;height: 60px;" @click="onBtnClick('switchCn')" show="{{numFlag}}" />
|
|
<img src="/components/InputMethod/assets/t9/123.png" style="position: absolute;top:99px;left:31px;width: 60px;height: 60px;" @click="onBtnClick('switchNum')" show="{{downFlag==='' && !numFlag && lang==='cn'}}" />
|
|
<img src="/components/InputMethod/assets/t9/bigA.png" style="position: absolute;top:99px;left:31px;width: 60px;height: 60px;" @click="onBtnClick('switchLow')" show="{{downFlag==='' && !numFlag && upperFlag && lang==='en'}}" />
|
|
<img src="/components/InputMethod/assets/t9/a.png" style="position: absolute;top:99px;left:31px;width: 60px;height: 60px;" @click="onBtnClick('switchUpper')" show="{{downFlag==='' && !numFlag && !upperFlag && lang==='en'}}" />
|
|
<div style="position: absolute;top:35px;left:95px;width:290px;height:60px;background-color:rgb(38,38,38);border-radius: 999px;border: 3px solid #333333" show="{{downFlag===''&& !numFlag}}"></div>
|
|
<img show="{{resultList.length > 0}}" style="position: absolute;top:44px;left:338px;" src="/components/InputMethod/assets/full/down.png" @click="onBtnClick('down')" />
|
|
<!-- 带变量的相对路径在 aiot-toolkit 2.0.4 中修复-->
|
|
<img if="{{lang==='cn'}}" src="/components/InputMethod/assets/t9/cn.png" style="position: absolute;top:35px;left:31px;width: 60px;height: 60px;" @click="onBtnClick('lang')" show="{{downFlag==='' && !numFlag}}" />
|
|
<img if="{{lang==='en'}}" src="/components/InputMethod/assets/t9/en.png" style="position: absolute;top:35px;left:31px;width: 60px;height: 60px;" @click="onBtnClick('lang')" show="{{downFlag==='' && !numFlag}}" />
|
|
<div style="position: absolute;top:-4px;left:95px;width:145px;height:40px;" show="{{downFlag==='' && !numFlag && cval}}">
|
|
<text class="caltext" style="width:145px;"> {{cval}}_ </text>
|
|
</div>
|
|
<div show="{{downFlag==='' && !numFlag}}" style="position: absolute;top:-4px;left:240px;width:145px;height:40px;justify-content:flex-end">
|
|
<text for="{{waitingList}}" class="waiting-keys" style="color:{{$idx===waitingIndex ? 'rgb(13,132,255)' : 'white'}};" @click="onSelectWaiting($idx)">{{waitingList[$idx]}}</text>
|
|
</div>
|
|
<div style="position: absolute;top:39px;left:105px;width:233px" show="{{lang === 'cn'&& !numFlag}}">
|
|
<div class="item column center" for="{{cvalList}}">
|
|
<input show='{{resultList.length > $idx}}' class="calbtn0" type="button" value="{{resultList[$idx]}}" @click="onRsSelect(resultList[$idx])" />
|
|
</div>
|
|
</div>
|
|
<div style="position: absolute;top:35px;left:95px;width:290px;height:60px;align-content: center;align-items: center;justify-content: center" show="{{downFlag==='' && !numFlag && lang==='en'}}" @click="onBtnClick('switchNum')" >
|
|
<img src="/components/InputMethod/assets/full/123_boardless.png" />
|
|
</div>
|
|
<!-- 这里使用show会导致每次输入都会加载全部候选列表，很卡 -->
|
|
<list class="list3" if="{{downFlag==='down'}}">
|
|
<list-item type="waitingRows62full" class="item3" for="{{itemArray in resultList2}}">
|
|
<div class="item column center" style="height:52px;" for="{{item in itemArray}}">
|
|
<input class="calbtn0" type="button" value="{{item}}" @click="onRsSelect(item)" />
|
|
</div>
|
|
</list-item>
|
|
</list>
|
|
<div style="position: absolute;top:99px;left:95px;width:294px;height:60px;" show="{{downFlag===''&&!numFlag}}">
|
|
<text class="calbtnt9" @click="onSelect('select')">选择</text>
|
|
<text class="calbtnt9" for="{{item in keys['t9'][0]}}" @click="onSelect(item)">{{item.toUpperCase()}}</text>
|
|
</div>
|
|
<div style="position: absolute;top:163px;left:95px;width:294px;height:60px;" show="{{downFlag===''&&!numFlag}}">
|
|
<text class="calbtnt9" for="{{item in keys['t9'][1]}}" @click="onSelect(item)">{{item.toUpperCase()}}</text>
|
|
</div>
|
|
<div style="position: absolute;top:227px;left:95px;width:294px;height:60px;" show="{{downFlag===''&&!numFlag}}">
|
|
<text class="calbtnt9" for="{{item in keys['t9'][2]}}" @click="onSelect(item)">{{item.toUpperCase()}}</text>
|
|
</div>
|
|
<div style="position: absolute;top:35px;left:95px;width:294px;height:60px;" show="{{numFlag}}">
|
|
<text class="calbtnt9" @click="onSelect('7')">7</text>
|
|
<text class="calbtnt9" @click="onSelect('8')">8</text>
|
|
<text class="calbtnt9" @click="onSelect('9')">9</text>
|
|
</div>
|
|
<div style="position: absolute;top:99px;left:95px;width:294px;height:60px;" show="{{numFlag}}">
|
|
<text class="calbtnt9" @click="onSelect('4')">4</text>
|
|
<text class="calbtnt9" @click="onSelect('5')">5</text>
|
|
<text class="calbtnt9" @click="onSelect('6')">6</text>
|
|
</div>
|
|
<div style="position: absolute;top:163px;left:95px;width:294px;height:60px;" show="{{numFlag}}">
|
|
<text class="calbtnt9" @click="onSelect('1')">1</text>
|
|
<text class="calbtnt9" @click="onSelect('2')">2</text>
|
|
<text class="calbtnt9" @click="onSelect('3')">3</text>
|
|
</div>
|
|
<div style="position: absolute;top:227px;left:95px;width:294px;height:60px;" show="{{numFlag}}">
|
|
<text class="calbtnt9" @click="onSelect('.')">.</text>
|
|
<text class="calbtnt9" @click="onSelect('0')">0</text>
|
|
<text class="calbtnt9" @click="onSelect(',')">,</text>
|
|
</div>
|
|
<img src="/components/InputMethod/assets/t9/del.png" style="position: absolute;top:35px;left:389px;width: 60px;height: 60px;" @click="onBtnClick('D')" show="{{downFlag==='' }}" />
|
|
<img src="/components/InputMethod/assets/t9/space.png" style="position: absolute;top:99px;left:389px;width: 60px;height: 60px;" @click="onBtnClick('space')" show="{{downFlag==='' && !numFlag }}" />
|
|
<img style="position: absolute;top:204px;left:78px;" src="/components/InputMethod/assets/full/up.png" @click="onBtnClick('down')" show="{{downFlag==='down'}}" />
|
|
</div>
|
|
</div>
|
|
<!-- 方屏67 -->
|
|
<div if="{{screentype==='rect'}}" style="width: 100%;height: 255px;flex-direction: column">
|
|
<!-- 九键中文 -->
|
|
<div if="{{keyboardtype=='T9' && !numFlag}}" style="position:absolute;top:-11px;width:100%;height:276px;justify-content: center;">
|
|
<div style="top:77px;height:189px;width:100%;align-items: stretch;justify-content: space-between;flex-direction: column;padding:6px 3px">
|
|
<div class="keyboard-rows-rect-t9">
|
|
<text class="calbtnt9 calbtnt9-rect" @click="onSelect('select')">
|
|
选择
|
|
<span if="{{waitingList.length != 0}}" class="waiting-keys" style="color:rgb(13,132,255);" @click="onSelectWaiting(waitingIndex)">
|
|
{{waitingList[waitingIndex].toUpperCase()}}
|
|
</span>
|
|
</text>
|
|
<text class="calbtnt9 calbtnt9-rect" for="{{item in keys['t9'][0]}}" @click="onSelect(item)">{{item.toUpperCase()}}</text>
|
|
</div>
|
|
<div class="keyboard-rows-rect-t9">
|
|
<text class="calbtnt9 calbtnt9-rect" for="{{item in keys['t9'][1]}}" @click="onSelect(item)">{{item.toUpperCase()}}</text>
|
|
</div>
|
|
<div class="keyboard-rows-rect-t9">
|
|
<text class="calbtnt9 calbtnt9-rect" for="{{item in keys['t9'][2]}}" @click="onSelect(item)">{{item.toUpperCase()}}</text>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div else style="position:absolute;top:-11px;width:100%;height:276px;justify-content: center">
|
|
<progress percent="{{percent67}}" style="position:absolute;bottom: 12px;width:80px;color:#ffffff;stroke-width:6px;layer-color:#262626;"></progress>
|
|
<scroll id="keyboard67" scroll-x="{{true}}" onscroll="handleScroll">
|
|
<div if="{{!numFlag}}" style="left: 6px; flex-direction: column;">
|
|
<div style="margin-left: 0px;margin-top: 0px;height: 60px;">
|
|
<text class="calbtn67" for="{{item in keys['full'][0]}}" @click="onSelect(item)">{{item}}</text>
|
|
</div>
|
|
<div style="margin-left: 32px;margin-top: -5px;height: 60px;">
|
|
<text class="calbtn67" for="{{item in keys['full'][1]}}" @click="onSelect(item)">{{item}}</text>
|
|
</div>
|
|
<div style="margin-left: 64px;margin-top: -5px;height: 60px;">
|
|
<text class="calbtn67" for="{{item in keys['full'][2]}}" @click="onSelect(item)">{{item}}</text>
|
|
<img src="/components/InputMethod/assets/horizontal/space.png" style="width: 60px;height: 60px;" @click="onBtnClick('space')" />
|
|
</div>
|
|
</div>
|
|
<div else style="left: 6px; flex-direction: column;">
|
|
<div style="margin-left: 0px;margin-top: 0px;height: 60px;">
|
|
<text class="calbtn67" for="{{item in keys['sign'][0]}}" @click="onSelect(item)">{{item}}</text>
|
|
</div>
|
|
<div style="margin-left: 32px;margin-top: -5px;height: 60px;">
|
|
<text class="calbtn67" for="{{item in keys['sign'][1]}}" @click="onSelect(item)">{{item}}</text>
|
|
</div>
|
|
<div style="margin-left: 64px;margin-top: -5px;height: 60px;">
|
|
<text class="calbtn67" for="{{item in keys['sign'][2]}}" @click="onSelect(item)">{{item}}</text>
|
|
</div>
|
|
</div>
|
|
</scroll>
|
|
</div>
|
|
<div style="width: 100%; flex-direction: row; justify-content: center; top:6px; padding:0 6px;">
|
|
<img src="/components/InputMethod/assets/horizontal/cn.png" style="padding: 6px;width: 60px;height: 60px;" @click="onBtnClick('lang')" if="{{downFlag==='' && !numFlag && lang==='cn'}}" />
|
|
<div if="{{lang === 'cn' && !numFlag}}" style="margin-left: 6px;flex: 1;height: 60px;background-color:#262626;border-color: #333333; border-width: 3px; border-radius: 100px;flex-direction: row;align-items:center">
|
|
<scroll id="cvalWaiting" scroll-x="{{true}}" style="position:absolute;width: 85%;height: 42px;">
|
|
<div style="position: absolute;left: 0px;height: 42px;padding-left:20px;padding-right:20px">
|
|
<text class="calbtn02" style="padding-right:10px" @click="pushCval">{{cval}}</text>
|
|
<text for="{{cvalList}}" show="{{resultList.length > $idx}}" class="calbtn02" style="padding-right:10px" @click="onRsSelect(resultList[$idx])">{{resultList[$idx]}}</text>
|
|
</div>
|
|
</scroll>
|
|
<img if="{{resultList.length > 0}}" style="position:absolute;right: 8px; width: 60px;height: 40px;" src="/components/InputMethod/assets/horizontal/down2.png" @click="onBtnClick('down')" />
|
|
</div>
|
|
|
|
<img src="/components/InputMethod/assets/horizontal/en.png" style="padding: 6px;width: 60px;height: 60px;" @click="onBtnClick('lang')" if="{{downFlag==='' && !numFlag && lang==='en'}}" />
|
|
<img src="/components/InputMethod/assets/horizontal/bigA.png" style="padding: 6px;margin-left: 6px;width:94px;height:60px;" @click="onBtnClick('switchLow')" if="{{downFlag==='' && upperFlag && lang==='en'&& !numFlag}}" />
|
|
<img src="/components/InputMethod/assets/horizontal/a.png" style="padding: 6px;margin-left: 6px;width:94px;height:60px;" @click="onBtnClick('switchUpper')" if="{{downFlag==='' && !upperFlag && lang==='en'&& !numFlag}}" />
|
|
<img src="/components/InputMethod/assets/horizontal/123.png" style="margin-left: 6px;padding: 6px;margin-left: 6px;width: 94px;height: 60px;" @click="onBtnClick('switchNum')" if="{{downFlag==='' && !numFlag && lang==='en'}}" />
|
|
<img src="/components/InputMethod/assets/horizontal/back2.png" style="margin-left: 6px;padding: 6px;width: 159px;height: 60px;" @click="onBtnClick('switchCn')" if="{{numFlag}}" />
|
|
<img if="{{!numFlag}}" src="/components/InputMethod/assets/horizontal/del.png" style="margin-left: 6px;padding: 6px;width: 60px;height: 60px;" @click="onBtnClick('D')" />
|
|
<img else src="/components/InputMethod/assets/horizontal/del2.png" style="margin-left: 6px;padding: 6px;" @click="onBtnClick('D')" />
|
|
</div>
|
|
<!-- 这里使用show会导致每次输入都会加载全部候选列表，很卡 -->
|
|
<div style="position: absolute;left: 0px;top: 0px;width: 100%;height: 252px;background-color: black; justify-content:center; flex-direction:column; align-items:center" if="{{downFlag==='down'}}">
|
|
<div class="list67">
|
|
<list style="width:100%;height:100%;">
|
|
<list-item type="waitingRows67" class="item67" for="{{itemArray in resultList2}}">
|
|
<div class="item column center" for="{{item in itemArray}}">
|
|
<input class="calbtn02" type="button" value="{{item}}" @click="onRsSelect(item)" />
|
|
</div>
|
|
</list-item>
|
|
</list>
|
|
</div>
|
|
<img style="margin-top:5px" src="/components/InputMethod/assets/horizontal/up2.png" @click="onBtnClick('down')" />
|
|
</div>
|
|
</div>
|
|
<!-- 胶囊66 -->
|
|
<div if="{{screentype==='pill-shaped'}}" style="width: 100%;height: 305px">
|
|
<div style="position:absolute;left:0px;top:34px;width:100%;height:276px;">
|
|
<progress percent="{{30+percent66}}" type="arc" style="start-angle:204deg;total-angle:-48deg;width:188px;height:188px;top:82px;left:2px;position:absolute;color:#ffffff;stroke-width:6px;layer-color:#262626;margin-left: {{(screenWidth - 192)/2}}px;"></progress>
|
|
<scroll id="keyboard66" scroll-x="{{true}}" onscroll="handleScroll" style="padding-left: {{(screenWidth - 192)/2}}px;padding-right: {{(screenWidth - 192)/2}}px;">
|
|
<div if="{{!numFlag}}" style="left: 3px; flex-direction: column;">
|
|
<div style="margin-left: 0px;margin-top: 0px;height: 60px;">
|
|
<text class="calbtn66" for="{{item in keys['full'][0]}}" @click="onSelect(item)">{{item}}</text>
|
|
</div>
|
|
<div style="margin-left: 32px;margin-top: -5px;height: 60px;">
|
|
<text class="calbtn66" for="{{item in keys['full'][1]}}" @click="onSelect(item)">{{item}}</text>
|
|
</div>
|
|
<div style="margin-left: 64px;margin-top: -5px;height: 60px;">
|
|
<text class="calbtn66" for="{{item in keys['full'][2]}}" @click="onSelect(item)">{{item}}</text>
|
|
<img src="/components/InputMethod/assets/arc/space.png" style="width: 60px;height: 60px;" @click="onBtnClick('space')" />
|
|
</div>
|
|
</div>
|
|
<div else style="left: 3px; flex-direction: column;">
|
|
<div style="margin-left: 0px;margin-top: 0px;height: 60px;">
|
|
<text class="calbtn66" for="{{item in keys['sign'][0]}}" @click="onSelect(item)">{{item}}</text>
|
|
</div>
|
|
<div style="margin-left: 32px;margin-top: -5px;height: 60px;">
|
|
<text class="calbtn66" for="{{item in keys['sign'][1]}}" @click="onSelect(item)">{{item}}</text>
|
|
</div>
|
|
<div style="margin-left: 64px;margin-top: -5px;height: 60px;">
|
|
<text class="calbtn66" for="{{item in keys['sign'][2]}}" @click="onSelect(item)">{{item}}</text>
|
|
</div>
|
|
</div>
|
|
</scroll>
|
|
</div>
|
|
<div style="position: absolute;left: {{(screenWidth - 192)/2}}px;top: 0px;width: 192px;height: 110px;">
|
|
<img style="position: absolute;left: 3px;top: 47px;width: 186px;height: 60px;" src="/components/InputMethod/assets/arc/search.png" />
|
|
<scroll id="cvalWaiting" scroll-x="{{true}}" style="position: absolute;left: 15px;top: 56px;width: 144px;height: 42px;">
|
|
<div style="position: absolute;left: 0px;top: 0px;height: 42px;padding-right:20px">
|
|
<text class="calbtn02" style="padding-right:10px" @click="pushCval">{{cval}}</text>
|
|
<text for="{{cvalList}}" show="{{resultList.length > $idx}}" class="calbtn02" style="padding-right:10px" @click="onRsSelect(resultList[$idx])">{{resultList[$idx]}}</text>
|
|
</div>
|
|
</scroll>
|
|
<img show="{{resultList.length > 0}}" style="position: absolute;left: 120px;top: 57px;width: 60px;height: 40px;" src="/components/InputMethod/assets/arc/down2.png" @click="onBtnClick('down')" />
|
|
<!-- 带变量的相对路径在 aiot-toolkit 2.0.4 中修复-->
|
|
<img if="{{lang==='cn'}}" src="/components/InputMethod/assets/arc/cn.png" style="position: absolute;top:0px;left:9px;width: 48px;height: 42px;" @click="onBtnClick('lang')" show="{{downFlag==='' && !numFlag}}" />
|
|
<img if="{{lang==='en'}}" src="/components/InputMethod/assets/arc/en.png" style="position: absolute;top:0px;left:9px;width: 48px;height: 42px;" @click="onBtnClick('lang')" show="{{downFlag==='' && !numFlag}}" />
|
|
<img src="/components/InputMethod/assets/arc/back2.png" style="position: absolute;top:0px;left:9px;width: 48px;height: 42px;" @click="onBtnClick('switchCn')" show="{{numFlag && lang==='cn'}}" />
|
|
<img src="/components/InputMethod/assets/arc/123.png" style="position: absolute;left: 70px;top: 0px;width: 52px;height: 42px;" @click="onBtnClick('switchNum')" show="{{downFlag==='' && !numFlag && lang==='cn'}}" />
|
|
<img src="/components/InputMethod/assets/arc/bigA.png" style="position: absolute;top:0px;left:72px;width:48px;height:42px;" @click="onBtnClick('switchLow')" show="{{downFlag==='' && upperFlag && lang==='en'}}" />
|
|
<img src="/components/InputMethod/assets/arc/a.png" style="position: absolute;top:0px;left:72px;width:48px;height:42px;" @click="onBtnClick('switchUpper')" show="{{downFlag==='' && !upperFlag && lang==='en'}}" />
|
|
<img src="/components/InputMethod/assets/arc/del.png" style="position: absolute;left: 135px;top: 0px;width: 48px;height: 42px;" @click="onBtnClick('D')" />
|
|
</div>
|
|
<!-- 这里使用show会导致每次输入都会加载全部候选列表，很卡 -->
|
|
<div style="position: absolute;top: 47px;width: 100%;height: 263px;background-color: black;" if="{{downFlag==='down'}}">
|
|
<div style="position: absolute;left: {{(screenWidth - 192)/2}}px;width: 192px;height: 263px;">
|
|
<list class="list66">
|
|
<list-item type="waitingRows66" class="item66" for="{{itemArray in resultList2}}">
|
|
<div class="item column center" for="{{item in itemArray}}">
|
|
<input class="calbtn0" type="button" value="{{item}}" @click="onRsSelect(item)" />
|
|
</div>
|
|
</list-item>
|
|
</list>
|
|
<img style="position: absolute;top:196px;left:56px;width: 80px;height: 60px;" src="/components/InputMethod/assets/arc/up2.png" @click="onBtnClick('down')" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import vibrator from "@system.vibrator";
|
|
import device from '@system.device'
|
|
import { SimpleInputMethod } from "./assets/dicUtil.js";
|
|
function doSearchDic(word, cb) {
|
|
let hanzi = SimpleInputMethod.getHanzi(word);
|
|
if (hanzi && hanzi[0]) {
|
|
cb(hanzi[0]);
|
|
} else {
|
|
cb([]);
|
|
}
|
|
}
|
|
function deleteLast(t) {
|
|
if (t) {
|
|
return t.substr(0, t.length - 1);
|
|
}
|
|
return "";
|
|
}
|
|
export default {
|
|
props: {
|
|
hide: {
|
|
default: true,
|
|
},
|
|
keyboardtype: {
|
|
default: "QWERTY",
|
|
},
|
|
maxlength: {
|
|
default: 5,
|
|
},
|
|
vibratemode: {
|
|
default: "",
|
|
},
|
|
screentype: {
|
|
default: "circle",
|
|
},
|
|
},
|
|
data: {
|
|
cval: "",
|
|
resultList: [],
|
|
resultList2: [],
|
|
waitingList: [],
|
|
waitingIndex: -1,
|
|
lastWaitingStr: "",
|
|
downFlag: "",
|
|
lang: "cn",
|
|
numFlag: false,
|
|
upperFlag: false,
|
|
cvalList: [0, 1, 2, 3, 4],
|
|
percent67: 52,
|
|
percent66: 0,
|
|
// 针对screenShape为rect的设备，会自动获取screenWidth并绑定到根div
|
|
// 这样便能同时适配n67和o65甚至是后续设备，但实际效果可能受designWidth影响
|
|
screenWidth: 336,
|
|
keys: {
|
|
full: [
|
|
["Q", "W", "E", "R", "T", "Y", "U", "I", "O", "P"],
|
|
["A", "S", "D", "F", "G", "H", "J", "K", "L"],
|
|
["Z", "X", "C", "V", "B", "N", "M"],
|
|
],
|
|
sign: [
|
|
["1", "2", "3", "4", "5", "6", "7", "8", "9", "0"],
|
|
["~", "!", "@", "#", "%", "\u201C", "\u201D", "*", "?", "/"],
|
|
["(", ")", "-", "_", ":", ";", "\uFF0C", "\u3002", "."],
|
|
],
|
|
sign62: [
|
|
["2", "3", "4", "5", "6", "7", "8", "9"],
|
|
["!", "@", "#", "%", "\u201C", "\u201D", "*"],
|
|
[")", "-", "_", ":", ";"],
|
|
],
|
|
full62: [
|
|
["W", "E", "R", "T", "Y", "U", "I", "O"],
|
|
["S", "D", "F", "G", "H", "J", "K"],
|
|
["X", "C", "V", "B", "N"],
|
|
],
|
|
t9: [
|
|
["abc", "def"],
|
|
["ghi", "jkl", "mno"],
|
|
["pqrs", "tuv", "wxyz"],
|
|
],
|
|
},
|
|
},
|
|
onInit() {
|
|
if (this.maxlength) {
|
|
const tempCvalList = [];
|
|
for (let i = 0; i < this.maxlength; i++) {
|
|
tempCvalList.push(i);
|
|
}
|
|
this.cvalList = tempCvalList;
|
|
}
|
|
if (this.screentype === "rect" || this.screentype === "pill-shaped") {
|
|
this.adjustScreenWidth();
|
|
}
|
|
this.$watch("hide", "watchHidePropsChange");
|
|
this.$watch("maxlength", "watchMaxLengthPropsChange");
|
|
},
|
|
addAllTxt(txt) {
|
|
this.$emit("complete", { content: txt });
|
|
},
|
|
onRsSelect(txt) {
|
|
this.onVibrate();
|
|
this.cval = "";
|
|
this.addAllTxt(txt);
|
|
this.clearWaiting();
|
|
this.resetResultList();
|
|
this.downFlag = "";
|
|
},
|
|
onBtnClick(sign) {
|
|
this.onVibrate();
|
|
switch (sign) {
|
|
case "AC":
|
|
this.cval = "";
|
|
this.clearWaiting();
|
|
this.resetResultList();
|
|
break;
|
|
case "lang":
|
|
if (this.lang === "cn") {
|
|
this.lang = "en";
|
|
} else {
|
|
this.lang = "cn";
|
|
}
|
|
this.cval = "";
|
|
this.clearWaiting();
|
|
this.resetResultList();
|
|
break;
|
|
case "D":
|
|
if (this.waitingIndex >= 0) {
|
|
this.clearWaiting();
|
|
this.resetResultList();
|
|
} else if (this.cval.length > 0) {
|
|
this.cval = deleteLast(this.cval);
|
|
this.resetResultList();
|
|
} else {
|
|
this.$emit("delete", {});
|
|
}
|
|
break;
|
|
case "space":
|
|
this.addAllTxt(" ");
|
|
break;
|
|
case "down":
|
|
this.downFlag = this.downFlag === "down" ? "" : "down";
|
|
break;
|
|
case "select":
|
|
if (this.lastWaitingStr != sign && this.lastWaitingStr) {
|
|
if (this.lang === "cn") {
|
|
this.cval += this.waitingList[this.waitingIndex];
|
|
} else {
|
|
if (this.upperFlag) {
|
|
this.addAllTxt(this.waitingList[this.waitingIndex].toUpperCase());
|
|
} else {
|
|
this.addAllTxt(this.waitingList[this.waitingIndex].toLowerCase());
|
|
}
|
|
}
|
|
this.clearWaiting();
|
|
this.resetResultList();
|
|
}
|
|
break;
|
|
case "switchNum":
|
|
this.numFlag = true;
|
|
this.cval = "";
|
|
this.clearWaiting();
|
|
this.resetResultList();
|
|
break;
|
|
case "switchCn":
|
|
this.numFlag = false;
|
|
break;
|
|
case "switchUpper":
|
|
this.upperFlag = true;
|
|
break;
|
|
case "switchLow":
|
|
this.upperFlag = false;
|
|
break;
|
|
default:
|
|
if (sign.length === 1) {
|
|
this.addAllTxt(sign);
|
|
} else {
|
|
if (this.waitingIndex >= 0) {
|
|
if (this.lastWaitingStr === sign) {
|
|
this.waitingIndex++;
|
|
if (this.waitingIndex >= this.lastWaitingStr.length) {
|
|
this.waitingIndex = 0;
|
|
}
|
|
} else {
|
|
if (this.lang === "cn") {
|
|
this.cval += this.waitingList[this.waitingIndex];
|
|
} else {
|
|
if (this.upperFlag) {
|
|
this.addAllTxt(
|
|
this.waitingList[this.waitingIndex].toUpperCase(),
|
|
);
|
|
} else {
|
|
this.addAllTxt(
|
|
this.waitingList[this.waitingIndex].toLowerCase(),
|
|
);
|
|
}
|
|
}
|
|
this.lastWaitingStr = sign;
|
|
this.waitingIndex = 0;
|
|
this.waitingList = sign.split("");
|
|
}
|
|
} else {
|
|
this.lastWaitingStr = sign;
|
|
this.waitingIndex = 0;
|
|
this.waitingList = sign.split("");
|
|
}
|
|
this.resetResultList();
|
|
}
|
|
break;
|
|
}
|
|
},
|
|
clearWaiting() {
|
|
this.waitingList = [];
|
|
this.waitingIndex = -1;
|
|
this.lastWaitingStr = "";
|
|
},
|
|
resetResultList() {
|
|
if (this.screentype != "circle") {
|
|
this.$element("cvalWaiting").scrollTo({
|
|
top: 0,
|
|
left: 0,
|
|
behavior: "smooth",
|
|
});
|
|
}
|
|
let watingStr = "";
|
|
if (this.lastWaitingStr && this.lastWaitingStr[this.waitingIndex]) {
|
|
watingStr = this.lastWaitingStr[this.waitingIndex];
|
|
}
|
|
if (!(this.cval + watingStr) || this.lang != "cn") {
|
|
this.resultList = [];
|
|
this.setResultListAll();
|
|
return;
|
|
}
|
|
this.getResultByWord(this.cval + watingStr);
|
|
},
|
|
setResultListAll() {
|
|
this.resultList2 = [];
|
|
let array = [];
|
|
for (let i = 0; i < this.resultList.length; i++) {
|
|
array.push(this.resultList[i]);
|
|
if (array.length === parseInt(this.maxlength)) {
|
|
this.resultList2.push(array);
|
|
array = [];
|
|
}
|
|
}
|
|
if (array.length > 0 && array.length < parseInt(this.maxlength)) {
|
|
this.resultList2.push(array);
|
|
}
|
|
},
|
|
getResultByWord(val) {
|
|
const that = this;
|
|
doSearchDic(val, function (data) {
|
|
that.resultList = data;
|
|
that.setResultListAll();
|
|
});
|
|
},
|
|
onSelect(num) {
|
|
this.$emit("keydown", { content: num });
|
|
if (this.keyboardtype === "T9" && this.screentype !== "pill-shaped") {
|
|
this.onBtnClick(num);
|
|
return;
|
|
}
|
|
this.onVibrate();
|
|
if (this.lang === "cn" && !this.numFlag) {
|
|
this.cval += num.toLowerCase();
|
|
} else if (this.lang === "en" && !this.numFlag) {
|
|
if (this.upperFlag) {
|
|
this.addAllTxt(num.toUpperCase());
|
|
} else {
|
|
this.addAllTxt(num.toLowerCase());
|
|
}
|
|
} else {
|
|
this.addAllTxt(num);
|
|
}
|
|
this.resetResultList();
|
|
},
|
|
onSelectWaiting(num) {
|
|
this.onVibrate();
|
|
if (this.lang === "cn") {
|
|
this.cval += this.waitingList[num].toString();
|
|
} else {
|
|
if (this.upperFlag) {
|
|
this.addAllTxt(this.waitingList[num].toUpperCase());
|
|
} else {
|
|
this.addAllTxt(this.waitingList[num].toLowerCase());
|
|
}
|
|
}
|
|
this.clearWaiting();
|
|
this.resetResultList();
|
|
},
|
|
watchHidePropsChange(newV, _oldV) {
|
|
this.$emit("visibilityChange", { visible: newV });
|
|
},
|
|
watchMaxLengthPropsChange(newV, _oldV) {
|
|
if (newV) {
|
|
const tempCvalList = [];
|
|
for (let i = 0; i < newV; i++) {
|
|
tempCvalList.push(i);
|
|
}
|
|
this.cvalList = tempCvalList;
|
|
}
|
|
},
|
|
onVibrate() {
|
|
if (this.vibratemode != "") {
|
|
vibrator.vibrate({ mode: this.vibratemode });
|
|
}
|
|
},
|
|
handleScroll(event) {
|
|
let percentTemp67 = (event.scrollX / 636) * 100 + 52.8;
|
|
this.percent67 = parseInt(percentTemp67 <= 100 ? percentTemp67 : 100);
|
|
let percentTemp66 = (event.scrollX / 633) * 100;
|
|
this.percent66 = parseInt(percentTemp66 <= 100 ? percentTemp66 : 100);
|
|
},
|
|
pushCval() {
|
|
this.onVibrate();
|
|
let temp = this.cval;
|
|
this.cval = "";
|
|
this.clearWaiting();
|
|
this.resetResultList();
|
|
this.addAllTxt(temp);
|
|
},
|
|
adjustScreenWidth(){
|
|
device.getInfo({
|
|
success: (data) => {
|
|
this.screenWidth = data.screenWidth;
|
|
}
|
|
})
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style>
|
|
.page {
|
|
width:100%;
|
|
position:absolute;
|
|
left:0;
|
|
bottom:0
|
|
}
|
|
.item {
|
|
height:52px;
|
|
flex:1
|
|
}
|
|
.calbtn0 {
|
|
color:#fff;
|
|
font-size:28px;
|
|
background-color:rgba(38,38,38,0);
|
|
border-radius:0;
|
|
height:52px;
|
|
width:52px;
|
|
text-align:center
|
|
}
|
|
.calbtn02 {
|
|
color:rgb(255,255,255);
|
|
background-color:rgba(38,38,38,0);
|
|
border-radius:0px;
|
|
font-size:32px;
|
|
text-align:center;
|
|
height:42px;
|
|
}
|
|
.calbtnfull {
|
|
color:#fff;
|
|
font-size:24px;
|
|
font-weight:bold;
|
|
background-color:#262626;
|
|
border-radius:12px;
|
|
margin-right:4px;
|
|
height:52px;
|
|
width:40px;
|
|
text-align:center;
|
|
border:3px solid rgba(255,255,255,0.06)
|
|
}
|
|
.calbtnt9 {
|
|
color:#fff;
|
|
font-size:25px;
|
|
font-weight:bold;
|
|
background-color:#262626;
|
|
border-radius:999px;
|
|
margin-right:4px;
|
|
width:94px;
|
|
height:60px;
|
|
text-align:center;
|
|
border:3px solid rgba(255,255,255,0.06)
|
|
}
|
|
.caltext {
|
|
text-align:left;
|
|
line-height:38px;
|
|
lines:1;
|
|
text-overflow:ellipsis;
|
|
color:#0d84ff;
|
|
height:45px;
|
|
font-size:28px;
|
|
text-align:left;
|
|
font-weight:bold;
|
|
padding-left:8px
|
|
}
|
|
.list3 {
|
|
position:absolute;
|
|
top:38px;
|
|
left:78px;
|
|
width:324px;
|
|
height:160px;
|
|
flex-direction:column;
|
|
background-color:#262626;
|
|
border-radius:12px
|
|
}
|
|
.item3 {
|
|
width:324px;
|
|
height:52px
|
|
}
|
|
.calbtn67 {
|
|
color:rgb(255,255,255);
|
|
font-size:32px;
|
|
font-weight:bold;
|
|
background-color:rgb(38,38,38);
|
|
margin-right:4px;
|
|
width:60px;
|
|
height:60px;
|
|
border-radius:30px;
|
|
text-align:center;
|
|
border:3px solid rgba(255,255,255,0.06);
|
|
}
|
|
#keyboard67 {
|
|
position:absolute;
|
|
left:0px;
|
|
top:82px;
|
|
width:100%;
|
|
height:170px;
|
|
}
|
|
#keyboard66 {
|
|
position:absolute;
|
|
left:0px;
|
|
top:82px;
|
|
width:100%;
|
|
height:170px;
|
|
}
|
|
.list67 {
|
|
top:0px;
|
|
width:96.4%;
|
|
height:170px;
|
|
border-radius:30px;
|
|
background-color:#262626;
|
|
border:3px solid rgba(255,255,255,0.06);
|
|
padding:0px 10px;
|
|
}
|
|
.item67 {
|
|
height:50px;
|
|
}
|
|
.calbtn66 {
|
|
color:rgb(255,255,255);
|
|
font-size:32px;
|
|
font-weight:bold;
|
|
background-color:rgb(38,38,38);
|
|
margin-right:3px;
|
|
width:60px;
|
|
height:60px;
|
|
border-radius:30px;
|
|
text-align:center;
|
|
border:3px solid rgba(255,255,255,0.06);
|
|
}
|
|
.list66 {
|
|
position:absolute;
|
|
left:3px;
|
|
top:0px;
|
|
width:186px;
|
|
height:186px;
|
|
border-radius:30px;
|
|
background-color:#262626;
|
|
border:3px solid rgba(255,255,255,0.06);
|
|
padding:10px
|
|
}
|
|
.item66 {
|
|
height:42px;
|
|
}
|
|
.waiting-keys {
|
|
width:36px;
|
|
height:40px;
|
|
text-align: center;
|
|
}
|
|
|
|
.keyboard-rows-rect-t9 {
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
flex-direction: row;
|
|
flex-shrink: 0;
|
|
height: 55px;
|
|
width: 100%;
|
|
}
|
|
|
|
.calbtnt9-rect {
|
|
flex:1;
|
|
height: 55px;
|
|
margin: 0 3px;
|
|
width: unset;
|
|
}
|
|
</style>
|