Toolbars.vue 2.68 KB
Newer Older
潘际乾 committed
1 2 3 4
<template>
  <div class="eibs-toolbar">
    <el-popover
      placement="left-start"
潘际乾 committed
5
      trigger="click"
6
      :offset="80"
潘际乾 committed
7 8 9
      popper-class="toolbars-popover"
    >
      <div class="toolbar-detail">
10
        <ul @click="openTool">
潘际乾 committed
11 12 13 14
          <li id="tool-caculate">计算器</li>
          <li id="tool-account">账户查询</li>
          <li id="tool-swiftcode">SwiftCode查询</li>
          <li id="tool-finishedtask">业务查询</li>
15 16 17 18 19 20
          <li id="tool-feetype">费用查询</li>
          <li id="tool-sendMessageQuery">发报查询</li>
          <li id="tool-receiveMessageQuery">收报查询</li>

          <!-- <li id="tool-search">大额支付行号查询</li>
          <li id="tool-telexCode">电报码查询</li>
潘际乾 committed
21 22 23 24 25 26
          <li id="tool-exchangerate">即期牌价查询</li>
          <li id="tool-forwardexchangerate">远期牌价查询</li>
          <li id="tool-holiday">节假日查询</li>
          <li id="tool-interestrate">利率查询</li>
          <li id="tool-businessoffer">贸易金融业务报价查询</li>
          <li id="tool-accttradedetails">账户交易明细查询</li>
27
          <li id="tool-innerAccountBal">内部户可用余额查询</li> -->
潘际乾 committed
28 29
        </ul>
      </div>
LiRui committed
30
      <div class="toolbar-core" slot="reference">工具箱</div>
潘际乾 committed
31 32 33 34 35
    </el-popover>
  </div>
</template>

<script>
潘际乾 committed
36 37 38 39
export default {
  data() {
    return {};
  },
40 41 42 43 44
  methods:{
   openTool(e){
     this.$emit("openTool",e)
   } 
  },
潘际乾 committed
45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67
  mounted() {
    const that = this;
    const dom = this.$el;
    const minTop = 60,
      maxTop = document.body.clientHeight - dom.offsetHeight - 40;
    dom.onmousedown = (e) => {
      const disY = e.clientY - dom.offsetTop;
      document.onmousemove = function(e) {
        let top = e.clientY - disY;
        if (top > maxTop) {
          top = maxTop;
        } else if (top < minTop) {
          top = minTop;
        }
        dom.style.top = top + "px";
      };
      document.onmouseup = function(e) {
        document.onmousemove = null;
        document.onmouseup = null;
      };
    };
  },
};
潘际乾 committed
68 69 70 71 72 73 74 75 76 77 78 79 80
</script>

<style>
.eibs-toolbar {
  z-index: 1000;
  user-select: auto;
  width: 32px;
  height: 68px;
  position: fixed;
  top: 200px;
  right: 0;
}
.toolbars-popover {
潘际乾 committed
81
  padding: 0 !important;
潘际乾 committed
82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110
}
.toolbar-core {
  background: var(--themecolor);
  border-radius: 4px;
  width: 12px;
  padding: 8px;
  color: #fff;
  font-size: 12px;
  cursor: pointer;
}
.toolbar-detail {
  font-size: 12px;
}
.toolbar-detail ul {
  margin: 0;
  padding: 5px;
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
  background: #fff;
  cursor: pointer;
}
.toolbar-detail ul li {
  list-style: none;
  padding: 8px 15px;
}
.toolbar-detail li:hover {
  background: var(--themecolor);
  color: #fff;
}
</style>