Vue2Editor视频输入框位置异常，如何在组件脚本设置bound属性？

我看你已经在尝试用bounds属性解决视频输入框的负边距问题了，但在Vue组件里的配置方式和原生JS有点不一样，我来帮你调整代码：

首先你原来的代码里，editorSettings的位置不对——它应该放在data()返回的对象里，这样Vue2-editor才能正确读取到这个配置。修正后的完整代码如下：

<template>
  <div id="app">
    <vue-editor v-model="content" :editor-options="editorSettings"></vue-editor>
  </div>
</template>

<script>
import { VueEditor, Quill } from 'vue2-editor'

export default {
  components: {
    VueEditor,
  },
  data() {
    return {
      content: '',
      // 把配置移到data的返回对象里
      editorSettings: {
        bounds: 'self'
      }
    }
  }
}
</script>

为什么这样改？ #

在Vue组件中，editor-options需要绑定一个组件实例可访问的响应式属性。你之前把editorSettings直接放在export default的根级，组件无法正确识别这个配置项，所以bounds设置没有生效。

把editorSettings放到data()的返回对象后，组件就能读取到这个配置，bounds: 'self'会让视频输入弹窗的边界限制在编辑器自身范围内，从而解决负边距的问题。如果'self'效果不够理想，你也可以尝试把bounds设置为某个DOM元素的选择器（比如'#app'），让弹窗以该元素为边界。

内容的提问来源于stack exchange，提问作者adeab