vue 组件封装确认弹框带可以自定义titile ,内容，和取消，确定按钮的弹窗 slot插槽

一，子组件 modalConfirm.vue 文件封装

<template><div class="confirmBgc animations" :style="{backgroundColor:rytColor}" v-show="show"><div class="rytContainer" :style="{borderRadius:rytBorderradius}"><h2 class="rytTitle" v-if="title">{{title}}</h2><div class="rytContent parent"><slot name="content"></slot></div><div class="rytButtons"><div class="button cancel" @click="clickCancel">{{cancel}}</div><div class="rytline"></div><div class="button confirmStyle" @click="clickConfirm">{{confirm}}</div></div></div></div>
</template>

<script>export default {name:'modalConfirm',props:{rytColor:{type:String,default:'rgba(0,0,0,0.6)'},rytBorderradius:{type:String,default:'12px'},title:{type:[String,Boolean],default:'rrr'},cancel:{type:[String],default:'取消'},confirm:{type:[String],default:'确定'},showModalconfirm:{type:Boolean,default:false}},data(){return{show:false,}},methods:{clickCancel(){this.show = false},clickConfirm(){this.show = falsethis.$emit('oncilckConfirm')}},watch:{showModalconfirm(val){this.show = val},show(val){  //监听show的值，当show的值发生改变的时候val即为当前show的值，把该值传给父组件的v-model属性（v-                                 model绑定的是input事件，出发Input事件）this.$emit('input',val)}}}
</script>

<style scoped>.parent{position: relative;}.parent::after {  /*利用缩放和伪元素解决1px在不同手机有粗有细问题*/margin:auto auto;width:295px;position: absolute;bottom: 0;left: 0;right: 0;content: "";box-sizing: border-box;height: 1px;border-bottom: 1px solid #e8e8e8;transform: scaleY(0.5);transform-origin: 0 0;}.animations {/* -webkit-animation: 'scaleDraw'  1s ease-in-out 0s 1 alternate forwards; 关键帧名称 */-webkit-animation: 'scaleDraw' .6s ease-in-out 0s 1 alternate forwards;-moz-animation: 'scaleDraw' .6s ease-in-out 0s 1 alternate forwards;-o-animation: 'scaleDraw' .6s ease-in-out 0s 1 alternate forwards;animation: 'scaleDraw' .6s ease-in-out 0s 1 alternate forwards;}.confirmBgc{width:100%;height:100%;position:fixed;top:0px;bottom:0px;left:0px;right:0px;}.rytContainer{width:295px;background-color: #fff;position:absolute;top:50%;left:50%;transform: translate(-50%,-50%);}.rytTitle{font-size: 20px;color:#333;font-weight: 700;height:44px;line-height: 44px;}.rytContent{font-size: 16px;color:#333;box-sizing: border-box;padding:0px 20px;padding-bottom: 16px;}.rytButtons{height:48px;color:#333;display: flex;flex-direction: row;justify-content: flex-start;}.button{width:50%;text-indent: center;height:42px;line-height: 42px;}.confirmStyle{color:#FF8200;}.rytline{width:1px;height:42px;background-color: #e8e8e8;/*以下代码是实现line线在x轴上的缩放，使线在不同手机上都显示的比较细*/transform: scaleX(0.5);transform-origin: 0 0;}
</style>

二，父组件引用 ceconfirm.vue

<template><div class="about marquee"><button @click="clickConfirm">点击确认弹框modalConfirm</button><modal-confirmv-model="rytModalconfirm":showModalconfirm="rytModalconfirm"@oncilckConfirm="clickConfirmBtn"title="请确认"><span slot="content">身份证姓名与实名认证不符,是否更换为识别到的身份证姓名</span></modal-confirm></div>
</template>

<script>import modalConfirm from '../../components/modal-confirm/modalConfirm.vue';  //下拉框带popup蒙层
export default {name:'ceconfirm',components: { //注册组件modalConfirm},data() {return {rytModalconfirm:false,};},methods: {//modalconfirm 确认弹框逻辑clickConfirm(){this.rytModalconfirm = trueconsole.log(this.rytModalconfirm ,'clickConfirm')},clickConfirmBtn(){ //点击了确认弹窗的确认按钮触发的事件console.log('请继续点击了confirm弹框确定按钮的逻辑')}},}
</script><style scoped></style>

三,所用知识点
父子组件之间的传值
slot 插槽用法，具名插槽用法

运用v-model实现子组件的显示隐藏
缺点：没有transition 的淡入淡出功能特效

------------------------还有一些小瑕疵，待完善------------------------------------

vue 组件封装确认弹框带可以自定义titile ,内容，和取消，确定按钮的弹窗 slot插槽相关推荐

移动端基于Vant组件封装底部弹出搜索多选列表
移动端基于Vant组件封装底部弹出搜索多选列表: 效果图如下: 点击确定后赋值给表单使用到的组件:van-popup,van-search 组件页面代码:searchDataPopup.vue &l ...
Vue 组件封装之 Content 列表(处理多行输入框 textarea)
Vue 组件封装之 Content 列表一.Content 列表二.使用案例三.API 使用指南四.源代码一.Content 列表组件说明: 实现 Content 列表布局排版. 效果展示 ...
Vue 组件封装简单案例——小白入门
今天初步接触了 Vue 中的组件封装,将写好的公用组件封装在 src 的 components 文件夹下,在 views 文件夹下的 .vue 文件可以进行调用以最简单的 button 按钮封装为例 ...
vue+腾讯地图标记弹框
腾讯地图添加自定义标记首先要加载腾讯地图 var center = new TMap.LatLng(39.984104, 116.307503);//设置中心点坐标//初始化地图var map = ...
Vue 组件封装之 Questionnaire 问卷调查
Vue 组件封装之 Questionnaire 问卷调查前言一.Questionnaire 组件二.使用案例三.API 使用指南四.源代码前言问卷调查表也是目前前端比较常见的开发项目,目 ...
echarts vue组件封装
echarts vue组件封装为什么封装echarts组件 1.原生echarts不是vue组件风格的,不爽 2.原生echarts需要操作dom,麻烦 3.原生echarts没有响应式系统,太菜 ...
vue组件封装技巧，如何对vue模块进行功能封装
如何对vue模块进行功能封装,vue组件封装技巧当业务不断累加,导致原本干净整洁的代码越来越冗余,各种变量和注释已经让他人望而却步,往往又苦于重构带来的成本,导致诞生很多巨石应用.与其让自己或他人面 ...
解决ant design vue中的modal弹框样式修改无效问题修改modal样式无效
ant design vue中的modal弹框修改样式无效问题 ant中的弹框样式是修改不了的原因在于弹框modal被挂载在最大的元素div外面了所以需要将挂载在某个html元素上在modal外 ...
Vue 组件封装之 ScrollView 上拉加载更多
Vue 组件封装之 ScrollView 上拉加载更多一.ScrollView 上拉加载更多二.使用案例三.API 使用指南四.源代码一.ScrollView 上拉加载更多组件说明: 实现 ...

vue 组件封装确认弹框带可以自定义titile ,内容，和取消，确定按钮的弹窗 slot插槽

vue 组件封装确认弹框带可以自定义titile ,内容，和取消，确定按钮的弹窗 slot插槽相关推荐

最新文章

热门文章

vue 组件封装 确认弹框带可以自定义titile ,内容，和取消，确定按钮的弹窗 slot插槽

vue 组件封装 确认弹框带可以自定义titile ,内容，和取消，确定按钮的弹窗 slot插槽相关推荐

最新文章

热门文章

vue 组件封装确认弹框带可以自定义titile ,内容，和取消，确定按钮的弹窗 slot插槽

vue 组件封装确认弹框带可以自定义titile ,内容，和取消，确定按钮的弹窗 slot插槽相关推荐