Vue.js Vuejs弹出菜单：当右键单击页面底部附近时应用CSS转换

我想动态地将CSS样式应用于

transform:translateY

a菜单上下文（div），只要在页面底部附近单击它，它就会向上打开并适合页面内部

这是元素

FileContectMenu.vue

：

 <template>
  <el-popover
    ref="contextMenuPopover"
    placement="top-start"
    trigger="manual"
    v-model="value"
    :visible-arrow="false">
      <ul
        v-for="(folder, index) in items"
        :key="index"
        class="u-list-unstyled">
        <li
          v-for="item in folder"
          :key="item.action">
          <a class="u-block"
            @click.stop="click($event, item)">
            {{ item.label }}
          </a>
        </li>
        <hr class="u-mt2 u-mb2" />
      </ul>
      <ul class="u-list-unstyled">
        <li key="close">
          <a class="u-block"
            @click.stop="close">
            Close
          </a>
        </li>
      </ul>
  </el-popover>
</template>

<script>

export default {
  name: 'FileContextMenu',
  props: {
    items: {
      type: Array,
      required: true
    },
    value: {
      type: Boolean
    }
  },
  mounted () {
    document.addEventListener('mouseup', this.handleDocumentClick)
  },
  beforeDestroy () {
    document.addEventListener('mouseup', this.handleDocumentClick)
  },
  methods: {
    click (event, item) {
      this.$emit('contextmenuclick', item.action, item)
      this.close()
    },
    handleDocumentClick (event) {
      const popover = this.$refs.contextMenuPopover

      if (popover) {
        const popoverElement = popover.$el

        if (popoverElement && popoverElement.contains(event.target)) {
          let clickPosition = event.screenY
          let windowHeight = window.innerHeight
          let distanceTillBottom = windowHeight - clickPosition

          if (distanceTillBottom < 130) {
            console.log('Apply style "transform:translateY(-300px)"')  // <-- Apply the CSS transfor
          }

          return
        } else {
          this.close()
        }
      }
    },
    close () {
      this.$emit('input', false)
    }
  }
}

</script>

{{item.label}




接近


导出默认值{
名称：“FileContextMenu”，
道具：{
项目：{
类型：数组，
必填项：true
},
价值：{
类型：布尔型
}
},
挂载（）{
document.addEventListener（'mouseup'，this.handleDocument单击）
},
在销毁之前（）{
document.addEventListener（'mouseup'，this.handleDocument单击）
},
方法：{
单击（事件、项目）{
此.$emit（'contextmenuclick'，item.action，item）
这个。关闭（）
},
handleDocumentClick（事件）{
const popover=this.$refs.contextMenuPopover
if（popover）{
常量popoverElement=popover.$el
if（popoverElement&&popoverElement.contains（event.target））{
单击位置=event.screenY
设windowHeight=window.innerHeight
让distanceTillBottom=窗口高度-单击位置
如果（距离底端<130）{
console.log（'Apply style“transform:translateY（-300px）”）//
this.$refs.contextMenuPopover.$refs.popper.style.transform='translateY（-250px）'
Hey Djiss，感谢您的帮助！我在运行代码时遇到此错误：
Uncaught TypeError:无法在VueComponent.handleDocumentClick（FileContextMenu.vue？ede4:73）设置未定义的属性“transform”
。我如何修复它？我知道这是一个基本问题，但我从Vue开始。谢谢：）您是否尝试对日志
执行此操作。$refs.contextMenuPopover
，从您的消息中，它似乎没有捕获元素，请尝试用您以前在方法中声明的元素替换它：
popover.style.transform=“translateY（-300px）”
再次感谢@djiss！我成功地使它与
一起工作。$refs.contextMenuPopover.$refs.popper.style.transform='translateY（-250px）
。我不太明白这一行是怎么回事，但它是有效的。如果你想编辑你的答案，我很乐意将其标记为有效的。