116 lines
2.3 KiB
Vue
116 lines
2.3 KiB
Vue
<template>
|
|
<div class="ocr-demo-page">
|
|
<div class="panel-header">OCR 组件调用示例</div>
|
|
|
|
<div class="panel-body">
|
|
<el-button type="primary" @click="visible = true">打开 OCR 对话框</el-button>
|
|
|
|
<div class="demo-info">
|
|
<div class="demo-section">
|
|
<div class="section-title">原始传入文本</div>
|
|
<pre>{{ lines.join('\n') }}</pre>
|
|
</div>
|
|
|
|
<div class="demo-section">
|
|
<div class="section-title">已选字符</div>
|
|
<div v-if="selectedChars.length">
|
|
<el-tag
|
|
v-for="item in selectedChars"
|
|
:key="`${item.lineIndex}-${item.charIndex}`"
|
|
type="success"
|
|
effect="plain"
|
|
>
|
|
{{ item.char === ' ' ? '␣' : item.char }}
|
|
</el-tag>
|
|
</div>
|
|
<div v-else class="empty-tip">当前尚未选择任何字符</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<OcrDialog
|
|
v-model="visible"
|
|
:lines="lines"
|
|
title="OCR 多选字符示例"
|
|
@selected-change="onSelectedChange"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref } from 'vue'
|
|
import OcrDialog from '@/components/wave/ocrDialog.vue'
|
|
|
|
interface SelectedChar {
|
|
lineIndex: number
|
|
charIndex: number
|
|
char: string
|
|
}
|
|
|
|
const visible = ref(false)
|
|
const selectedChars = ref<SelectedChar[]>([])
|
|
const lines = ref<string[]>([
|
|
'示例 OCR 文本行一',
|
|
'第二行内容，支持多行\n换行后依然按行切割',
|
|
'第三行：可以点击每个字符进行多选'
|
|
])
|
|
|
|
function onSelectedChange(value: SelectedChar[]) {
|
|
selectedChars.value = value
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.ocr-demo-page {
|
|
max-width: 860px;
|
|
margin: 24px auto;
|
|
padding: 24px;
|
|
background: #fff;
|
|
border-radius: 16px;
|
|
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
|
|
}
|
|
|
|
.panel-header {
|
|
font-size: 20px;
|
|
font-weight: 700;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.panel-body {
|
|
display: grid;
|
|
gap: 20px;
|
|
}
|
|
|
|
.demo-info {
|
|
display: grid;
|
|
gap: 18px;
|
|
}
|
|
|
|
.demo-section {
|
|
padding: 16px;
|
|
border: 1px solid #f0f0f0;
|
|
border-radius: 12px;
|
|
background: #fafafa;
|
|
}
|
|
|
|
.section-title {
|
|
font-weight: 600;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
pre {
|
|
margin: 0;
|
|
white-space: pre-wrap;
|
|
word-break: break-word;
|
|
}
|
|
|
|
.empty-tip {
|
|
color: #999;
|
|
}
|
|
|
|
.el-tag {
|
|
margin-right: 8px;
|
|
margin-bottom: 8px;
|
|
}
|
|
</style>
|