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": [
{
"name": "blueos.app.appmanager.router"
},{ "name": "blueos.window.prompt" }
},
{
"name": "blueos.window.prompt"
}
],
"deviceTypeList": [
"watch",

View File

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