vue-class

模板

<script lang="ts">
import { Setup, Context } from 'vue-class-setup';
import { defineComponent } from 'vue';

@Setup
class FormClass extends Context {
  public activeNames = 1;

  handleChange(val: string[]) {
    console.log(val);

  }
}

export default defineComponent({
  ...FormClass.inject(),
});
</script>


<script setup lang="ts">
import { ref, reactive } from 'vue'

</script>


<template>
  <div class="">
    3
  </div>
</template>


<style lang="scss" scoped>

</style>

Props

<script lang="ts">
import { Setup, Context, Define } from 'vue-class-setup';
import { defineComponent } from 'vue';

@Setup
class FormClass extends Define<Props, Emit> {
  public readonly dialogVisible = false
  public readonly book_id = "0"

  formLabelAlign = {
    name: "章节-",
  }

  public get v1() {
    return Boolean(this.dialogVisible);
  }

  /**
   * v1
   */
  public set v1(val: any) {
    console.log(val);

  }

  handleClose() {
    this.$emit('handleClose')
  }

  sub() {
    console.log("sub");
  }
}

export default defineComponent({
  ...FormClass.inject(),
});
</script>


<script setup lang="ts">
// 如果在 setup 中定义类型，需要导出一下
export interface Props {
  dialogVisible: boolean;
  book_id?: string;
}
export interface Emit {
  (event: 'click', evt: MouseEvent): void;
}
// 这里不再需要使用变量来接收，可以利用 Vue 的编译宏来为组件生成正确的 Props 和 Emit
defineProps<Props>(); //  ✅
defineEmits<Emit>(); //  ✅
</script>


<template>
  <div class="">
    <el-dialog v-model="v1" title="新建章节" width="620px" :before-close="handleClose">
      <div class="">
        <el-form label-position="top" label-width="100px" :model="formLabelAlign">
          <el-form-item label="标题">
            <el-input v-model="formLabelAlign.name" />
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="handleClose">取消</el-button>
          <el-button type="primary" @click="sub">提交</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>


<style lang="scss" scoped></style>

弹出框

<script lang="ts">
import { Setup, Context } from 'vue-class-setup';

@Setup
class Base extends Context {
  public visible = false;

  public handleClose() {
    this.visible = false
  }

  public openClose() {
    this.visible = true
  }
}

@Setup
class Chapter extends Base { }

@Setup
class Batch extends Base { }
</script>

<script  setup  lang="ts">
const  chapter = new  Chapter();
const  batch = new  Batch();
</script>

 <CategoryAdd :dialogVisible="chapter.visible" :book_id="book_id" @handleClose="chapter.handleClose()" />
    <BatchAdd :dialogVisible="batch.visible" :book_id="book_id" @handleClose="batch.handleClose()" />

page

<script setup lang="ts">
import { ref, reactive, toRefs } from 'vue';
const props = defineProps({
  dialogVisible: {
    type: Boolean,
    default: false
  },
  book_id: {
    type: [String, Array],
    default: "0"
  },
})

const  state = reactive({
 formLabelAlign: {
 name:  "章节-",
 book_id:"",
 order:  "1",
  }
})

const { formLabelAlign } = toRefs(state)
const emit = defineEmits(['handleClose'])

const handleClose = () => {
  emit('handleClose')
}


const sub = () => {
  console.log("sub");
}
</script>


<template>
  <div class="">
    <el-dialog v-model="dialogVisible" title="新建章节" width="620px" :before-close="handleClose">
      <div class="">
        <el-form label-position="top" label-width="100px" :model="formLabelAlign">
          <el-form-item label="标题">
            <el-input v-model="formLabelAlign.name" />
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="handleClose">取消</el-button>
          <el-button type="primary" @click="sub">提交</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>


<style lang="scss" scoped>

</style>