优化键盘

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">
<text class="letters-display">{{ letters }}</text>
<text class="words-preview">{{ words }}</text>
<div class="container-row-candidate">
<input type="button" value="<" class="candidate-word-button" onclick="wordsPageBack"></input>
<input type="button" value="{{ currentWords[0]||'' }}" class="candidate-word-button"
onclick="selectInput(currentWords[0])"></input>
<input type="button" value="{{ currentWords[1]||'' }}" class="candidate-word-button"
onclick="selectInput(currentWords[1])"></input>
<input type="button" value="{{ currentWords[2]||'' }}" class="candidate-word-button"
onclick="selectInput(currentWords[2])"></input>
<input type="button" value="{{ currentWords[3] ||''}}" class="candidate-word-button"
onclick="selectInput(currentWords[3])"></input>
<input type="button" value="{{ currentWords[4] ||''}}" class="candidate-word-button"
onclick="selectInput(currentWords[4])"></input>
<input type="button" value=">" class="candidate-word-button" onclick="wordsPageForward"></input>
</div>
<!-- 滑动键盘区域 -->
<!-- 第一行 -->
<div class="keyboard-row-scroll" scroll-x="true">
<div class="keyboard-row" for="{{row1Letters}}">
<input
type="button"
class="input-button"
value="{{$item}}"
onclick="input($item)"
<div class="container-col"> />
<text class="letters-display">{{ letters }}</text> </div>
<text class="words-preview">{{ words }}</text> </div>
<div class="container-row-candidate">
<input type="button" value="<" class="candidate-word-button" onclick="wordsPageBack"></input>
<input type="button" value="{{ currentWords[0]||'' }}" class="candidate-word-button"
onclick="selectInput(currentWords[0])"></input>
<input type="button" value="{{ currentWords[1]||'' }}" class="candidate-word-button"
onclick="selectInput(currentWords[1])"></input>
<input type="button" value="{{ currentWords[2]||'' }}" class="candidate-word-button"
onclick="selectInput(currentWords[2])"></input>
<input type="button" value="{{ currentWords[3] ||''}}" class="candidate-word-button"
onclick="selectInput(currentWords[3])"></input>
<input type="button" value="{{ currentWords[4] ||''}}" class="candidate-word-button"
onclick="selectInput(currentWords[4])"></input>
<input type="button" value=">" class="candidate-word-button" onclick="wordsPageForward"></input>
</div>
<!-- 滑动键盘区域 -->
<!-- 第一行 -->
<div class="keyboard-row-scroll" scroll-x="true">
<div class="keyboard-row" for="{{row1Letters}}">
<input
type="button"
class="input-button"
value="{{$item}}"
onclick="input($item)"
/> <!-- 第二行 -->
</div> <div class="keyboard-row-scroll" scroll-x="true">
</div> <div class="keyboard-row" for="{{row2Letters}}">
<input
<!-- 第二行 --> type="button"
<div class="keyboard-row-scroll" scroll-x="true"> class="input-button"
<div class="keyboard-row" for="{{row2Letters}}"> value="{{$item}}"
<input onclick="input($item)"
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>
<!-- 第三行 -->
<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>