弹框缩小关闭与打开

弹框缩小关闭与打开

## 1.弹框缩小功能组建封装
<template>
  <div class="SmallDialog" v-show="tagList.length">
    <div v-for="(item, index) in tagList" :key="item.name" class="item" @click="openDialog(item, index)">
      <span class="iconfont icon-chuangkou_fangda"></span>
      <span>{{item.name}}</span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tagList: []
    }
  },
  mounted() {
    this.$root.Bus.$on('smallDialog', (data) => {
      this.tagList.push({
        name: data.name,
        vueComponent: data.dialog,
        display: data.dialog.$el.style.display
      })
      data.dialog.$el.style.display = 'none'
    })
  },
  methods: {
    openDialog(item, index) {
      item.vueComponent.$el.style.display = item.display || 'block'
      this.tagList.splice(index, 1)
    }
  }
}
</script>

<style lang="scss">
.SmallDialog{
  position: absolute;
  left: 1450px;
  max-width: 900px;
  overflow: auto;
  bottom: 20px;
  z-index: 2;
  height: 52px;
  background: #fff;
  border: 2px solid #FFFFFF;
  box-shadow: 0px 10px 40px 0px rgba(1, 30, 33, 0.5), 0px 2px 5px 0px #FFFFFF;
  display: flex;
  align-items: center;
  font-weight: 600;
  color: #0B4EA5;
  .item {
    padding: 0 20px;
    display: flex;
    align-items: center;
    cursor: pointer;
    .iconfont{
      font-size: 28px;
      margin-right: 12px;
    }
    &:not(:last-of-type){
      border-right: 1px solid #0B4EA5;
    }
  }
}
</style>
## 2.调用触发
    small() {
      this.$root.Bus.$emit('smallDialog', {
        name: '应急响应',
        dialog: this
      })
    }
    ![在这里插入图片描述](https://img-blog.csdnimg.cn/8f66b0de959d40b5bcc12497e2c19be4.png#pic_center)
![在这里插入图片描述](https://img-blog.csdnimg.cn/d54820cf022541d6b56e89bd1098a081.png#pic_center)