DDR爱好者之家 Design By 杰米
对于新手们来说,如何写一个可以多用的组件,还是有点难度的,组件如何重用,如何传值这些在实际使用中,是多少会存在一些障碍的,所以今天特意写一个最常用的模态框组件提供给大家,希望能帮助到您!
懒癌患者直接复制粘贴即可
Modal.vue组件
<template> <!-- 过渡动画 --> <transition name="modal-fade"> <!-- 关闭模态框事件 和 控制模态框是否显示 --> <div class="modal-backdrop" @click="$emit('closeModal')" v-show="show"> <div class="modal"> <img class="img" :src="/UploadFiles/2021-04-02/imgadress">新建一个index.js文件,在其中全局引入组件,全局引入之后,就不用在每个调用的组件里面单独引入了,可以直接使用
import Modalfrom "./Modal.vue"; const components = { install: function (Vue) { Vue.component('Modal', Modal); } } //导出组件 export default components;Index.vue中调用
<template> <div class="index"> <!-- 提交成功模态框 --> <Modal ref="Modal" :imgadress="imgadress" v-show="isModalVisible" statusText="提交成功" @closeModal="closeModal" contentText="Index.vue" :IDList="IDList" :buttonBackground="red" sure="确定" @confirm="confirm" > <!-- :payMoney="payMoney" yuan="元" --> </Modal> <button @click="showModel">支付成功模态框</button> </div> </template> <script> export default { name: 'Index', data(){ return{ // 模态框 imgadress:require('./../../assets/img/success.png'), isModalVisible:false, show: false, showToast: false, thisIndex:0, green:'green', blue:'', red:'', IDList:[ {payMoney:23456,yuan:'、'}, {payMoney:23456,yuan:'、'}, {payMoney:23456,yuan:'、'}, {payMoney:23456,yuan:'、'}, {payMoney:23456,yuan:'、'}, {payMoney:23456,yuan:'、'}, {payMoney:23456,yuan:'、'}, ], payMoney:99, } }, methods:{ // 提示模态框 showModel(){ this.isModalVisible = true; this.blue = this.$refs.Model.blue this.red = this.$refs.Model.red }, closeModal(){ this.isModalVisible = false }, confirm(){ console.log(11111111111); }, } } </script>效果如图
模态框-1.gif
如果只需要一个确定按钮,只需要在调用的时候,这么写就好了
<template> <div class="index"> <!-- 提交成功模态框 --> <Modal ref="Modal" :imgadress="imgadress" v-show="isModalVisible" statusText="提交成功" @closeModal="closeModal" contentText="Index.vue" :IDList="IDList" :buttonBackground="blue" @button="closeModal" sure="确定" alert="1" > </Modal> <button @click="showModel">支付成功模态框</button> </div> </template>如图
模态框-2.gif
可能并不是特别完美,如果您发现有缺点,还请不吝赐教!
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
DDR爱好者之家 Design By 杰米
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
DDR爱好者之家 Design By 杰米
暂无评论...
更新日志
2024年03月29日
2024年03月29日
- 苏有朋.1994-珍惜的背包(第3张)【飞碟】【WAV+CUE】
- 《宝可梦:朱紫》“蓝之圆盘”IGN7分:性能优化仍旧灾难
- 《塞尔达传说:王国之泪》大获成功!多项年度数据表现优秀
- 应景!欧任用《塞尔达传说:王国之泪》堆雪人
- 杨采妮.1996-为所欲为(国专)【EMI百代】【WAV+CUE】
- 黎姿.1993-如果真的恋爱【华纳】【WAV+CUE】
- 朱婧汐.2024-VILLAIN反派角色【StreetVoic】【FLAC分轨】
- 《喷射战士3》最新祭典公布 1月13日举办
- NS日服年度下载榜公开:《王泪》不敌《西瓜游戏》
- 科乐美《心跳回忆GS》系列推出复刻版 2月14日登陆NS
- 林峰.2012-SELF-PORTRAIT【英皇娱乐】【WAV+CUE】
- TENSION.2004-Story新歌+精丫EMI百代】【FLAC分轨】
- 草蜢.2000-环球2000超巨星系列【环球】【WAV+CUE】
- 国行Switch开启元旦折扣!《马里奥奥德赛》7折促销
- 《塞尔达》官方账号感谢玩家支持 发布王泪最新壁纸