怎么获取到键盘的位置及高度呢

在移动端，获取键盘的位置及高度需要借助浏览器的`window.innerHeight`和`document.documentElement.clientHeight`属性。具体步骤如下：

1. 监听键盘弹出和收起事件，并在回调函数中更新键盘的位置及高度：

<template>
  <div>
    <!-- ... -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      keyboardHeight: 0
    };
  },
  mounted() {
    window.addEventListener('resize', this.handleResize);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize);
  },
  methods: {
    handleResize() {
      const windowHeight = window.innerHeight;
      const bodyHeight = document.documentElement.clientHeight;
      const keyboardHeight = bodyHeight - windowHeight;
      this.keyboardHeight = keyboardHeight;
    }
  }
}
</script>

在上面的代码中，我们在组件的`mounted`钩子中添加了一个`resize`事件监听器，并在`handleResize`方法中计算键盘的高度。具体来说，我们通过`window.innerHeight`获取窗口高度，通过`document.documentElement.clientHeight`获取文档高度，然后将二者相减，即可得到键盘的高度。最后，我们将键盘的高度保存到`keyboardHeight`属性中。

2. 在需要显示工具条的组件中使用`keyboardHeight`属性来确定工具条的位置及高度：

<template>
  <div>
    <!-- ... -->
    <div class="tool-bar" v-show="isKeyboardVisible" :style="{ bottom: keyboardHeight + 'px' }">
      <button>按钮1</button>
      <button>按钮2</button>
      <!-- ... -->
    </div>
  </div>
</template>

<style>
.tool-bar {
  position: fixed;
  left: 0;
  right: 0;
  background-color: #fff;
  border-top: 1px solid #ccc;
  padding: 10px;
  z-index: 999;
}
</style>

在上面的代码中，我们在工具条的`style`属性中使用`keyboardHeight`属性来确定工具条的位置及高度。具体来说，我们将工具条的`bottom`属性设置为`keyboardHeight + 'px'`，即可使工具条显示在键盘上方，并与键盘高度一致。

请注意，由于键盘的位置及高度可能因设备类型、输入法和屏幕方向等因素而有所差异，因此您可能需要根据实际情况微调工具条的位置和样式。