优化键盘

This commit is contained in:
chorblack 2025-04-27 18:22:37 +08:00
parent 598410dd67
commit cec8718629

View File

@ -1,69 +1,68 @@
<template> <template>
<div class="container"> <div class="container">
<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> <!-- 滑动键盘区域 -->
<!-- 滑动键盘区域 --> <!-- 第一行 -->
<!-- 第一行 --> <div 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> </div>
</div>
<!-- 第二行 --> <!-- 第二行 -->
<div class="keyboard-row-scroll" scroll-x="true"> <div class="keyboard-row-scroll" scroll-x="true">
<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>
<!-- 第三行 -->
<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>
<!-- 第三行 -->
<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 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>
</div> </div>
</template> </template>