使用vue实现一个弹出对话框,vue按钮确认弹框
这篇文章主要介绍了某视频剪辑软件如何实现简易的弹出框，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
目录
vue实现弹出框1.模板2 .脚本=数据中定义3 .脚本=方法中定义关闭方法4.样式某视频剪辑软件实现弹窗选择1.创建一个改善简历。vue2 .创建PickerPopup.vue组件
vue实现弹出框
说明：点击查询弹出模态，单击表格选中，点击模态外取消模态显示效果。
如图：
1.Template
！-模态-选择人员-
div class= model v-show= is show multiple @ click= setMaskShow($ event)
div class=模型已修复 ref= child
此处为内容区
/div
/div
2.script = data 中定义
/********* 模态-选择人员********/
isShowMultiple: false
3.script = methods 中定义关闭方法
setMaskShow(e) {
如果(!这个参考文献。孩子。包含(目标)){
这个。is show multiple=false
}
},
4.样式
。型号{
宽度：100%;
身高：100%;
位置：固定；
top:0；
左：0;
z指数：999;
}。固定型号{
位置：绝对；
top:120 px；
左：10px
填充：5px
背景：# ffffff
盒影：3px 2px 5px # 7777
}
vue实现弹窗选择
1.创建一个ImproveResume.vue
模板
div class=release-post
div class=header
图片
class=header_left
src= ./images/left_header.png
alt=
@click=clickGoBack
/
p class=header_title 完善简历/p
/div
div class=resume_main
div class=简历内容
货车形
div class=table_list
名称标题期望薪资/p
范菲尔德
class=日历
v-model=onlineForm.salary
:value=onlineForm.salary
占位符=请选择
@click=clickPicker(1)
:class= { border style:薪金变化}
:disabled=true
/
/div
div class=table_list
名称标题最高学历/p
范菲尔德
:style={ color: #323233 }
class=日历
v-model=onlineForm.education
:value=onlineForm.education
占位符=请选择
@click=clickPicker(2)
:class= { border style:education change }
:disabled=true
/
/div
div class=table_list
名称标题工作年限/p
范菲尔德
class=日历
v-model=onlineForm.workYears
:value=onlineForm.workYears
占位符=请选择
@click=clickPicker(3)
:class= { border style:工作年份更改}
:disabled=true
/
/div
/van-form
！-薪资范围-
van-popup v-model= showPickerPopup position= bottom round
差异
div class=resume_picker
差异
@click.stop=clickPicker(1)
:class= selectIndex==1？select_title : not_title
选择素指数==1？select_text : not_text
期望薪资
/p
选择素指数==1？select_data : not_data
{{ onlineForm.salary？ onlineForm.salary:请选择 }}
/p
/div
差异
@click.stop=clickPicker(2)
:class= selectIndex==2？select_title : not_title
p:class=选择指数==2？" select_text : not_text "
选择学历
/p
p:class=选择指数==2？" select_data : not_data "
{{ onlineForm.education？ onlineForm.education:请选择 }}
/p
/div
差异
@click.stop=clickPicker(3)
:class= selectIndex==3？select_title : not_title
选择指数==3？select_text : not_text
工作年限
/p
选择指数==3？select_data : not_data
{{ onlineForm.workYears？ onlineForm.workYears:请选择 }}
/p
/div
/div
PickerPopup
@clickClose=clickClose
@clickConFirm=clickConFirm
:showPickerPopup= showPickerPopup
:pickerTitle=pickerTitle
:columnsData=columnsData
：选择索引=选择索引
/pickerpoup
/div
/van-popup
/div
/div
差异
div class=mask
按钮
class=btn
@click=提交
:class={ btnBg: colorChange() }
v-防止点击= 1000
下一步
/按钮
/div
/div
返回-左侧-模态
class=modal
:show=isShowModal
title=温馨提示
@hideModal=hideModal
@submit=submitModal
leftBtnText=取消
rightBtnText=继续完善
p class=tips_text 完善简历，24小时好工作主动联系您/p
/return-左模态
/div
/模板
脚本
从“Vue”导入Vue
从"万特"导入{圆形，DatetimePicker，窗体，字段，Toast，日历，Picker，覆盖，ActionSheet，弹出式菜单，选项卡，制表符}。
导入" vant/lib/index。少”；
Vue.use(圈)。使用(日期时间选择器).使用（形式)。使用（字段)。使用（日历)。使用（选取器)。使用（覆盖)。使用（动作表)。使用（弹出);
import ReturnLeftModal from ./perfect sume/ReturnLeftModal
从" @/utils/resize "导入{ objbrulfun }；
从导入请求 API/API
从导入PickerPopup ./pickerpoup
从"虚拟控制台"导入Vconsole
如果(过程。环境。node _ ENV=== development ){
new Vconsole()；
}
导出默认值{
姓名：改进简历，
组件：{
ReturnLeftModal，
PickerPopup，
},
data () {
返回{
showpickerpoup:false，//选择弹窗
pickerTitle: ，//弹窗标题
columnsData: []，//弹窗数据
isShowModal: false，
工作年限：[应届毕业, 1-3年, 3-5年, 6-9年, 10年以上],
教育专栏：[不限, 初中以下, 中专/中技, 高中, 大专, 本科, 硕士, 博士],
列数组：[面议, 1000元以下/月, 1000-2000元/月, 2000-3000元/月, 3000-5000元/月, 5000-8000元/月, 8000-12000元/月, 12000-20000元/月, 20000-25000元/月, 25000元以上/月],
出差津贴：[面议, 10-50元/日, 50-100元/日, 100-200元/日, 200-300元/日, 300-500元/日, 500元及以上/日],
onlineForm: {
类型：0,//0全职一兼职
薪资： ,//薪资
教育： ,//学历
工作年限： ,
},
薪资变化：假的，
教育变革：错误，
workYearsChange: false，
docmHeight: window.innerHeight，
showHeight: window.innerHeight，
选择索引：1,
};
},
观察：{
//监听屏幕高度变化（软键盘弹出)
showHeight: function (newValue) {
if (this.docmHeight newValue) {
this.hideshow=false
}否则{
this.hideshow=true
}
}
},
已安装(){
objBlurFun(输入)
objbrumfun( textarea )
文档。文档元素。风格。background= # fff
//解决安卓软件盘弹出把底部固定的；不变的顶上去，window.onresize监听页面高度的变化
window.onresize=()={
回车(()={
这个。显示高度=窗口。内部高度；
})()
}
},
方法：{
单击关闭(){
console.log(取消)
this.showPickerPopup=false
},
单击确认(五、索引){
console.log(v，index，点击确认)
this.columnsData=index==1？this.columnsSalary : index==2？this.educationColumns : index==3？this.workingYears : []
这个。选择指数=指数
if (index==1) {
this.onlineForm.salary=v
this.clickPicker(索引1)
} else if (index==2) {
this.onlineForm.education=v
this.clickPicker(索引1)
} else if (index==3) {
this.onlineForm.workYears=v
this.showPickerPopup=false
}
},
单击选取器{
console.log(v，’点击索引)
this.showPickerPopup=true
this.pickerTitle=v==1？请选择期望薪资：v==2？请选择最高学历：v==3？请选择工作年限 : 请选择
this.columnsData=v==1？this.columnsSalary : v==2？this.educationColumns : v==3？this.workingYears : []
这个。选择指数=v
},
单击GoBack () {
this.userPhoneChange=false
this.isShowModal=true
},
hideModal () {
这个. store.commit(noScroll ，true)；
this.isShowModal=false
这个. store.state.entry===this .$route.path？这个. ZhiYue.closePage():这个1000美元路由器。back()；
},
submitModal () {
这个. store.commit(noScroll ，false)；
this.isShowModal=false
},
//下一步按钮色值
colorChange () {
如果（
this.onlineForm.salary
this.onlineForm。教育
这。工作年
) {
返回真实的
}
},
//验证
validateOnlineForm (btn) {
设有效=真
如果(!this.onlineForm.salary ！这个。在线表单。工资。trim()){
有效=错误
这个. shq.toast(请选择期望薪资)
this.welfareChange=true
} else if(！this.onlineForm.education ！这个。在线表单。教育。trim()){
有效=错误
这个. shq.toast(请选择最高学历)
this.postAgeChange=true
} else if(！this.onlineForm.workYears ！这个。在线表单。工作年限。trim()){
有效=错误
这个. shq.toast(请选择工作年限)
this.educationnge=true
}
返回有效；
},
//提交
提交(){
这个。在线表单。电话=这个。在线表单。接触
if (this.validateOnlineForm()) {
请求。保存新的（
this.onlineForm
).然后(resp={
if (resp resp.code==0) {
祝酒成功({
消息： 完善成功，
onClose: ()={
这个. store.state.entry===this .$route.path？这个. ZhiYue.closePage():这个1000美元路由器。back()；
}
})
}否则{
resp。给这个消息. shq。吐司(resp。消息)；
}
}).catch(()={
this.btnDisable=false
这个. shq.toast(操作失败，请再次尝试)
})
}
},
},
销毁(){
这个. store.commit(noScroll ，false)；
},
};
/脚本
样式范围语言=少
* {
边距：0;
填充：0;
}
*深v型van-cell:after {
边框-底部：无！重要；
}
*深v型。货车提货人_ _取消{
不透明度：0;
}。发布-发布{
宽度：100%;
垫底：64px
顶部填充：常量（安全区域-顶部嵌入)；
padding-top:env(safe-area-inset-top)；
}
*深v型van-field _ _控制：禁用{
字号：15px
font-family: PingFangSC，ping fangsc-Regular；
字体粗细：400;
文本对齐：左对齐；
颜色：# 333333;
-WebKit-text-fill-color:# 333333；
}。简历_主页{
宽度：100%;
边距-顶部：64px
垫底：74px
}。简历_内容{
左边距：30px
右边距：30px
}。面具{
宽度：100%;
背景：# ffffff
盒影：0px 0px 8px 0px rgba(204，204，204，0.3)；
位置：固定；
底部：0;
左：0;
显示器：flex
对齐-内容：居中；
对齐-项目：居中；
填充：10px 0；
padding-bottom:calc(env(safe-area-inset-bottom)15px)；
padding-bottom:calc(env(safe-area-inset-bottom)15px)；
}。btn {
字体大小：16px
font-family: PingFangSC，ping fangsc-Regular；
字体粗细：500;
文本对齐：左对齐；
颜色：# ffffff
边距：0自动；
文本对齐：居中；
行高：1.6雷姆；
宽度：100%;
边距：0 16px
高度：48px
背景：# d8d 8；
}。btnBg {
字体大小：16px
font-family: PingFangSC，ping fangsc-Regular；
字体粗细：500;
文本对齐：左对齐；
颜色：# ffffff
边距：0自动；
文本对齐：居中；
行高：1.6雷姆；
宽度：100%;
边距：0 16px
高度：48px
背景：# d8d 8；
边框：无；
大纲：无；
背景：线性梯度(90度、#50a3ff、# 1283 ff)；
边框-半径：4px
}。name_title {
字体大小：16px
font-family: PingFangSC，ping fangsc-Regular；
字体粗细：粗体；
颜色：# 333333;
}。日历{
宽度：100%;
高度：49px
背景：# ffffff
边框：1px纯色# e5e5e5
边框半径：5px
页边距-顶部：10px
左填充：20px
背景：url( ./图像/下拉菜单。png’)不重复96%居中；
背景-尺寸：10像素7像素
填充-右：25px
*深v型van-field__control {
字号：15px
font-family: PingFangSC，ping fangsc-Regular；
字体粗细：400;
文本对齐：左对齐；
颜色：# 333333;
边距-顶部：12px
}
}
*五-深度输入：-webkit-input-placeholder {
字号：15px
font-family: PingFangSC，ping fangsc-Regular；
字体粗细：400;
文本对齐：左对齐；
颜色：# afadad
-WebKit-text-fill-color:# AFA爸爸；
}。表_列表{
边距-顶部：16px
}。标题{
宽度：100%;
显示器：flex
对齐-内容：灵活开始；
对齐-项目：居中；
位置：固定；
top:0；
身高：44px
背景：# ffffff
顶部填充：常量（安全区域-顶部嵌入)；
padding-top:env(safe-area-inset-top)；
边框-底部：实心0.5px # e5e5e5
z指数：99;
}。header_left {
宽度：20px
高度：20px
填充：12px
}。header_title {
宽度：100%;
边距：0;
右边距：44px
字体大小：18px
font-family: PingFangSC，ping fangsc-Regular；
字体粗细：500;
文本对齐：居中；
颜色：# 333333;
}。边框样式{
边框：实心1px #ff1d28！重要；
边框半径：3px！重要；
}。tips_text {
字体大小：12px
font-family: PingFangSC，ping fangsc-Regular；
字体粗细：400;
文本对齐：居中；
颜色：# 333333;
padding-top:8px；
填充-底部：18px
}
输入：-webkit-input-placeholder {
字号：15px
font-family: PingFangSC，ping fangsc-Regular；
字体粗细：400;
文本对齐：左对齐；
颜色：# 999999;
}
textarea:-WebKit-input-placeholder {
字号：15px
font-family: PingFangSC，ping fangsc-Regular；
字体粗细：400;
文本对齐：左对齐；
颜色：# 999999;
}。van-field__control {
颜色：# 333333;
}。简历_选取器{
显示器：flex
justify-content:space-around；
对齐-项目：居中；
flex:1；
}。select_title {
显示器：flex
伸缩方向：列；
对齐-内容：居中；
对齐-项目：居中；
填充：16px 0；
flex:3；
边框-顶部：实心3px # 1283ff
背景：线性梯度（
180度，
rgba(18，131，255，0.08%)0%，
rgba(255，255，255，0) 100%
);
}。不是_标题{
显示器：flex
伸缩方向：列；
对齐-内容：居中；
对齐-项目：居中；
填充：16px 0；
flex:3；
border-top:solid 3px # ffffff；
}。select_text {
字体大小：12px
font-family: PingFangSC，ping fangsc-Regular；
字体粗细：400;
颜色：# 666666;
}。not_text {
字体大小：12px
font-family: PingFangSC，ping fangsc-Regular；
字体粗细：400;
颜色：# 666666;
}。select_data {
字体大小：16px
font-family: PingFangSC，ping fangsc-Regular；
字体粗细：粗体；
颜色：# 1283ff
边距-顶部：5px
}。非数据{
字体大小：16px
font-family: PingFangSC-Medium，方平SC；
字体粗细：粗体；
颜色：# c2c2c2
边距-顶部：5px
}
/风格
2.创建PickerPopup.vue组件
模板
div class= release-post v-show= showpickerpoup
！-薪资、学历、工作年限-
厢式货车搬运工
显示-工具栏
:title=pickerTitle
:columns=columnsData
:default-index=2
@cancel=clickClose
@confirm=点击确认
:style=(height=0)
：取消-按钮-text=null
/
/div
/模板
脚本
导出默认值{
姓名： PickerPopup ，
道具：{
showpickerpoup:{
类型：布尔型，
默认值：错误
},
pickerTitle: {
类型：字符串，
默认值： 默认
},
列数据：{
类型：数组，
默认值：[]
},
选择索引：{
类型：数量，
默认值：1
}
},
data () {
返回{
oSelectIndex: 1
};
},
观察：{
选择索引：{
处理程序（新值){
this.oSelectIndex=newVal
},
即时：真的，
},
},
方法：{
单击关闭(){
这个$emit(点击关闭)
},
单击确认（值){
这个. emit(clickConFirm ，value，this.oSelectIndex)
},
},
};
/脚本
样式范围语言=少
/风格
以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。