vue element ui dialog 实现可拖动

vue yekong

vue element ui dialog 实现可拖动

代码

/**
* @Author: 858834013@qq.com
* @Name: popWin
* @Date: 2022-06-10
* @Desc:
*/
<template>
  <div>
    <el-dialog
        title=" "
        append-to-body
        :modal="false"
        :close-on-click-modal="false"
        custom-class="nobg"
        :visible.sync="show"
        width="40%">
      <div class="popWinBody" id="drift" @mousedown="mousedown">
        <div class="popWinBodys">
          <div class="close" @click="getHide"></div>
          <div class="popWinBodysTitle">
            材质查询
          </div>
          <div class="popWinBodysTitle2">
            详细信息
          </div>
          <el-table
              class="eltables"
              stripe
              :data="tableData">
            <el-table-column
                prop="title"
                align="center"
                label="管线编号">
            </el-table-column>
            <el-table-column
                prop="title1"
                align="center"
                label="起点编号">
            </el-table-column>
            <el-table-column
                prop="title2"
                align="center"
                label="终点编号">
            </el-table-column>
            <el-table-column
                prop="title3"
                align="center"
                label="起点埋深">
            </el-table-column>
            <el-table-column
                prop="title4"
                align="center"
                label="终点埋深">
            </el-table-column>
            <el-table-column
                prop="title5"
                align="center"
                label="起点高程">
            </el-table-column>
            <el-table-column
                prop="title6"
                align="center"
                label="终点高程">
            </el-table-column>
          </el-table>
          <div class="paging">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page.sync="currentPage"
                :page-size="100"
                layout="prev,pager, next,total"
                :total="1000">
            </el-pagination>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>

export default {
  name: "popWin",
  components: {},
  props: {
    id: {
      type: String,
      default() {
        return '';
      }
    }
  },
  data() {
    return {
      status: '',
      show: true,
      currentPage: 1,
      tableData: [{
        title: 'ETX6090ET...',
        title1: 'ETX6090',
        title2: 'ETX6020',
        title3: '0.510000',
        title4: '0.790000',
        title5: '32.03900',
        title6: '31.958000',
        title7: '31.958000',
      }, {
        title: 'ETX6090ET...',
        title1: 'ETX6090',
        title2: 'ETX6020',
        title3: '0.510000',
        title4: '0.790000',
        title5: '32.03900',
        title6: '31.958000',
        title7: '31.958000',
      }, {
        title: 'ETX6090ET...',
        title1: 'ETX6090',
        title2: 'ETX6020',
        title3: '0.510000',
        title4: '0.790000',
        title5: '32.03900',
        title6: '31.958000',
        title7: '31.958000',
      }, {
        title: 'ETX6090ET...',
        title1: 'ETX6090',
        title2: 'ETX6020',
        title3: '0.510000',
        title4: '0.790000',
        title5: '32.03900',
        title6: '31.958000',
        title7: '31.958000',
      }, {
        title: 'ETX6090ET...',
        title1: 'ETX6090',
        title2: 'ETX6020',
        title3: '0.510000',
        title4: '0.790000',
        title5: '32.03900',
        title6: '31.958000',
        title7: '31.958000',
      }, {
        title: 'ETX6090ET...',
        title1: 'ETX6090',
        title2: 'ETX6020',
        title3: '0.510000',
        title4: '0.790000',
        title5: '32.03900',
        title6: '31.958000',
        title7: '31.958000',
      }, {
        title: 'ETX6090ET...',
        title1: 'ETX6090',
        title2: 'ETX6020',
        title3: '0.510000',
        title4: '0.790000',
        title5: '32.03900',
        title6: '31.958000',
        title7: '31.958000',
      }]
    }
  },
  watch: {},
  mounted() {
  },
  methods: {
    getHide() {
      this.show = false
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    mousedown(event) {
      this.selectElement = document.getElementById('drift')
      var div1 = this.selectElement
      this.selectElement.style.cursor = 'move'
      this.isDowm = true
      var distanceX = event.clientX - this.selectElement.offsetLeft
      var distanceY = event.clientY - this.selectElement.offsetTop
      // alert(distanceX)
      // alert(distanceY)
      console.log(distanceX)
      console.log(distanceY)
      document.onmousemove = function (ev) {
        var oevent = ev || event
        div1.style.top = oevent.clientY - distanceY + 'px'
        div1.style.left = oevent.clientX - distanceX + 'px'
        div1.style.right = 'auto'
      }
      document.onmouseup = function () {
        document.onmousemove = null
        document.onmouseup = null
        div1.style.cursor = 'default'
      }
    }
  }
}
</script>

<style lang="scss">
.el-dialog__wrapper {
  pointer-events: none;
}

.nobg {
  width: 1096px !important;
  height: 580px;
  background: none;

  .el-dialog__body {
    padding: 0;
  }

  .el-dialog__header {
    display: none !important;
  }
}

.popWinBody {
  width: 1096px !important;
  height: 580px;
  pointer-events: initial;
  background: rgba(0, 0, 0, 0);
  background: url("../assets/pop/popbg.png") no-repeat;
  background-size: 100% 100%;
  position: absolute;

  .close {
    background: url("../assets/sidebar2_close.png") no-repeat;
    background-size: 100% 100%;
    width: 22px;
    height: 22px;
    position: absolute;
    right: 0;
    top: 0;
    cursor: pointer;
  }

  .el-dialog__header {
    display: none;
  }

  .popWinBodysTitle {
    width: 1042px;
    border-bottom: 1px solid #086BAD;
    height: 50px;
    margin: 0 auto;
    display: flex;
    padding-top: 30px;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: row;
    align-content: flex-start;
    font-size: 20px;
    font-family: MicrosoftYaHei;
    font-weight: bold;
    color: #FFFFFF;
  }

  .popWinBodysTitle2 {
    width: 1042px;
    margin: 0 auto;
    font-size: 16px;
    font-family: MicrosoftYaHei;
    font-weight: bold;
    color: #FFFFFF;
    height: 56px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: row;
    align-content: flex-start;
  }
}


</style>
<style scoped lang="scss">
.popWinBodys {
  .eltables {
    width: 1042px;
    margin: 0 auto;

  }

  .paging {
    width: 1042px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: row;
    align-content: flex-start;
  }

  ::v-deep {
    .el-pagination .btn-next, .el-pagination .btn-prev {
      background: none;
      color: #fff;
    }

    .el-pager li {
      width: 28px !important;
      min-width: 28px;
      height: 28px;
    }

    .el-pager li.active {
      width: 28px !important;
      min-width: 28px;
      height: 28px;
      padding: 0;
      background: #00CCFF;
      border-radius: 14px;
    }

    .el-pagination__total {
      color: #FFFFFF;
    }

    .el-dialog, .el-pager li {
      background: none;

      color: #FFFFFF;
    }

    .el-table th.el-table__cell {
      //background: none;
      background: #0b4364;
    }

    .el-table, .el-table__expanded-cell {
      background: none;
    }

    .el-table th, .el-table tr {
      background: none;
      font-size: 13px;
    }

    .el-table--enable-row-hover .el-table__body tr:hover > td {
      background: rgba(9, 124, 184, 0.2);

    }

    .has-gutter {
      background: rgba(39, 124, 246, 0.3);
      color: rgba(255, 255, 255, 1);
    }

    .el-table td, .el-table th.is-leaf {
      border: none;
      color: #fff;
    }

    .el-table--striped .el-table__body tr.el-table__row--striped td {
      background: rgba(9, 124, 184, 0.2);
      color: #fff;
    }

    .el-table td, .el-table th {
      padding: 12px 0;
    }

    .el-table--border::after, .el-table--group::after, .el-table::before {
      display: none;
    }
  }
}

</style>

喜欢