Compare commits

..

7 Commits
main ... popup

Author SHA1 Message Date
chorblack
ebeed05f76 123 2025-04-27 19:31:39 +08:00
chorblack
babb1fc3b6 添加多个符号 2025-04-27 19:30:32 +08:00
chorblack
f25164e2e0 修复间隔问题 2025-04-27 19:07:59 +08:00
chorblack
a26d2f7d66 没啥变化 2025-04-27 19:04:16 +08:00
chorblack
cec8718629 优化键盘 2025-04-27 18:22:37 +08:00
chorblack
598410dd67 弹出式 2025-04-27 18:17:03 +08:00
chorblack
2a87eca8e4 模块化准备 2025-04-26 23:01:14 +08:00
2 changed files with 231 additions and 233 deletions

View File

@ -10,7 +10,10 @@
"features": [ "features": [
{ {
"name": "blueos.app.appmanager.router" "name": "blueos.app.appmanager.router"
},{ "name": "blueos.window.prompt" } },
{
"name": "blueos.window.prompt"
}
], ],
"deviceTypeList": [ "deviceTypeList": [
"watch", "watch",

View File

@ -1,18 +1,5 @@
<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="text-container">
<text>输入法demo</text>
<text class="text-content">{{inputWords}}_</text>
</div>
<div class="container-row">
<input type="button" value="返回" class="func-button" onclick="cancelInput"></input>
<input type="button" value="确定" class="func-button" onclick="finishInput"></input>
<input type="button" value="退格" class="func-button" onclick="wordsBackspace"></input>
</div>
<text>上滑输入文字</text>
</div>
<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>
@ -32,7 +19,7 @@
</div> </div>
<!-- 滑动键盘区域 --> <!-- 滑动键盘区域 -->
<!-- 第一行 --> <!-- 第一行 -->
<scroll class="keyboard-row-scroll" scroll-x="true"> <div class="keyboard-row-scroll">
<div class="keyboard-row" for="{{row1Letters}}"> <div class="keyboard-row" for="{{row1Letters}}">
<input <input
type="button" type="button"
@ -42,50 +29,48 @@
/> />
</div> </div>
</scroll> </div>
<!-- 第二行 --> <!-- 第二行 -->
<scroll class="keyboard-row-scroll" scroll-x="true"> <div class="keyboard-row-scroll">
<div class="keyboard-row" for="{{row2Letters}}"> <div class="keyboard-row" for="{{row2Letters}}">
<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> </div>
<!-- 第三行 --> <!-- 第三行 -->
<scroll class="keyboard-row-scroll" scroll-x="true"> <div class="keyboard-row-scroll">
<div class="keyboard-row" for="{{row3Letters}}"> <div class="keyboard-row" for="{{row3Letters}}">
<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> </div>
<div class="function-row"> <div class="function-row">
<input type="button" value="中" class="mode-button" onclick="changeToCn"></input> <input type="button" value="中" class="mode-button" onclick="changeToCn"/>
<input type="button" value="英" class="mode-button" onclick="changeToEn"></input> <input type="button" value="英" class="mode-button" onclick="changeToEn"/>
<input type="button" value="符" class="mode-button" onclick="changeToSymbol"></input> <input type="button" value="符" class="mode-button" onclick="changeToSymbol"/>
<input type="button" value="空格" class="space-button" onclick="input(' ')"></input> <input type="button" value="空格" class="space-button" onclick="input(' ')"/>
<input type="button" value="←" class="backspace-button" onclick="backspace"></input> <input type="button" value="←" class="backspace-button" onclick="backspace"/>
</div> </div>
</div> </div>
</swiper>
</div> </div>
</template> </template>
<script> <script>
import router from '@blueos.app.appmanager.router';
import prompt from '@blueos.window.prompt';
export default { export default {
data: { data: {
fromPage: "", //转跳输入法前的页面的Uri
fromPageData: null, //转跳输入法前的页面的要保存的数据(转跳页面时传过来一个对象,输入完成后传回去) fromPageData: null, //转跳输入法前的页面的要保存的数据(转跳页面时传过来一个对象,输入完成后传回去)
letters: "", //键盘页输入的拼音 letters: "", //键盘页输入的拼音
words: "    ", //键盘页中提供编辑框后8个字符的预览 words: "    ", //键盘页中提供编辑框后8个字符的预览
@ -93,6 +78,7 @@ export default {
sindex: 0, //键盘滑动位置,实现从候选页返回时可以返回到原页面 sindex: 0, //键盘滑动位置,实现从候选页返回时可以返回到原页面
mode: "cn", //输入模式标记中文cn英文en符号数字标记 mode: "cn", //输入模式标记中文cn英文en符号数字标记
caps: -1, //大小写标记 caps: -1, //大小写标记
symbolToggle:-1,
row1Letters: ["Q","W","E","R","T","Y","U","I","O","P"], row1Letters: ["Q","W","E","R","T","Y","U","I","O","P"],
row2Letters: ["A","S","D","F","G","H","J","K","L"], row2Letters: ["A","S","D","F","G","H","J","K","L"],
row3Letters: ["Z","X","C","V","B","N","M"], row3Letters: ["Z","X","C","V","B","N","M"],
@ -108,9 +94,18 @@ export default {
row3: ["z", "x", "c", "v", "b", "n", "m"] row3: ["z", "x", "c", "v", "b", "n", "m"]
}, },
sy: { sy: {
// 默认符号组(较少的符号,保持布局一致)
default: {
row1: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0"], row1: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0"],
row2: ["!", "@", "#", "$", "%", "^", "&", "*", "(", ")",","], row2: ["!", "@", "#", "%", "&", "*", "(", ")", ","],
row3: ["-", "_", "+", "=", "{", "}", "[", "]", "|", "\\","。"] row3: ["_", "=", "{", "}", "[", "]", "。"]
},
// 补充符号组(额外的符号)
alternate: {
row1: ["~", "`", "©", "®", "±", "÷", "×", "/", "\\", "∞"],
row2: ["♥", "♦", "♣", "♠", "•", "$", "|", "^", "-"],
row3: ["¿", "¡", "∑", "∏", "π", "Ω", "∆"]
}
} }
}, },
currentWords: [], // 当前显示的候选词 currentWords: [], // 当前显示的候选词
@ -144,10 +139,29 @@ export default {
this.currentWords = candidates.slice(this.wordsPageIndex, this.wordsPageIndex + 5); this.currentWords = candidates.slice(this.wordsPageIndex, this.wordsPageIndex + 5);
}, },
changeToSymbol() { changeToSymbol() {
// 如果当前已经是符号模式,则切换符号组
if (this.mode === 'sy') {
// 切换开关状态
this.symbolToggle = !this.symbolToggle;
if (this.symbolToggle) {
// 切换到备用符号组
this.row1Letters = this.keyboardModes.sy.alternate.row1;
this.row2Letters = this.keyboardModes.sy.alternate.row2;
this.row3Letters = this.keyboardModes.sy.alternate.row3;
} else {
// 切换回默认符号组
this.row1Letters = this.keyboardModes.sy.default.row1;
this.row2Letters = this.keyboardModes.sy.default.row2;
this.row3Letters = this.keyboardModes.sy.default.row3;
}
} else {
// 不是符号模式时,切换到符号模式,默认使用默认符号组
this.mode = 'sy'; this.mode = 'sy';
this.row1Letters = this.keyboardModes.sy.row1; this.symbolToggle = false; // 重置切换标志
this.row2Letters = this.keyboardModes.sy.row2; this.row1Letters = this.keyboardModes.sy.default.row1;
this.row3Letters = this.keyboardModes.sy.row3; this.row2Letters = this.keyboardModes.sy.default.row2;
this.row3Letters = this.keyboardModes.sy.default.row3;
}
}, },
changeToEn() { changeToEn() {
if (this.mode === 'en') { if (this.mode === 'en') {
@ -245,29 +259,6 @@ export default {
jumpToCandidate() { jumpToCandidate() {
this.sindex = 1; this.sindex = 1;
}, },
finishInput() {
prompt.showToast({
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()
@ -295,9 +286,21 @@ export default {
margin: 5px 0; margin: 5px 0;
} }
.keyboard-row { .keyboard-row {
display: flex;
justify-content: space-between;
flex-direction: row; flex-direction: row;
width: 466px; /* 固定总宽度 */
height: 60px; height: 60px;
} }
.input-button {
width: 100%;
height: 60px;
margin: 0 3px;
font-size: 24px;
border-radius: 5px;
background-color: #444;
color: white;
}
.text-container { .text-container {
flex-direction: column; flex-direction: column;
display: flex; display: flex;
@ -325,16 +328,7 @@ export default {
} }
.input-button {
width: 70px;
height: 60px;
min-width: 60px;
margin: 0 3px;
font-size: 24px;
border-radius: 5px;
background-color: #444;
color: white;
}
.function-row { .function-row {
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
@ -353,6 +347,7 @@ export default {
height: 60px; height: 60px;
color: #f0f8ff; color: #f0f8ff;
background-color: #9f83fb; background-color: #9f83fb;
border-radius: 25px; /* 新增圆角 */
} }
.active-mode { .active-mode {
background-color: #2196F3; background-color: #2196F3;
@ -414,8 +409,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 {