封装vue插件（模拟element提示框）

执行代码

that.$confirm('确认导出选中记录吗？', '提示', {
        type: 'warning'
      })

预览效果

如果想要对按钮 “确定”进行操作，那是相当困难的；比如我希望给按钮‘确定’加上a标签，无解了感觉

后来只能自己封装一个 .vue弹出框插件

结构部分：

<template>
<div class="overall"  @click="remove">
  <div class="body_backgroud"></div>
  <div class="confirm">
    <div class="box">
      <div class="top">
        <span class="top_one">提示</span>
        <span class="top_two"  @click="remove">×</span>
      </div>
      <div class="content">
          <span class="content_one"><img src="/static/img/confirm.jpg" alt=""></span>
          <span class="content_two">确认导出选中记录吗？</span>
      </div>
      <div class="bottom">
          <span class="bottom_two button" @click="remove"><a class="testDom" :href="urlhttp">确定</a></span>
          <span class="bottom_one button" @click="remove">取消</span>
      </div>
    </div>
  </div>
</div>
</template>

行为部分：

<script>
import { CostMergeExcel } from '@/api/api'
export default {
  props: {
    confirmExport: Boolean,
    urlhttp: String,
  },
  data() {
    return {
    }
  },
  mounted() {
    console.log(this.urlhttp)
  },
  watch: {
    confirmExport() {
      this.getUrl()
    }
  },
  methods: {
    /* 获取url */
    getUrl () {
      // console.log(112)
      let that = this
      // let time = ''
      let para = this.queryOption()
      // console.log(para)
      that.startTime = para.begin_time.substr(0, 10)
      that.endTime = para.end_time.substr(0, 10)
      // let token = sessionStorage.getItem('token')
      // console.log(token)
      // time = that.startTime + '--' + that.endTime
      CostMergeExcel(para).then((res) => {
        // let blob = new Blob([res.data ], { type: 'application/octet-stream;charset=utf-8' }) // 创建一个blob对象
        // let a = document.getElementsByClassName('testDom')[0]
        // a.href = URL.createObjectURL(blob) // response is a blob
        // // console.log(a)
        // a.download = time + '.xlsx' // 文件名称
      })
    },
    remove () {
      let that = this
      document.getElementsByClassName('overall')[0].style.display = 'none'
      that.confirmExport = false
      this.$emit('closeConfirm', this.confirmExport)
    }
  }
}
</script>

样式部分：

<style scoped>
.overall{
  width: 100%;
  height: 100%;
  /* background: rgba(128, 128, 128, 0.7); */
  display: none;
  position: fixed;
  top: 0;
  left:0;
  z-index: 100;
}
.body_backgroud{
  width: 100%;
  height: 100%;
  background: rgba(128, 128, 128, 0.7);
  display: none;
  position: fixed;
  top: 0;
  left:0;
}
.confirm{
  width: 422px;
  height: 136px;
  background:#fff;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  border-radius: 10px;
}
.top{
  width: 100%;
  height: 52px;
  line-height: 52px;
}
.top_one{
  font-size: 20px;
  color:#00ad94;
  float: left;
  margin-left: 20px;
}
.top_two{
  font-size: 16px;
  color: #979aa0;
  float:right;
  margin-right: 20px;
  cursor: pointer;
}
.content{
  width: 100%;
  height: 25px;
  line-height: 25px;
}
.content img{
  display: inline-block;
  width: 25px;
  margin-left: 20px;
}
.content_two{
  font-size: 13px;
  color: #606266;
  margin-left: 10px;
}
.bottom{
  width: 100%;
}
.button{
  width: 56px;
  height: 32px;
  line-height: 32px;
  font-size: 12px;
  text-align: center;
  border:1px solid #dcdfe6;
  border-radius: 5px;
  margin-top: 15px;
  float: right;
  cursor: pointer;
}
.bottom_two{
   background: #32bda9;
   color: #fff;
   margin: 15px 15px 0 10px;
}
a{
  text-decoration:none;
  color: #fff;
}
</style>

效果：

按钮“确定”我是要这样子的

<span class="bottom_two button" @click="remove"><a class="testDom" :href="urlhttp">确定</a></span>

这样就解决了我的需求啦！！！！