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