vue-dplayer 发送弹幕显示弹幕

Vue-DPlayer是一个基于Vue.js的封装DPlayer的插件，用于在网页上播放视频。它支持发送弹幕并显示弹幕，可以通过一些简单的配置来实现弹幕的发送和显示。

首先，需要在Vue组件中引入Vue-DPlayer插件，并在该组件中定义一个`danmaku`数组，用于存储发送的弹幕内容。

接着，通过Vue-DPlayer的配置项`options`中设置`danmaku`为`true`，以启用弹幕发送功能。可以通过`api`属性访问弹幕相关的API，如`api.sendDanmaku`用于发送弹幕。

在Vue-DPlayer组件的模板中，可以通过使用`v-model`指令将弹幕输入框绑定到一个变量上，以获取用户输入的弹幕内容。当用户编辑完成后，可以通过发送按钮触发发送弹幕的方法。

具体实现如下所示：

<template>
  <div>
    <vue-dplayer :options="playerOptions"></vue-dplayer>
    <input type="text" v-model="danmakuContent" placeholder="请输入弹幕内容">
    <button @click="sendDanmaku">发送</button>
  </div>
</template>

<script>
import VueDPlayer from 'vue-dplayer'

export default {
  components: {
    VueDPlayer
  },
  data() {
    return {
      playerOptions: {
        danmaku: true
      },
      danmakuContent: '',
      danmaku: []
    }
  },
  methods: {
    sendDanmaku() {
      this.danmaku.push(this.danmakuContent)
      // 使用Vue-DPlayer的API发送弹幕
      this.$refs.dplayer.api.sendDanmaku(this.danmakuContent)
      this.danmakuContent = '' // 清空输入框
    }
  }
}
</script>

以上代码会在网页上显示一个视频播放器和一个输入框，用户可以在输入框中输入弹幕内容，并通过点击发送按钮发送弹幕。发送的弹幕内容会被保存在`danmaku`数组中，并显示在视频播放器上。

这样，就可以通过Vue-DPlayer实现在网页上发送和显示弹幕的功能了。