使用的是vue，设置了height: 100vh，但页面还是有白色的边框

可能是因为页面的body元素或其他容器元素设置了margin或padding的缘故。可以尝试在CSS中添加以下样式：

body, html {
  margin: 0;
  padding: 0;
}

如果还是存在白色边框，可以用浏览器的开发者工具检查元素的样式，找到造成白色边框的元素并进行相应的调整。

相关问题

vue qrcode.js 边框

根据提供的引用内容，可以通过在`<div>`标签中设置`border`属性来为Vue中的qrcode.js添加边框。具体实现方法如下所示：

<template>
  <div class="qrcode-container">
    <div class="qrcode-border">
      <qrcode-vue :value="qrCodeValue" :options="qrCodeOptions"></qrcode-vue>
    </div>
  </div>
</template>

<script>
import QrcodeVue from 'qrcode.vue'

export default {
  components: {
    QrcodeVue
  },
  data() {
    return {
      qrCodeValue: 'https://www.example.com',
      qrCodeOptions: {
        size: 200,
        margin: 2
      }
    }
  }
}
</script>

<style>
.qrcode-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.qrcode-border {
  border: 25px solid #fff;
  background-color: #fff;
}
</style>

在上述代码中，我们首先引入了`qrcode.vue`组件，并在`<template>`标签中使用了该组件。然后，我们在外层`<div>`标签中添加了一个名为`qrcode-container`的类，用于居中显示qrcode。接着，在内层`<div>`标签中添加了一个名为`qrcode-border`的类，并设置了`border`属性和`background-color`属性，用于实现边框效果。最后，我们在`<script>`标签中定义了`qrCodeValue`和`qrCodeOptions`两个变量，用于设置qrcode的值和选项。

vue3中页面有两个div，实现按下鼠标后拖动左侧div边框调整左右两侧div的宽度

可以使用vue3的指令来实现这个功能。具体实现步骤如下：

1. 在左侧div中添加mousedown事件监听器，当鼠标按下时触发事件。
2. 在整个页面中添加mousemove和mouseup事件监听器，当鼠标移动时触发mousemove事件，当鼠标松开时触发mouseup事件。
3. 在mousedown事件处理程序中，记录左侧div的初始宽度、鼠标按下时的位置和整个页面的宽度。
4. 在mousemove事件处理程序中，根据鼠标移动的距离计算出左侧div的新宽度，并设置左侧div的宽度和右侧div的宽度。
5. 在mouseup事件处理程序中，移除mousemove和mouseup事件监听器。

具体实现代码如下：

<template>
  <div class="container">
    <div class="left" :style="{ width: leftWidth + 'px' }" @mousedown="onMouseDown"></div>
    <div class="right"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      leftWidth: 200, // 左侧div的初始宽度
      mouseX: 0, // 鼠标按下时的位置
      pageWidth: 0 // 整个页面的宽度
    }
  },
  mounted() {
    this.pageWidth = document.body.clientWidth
  },
  methods: {
    onMouseDown(event) {
      this.mouseX = event.clientX
      document.addEventListener('mousemove', this.onMouseMove)
      document.addEventListener('mouseup', this.onMouseUp)
    },
    onMouseMove(event) {
      const distance = event.clientX - this.mouseX
      const newLeftWidth = this.leftWidth + distance
      const newRightWidth = this.pageWidth - newLeftWidth
      this.leftWidth = newLeftWidth
      this.$nextTick(() => {
        this.$emit('resize', newLeftWidth, newRightWidth)
      })
    },
    onMouseUp() {
      document.removeEventListener('mousemove', this.onMouseMove)
      document.removeEventListener('mouseup', this.onMouseUp)
    }
  }
}
</script>

<style>
.container {
  display: flex;
  height: 100vh;
}

.left {
  height: 100%;
  background-color: #eee;
  cursor: col-resize;
}

.right {
  flex: 1;
  height: 100%;
  background-color: #fff;
}
</style>

在上面的代码中，左侧div的宽度使用响应式数据leftWidth来绑定。鼠标按下事件使用onMouseDown方法来处理，该方法会记录鼠标按下时的位置和整个页面的宽度。鼠标移动事件使用onMouseMove方法来处理，该方法会根据鼠标移动的距离计算出左侧div的新宽度，并设置左侧div的宽度和右侧div的宽度。鼠标松开事件使用onMouseUp方法来处理，该方法会移除mousemove和mouseup事件监听器。