收藏
便签
笔记
消息
创作
登录
应无所住,而生其心
博主信息
排名
1
文章
860
粉丝
112
评论
163
文章类别
最新文章
最新评价
net core webapi post传递参数
庸人 : 确实坑哈，我也是下班好了好几次，发现后台传递对象是可以的，但...
百度编辑器自定义模板
庸人 : 我建议换个编辑器，因为现在百度富文本已经停止维护了，用tinymec...
关于我们
ICP备案 ：渝ICP备18016597号-1
网站信息：2018-2025TNBLOG.NET
技术交流：群号656732739
联系我们：contact@tnblog.net
公网安备：50010702506256
欢迎加群
欢迎加群交流技术
原

elmentui 弹窗，自定义样式 修改里边默认样式，自定义header，自定义头部等。Vue自定义组件的使用。Vue模板。Vue弹窗实现反馈页面

6533人阅读 2020/6/9 10:19 总访问：5182827 评论：0 收藏：0 手机
分类: 前端

这样一个效果

主要分为三块：

  • 一块是：一个简单的可以拖动的右下角悬浮菜单组件封装，点击它弹出这个弹窗
  • 一块是：对于这个弹窗的自定义样式，主要是header和body和footer插槽的使用，也是封装的一个组件
  • 一块是：最下面关于图片上传的组件封装，还有就是图片预览的组件的使用

可以拖动的悬浮菜单部分代码如下：

是触发的第一个组件。部分代码如下，详细的可以参考下方连接

  1. <template>
  2.     <div>
  3.         <!-- 悬浮菜单开始 -->
  4.         <div class="realTranslationInfos" v-drag>
  5.             <div class="RealtranslationBox">
  6.                 <img draggable="false" @click="openFeedbackDialog()" src="@/assets/imgs/labroom/feedback.png" alt=""
  7.                     width="66px" height="66px">
  8.             </div>
  9.         </div>
  10.         <!-- 悬浮菜单结束 -->
  12.         <!-- 封装的弹窗组件 -->
  13.         <FeedbackDialog ref="feedbackDialog" />
  14.     </div>
  15. </template>
  16. <script>
  17. import FeedbackDialog from '@/pages/feedback/feedbackDialog.vue'
  18. export default {
  19.     // 组件名字
  20.     name: 'FeedBack',
  21.     components: {
  22.         FeedbackDialog
  23.     },
  24.     // 组件参数
  25.     props: {
  26.         id: {
  27.             type: String,
  28.             default: ''
  29.         },
  30.         index: {
  31.             type: Number,
  32.             default: 0
  33.         },
  34.     },
  35.     data() {
  36.         return {
  37.             // 用来给自己封装的弹窗组件传递参数
  38.             dialogVisible: false
  39.         }
  40.     },
  41.     mounted() {
  42.     },
  43.     // 组件方法
  44.     methods: {
  45.         openFeedbackDialog() {
  46.             //调用子组件的方法打开弹窗
  47.             this.$refs.feedbackDialog.openFeedbackDialog();
  48.         }
  49.     }
  50. }
  51. </script>
  52. <style scoped="scoped" lang="scss">
  53. .realTranslationInfos {
  54.     width: 66px;
  55.     height: 66px;
  56.     // background: red;
  57.     position: fixed;
  58.     // position: absolute;
  59.     bottom: 56px;
  60.     right: 20px;
  62.     // bottom: 122px;
  63.     // right: -30px;
  64.     .translationContent {
  65.         min-height: 100px;
  66.         line-height: 23px;
  67.         width: 338px;
  68.         padding: 18px 74px 19px 19px;
  69.         background: #004CB3;
  70.         opacity: 0.80;
  71.         border-radius: 12px;
  72.         color: #fff;
  73.         position: fixed;
  74.         // position: absolute;
  75.         right: 58px;
  76.         bottom: 22px;
  77.         z-index: 99999;
  78.     }
  80.     .RealtranslationBox {
  81.         display: flex;
  82.         align-items: center;
  83.         position: absolute;
  84.         right: 2px;
  85.         bottom: 5px;
  86.         z-index: 99999;
  88.         img {
  89.             cursor: pointer;
  90.         }
  91.     }
  92. }
  93. </style>

详细的使用可以参考：https://www.tnblog.net/aojiancc2/article/details/7829

这里打开子组件弹窗的方式是调用子组件的方法打开的弹窗

  1. openFeedbackDialog() {
  2.   //调用子组件的方法打开弹窗
  3.   this.$refs.feedbackDialog.openFeedbackDialog();
  4. }

vue3中父组件调用子组件方法有点不一样了，参考：https://www.tnblog.net/xiuxin/article/details/8153

第二块：关于弹窗的自定义样式

  1. <!-- 问题反馈使用的弹窗 -->
  2. <template>
  3.     <div>
  4.         <!-- 弹窗start -->
  5.         <div class="dialogContent">
  6.             <el-dialog :visible.sync="dialogVisible" :show-close="false" width="700px" height="800px"
  7.                 :before-close="handleClose">
  8.                 <div slot="title" class="dialog-footer">
  9.                     <div style="font-size:16px">
  10.                         问题反馈
  11.                     </div>
  12.                     <div class="separateline">
  13.                     </div>
  14.                 </div>
  15.                 <div style="margin-top:-10px">
  16.                     <div style="display:flex">
  17.                         <div style="width:78px;color:#000">
  18.                             问题类型:
  19.                         </div>
  20.                         <div>
  21.                             <el-radio v-model="radio" label="1">系统问题</el-radio>
  22.                             <el-radio v-model="radio" label="2">内容问题</el-radio>
  23.                             <el-radio v-model="radio" label="3">我要吐槽</el-radio>
  24.                         </div>
  25.                     </div>
  26.                     <div style="display:flex;margin-top: 30px;">
  27.                         <div style="width:78px;color:#000;">
  28.                             描&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;述:
  29.                         </div>
  30.                         <div style="flex-grow: 1">
  31.                             <el-input type="textarea" v-model="describe" style="width:100%" :rows="7" placeholder="请输入内容">
  32.                             </el-input>
  33.                         </div>
  34.                     </div>
  35.                     <div style="display:flex;margin-top: 30px;">
  36.                         <div style="width:78px;color:#000">
  37.                             问题截图:
  38.                         </div>
  39.                         <div style="flex-grow: 1">
  40.                             <!-- 引用图片上传的组件 -->
  41.                             <UpLoadImg />
  42.                         </div>
  43.                     </div>
  44.                 </div>
  45.                 <span slot="footer" class="dialog-footer">
  46.                     <el-button @click="dialogVisible = false" size="small">我在想想</el-button>
  47.                     <el-button type="primary" size="small" @click="dialogVisible = false">确定反馈</el-button>
  48.                 </span>
  49.             </el-dialog>
  50.         </div>
  51.         <!-- 弹窗end -->
  52.     </div>
  54. </template>
  56. <script>
  57. import UpLoadImg from '@/pages/feedback/upLoadImg.vue'
  58. export default {
  59.     // 组件名字
  60.     name: 'FeedbackDialog',
  61.     components: {
  62.         UpLoadImg
  63.     },
  64.     // 组件参数
  65.     props: {
  66.         index: {
  67.             type: Number,
  68.             default: 0
  69.         },
  70.     },
  71.     data() {
  72.         return {
  73.             radio: "3",
  74.             describe:"",
  75.             dialogVisible: false
  76.         }
  77.     },
  78.     mounted() {
  79.         //alert("组件内部加载好了"+this.dialogVisibleParameter)
  80.         this.initPic()
  81.     },
  82.     // 组件方法
  83.     methods: {
  84.         initPic() {
  85.         },
  86.         //模态框关闭前的事件
  87.         handleClose(done) {
  88.         },
  89.         //打开弹窗
  90.         openFeedbackDialog() {
  91.             this.dialogVisible = true
  92.         }
  93.     }
  94. }
  95. </script>
  96. <style scoped="scoped" lang="scss">
  97. // 自定义的一根简单分割线
  98. .separateline {
  99.     height: 1px;
  100.     background: #eee;
  101.     margin-left: -40px;
  102.     margin-right: -40px;
  103.     margin-top: 9px;
  104. }
  106. // 问题截图，传递图片的样式
  107. .form-content.panle {
  108.     // padding: 20px;
  109.     padding-bottom: 10px;
  110.     // background-color: #f8f8f8;
  112.     .img-boxs {
  113.         display: flex;
  114.         /* margin-right: 46px; */
  115.         flex-wrap: wrap;
  117.         .img-waper {
  118.             margin-right: 10px;
  119.             margin-bottom: 10px;
  120.             position: relative;
  122.             .remove-icon:hover {
  123.                 cursor: pointer;
  125.                 img {
  126.                     opacity: 0.6;
  127.                 }
  128.             }
  130.             .remove-icon {
  131.                 position: absolute;
  132.                 width: 14px;
  133.                 height: 14px;
  134.                 top: -8px;
  135.                 right: -5px;
  137.                 img {
  138.                     width: 100%;
  139.                 }
  140.             }
  141.         }
  143.     }
  145.     .add-btn:hover {
  146.         cursor: pointer;
  147.         opacity: 0.6;
  148.     }
  150.     .add-btn {
  151.         width: 70px;
  152.         height: 70px;
  153.         border: solid 1px #DDDDDD;
  154.         display: flex;
  155.         align-items: center;
  156.         flex-wrap: wrap;
  157.         justify-content: space-around;
  159.         .icon-waper {
  160.             width: 18px;
  161.             height: 21px;
  162.             position: relative;
  164.             .icon-x {
  165.                 width: 19px;
  166.                 height: 5px;
  167.                 background-color: #DDDDDD;
  168.                 position: absolute;
  169.                 top: 0;
  170.                 bottom: 0;
  171.                 margin: auto;
  172.             }
  174.             .icon-y {
  175.                 height: 21px;
  176.                 width: 5px;
  177.                 background-color: #DDDDDD;
  178.                 position: absolute;
  179.                 left: 0;
  180.                 right: 0;
  181.                 margin: auto;
  182.             }
  183.         }
  184.     }
  185. }
  186. </style>
  188. <!-- 修改elementui里边对话框的默认样式
  189.    需要注意两点：
  190.    1：样式声明的时候不要加scoped，不然样式只在当前组件起作用，无法覆盖样式内容的样式
  191.    2：要修改默认弹窗里边的样式，加一个前缀，就可以做到只修改当前这个组件的了，不然可能会影响到其他地方的样式
  192. -->
  193. <style lang="scss">
  194. /* .dialogContent .el-dialog {
  195.     background-color: #F6F8FC;
  196. }
  198. .dialogContent .el-dialog__header {
  199.     padding: 20px 40px 10px 40px
  200. }
  202. .dialogContent .el-dialog__body {
  203.     padding: 30px 40px;
  204.     color: #606266;
  205.     font-size: 14px;
  206.     word-break: break-all;
  207. } */
  209. // 修改el-dialog里边的默认样式
  210. .dialogContent {
  212.     .el-dialog {
  213.         background-color: #F6F8FC;
  214.     }
  216.     .el-dialog__header {
  217.         padding: 20px 40px 10px 40px
  218.     }
  220.     .el-dialog__body {
  221.         padding: 30px 40px;
  222.         color: #606266;
  223.         font-size: 14px;
  224.         word-break: break-all;
  225.     }
  227.     .el-dialog__footer {
  228.         padding: 0px 40px 30px 40px
  229.     }
  231.     // 修改默认按钮的padding也就是跳转按钮的宽度
  232.     .el-button--small,
  233.     .el-button--small.is-round {
  234.         padding: 9px 16px;
  235.     }
  237.     // 修改默认按钮的圆角为直角
  238.     .el-button--mini,
  239.     .el-button--small {
  240.         border-radius: 0px;
  241.     }
  243. }
  244. </style>

第三块：关于图片上传的组件

  1. <!-- 问题反馈使用的弹窗 -->
  2. <template>
  3.     <div>
  4.         <!-- 图片上传start -->
  5.         <div class="form-content panle">
  6.             <div class="img-boxs">
  7.                 <div v-for="(item,i) in taskResoult.imgJson" :key="i+'img'" class="img-waper" @click="onPreviewImg(i)">
  8.                     <img :src="'/oss/api/ImageViewer/'+item.id+'.jpg?percent=0.6&quality=80&od=true'" width="79px"
  9.                         height="79px">
  10.                     <div class="remove-icon" @click="rmImgs(i)">
  11.                         <img src="/asserts/img/error.png">
  12.                     </div>
  13.                 </div>
  14.                 <div v-if="taskResoult.imgJson.length<9" class="img-waper">
  15.                     <div class="add-btn" @click="addImgClick">
  16.                         <input ref="inputImgFile" type="file" @change="uploadimg" style="display: none;"
  17.                             accept="image/*">
  18.                         <div class="icon-waper">
  19.                             <div class="icon-x" />
  20.                             <div class="icon-y" />
  21.                         </div>
  22.                     </div>
  23.                 </div>
  24.             </div>
  25.         </div>
  26.         <!-- 图片上传end -->
  28.         <!-- 图片预览start -->
  29.         <el-image-viewer v-if="showViewer" :z-index="20000" :initial-index="initialIndex" :append-to-body="true"
  30.             :on-close="closeViewer" :mask-closable="false" :url-list="taskResoult.imgJson.map(a=>a.fileUrl)" />
  31.         <!-- 图片预览end -->
  32.     </div>
  34. </template>
  36. <script>
  37. import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
  38. export default {
  39.     // 组件名字
  40.     name: 'UpLoadImg',
  41.     components: {
  42.         ElImageViewer
  43.     },
  44.     // 组件参数
  45.     props: {
  46.         index: {
  47.             type: Number,
  48.             default: 0
  49.         },
  50.     },
  51.     data() {
  52.         return {
  53.             showViewer: false,
  54.             initialIndex: 0,
  55.             taskResoult: {
  56.                 'uploadFileID': '',
  57.                 stuImgs: '',
  58.                 imgJson: [],
  59.                 'uploadFileInfo': '',
  60.                 uploadFileInfoJson: {},
  61.                 'remarks': null
  62.             }
  63.         }
  64.     },
  65.     mounted() {
  66.         this.initPic()
  67.     },
  68.     // 组件方法
  69.     methods: {
  70.         initPic() {
  71.         },
  72.         //点击添加图片，直接触发文件选择框的事件即可
  73.         addImgClick() {
  74.             this.$refs.inputImgFile.click()
  75.         },
  76.         //打开图片预览
  77.         onPreviewImg(i) {
  78.             //设置预览图片的索引
  79.             this.initialIndex = i
  80.             this.showViewer = true
  81.         },
  82.         // 关闭图片预览
  83.         closeViewer() {
  84.             this.showViewer = false
  85.         },
  86.         rmImgs(i) {
  87.             this.taskResoult.imgJson.splice(i, 1)
  88.             // console.log(self.taskResoult)
  89.             this.$forceUpdate()
  90.         },
  91.         //上传图片逻辑。文件选择框的change事件触发
  92.         uploadimg(e) {
  93.             // 日精进上传图片
  94.             const imgFileExtensionArry = ['png', 'jpg', 'jpeg', 'bmp', 'gif', 'webp', 'psd', 'svg', 'tiff']
  95.             const file = e.target.files[0]
  96.             const fileExt = file.name.substr(file.name.lastIndexOf('.') + 1)
  97.             if (imgFileExtensionArry.indexOf(fileExt.toLowerCase()) === -1) {
  98.                 this.$message.warning('仅允许提交图片文件!')
  99.                 return
  100.             }
  101.             const formData = new FormData()
  102.             formData.append('bucketName', 'labroom')
  103.             formData.append('filePath', 'labresult')
  104.             formData.append('FileType', 1)
  105.             formData.append('file', file)
  106.             if (this.taskResoult.stuImgs && this.taskResoult.imgJson.length === 9) {
  107.                 this.$message.error('不允许超过9张图片')
  108.                 return
  109.             }
  111.             const self = this
  112.             self.$service.api.UpLoadFormFile(formData).then(res => {
  113.                 const imgInfo = {
  114.                     id: res.data.id,
  115.                     fileName: res.data.title,
  116.                     fileUrl: '/oss/api/ImageViewer/' + res.data.id + '.jpg'
  117.                 }
  118.                 self.taskResoult.imgJson.push(imgInfo)
  119.                 console.log(self.taskResoult)
  120.                 self.$forceUpdate()
  121.             })
  122.         }
  123.     }
  124. }
  125. </script>
  126. <style scoped="scoped" lang="scss">
  127. // 问题截图，传递图片的样式
  128. .form-content.panle {
  129.     // padding: 20px;
  130.     padding-bottom: 10px;
  131.     // background-color: #f8f8f8;
  133.     .img-boxs {
  134.         display: flex;
  135.         /* margin-right: 46px; */
  136.         flex-wrap: wrap;
  138.         .img-waper {
  139.             margin-right: 10px;
  140.             margin-bottom: 10px;
  141.             position: relative;
  143.             .remove-icon:hover {
  144.                 cursor: pointer;
  146.                 img {
  147.                     opacity: 0.6;
  148.                 }
  149.             }
  151.             .remove-icon {
  152.                 position: absolute;
  153.                 width: 14px;
  154.                 height: 14px;
  155.                 top: -8px;
  156.                 right: -5px;
  158.                 img {
  159.                     width: 100%;
  160.                 }
  161.             }
  162.         }
  164.     }
  166.     .add-btn:hover {
  167.         cursor: pointer;
  168.         opacity: 0.6;
  169.     }
  171.     .add-btn {
  172.         width: 79px;
  173.         height: 79px;
  174.         border: solid 1px #DDDDDD;
  175.         display: flex;
  176.         align-items: center;
  177.         flex-wrap: wrap;
  178.         justify-content: space-around;
  180.         .icon-waper {
  181.             width: 18px;
  182.             height: 21px;
  183.             position: relative;
  185.             .icon-x {
  186.                 width: 19px;
  187.                 height: 5px;
  188.                 background-color: #DDDDDD;
  189.                 position: absolute;
  190.                 top: 0;
  191.                 bottom: 0;
  192.                 margin: auto;
  193.             }
  195.             .icon-y {
  196.                 height: 21px;
  197.                 width: 5px;
  198.                 background-color: #DDDDDD;
  199.                 position: absolute;
  200.                 left: 0;
  201.                 right: 0;
  202.                 margin: auto;
  203.             }
  204.         }
  205.     }
  206. }
  207. </style>

详细的图片预览的组件的使用可以参考：
https://www.tnblog.net/aojiancc2/article/details/7830


欢迎加群讨论技术，1群：677373950(满了，可以加，但通过不了)，2群：656732739。有需要软件开发，或者学习软件技术的朋友可以和我联系~(Q:815170684)

评价

EasyUI弹窗批量修改combogrid下拉框的值
JS方法//点击弹出批量修改框 UpdateLot:function(){ varrow=$(&quot;#dg&quot;).datagrid(&quot;getChecked&quot;); if(...

layer弹窗+ef引入独立页面进行操作
使用layer弹窗进行操作的时候我们可以使用type=2，来把一个独立的页面指向content内容例如我们有一个表格，点击添加后，我...

百度编辑器在layer弹窗中加载问题
因为加载到layer后百度编辑器要从新渲染一遍，所以如果使用setContent(Content)设置的内容在加载到layer弹窗中是显示不出来...

表格在layer弹窗中居中表格居中
其实很简单直接给table设置一个margin:top auto就可以了layer:layer.open({ type:1, title:&quot;更新&quot;, area:[&qu...

layui 弹窗遮罩层把弹窗挡住问题
代码：layer.open({ type:1, area:[&quot;300px&quot;,&quot;300px&quot;], content:$(&quot;#addvieww&quot;) });分析...

layer弹窗i获取id
直接贴代码,这个实在yes回调函数里边执行的，通过index去找 yes: function (index) { var nowLayer = $(&quot;#layui-lay...

layer弹窗放jquery对象被遮住了
html &lt;div id=&quot;showcontent&quot; style=&quot;display: none&quot;&gt; hello layer &lt;/div&gt; js: l...

XAF获取PopupWindowShowAction弹窗窗体的字段数据
在Execute点击事件里面获取数据获取窗体视图数据DetailView view= e.PopupWindowView as DetailView;将窗体视图数据转换为...

XAF弹窗按钮弹出自定义窗体
加载CustomizePopupWindowParams事件并创建窗体弹出private void popupWindowShowAction1_CustomizePopupWindowParams(obje...

layer弹窗
//先引入layer的js layer.open({ //属性 type:1, //标题 title:&quot;内容修改&quot;, //content（正文）可传obj，...

layer弹窗 获取frames的值
通过window.frames[&quot;name&quot;]可以调用layer弹页窗指向页面的方法//例如目标页面存在一个方法 varupdate=function(...

uni-app的常见弹窗
前 言uni-app　uni-app常见的几种提示框uni-app常见提示框：成功提示： 加载框：文字：弹窗：模态弹窗和非模态弹窗 模态弹...

elementui对话框Dialog使用，配合表单使用。Vue-element-ui 弹窗，弹出层
Dialog 弹出一个对话框，适合需要页面元素更多的场景。需要设置visible属性，它接收Boolean，当为true时显示 Dialog。Dialo...

uni-app弹出层，弹窗层
最简单的弹出一句话：需要什么东西在内容里边加就行了 &lt;template&gt; &lt;view&gt; &lt;uni-popup ref=&...

uni-app弹窗，小程序，弹出层。自定义组件弹窗，解决滚动穿透
官方文档：https://uniapp.dcloud.net.cn/component/uniui/uni-popup.html [TOC]最简单的弹出一句话：需要什么东西在内容...