|
|
|
@ -2,7 +2,7 @@ |
|
|
|
import pinyinDict from 'libs/pinyinDict.json' |
|
|
|
import { useDeviceStore } from 'stores/deviceStore' |
|
|
|
import type { Ref } from 'vue' |
|
|
|
import { computed, defineEmits, defineProps, onMounted, ref, watch, watchEffect } from 'vue' |
|
|
|
import { computed, onMounted, ref, watch, watchEffect } from 'vue' |
|
|
|
|
|
|
|
const props = defineProps<{ |
|
|
|
modelValue: string |
|
|
|
@ -22,11 +22,11 @@ const cnList = ref<string[]>([]) |
|
|
|
const pinyinMap: Record<string, string[]> = pinyinDict |
|
|
|
const pinyinValue = ref('') |
|
|
|
// 拖动相关状态 |
|
|
|
const isDragging = ref(false)// 是否正在拖动 |
|
|
|
const startX = ref(0)// 触摸起始 X |
|
|
|
const startY = ref(0)// 触摸起始 Y |
|
|
|
const x = ref(0)// 容器偏移 X |
|
|
|
const y = ref(-50)// 容器偏移 Y |
|
|
|
const isDragging = ref(false) // 是否正在拖动 |
|
|
|
const startX = ref(0) // 触摸起始 X |
|
|
|
const startY = ref(0) // 触摸起始 Y |
|
|
|
const x = ref(0) // 容器偏移 X |
|
|
|
const y = ref(-50) // 容器偏移 Y |
|
|
|
const keyboardRef = ref() as Ref<HTMLDivElement> // 软键盘容器 DOM |
|
|
|
|
|
|
|
onMounted(() => { |
|
|
|
@ -50,12 +50,15 @@ watchEffect(() => { |
|
|
|
inputValue.value = props.modelValue |
|
|
|
}) |
|
|
|
|
|
|
|
watch(() => props.isVisible, (newVal) => { |
|
|
|
console.log('deviceStete.deviceType--2-', deviceStete.isLowCost) |
|
|
|
if (!deviceStete.isLowCost) { |
|
|
|
isOpen.value = newVal |
|
|
|
} |
|
|
|
}) |
|
|
|
watch( |
|
|
|
() => props.isVisible, |
|
|
|
(newVal) => { |
|
|
|
console.log('deviceStete.deviceType--2-', deviceStete.isLowCost) |
|
|
|
if (!deviceStete.isLowCost) { |
|
|
|
isOpen.value = newVal |
|
|
|
} |
|
|
|
}, |
|
|
|
) |
|
|
|
|
|
|
|
const activeKey = ref('') |
|
|
|
const keyboardLayout = computed(() => { |
|
|
|
@ -201,13 +204,18 @@ const handleTouchEnd = () => { |
|
|
|
> |
|
|
|
<div> |
|
|
|
<div v-if="keyboardType === 'text'" class="pinyin-container"> |
|
|
|
<span v-if="pinyinValue" style="font-size:12px">拼音：{{ pinyinValue }}</span> |
|
|
|
<span v-if="pinyinValue" style="font-size: 12px">拼音：{{ pinyinValue }}</span> |
|
|
|
<div v-if="cnList && cnList.length" class="pinyin-cn"> |
|
|
|
<div |
|
|
|
v-for="(cnName, cnIndex) in cnList" |
|
|
|
:key="cnIndex" |
|
|
|
class="cn-name" |
|
|
|
@click="(e) => { e.stopPropagation(); handleKeyCn(cnName) }" |
|
|
|
@click=" |
|
|
|
e => { |
|
|
|
e.stopPropagation(); |
|
|
|
handleKeyCn(cnName); |
|
|
|
} |
|
|
|
" |
|
|
|
> |
|
|
|
{{ cnName }} |
|
|
|
</div> |
|
|
|
@ -225,12 +233,28 @@ const handleTouchEnd = () => { |
|
|
|
'key-text': key !== ' ' && keyboardType === 'text', |
|
|
|
}" |
|
|
|
:style="keyboardType === 'number' ? 'height: 10vh' : 'height:3rem;'" |
|
|
|
@click="(e) => { |
|
|
|
e.stopPropagation() |
|
|
|
handleKeyPress(key) |
|
|
|
}" |
|
|
|
@click=" |
|
|
|
e => { |
|
|
|
e.stopPropagation(); |
|
|
|
handleKeyPress(key); |
|
|
|
} |
|
|
|
" |
|
|
|
> |
|
|
|
{{ key === ' ' ? '空格' : key === 'del' ? '删除' : key === 'enter' ? '确认' : key === 'close' ? '关闭' : key === 'cn' ? '英文' : key === 'en' ? '拼音' : key }} |
|
|
|
{{ |
|
|
|
key === ' ' |
|
|
|
? '空格' |
|
|
|
: key === 'del' |
|
|
|
? '删除' |
|
|
|
: key === 'enter' |
|
|
|
? '确认' |
|
|
|
: key === 'close' |
|
|
|
? '关闭' |
|
|
|
: key === 'cn' |
|
|
|
? '英文' |
|
|
|
: key === 'en' |
|
|
|
? '拼音' |
|
|
|
: key |
|
|
|
}} |
|
|
|
</button> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
@ -258,7 +282,7 @@ const handleTouchEnd = () => { |
|
|
|
.keyboard-header { |
|
|
|
margin-bottom: 10px; |
|
|
|
position: absolute; |
|
|
|
float:right; |
|
|
|
float: right; |
|
|
|
} |
|
|
|
|
|
|
|
.keyboard-header button { |
|
|
|
@ -273,20 +297,20 @@ const handleTouchEnd = () => { |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
gap: 8px; |
|
|
|
.pinyin-container{ |
|
|
|
.pinyin-container { |
|
|
|
display: flex; |
|
|
|
width: 80%; |
|
|
|
height: 4rem; |
|
|
|
padding-left: 2rem; |
|
|
|
.pinyin-cn{ |
|
|
|
.pinyin-cn { |
|
|
|
color: #1890ff; |
|
|
|
padding-left: 1rem; |
|
|
|
display: flex; |
|
|
|
width: 1rem; |
|
|
|
position: relative; |
|
|
|
gap:5px; |
|
|
|
gap: 5px; |
|
|
|
//font-family: fangsong; |
|
|
|
.cn-name{ |
|
|
|
.cn-name { |
|
|
|
font-size: 2.5rem; |
|
|
|
} |
|
|
|
} |
|
|
|
@ -321,7 +345,7 @@ const handleTouchEnd = () => { |
|
|
|
|
|
|
|
.key-space { |
|
|
|
margin-top: 3.5px; |
|
|
|
width: 75vw;; |
|
|
|
width: 75vw; |
|
|
|
} |
|
|
|
|
|
|
|
.key-special { |
|
|
|
@ -333,7 +357,7 @@ const handleTouchEnd = () => { |
|
|
|
transform: scale(0.95); |
|
|
|
} |
|
|
|
|
|
|
|
.key-number{ |
|
|
|
.key-number { |
|
|
|
width: 30vw; |
|
|
|
height: 6vh; |
|
|
|
margin: 5px; |
|
|
|
@ -344,7 +368,7 @@ const handleTouchEnd = () => { |
|
|
|
height: 5vh; |
|
|
|
margin: 5px; |
|
|
|
} |
|
|
|
.input-w{ |
|
|
|
.input-w { |
|
|
|
width: 20%; |
|
|
|
height: 4rem; |
|
|
|
font-size: 2rem; |
|
|
|
@ -357,7 +381,7 @@ const handleTouchEnd = () => { |
|
|
|
left: 0; |
|
|
|
width: 90%; |
|
|
|
border-radius: 16px; |
|
|
|
box-shadow: 0 -4px 12px rgba(0,0,0,0.1); |
|
|
|
box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1); |
|
|
|
overflow: hidden; |
|
|
|
z-index: 9999; |
|
|
|
/* 让拖动更顺滑 */ |
|
|
|
|
