|
@@ -23,44 +23,59 @@
|
|
|
</template>
|
|
</template>
|
|
|
|
|
|
|
|
<script lang="ts">
|
|
<script lang="ts">
|
|
|
- import Vue from 'vue';
|
|
|
|
|
- import Component from 'vue-class-component';
|
|
|
|
|
- import { Inject, Prop, Watch } from 'vue-property-decorator';
|
|
|
|
|
|
|
+ import { defineComponent, inject, Component } from 'vue';
|
|
|
|
|
|
|
|
- @Component
|
|
|
|
|
- export default class Tab extends Vue {
|
|
|
|
|
- @Inject()
|
|
|
|
|
- addTab?: (tab: Tab) => void;
|
|
|
|
|
- @Inject()
|
|
|
|
|
- removeTab?: (tab: Tab) => void;
|
|
|
|
|
|
|
+ const Tab:Component = defineComponent({
|
|
|
|
|
+ name: 'Tab',
|
|
|
|
|
+ props: {
|
|
|
|
|
+ title: {
|
|
|
|
|
+ type: String,
|
|
|
|
|
+ required: true
|
|
|
|
|
+ },
|
|
|
|
|
+ lazy: {
|
|
|
|
|
+ type: Boolean,
|
|
|
|
|
+ default: false
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+
|
|
|
|
|
+ setup(): {
|
|
|
|
|
+ addTab?: (tab: typeof Tab) => void,
|
|
|
|
|
+ removeTab?: (tab: typeof Tab) => void,
|
|
|
|
|
|
|
|
- @Prop({ required: true })
|
|
|
|
|
- title!: string;
|
|
|
|
|
- @Prop({ default: false })
|
|
|
|
|
- lazy!: boolean;
|
|
|
|
|
|
|
+ isActive: boolean,
|
|
|
|
|
+ rendered: boolean
|
|
|
|
|
+ } {
|
|
|
|
|
+ return {
|
|
|
|
|
+ addTab: inject('addTab'),
|
|
|
|
|
+ removeTab: inject('removeTab'),
|
|
|
|
|
|
|
|
- isActive = false;
|
|
|
|
|
- rendered = false;
|
|
|
|
|
|
|
+ isActive: false,
|
|
|
|
|
+ rendered: false
|
|
|
|
|
+ };
|
|
|
|
|
+ },
|
|
|
|
|
|
|
|
- @Watch('isActive')
|
|
|
|
|
- onActive(): void {
|
|
|
|
|
- if (this.isActive) {
|
|
|
|
|
- this.rendered = true;
|
|
|
|
|
|
|
+ watch: {
|
|
|
|
|
+ isActive(): void {
|
|
|
|
|
+ if (this.isActive) {
|
|
|
|
|
+ this.rendered = true;
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
- }
|
|
|
|
|
|
|
+ },
|
|
|
|
|
|
|
|
mounted(): void {
|
|
mounted(): void {
|
|
|
if (this.addTab) {
|
|
if (this.addTab) {
|
|
|
this.addTab(this);
|
|
this.addTab(this);
|
|
|
}
|
|
}
|
|
|
- }
|
|
|
|
|
|
|
+ },
|
|
|
|
|
|
|
|
destroyed(): void {
|
|
destroyed(): void {
|
|
|
if (this.removeTab) {
|
|
if (this.removeTab) {
|
|
|
this.removeTab(this);
|
|
this.removeTab(this);
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
- }
|
|
|
|
|
|
|
+ })
|
|
|
|
|
+
|
|
|
|
|
+ export default Tab;
|
|
|
</script>
|
|
</script>
|
|
|
|
|
|
|
|
<style lang="scss" scoped></style>
|
|
<style lang="scss" scoped></style>
|