以凡人之躯，用js事件监听自定义——写一个绝对定位card组件

一、组件是什么？

所谓组件化，就是把页面拆分成多个组件，每个组件依赖的 CSS、JS、模板、图片等资源放在一起开发和维护。 因为组件是资源独立的，所以组件在系统内部可复用，组件和组件之间可以嵌套，如果项目比较复杂，可以极大简化代码量，并且对后期的需求变更和维护也更加友好。

二、使用步骤

1.创建组件

html

<div class="floatCard" ref="floatCard" v-show="downloadVisible">
      <!-- <a-button type="primary" style="margin-bottom: 8px;" @click="allDownload">全部下载</a-button> -->
      <div class="tableContain">
        <table class="fixed_headers">
          <tbody style="width: 100%;">
            <tr class="headerTr">
              <td class="filename">文件名称</td>
              <td class="action">操作</td>
            </tr>
            <tr v-if="downloadData.length === 0">
              <td
                colspan="2"
                style="text-align: center; color: #ccc; line-height: 32px; font-size: 15px;"
              >无</td>
            </tr>
            <tr v-for="(item,index) in downloadData" :key="index" class="content">
              <td v-if="index !== downloadData.length" class="filename">
                <a-tooltip placement="top">
                  <template slot="title">
                    <span>{{item.fileName}}</span>
                  </template>
                  <div
                    style="width: 95%; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;"
                  >{{item.fileName}}</div>
                </a-tooltip>
              </td>
              <td v-if="index !== downloadData.length" class="action">
                <a
                  @click="toDownload(item.fileName,item.imTaskId)"
                  v-if="item.fileStatus === 2 || item.fileStatus === 4"
                >下载</a>
                <a
                  v-else
                  style="color: #ccc; cursor: default;"
                >{{fileStatusList[item.fileStatus - 1]}}</a>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

data

downloadVisible: false,
downloadInit: false,
downloadData: [
  { filename: 'aaaaaaaaaaaaaaaaaaaaaaaaa.csv' },
  { filename: 'aaaaaaaaaaaaaaaaaaaaaaaaa.csv' },
  { filename: 'aaaaaaaaaaaaaaaaaaaaaaaaa.csv' },
  { filename: 'aaaaaaaaaaaaaaaaaaaaaaaaa.csv' },
  { filename: 'aaaaaaaaaaaaaaaaaaaaaaaaa.csv' },
  { filename: 'aaaaaaaaaaaaaaaaaaaaaaaaa.csv' },
  { filename: 'aaaaaaaaaaaaaaaaaaaaaaaaa.csv' },
  { filename: 'aaaaaaaaaaaaaaaaaaaaaaaaa.csv' },
  { filename: 'aaaaaaaaaaaaaaaaaaaaaaaaa.csv' },
  { filename: 'aaaaaaaaaaaaaaaaaaaaaaaaa.csv' },
  { filename: 'aaaaaaaaaaaaaaaaaaaaaaaaa.csv' },
  { filename: 'aaaaaaaaaaaaaaaaaaaaaaaaa.csv' },
  { filename: 'aaaaaaaaaaaaaaaaaaaaaaaaa.csv' },
  { filename: 'aaaaaaaaaaaaaaaaaaaaaaaaa.csv' },
  { filename: 'aaaaaaaaaaaaaaaaaaaaaaaaa.csv' },
],

js

created() {
this.bodyClick = (e) => {
  if (this.downloadInit) {
    this.downloadVisible = true
    this.downloadInit = false
    return
  }
  if (!this.$refs.floatCard.contains(e.target)) {
    this.downloadVisible = false
  }
}
document.addEventListener('click', this.bodyClick, false)
// 放大缩小刷新页面
var normalWidth = window.innerWidth
var normalHeight = window.innerHeight
window.onresize = () => {
  if (normalWidth !== window.innerWidth || normalHeight !== normalHeight.innerHeight) {
    this.downloadVisible = false
  }
}
},
beforeDestroy() {
document.removeEventListener('click', this.bodyClick)
// clearInterval(this.timer)
},
methods: {
floatCard(e) {
  this.$refs.floatCard.style.top = e.clientY + 'px'
  this.$refs.floatCard.style.left = e.clientX + 'px'
  this.downloadInit = true
},
}

css

.floatCard {
  background: white;
  box-shadow: 1px 3px 5px #888888;
  padding: 10px;
  position: absolute;
  border-radius: 5px;
  z-index: 999;
  .contain {
    width: 210px;
    max-height: 300px;
    border: 1px solid #ccc;
    border-radius: 2px;
    overflow: scroll;
    table {
      border-collapse: collapse;
      margin: 0;
      padding: 0;
      width: 100%;
      table-layout: fixed;
      .headerTr {
        background: #f6f6f6;
        .filename {
          line-height: 28px;
          border-bottom: 1px solid #cdcdcd;
          border-right: 1px solid #cdcdcd;
          width: 70%;
          font-size: 12px;
          font-weight: 600;
          letter-spacing: 2px;
        }
        .action {
          line-height: 28px;
          border-bottom: 1px solid #cdcdcd;
          text-align: center;
          font-size: 12px;
          font-weight: 600;
          letter-spacing: 2px;
        }
      }
      .content {
        .filename {
          line-height: 24px;
          border-bottom: 1px solid #cdcdcd;
          border-right: 1px solid #cdcdcd;
          width: 70%;
          overflow: hidden;
        }
        .action {
          line-height: 24px;
          border-bottom: 1px solid #cdcdcd;
          text-align: center;
        }
      }
    }
  }
}

三、效果

四、带尖角

html

<div class="card">
</div>
<div class="content">
</div>
<div class="boxShadow">
</div>

css

*{
  background: black;
}
.card{
  height: 20px;
  width: 20px;
  background: 	#FFFFFF;
  transform:rotate(45deg);
  -ms-transform:rotate(45deg); /* IE 9 */
  -webkit-transform: rotate(45deg); /* Safari and Chrome */
  position: absolute;
  left: 100px;
  box-shadow: 2px 2px 5px #ccc;
  z-index: 99;
}
.content{
  height: 200px;
  width: 200px;
  background: 	#FFFFFF;
  border-radius: 5px;
  position: absolute;
  z-index: 999;
}
.boxShadow{
  height: 200px;
  width: 200px;
  position: absolute;
  border-radius: 5px;
  box-shadow: 2px 3px 5px 0 #ccc;
  z-index: 1;
}

总结

good morning