求助 tsx中能支持装饰器吗?

176 阅读1分钟

最近在Vue3 + vite中使用vue-facing-property,想将render函数写在类内。代码如下

import {Base, Component, Prop, toNative} from 'vue-facing-decorator'
import { Fragment } from "vue";
import {ElButton, ElDialog} from "element-plus";

@Component
class Test extends Base {
    isShow = false

    @Prop
    id?: string
    clickEve() {
        console.log('asdasd')
        this.isShow = !this.isShow
    }

    render() {
        return <Fragment>
            你好<ElButton onClick={this.clickEve}>点击</ElButton>
            <ElDialog props ={this.$props} v-model={this.isShow}></ElDialog>
        </Fragment>
    }
}

export default toNative(Test)

运行时有如下报错

If you want to leave it as-is, add @babel/plugin-syntax-decorators (github.com/babel/babel…) to the 'plugins' section to enable parsing.

If you already added the plugin for this syntax to your config, it's possible that your config isn't being loaded. You can re-run Babel with the BABEL_SHOW_CONFIG_FOR environment variable to show the loaded configuration: npx cross-env BABEL_SHOW_CONFIG_FOR= See babeljs.io/docs/config… for more info.

Plugin: vite:vue-jsx File: D:/code/demo_vite/src/components/Test.tsx:5:0 3 | import {ElButton, ElDialog} from "element-plus"; 4 | 5 | @Component | ^ 6 | class Test extends Base { 7 | isShow = false at constructor (D:\code\demo_vite\node_modules@babel\parser\lib\index.js:353:19)

看上去在tsx文件中并不支持装饰器的写法,请问这种的该如何去配置呢?