数据库网站建设,wordpress app生成,外发加工什么最好,wordpress 发文章 慢1、这里介绍的是将el-dialog作为组件封装便于复用#xff0c;如何通过父组件控制子组件dialog的显示与隐藏。
2、思路:首先el-dialog是通过dialogVisible的值是否为true或false来控制显示与隐藏的。那么我们可以通过父传子props来将true#xff08;即showFlag的值#xff0…1、这里介绍的是将el-dialog作为组件封装便于复用如何通过父组件控制子组件dialog的显示与隐藏。
2、思路:首先el-dialog是通过dialogVisible的值是否为true或false来控制显示与隐藏的。那么我们可以通过父传子props来将true即showFlag的值传递给dialog子组件然后在子组件中监听showFlag值的变化一旦出现变化就将showFlag的值赋值给dialogVisible以此来实现dialog组件的显示。
如何控制隐藏呢或者说如何实现二次点击显示
思路首先我们通过子传父$emit传递一个自定义事件hiddenFlag给父组件然后在父组件中触发该方法将showFlag的值变为false即可。
3、还有一种方法就是通过给子组件添加v-if来控制根据个人爱好来选择吧。
4、封装dialog子组件。
templateel-dialogtitle添加商品:visible.syncdialogVisiblewidth40%:before-closehandleClosestyletext-align: center; line-height: 20pxel-form:modelruleForm:rulesrulesrefruleFormlabel-width100pxclassdemo-ruleFormel-form-item label活动名称 propnewNameel-input v-modelruleForm.newName/el-input/el-form-itemel-form-item label活动日期 requiredel-form-item propnewDatael-date-pickertypedateplaceholder选择活动日期v-modelruleForm.newDatastylewidth: 100%/el-date-picker/el-form-item/el-form-itemel-form-item label活动地址 propnewAddressel-input v-modelruleForm.newAddress/el-input/el-form-itemel-form-item label爱好 propnewLikesel-input v-modelruleForm.newLikes/el-input/el-form-item/el-formspan slotfooter classdialog-footerel-button clickCancel()取 消/el-buttonel-button typeprimary clickdetermine()确 定/el-button/span/el-dialog
/template
script
export default {name: diaLog,data() {return {dialogVisible: false,ruleForm: {newName: ,newAddress: ,newData: ,newLikes: ,},rules: {newName: [{ required: true, message: 请输入活动名称, trigger: blur },],newAddress: [{ required: true, message: 请选择活动区域, trigger: blur },],newData: [{type: date,required: true,message: 请选择日期,trigger: change,},],newLikes: [{ required: true, message: 请输入爱好, trigger: blur }],},};},props: [showFlag],watch: {// 监听父组件传递过来的showFlag的变化,控制dialog的显示showFlag() {this.dialogVisible this.showFlag;},},methods: {// 关闭弹窗handleClose(done) {done();this.$emit(hiddenFlag);},// 取消Cancel() {this.$emit(hiddenFlag);},// 确定determine() {this.$emit(hiddenFlag);},},
};
/scriptstyle/style5、使用子组件。
templatedivel-button typeprimary clickaddGoods()添加商品/el-button!-- 对话框 --diaLog :showFlagshowFlag hiddenFlaghidden()/diaLog/div
/templatescript
import diaLog from ../components/dialog.vue;
export default {name: newUser,data() {return {showFlag: false,};},components: {diaLog,},methods: {// 添加商品addGoods() {// 展示弹窗this.showFlag true;},// 接收dialog组件传递过来的隐藏弹窗信息hidden() {this.showFlag false;}},
};
/scriptstyle/style效果图
