报错<script setup>
cannot contain ES module exports vue/no-export-in-script-setup
vue3-json-schema-form课程中StringField.vue照着打报错
原代码如下:
<template>
<input type="text" :value="value" @input="handleChange" />
</template>
`<script lang="ts" setup="props">
import { ref } from 'vue'
import { FiledPropsDfine, Schema } from '../types'
export default {
props: FiledPropsDfine,
}
declare const props: {
// 向ts声明props的定义
value: any
onChange: (v: string) => void
schema: Schema
}
export const handleChange = (e: any) => {
console.log(e)
props.onChange(e.target.value)
}
</script>
修改后代码如下:
<template>
<input type="text" :value="value" @input="handleChange" />
</template>
`<script lang="ts" setup="props">
import { FiledPropsDfine, Schema } from '../types'
declare const props: FiledPropsDfine & {
// 向ts声明props的定义
value: any
onChange: (v: string) => void
schema: Schema
}
const handleChange = (e: any) => {
console.log(e)
props.onChange(e.target.value)
}
</script>
type.ts文件代码片段如下:
import { SchemaRefs } from 'ajv/dist/***pile'
import { PropType } from 'vue'
export enum SchemaTypes {
'NUMBER' = 'number',
'INTEGER' = 'intrger',
'STRING' = 'string',
'OBJECT' = 'object',
'ARRSY' = 'array',
'BOOLEAN' = 'boolean',
}
type SchemaRef = { $ref: string } // 预先定义 可以使用$ref引用schema
// type Schema = any
export interface Schema {
type: SchemaTypes | string // 加上string有利于类型的校验 要不然只能用SchemaTypes.NUMBER来使用类型
const?: any
format?: string
default?: any
properties?: {
[key: string]: Schema | { $ref: string }
}
items?: Schema | Schema[] | SchemaRefs
dependencies?: {
[key: string]: string[] | Schema | SchemaRef
}
oneOf?: Schema[]
anyOf?: Schema[]
allOf?: Schema[]
// vjsf?: VueJsonSchemaConfig
required?: string[]
enum?: any[]
enumKeyValue?: any[]
additionalProperties?: any
additionalItems?: Schema
}
export const FiledPropsDfine = {
schema: {
type: Object as PropType<Schema>,
required: true,
},
value: {
required: true,
},
onChange: {
type: Function as PropType<(v: any) => void>,
required: true,
},
rootSchema: {
type: Object as PropType<Schema>,
required: true,
},
} as const
主要问题就是说script标签中加上setup,代码块中不能再出现export default关键字,将该部分代码
export default {
props: FiledPropsDfine,
}
declare const props: {
// 向ts声明props的定义
value: any
onChange: (v: string) => void
schema: Schema
}
修改为:
declare const props: FiledPropsDfine & {
// 向ts声明props的定义
value: any
onChange: (v: string) => void
schema: Schema
}