# Dropdown 下拉框

<template>
  <div style="width: 100%; height: 170px; display: flex;" ref="target">
    <h3-dropdown style="margin-right: 20px;" :offset="[0, 10]" controlCls="test" :getBoundaryContainer="getBoundaryContainer">
    <!-- style="padding-top:100px;" -->
      <template><span>请点击这里弹窗(垂直弹窗)</span></template>
      <template #content>
        <div style="width:200px; height:100px;display:flex;justify-content: center;align-items: center;" >下拉框内容</div>
      </template>
    </h3-dropdown>
    <h3-dropdown :getBoundaryContainer="getBoundaryContainer" controlCls="test" placement="right-start"><!-- style="padding-top:100px;" -->
      <template><span>请点击这里弹窗(水平弹窗)</span></template>
      <template #content>
        <div style="width:200px; height:100px;display:flex;justify-content: center;align-items: center;" >下拉框内容</div>
      </template>
    </h3-dropdown>
  </div>
    <div class="test">设置 controlCls="test", 点击这里不会关闭弹窗 </div>
</template>
<script>
export default {
  data () {
    return {
      getBoundaryContainer: () => {return this.$refs.target;},
    }
  },
};
</script>

<template>
  <div style="width:100%; height: 150px;" ref="target">
    <h3-dropdown :trigger="getTrigger" :getBoundaryContainer="getBoundaryContainer"><!-- style="padding-top:100px;" -->
      <template><p>这里无法触发，<span ref="trigger">请点击这里弹窗</span></p></template>
      <template #content>
        <div style="width:200px; height:100px;display:flex;justify-content: center;align-items: center;" >下拉框内容</div>
      </template>
    </h3-dropdown>
    <br />

    <span ref="other" @click="visible = !visible">其他位置</span>

    <a-button style="margin-left:40px;" @click="otherHeight = 200">恢复200px</a-button>
    <h3-dropdown v-model="visible" :reference="reference" ref="otherDropdown">
       <template #content>
        <div :style="`width:400px; height:${otherHeight}px;display:flex;justify-content: center;align-items: center;flex-direction: column;`" >
          <br />
          <a-button @click="resize(false)">设置150px,刷新popper状态</a-button>
          <br />
          <a-button @click="resize(true)">设置150px, 刷新popper状态(当前placement)</a-button>
        </div>
      </template>
    </h3-dropdown>
  </div>
</template>
<script>
export default {
  data () {
    return {
      getBoundaryContainer: () => {return this.$refs.target;},
      trigger: null,
      reference: null,
      visible: false,
      otherHeight: 200
    }
  },
  mounted() {
    this.reference = this.$refs.other;
  },
  methods: {
    getTrigger () {
      return this.$refs.trigger;
    },
    resize (curr) {
      this.otherHeight = 150;
      this.$refs.otherDropdown.forcePopupAlign(curr);
    }
  }
};
</script>

<template>
  <div style="width:120px; height: 150px;">
    <h3-dropdown :arrow="true" placement="right"><!-- style="padding-top:100px;" -->
      <span>请点击这里弹窗</span>
      <template #content>
        <div style="width:200px; height:100px;display:flex;justify-content: center;align-items: center;" >下拉框内容</div>
      </template>
    </h3-dropdown>
    <br />
  </div>
</template>
<script>
export default {
  data () {
    return {
      visible: false,
    }
  },
  methods: {

  }
};
</script>

<template>
  <span class="demo-dropdown-label" ref="item1" @click="toggle('item1')">触发1</span>
  <span class="demo-dropdown-label" ref="item2" @click="toggle('item2')">触发2</span>
  <span class="demo-dropdown-label" ref="item3" @click="toggle('item3')">触发3</span>
  <span class="demo-dropdown-label" ref="item4" @click="toggle('item4')">触发4</span>
  <span class="demo-dropdown-label" ref="item5" @click="toggle('item5')">触发5</span>
  <h3-dropdown ref="dropdown">
    <template #content>
      <div style="width:200px; height:100px;display:flex;justify-content: center;align-items: center;" >
        下拉框内容-------{{item}}
      </div>
    </template>
  </h3-dropdown>
</template>
<script>
export default {
  data () {
    return {
      item: '',
    }
  },
  methods: {
    toggle(item) {
      this.$refs.dropdown.popperToggle(this.$refs[item], {
        show: () => {
          this.item = item;
          console.log(this.item, 'show');
        },
        hide: () => {
          console.log(this.item, 'hide');
        }
      });
    }
  }
};
</script>