39 lines
975 B
Vue
39 lines
975 B
Vue
<script setup lang="ts">
|
|
import { ref } from 'vue'
|
|
import { useUiStore } from '../stores/uiStore'
|
|
|
|
const uiStore = useUiStore()
|
|
const localText = ref(uiStore.inputText)
|
|
|
|
function handlePreview() {
|
|
uiStore.setInputText(localText.value)
|
|
}
|
|
|
|
function handleKeydown(event: KeyboardEvent) {
|
|
if (event.key === 'Enter') {
|
|
handlePreview()
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="space-y-2">
|
|
<label class="block text-sm font-medium text-gray-700">输入文本</label>
|
|
<div class="flex gap-2">
|
|
<input
|
|
v-model="localText"
|
|
type="text"
|
|
placeholder="此处输入内容"
|
|
class="flex-1 px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
@keydown="handleKeydown"
|
|
>
|
|
<button
|
|
class="px-6 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
|
|
@click="handlePreview"
|
|
>
|
|
预览
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</template>
|