本书未发布
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>
推荐文章: