1、在父组件里引用相关的组件(模态框)
关于ref的使用?
<EFcontactCustomerService ref="EFcontactCustomerService"/> methods: { //点击修改手机,弹出联系客服弹窗 clickApply() { this.$refs.EFcontactCustomerService.showServicemodal = true; }, }, components: { EFcontactCustomerService: resolve => require(["@/components/contactCustomerService"],resolve) }, 1234567891011
2、子组件(模态框)
<template> <!--联系客服 弹窗--> <div id="contactCustomerService" > <Modal footer-hide :width="500" id="modalWidth500" v-model="showServicemodal" @on-ok="showPositionsok" @on-cancel="closedIcons"> <div class="content"> <div class="font16 ffPFSC fw400 color3 tc" style="margin-top: 1.428571rem;"><img src="../assets/images/zanwu-icon.svg" alt="" style="width:73px; height:73px;"></div> <div class="font16 ffPFSC fw400 color3 tc" style="margin-top: 0.285714rem;">修改手机号请联系客服</div> <div class="font16 ffPFSC fw400 color3 tc" style="margin-top: 0.142857rem;">客服热线:021-69901535</div> </div> <div id="footerBtn"> <Button class="ivuHover font16 fw400 colorf ffPFSC okBtn" type="primary" @click="showPositionsok">确定</Button> </div> </Modal> </div> </template> <script> export default { name: "contactCustomerService", data(){ return { showServicemodal: false } }, mounted() { }, methods:{ showPositionsok(){ this.showServicemodal = false }, closedIcons(){ this.showServicemodal = false } } } </script> <style> #contactCustomerService .ivu-modal .ivu-modal-wrap{ height: 16.428571rem; margin-top: 15.714286rem; } </style> <style scoped> >>> .ivu-modal-body{ margin-top:10.857143rem; } #footerBtn { width: 100%; height: 6.0125rem; line-height: 5.714286rem; text-align: center; background: rgba(255, 255, 255, 1); border-radius: 0.714286rem; } .okBtn { width: 7.142857rem; height: 2.857143rem; background: linear-gradient(-80deg, rgba(249, 145, 108, 1), rgba(255, 161, 70, 1)); box-shadow: 0px 0px 8px 0px rgba(170, 70, 26, 0.41); border-radius: 0.285714rem; /* margin-top:0.928571rem; */ } </style>
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869相关知识
kylinH5框架之项目组件理解
vue根目录下的index.html中的id=“app”与src目录下的App.vue中的id=“app”为什么不会冲突
(vue)关于前端项目太大,内存溢出问题,保存就会报错。
请看以下公式代码:xx:=ref(c,1)>ref(c,2);yy:=re
基于微信小程序的鲜花销售(毕业设计,包括源码,数据库,教程).zip
贺公子之数据科学与艺术
基于asp.net的鲜花销售系统(源码+LW+调试文档+讲解)
横盘蓄势找启动买点选股公式横盘:=REF(((HHV(H,20)
ssm017网上花店设计+vue(论文+源码)
探索多模态情感识别:MER数据集的深度解析与应用
网址: vue引入组件、模态框、ref的使用 https://m.huajiangbk.com/newsview400520.html
上一篇: 雨花区开展“道路花化彩化行动” |
下一篇: 蒙城嵇康路:护栏“开”鲜花,道路 |