vue element dialog 弹窗单独组件
大家想要单独弹窗组件,我猜测应该是对表单的提交,这里演示表单弹窗,本人后端开发,有不对的地方勿喷。这就完成了一个弹窗单独组件的实现,至于父子组件传参可自行百度$refs和prop。//这里是控制弹窗是否显示的,可以看下哪里引用到了。'上海市普陀区金沙江路 1518 弄''上海市普陀区金沙江路 1518 弄''上海市普陀区金沙江路 1518 弄''上海市普陀区金沙江路 1518 弄'//用于改变弹窗
·
大家想要单独弹窗组件,我猜测应该是对表单的提交,这里演示表单弹窗,本人后端开发,有不对的地方勿喷
一、创建单独组件TestDialog.vue,这算是个子组件,代码element官网有
<template>
<div>
<!-- Form -->
<el-button type="text" @click="dialogFormVisible = true">打开嵌套表单的 Dialog</el-button>
<el-dialog title="收货地址" :visible.sync="dialogFormVisible">
<el-form :model="form">
<el-form-item label="活动名称" :label-width="formLabelWidth">
<el-input v-model="form.name" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="活动区域" :label-width="formLabelWidth">
<el-select v-model="form.region" placeholder="请选择活动区域">
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
export default {
data() {
return {
gridData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}],
dialogFormVisible: false, //这里是控制弹窗是否显示的,可以看下哪里引用到了
form: {
name: '',
region: '',
date1: '',
date2: '',
delivery: false,
type: [],
resource: '',
desc: ''
},
formLabelWidth: '120px'
};
}
};
</script>
二、在自己的父组件引入弹窗组件,也就是想要引用dialog弹窗的组件
<template>
<div>
<el-button size="mini" @click="handleEdit()">编辑</el-button>
<TestDialog ref="TestDialog"></TestDialog> <!--引入弹窗标签-->
</div>
</template>
<script>
import TestDialog from "@/components/dialog/TestDialog"; //导入弹窗组件
export default {
components: {
TestDialog //注册弹窗组件
},
methods: {
handleEdit() {
this.$refs.TestDialog.dialogFormVisible = true; //用于改变弹窗子组件是否显示的属性
},
}
</script>
这就完成了一个弹窗单独组件的实现,至于父子组件传参可自行百度$refs和prop
更多推荐
已为社区贡献2条内容
所有评论(0)