bulkImport.vue 自定义组件
<template>
<el-dialog :visible="modalVisible" title="批量导入" centered @close="$emit('close')" :fullscreen="true">
<span>弹窗内容</span>
<span slot="footer" class="dialog-footer">
<el-button @click="closeModal">取 消</el-button>
<el-button type="primary" @click="onConfirm">确 定</el-button>
</span>
</el-dialog>
</template>
<script>
export default {
props: {
// modal是否可见
modalVisible: {
type: Boolean,
default: false,
},
},
data() {
return {};
},
methods: {
onConfirm() {
this.$emit('bulkImport', {'aa':111,'bb':222});
},
closeModal() {
this.$emit('close');
},
},
watch: {},
computed: {},
components: {},
mounted() {},
};
</script>
<style lang="less" scoped>
</style>
================================================================
调用页面：
<template>
<div>
<el-button type="primary" @click="addTags()">批量导入</el-button>
<!-- 批量导入 -->
<bulkImport
@bulkImport="onBulkImport"
@close="() => (bulkImportVisible = false)"
:modalVisible="bulkImportVisible"
/>
</div>
</template>
<script>
//import bulkImport from '@/components/bulkImport.vue';
import bulkImport from '../../components/bulkImport.vue';
export default {
props: {
// modal是否可见
modalVisible: {
type: Boolean,
default: false,
},
},
components: {
bulkImport,
},
data() {
return {
bulkImportVisible: false,
};
},
methods: {
addTags() {
// 打开弹窗
this.bulkImportVisible = true;
},
onBulkImport(e) {
uni.showToast({
title:JSON.stringify(e),
icon: 'none',
duration: 5000
})
console.log(e); // 11
// 关闭弹窗
this.bulkImportVisible = false;
},
},
watch: {},
computed: {},
mounted() {},
};
</script>
<style>
</style>