admin/keypan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

弹出式

Browse Source
This commit is contained in:
chorblack 2025-04-27 18:17:03 +08:00
parent 2a87eca8e4
commit 598410dd67
1 changed files with 66 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

152
pages/Demo/index.ux
View File

@ -1,79 +1,76 @@
<template> <template>
<div class="container"> <div class="container">
<swiper class="container-swiper" index="{{ sindex }} " vertical="true" loop="false" onchange="changeSwiper">
<div class="container-col"> <div class="container-col">
<text class="letters-display">{{ letters }}</text> <text class="letters-display">{{ letters }}</text>
<text class="words-preview">{{ words }}</text> <text class="words-preview">{{ words }}</text>
<div class="container-row-candidate"> <div class="container-row-candidate">
<input type="button" value="<" class="candidate-word-button" onclick="wordsPageBack"></input> <input type="button" value="<" class="candidate-word-button" onclick="wordsPageBack"></input>
<input type="button" value="{{ currentWords[0]||'' }}" class="candidate-word-button" <input type="button" value="{{ currentWords[0]||'' }}" class="candidate-word-button"
onclick="selectInput(currentWords[0])"></input> onclick="selectInput(currentWords[0])"></input>
<input type="button" value="{{ currentWords[1]||'' }}" class="candidate-word-button" <input type="button" value="{{ currentWords[1]||'' }}" class="candidate-word-button"
onclick="selectInput(currentWords[1])"></input> onclick="selectInput(currentWords[1])"></input>
<input type="button" value="{{ currentWords[2]||'' }}" class="candidate-word-button" <input type="button" value="{{ currentWords[2]||'' }}" class="candidate-word-button"
onclick="selectInput(currentWords[2])"></input> onclick="selectInput(currentWords[2])"></input>
<input type="button" value="{{ currentWords[3] ||''}}" class="candidate-word-button" <input type="button" value="{{ currentWords[3] ||''}}" class="candidate-word-button"
onclick="selectInput(currentWords[3])"></input> onclick="selectInput(currentWords[3])"></input>
<input type="button" value="{{ currentWords[4] ||''}}" class="candidate-word-button" <input type="button" value="{{ currentWords[4] ||''}}" class="candidate-word-button"
onclick="selectInput(currentWords[4])"></input> onclick="selectInput(currentWords[4])"></input>
<input type="button" value=">" class="candidate-word-button" onclick="wordsPageForward"></input> <input type="button" value=">" class="candidate-word-button" onclick="wordsPageForward"></input>
</div> </div>
<!-- 滑动键盘区域 --> <!-- 滑动键盘区域 -->
<!-- 第一行 --> <!-- 第一行 -->
<scroll class="keyboard-row-scroll" scroll-x="true"> <div class="keyboard-row-scroll" scroll-x="true">
<div class="keyboard-row" for="{{row1Letters}}"> <div class="keyboard-row" for="{{row1Letters}}">
<input <input
type="button" type="button"
class="input-button" class="input-button"
value="{{$item}}" value="{{$item}}"
onclick="input($item)" onclick="input($item)"
/> />
</div> </div>
</scroll>
<!-- 第二行 -->
<scroll class="keyboard-row-scroll" scroll-x="true">
<div class="keyboard-row" for="{{row2Letters}}">
<input
type="button"
class="input-button"
value="{{$item}}"
onclick="input($item)"
/>
</div>
</scroll>
<!-- 第三行 -->
<scroll class="keyboard-row-scroll" scroll-x="true">
<div class="keyboard-row" for="{{row3Letters}}">
<input
type="button"
class="input-button"
value="{{$item}}"
onclick="input($item)"
/>
</div>
</scroll>
<div class="function-row">
<input type="button" value="中" class="mode-button" onclick="changeToCn"></input>
<input type="button" value="英" class="mode-button" onclick="changeToEn"></input>
<input type="button" value="符" class="mode-button" onclick="changeToSymbol"></input>
<input type="button" value="空格" class="space-button" onclick="input(' ')"></input>
<input type="button" value="←" class="backspace-button" onclick="backspace"></input>
</div>
</div> </div>
</swiper>
<!-- 第二行 -->
<div class="keyboard-row-scroll" scroll-x="true">
<div class="keyboard-row" for="{{row2Letters}}">
<input
type="button"
class="input-button"
value="{{$item}}"
onclick="input($item)"
/>
</div>
</div>
<!-- 第三行 -->
<div class="keyboard-row-scroll" scroll-x="true">
<div class="keyboard-row" for="{{row3Letters}}">
<input
type="button"
class="input-button"
value="{{$item}}"
onclick="input($item)"
/>
</div>
</div>
<div class="function-row">
<input type="button" value="中" class="mode-button" onclick="changeToCn"></input>
<input type="button" value="英" class="mode-button" onclick="changeToEn"></input>
<input type="button" value="符" class="mode-button" onclick="changeToSymbol"></input>
<input type="button" value="空格" class="space-button" onclick="input(' ')"></input>
<input type="button" value="←" class="backspace-button" onclick="backspace"></input>
</div>
</div>
</div> </div>
</template> </template>
<script> <script>
import router from '@blueos.app.appmanager.router';
import prompt from '@blueos.window.prompt'; import prompt from '@blueos.window.prompt';
export default { export default {
data: { data: {
fromPage: "", //转跳输入法前的页面的Uri
fromPageData: null, //转跳输入法前的页面的要保存的数据（转跳页面时传过来一个对象，输入完成后传回去） fromPageData: null, //转跳输入法前的页面的要保存的数据（转跳页面时传过来一个对象，输入完成后传回去）
letters: "", //键盘页输入的拼音 letters: "", //键盘页输入的拼音
words: "　　　　", //键盘页中，提供编辑框后8个字符的预览 words: "　　　　", //键盘页中，提供编辑框后8个字符的预览
@ -237,25 +234,8 @@ export default {
prompt.showToast({ prompt.showToast({
message: '输入完成，此处可以storage保存或params然后跳转到你的页面', message: '输入完成，此处可以storage保存或params然后跳转到你的页面',
}) })
/*
var that = this;
router.replace({
uri: that.fromPage,
params: {
fromPageData: that.fromPageData,
inputWords: that.inputWords,
},
});*/
},
cancelInput() {
var that = this;
router.replace({
uri: that.fromPage,
params: {
fromPageData: that.fromPageData,
},
});
}, },
touchMove(e) { // swipe处理事件 touchMove(e) { // swipe处理事件
if (e.direction == "right") { // 右滑退出 if (e.direction == "right") { // 右滑退出
this.cancel_input() this.cancel_input()
@ -403,8 +383,8 @@ export default {
align-items: center; align-items: center;
left: 0px; left: 0px;
top: 0px; top: 0px;
width: 454px; width: 466px;
height: 454px; height: 100%;
} }
.container-col-candidate { .container-col-candidate {