TNBLOG
首页
博客
视频
资源
问答
猿趣
手机
关于
搜索
收藏
便签
笔记
消息
创作
登录
剑轩
故如虹,知恩;故如月,知明
博主信息
排名
6
文章
6
粉丝
16
评论
8
文章类别
CSS
15篇
微服务
41篇
Git
14篇
.NET
102篇
移动开发
33篇
软件架构
23篇
.NET Core
119篇
.NET MVC
11篇
英语
3篇
随笔
86篇
Bootstrap
3篇
Redis
21篇
编辑器
10篇
Js相关
15篇
虚拟化
8篇
更多
Oracle
7篇
Python
14篇
数据库
26篇
EF
17篇
微信
3篇
前端
151篇
消息队列
6篇
docker
41篇
多线程
1篇
Java
4篇
软件基础
2篇
C++
2篇
WCF
7篇
Linux
7篇
nginx
5篇
K8S
9篇
ABP
2篇
最新文章
最新评价
{{item.articleTitle}}
{{item.blogName}}
:
{{item.content}}
关于我们
ICP备案 :
渝ICP备18016597号-1
网站信息:
2018-2024
TNBLOG.NET
技术交流:
群号656732739
联系我们:
contact@tnblog.net
欢迎加群
欢迎加群交流技术
原
vue elementui 弹窗el-dialog,自定义弹窗样式,单选按钮el-radio联动
4590
人阅读
2020/7/17 12:19
总访问:
3936442
评论:
0
收藏:
0
手机
分类:
前端
**效果如下:** ![](https://img.tnblog.net/arcimg/aojiancc2/a7e5cb5dafe9460b8f97f66f9f2d5b2f.png) 代码如下: ``` <!-- 处理问题反馈使用的弹窗 --> <template> <div> <!-- 弹窗start --> <div class="dialogContent"> <el-dialog :visible.sync="dialogVisible" :show-close="false" width="780px" height="800px" :before-close="handleClose" > <div slot="title" class="dialog-footer"> <div style="font-size:16px"> 问题反馈 </div> <div class="separateline" /> </div> <div style="margin-top:-10px"> <div style="display:flex"> <div style="width:78px;color:#000"> 处理类型: </div> <div> <el-radio v-model="feedbackType" label="1" @change="feedbackTypeChange">同意处理</el-radio> <el-radio v-model="feedbackType" label="2" @change="feedbackTypeChange">驳回处理</el-radio> <!-- <el-radio v-model="feedbackType" label="3">不理不睬</el-radio> --> </div> </div> <div style="display:flex;margin-top: 30px;"> <div style="width:78px;color:#000;"> 处理意见 </div> <div style="flex-grow: 1"> <el-input v-model="describe" type="textarea" style="width:100%" :rows="7" placeholder="请输入内容" /> </div> </div> <div style="display:flex;margin-top: 30px;"> <div style="width:78px;color:#000;"> 快捷回复 </div> <div v-if="feedbackType==1"> <div> <el-radio v-model="quicklyResponse" label="1" @change="quicklyResponseChange('感谢你的吐槽,我们将继续努力,争取得到你的认可!你的吐槽是我们前进的动力')">感谢你的吐槽,我们将继续努力,争取得到你的认可!你的吐槽是我们前进的动力!</el-radio> </div> <div> <el-radio v-model="quicklyResponse" label="2" @change="quicklyResponseChange('感谢你的反馈,问题已经修改!你的付出让我们进步了!谢谢!')">感谢你的反馈,问题已经修改!你的付出让我们进步了!谢谢!</el-radio> </div> <div> <el-radio v-model="quicklyResponse" label="3" @change="quicklyResponseChange('问题已处理,欢迎继续提出优化方案!你我写作,平台明天将更好!')">问题已处理,欢迎继续提出优化方案!你我协作,平台明天将更好!</el-radio> </div> </div> <div v-if="feedbackType==2"> <div> <el-radio v-model="quicklyResponse" label="4" @change="quicklyResponseChange('感谢你的反馈,经过多方验证,未发现该为问题,请检查你的使用环境,建议使用谷歌浏览器!!')">感谢你的反馈,经过多方验证,未发现该为问题,请检查你的使用环境,建议使用谷歌浏览器!!</el-radio> </div> </div> </div> </div> <span slot="footer" class="dialog-footer"> <el-button size="small" @click="dialogVisible = false">我在想想</el-button> <el-button type="primary" size="small" @click="saveFeedback()">确定反馈</el-button> </span> </el-dialog> </div> <!-- 弹窗end --> </div> </template> <script> export default { // 组件名字 name: 'FeedbackDialog', // 组件参数 props: { index: { type: Number, default: 0 } }, data() { return { feedbackType: '1', feedbackId: 0, describe: '', quicklyResponse: '0', dialogVisible: false } }, mounted() { // alert("组件内部加载好了"+this.dialogVisibleParameter) this.initPic() }, // 组件方法 methods: { initPic() { }, // 反馈类型改变后还是清空一下选择看着舒服点 feedbackTypeChange() { this.quicklyResponse = '0' this.describe = '' }, quicklyResponseChange(value) { this.describe = value }, // 模态框关闭前的事件 handleClose(done) { }, // 打开弹窗 openFeedbackDialog(feedbackId) { // 先把上一次填写的数据先清理一下 this.quicklyResponse = '0' this.describe = '' this.feedbackId = feedbackId this.dialogVisible = true }, // 清空一下反馈的数据,比如反馈成功之后清空一下,这样下次打开的时候不会让前面的数据还在 clearFeedbackData() { this.describe = '' this.feedbackType = '1' }, // 处理反馈 saveFeedback() { // this.$alert('功能开发中...') const _this = this if (!this.describe) { this.$alert('请输入反馈意见...') return } // 反馈回传的数据 const feedbackData = { DealType: this.feedbackType, // 处理类型 DealingOpinion: this.describe, // 处理意见 Id: this.feedbackId } this.$http.post('/education/api/Feedback/DealFeedback', feedbackData).then((res) => { // _this.$alert('处理反馈成功!...') _this.dialogVisible = false // 调用父组件的刷新方法 _this.$parent.getData() // 清空一下上次处理的数据 _this.clearFeedbackData() console.log(res) }) } } } </script> <style scoped="scoped" lang="scss"> // 自定义的一根简单分割线 .separateline { height: 1px; background: #eee; margin-left: -40px; margin-right: -40px; margin-top: 9px; } // 问题截图,传递图片的样式 .form-content.panle { // padding: 20px; padding-bottom: 10px; // background-color: #f8f8f8; .img-boxs { display: flex; /* margin-right: 46px; */ flex-wrap: wrap; .img-waper { margin-right: 10px; margin-bottom: 10px; position: relative; .remove-icon:hover { cursor: pointer; img { opacity: 0.6; } } .remove-icon { position: absolute; width: 14px; height: 14px; top: -8px; right: -5px; img { width: 100%; } } } } .add-btn:hover { cursor: pointer; opacity: 0.6; } .add-btn { width: 70px; height: 70px; border: solid 1px #DDDDDD; display: flex; align-items: center; flex-wrap: wrap; justify-content: space-around; .icon-waper { width: 18px; height: 21px; position: relative; .icon-x { width: 19px; height: 5px; background-color: #DDDDDD; position: absolute; top: 0; bottom: 0; margin: auto; } .icon-y { height: 21px; width: 5px; background-color: #DDDDDD; position: absolute; left: 0; right: 0; margin: auto; } } } } </style> <!-- 修改elementui里边对话框的默认样式 需要注意两点: 1:样式声明的时候不要加scoped,不然样式只在当前组件起作用,无法覆盖样式内容的样式 2:要修改默认弹窗里边的样式,加一个前缀,就可以做到只修改当前这个组件的了,不然可能会影响到其他地方的样式 --> <style lang="scss"> // 修改el-dialog里边的默认样式 .dialogContent { .el-dialog { background-color: #F6F8FC; } .el-dialog__header { padding: 20px 40px 10px 40px; background-color: #f6f8fc !important; } .el-dialog__body { padding: 30px 40px; color: #606266; font-size: 14px; word-break: break-all; } .el-dialog__footer { padding: 0px 40px 30px 40px } // 修改默认按钮的padding也就是跳转按钮的宽度 .el-button--small, .el-button--small.is-round { padding: 9px 16px; } // 修改默认按钮的圆角为直角 .el-button--mini, .el-button--small { border-radius: 0px; } } </style> ```
欢迎加群讨论技术,1群:677373950(满了,可以加,但通过不了),2群:656732739
👈{{preArticle.title}}
👉{{nextArticle.title}}
评价
{{titleitem}}
{{titleitem}}
{{item.content}}
{{titleitem}}
{{titleitem}}
{{item.content}}