vue-bilibili-embed-renderer

It is better to use Bilibili's embed renderer component for Vue applications.

在Vue中更加方便地使用哔哩哔哩的嵌入代码。

Usage

1. install deps

$ yarn install vue-bilibili-embed-renderer

2. import component and css

You can use components alone or global register components.

// use alone in single vue component 单独使用
import BilibiliEmbedRenderer from 'vue-bilibili-embed-renderer'

// or global register component in `main.ts` 全局注册
import { createApp } from 'vue'
import App from './App.vue'
import BilibiliEmbedRenderer from 'vue-bilibili-embed-renderer'

const app = createApp(App)
app.component('BilibiliEmbedRenderer', BilibiliEmbedRenderer)
app.mount('#app')

3. use component

<BilibiliEmbedRenderer aid="3787944" />

Parameters

| 字段 | 是否必传 | 默认值 | 类型 | 描述 | | :------------- | -------- | --------- | ------------------ | ---------------------------------------------------- | | aid | true | | String | 视频的 aid（可以在嵌入代码找到找到对应 aid） | | aspectWidth | false | 4或16 | Number | 宽高比的宽值(PC 端设备为4，移动端设备为16) | | aspectHeight | false | 3或9 | Number | 宽高比的高值(PC 端设备为3，移动端设备为9) | | width | false | 480 | Number或String | 视频窗口的宽度 | | height | false | 360 | Number或String | 视频窗口的高度(不传时会根据宽高比自动计算数值) | | page | false | 1 | Number | 视频集合中第几个视频 （可以在嵌入代码找到对应 page） | | isWide | false | true | Boolean | 是否显示宽屏或者小屏 | | highQuality | false | true | Boolean | 是否开启高清晰度（不开启默认最低清晰度） | | hasDanmaku | false | false | Boolean | 是否开启弹幕 | | iframeClass | false | | String | iframe 自定义 class |