vue实现点击按钮,弹出对话框
vue实现点击按钮,弹出对话框
父组件:
html:
<el-button @click="uploadDataFile=true">数据上传 </el-button>
<UploadData :upload-data-file="uploadDataFile" @closeDialog="uploadDataFile=false"></UploadData>
js:
<script>
import UploadData from '../component/uploadData'
export default {
components: {
UploadData,
},
}
<script>
子组件:
html:
<el-dialog title="数据上传" :visible.sync="uploadDataFile" width="30%" :before-close="closeDialog"
custom-class="cloudBody">
<el-form :model="form">
<el-form-item label="数据名称" label-width="80px">
<el-input v-model="form.dataName" autocomplete="off"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer" style="text-align:center">
<el-button @click="closeDialog" class="btn">取 消</el-button>
<el-button type="primary" @click="submit" class="btn">确 定</el-button>
</div>
</el-dialog>
js:
props: ['uploadDataFile'],
methods:{
//关闭对话框
closeDialog () {
this.$emit('closeDialog')
},
//点击确定按钮
submit () {
this.$emit('closeDialog')
console.log('提交成功')
}
}
更多推荐
所有评论(0)