nickyzhang-fe / vue-barrage Goto Github PK

页面上没显示弹幕， 控制台没有打印 error , 代码是不是有问题。

<template>
    <div style="margin-top: 150px; border: 1px solid">
        <barrage
                ref="barrage"
                class="barrage"
                :barrage-list="barrageList"
                :speed="4"
                :loop="true"
                :channels="4"
        />
        <button @click="addText">add</button>
    </div>

</template>

<script>
  import Barrage from 'vue-barrage'

  export default {
    name: "test",
    components: {Barrage},
    data() {
      return {
        barrageList: [{
          content: '试数据测试数测试数据数测试数据',
          color: 'red'
        }, {
          content: '试数据测试数测试数据数测试数据',
          color: 'red'
        }]
      }
    },
    methods: {
      addText() {
        this.$refs.barrage.add({
          content: '增加一条新的弹幕增加一条新的弹幕',
          color: 'red'
        })
      }
    }
  }
</script>

Error in nextTick: "RangeError: Maximum call stack size exceeded"

package.json如下：
"dependencies": {
"axios": "^0.19.0",
"core-js": "^3.4.3",
"vant": "^2.2.16",
"vue": "^2.6.10",
"vue-barrage": "0.0.11",
"vuex": "^3.1.2"
},
"devDependencies": {
"@vue/cli-plugin-babel": "^4.1.0",
"@vue/cli-plugin-eslint": "^4.1.0",
"@vue/cli-plugin-vuex": "^4.1.0",
"@vue/cli-service": "^4.1.0",
"@vue/eslint-config-prettier": "^5.0.0",
"babel-eslint": "^10.0.3",
"babel-plugin-import": "^1.13.0",
"cz-conventional-changelog": "^3.0.2",
"eslint": "^5.16.0",
"eslint-plugin-prettier": "^3.1.1",
"eslint-plugin-vue": "^5.0.0",
"less": "^3.0.4",
"less-loader": "^5.0.0",
"prettier": "^1.19.1",
"style-resources-loader": "^1.3.2",
"vue-cli-plugin-style-resources-loader": "^0.1.4",
"vue-template-compiler": "^2.6.10"
}

Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

插件中默认的参数大小为30px, 能否实现自定义的字体大小参数