4 changed files with 160 additions and 26 deletions
@ -0,0 +1,61 @@ |
|||||
|
<script setup lang="ts"> |
||||
|
import { reactive, useAttrs } from 'vue' |
||||
|
import { useFormItem } from 'element-plus' |
||||
|
|
||||
|
defineOptions({ |
||||
|
name: 'JsonPreview' |
||||
|
}) |
||||
|
|
||||
|
// 定义 Props 类型 |
||||
|
interface JsonPreviewProps { |
||||
|
modelValue: any; |
||||
|
} |
||||
|
|
||||
|
// 读取组件 props 属性 |
||||
|
const props = withDefaults(defineProps<JsonPreviewProps>(), {}) |
||||
|
|
||||
|
// 定义 State 类型 |
||||
|
interface JsonPreviewState { |
||||
|
|
||||
|
} |
||||
|
|
||||
|
// state 属性 |
||||
|
const state = reactive<JsonPreviewState>({}) |
||||
|
|
||||
|
// 定义 Data 类型 |
||||
|
interface JsonPreviewData { |
||||
|
} |
||||
|
|
||||
|
// 内部数据 |
||||
|
const data: JsonPreviewData = {} |
||||
|
const { formItem } = useFormItem() |
||||
|
|
||||
|
interface JsonPreviewExpose { |
||||
|
state: JsonPreviewState; |
||||
|
data: JsonPreviewData; |
||||
|
} |
||||
|
|
||||
|
const expose: JsonPreviewExpose = { |
||||
|
state, |
||||
|
data |
||||
|
} |
||||
|
// 定义组件公开内容 |
||||
|
defineExpose(expose) |
||||
|
|
||||
|
export type { |
||||
|
JsonPreviewProps, |
||||
|
JsonPreviewState |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<template> |
||||
|
<div class="yvan-json-preview"> |
||||
|
<pre>{{ JSON.stringify(props.modelValue, null, 2) }}</pre> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<style scoped> |
||||
|
.yvan-json-preview { |
||||
|
flex: 1; |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue