自定义弹窗

通过按钮触发弹窗事件，我利用的是用iview结合vue2写的，也可以换成自己所需的ui组件库例如element ui等，这个弹窗可以根据自己的需求自适应样式等非常好用。如有不懂得可私聊我。

<template>

<lc-button @click.native="startOrder">发起弹窗</lc-button>

  <startOrderModal 

ref="startOrderModal"

@success="search"

>

</startOrderModal>

</template>

<script>

// 引入弹窗文件

import startOrderModal from '../modal/startOrderModal';

// 引入所需的ui组件

export default {

  components: { startOrderModal},

  data() {

return {

    }

  },

  methods: {

    startOrder() {

      this.$refs.startOrderModal.openModal();

    },

   },

</script>

<style lang="scss" scoped>

</style>

startOrderModal.vue文件

<template>

  <lc-modal v-model="showModal" title="弹窗" width="1200" maxHeight="750" @on-visible-change="visibleChange"

    class="lc-ftr-work-order-handle">

  </lc-modal>

</template>

<script>

export default {

  name: 'startOrderModal',

  methods: {

// 关闭modal

    closeModal() {

      this.showModal = false;

    },

openModal() {

        this.showModal = true;

    },

},

}

</script>

<style lang="scss" scoped>

.lc-ftr-work-order-handle {

  /deep/ .ivu-modal-body {

    padding-top: 0;

  }

  .workOrderForm {

    padding-bottom: 1px;

  }

}

</style>