open-index/open-npm huggingface dataset:
npm package: @predy-js/player-vue
Description: ### 使用方法 1. 引入组件
Latest version: 0.1.68

## PredyPlayerVue 组件

### 使用方法
1. 引入组件

首先，您需要将PredyPlayerVue组件导入到您想要使用它的Vue文件中。

```javascript
import PredyPlayerVue from '@xhs/predy-player-vue';
```

2. 在模板中添加组件

在您的模板中包含PredyPlayerVue组件。您可以绑定source属性到您想要播放的媒体的URL。此外，您还可以处理各种事件，例如动画开始或动画失败。
编辑器链接：https://fe.sit.xiaohongshu.com/predy

```html
<template>
   <PredyPlayerVue class="player" :source="source"/>
</template>
```

3. 设置脚本

在 script 标签内，定义必要的状态和函数。

```html
<script setup lang="ts">
import { ref } from 'vue';
import PredyPlayerVue from '@xhs/predy-player-vue';

const source = 'https://picasso-static.xiaohongshu.com/predy/104102i030tn2kiof1c06b17dcu9g000000000352m76t4';
</script>
```