vue elementui 弹窗el-dialog，自定义弹窗样式，单选按钮el-radio联动

5691人阅读 2020/7/17 12:19 总访问：4487005 评论：0 收藏：0 手机

分类: 前端

**效果如下：**
![](https://img.tnblog.net/arcimg/aojiancc2/a7e5cb5dafe9460b8f97f66f9f2d5b2f.png)

代码如下：
```

<template>
  <div>
    
    <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>
              
            </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>
    

  </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>

  
<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}}

评价

vue elementui 弹窗el-dialog，自定义弹窗样式，单选按钮el-radio联动

{{titleitem}} {{titleitem}}

{{titleitem}} {{titleitem}}