open-index/open-npm huggingface dataset:
npm package: @liuyunjs/at-editor
Description: 一个带有@功能的 react-native 的输入框
Author: liuyunjs
Latest version: 0.0.2

# at-editor

一个带有@功能的 react-native 输入框

## 安装

```
    npm install @liuyunjs/at-editor --save

    or

    yarn add @liuyunjs/at-editor
```

## 示例

```javascript
import * as React from 'react';
import { View, Text } from 'react-native';
import ATEditor from '@liuyunjs/at-editor';

export default () => {
  const editor = React.useRef();

  return (
    <View style={{ flex: 1 }}>
      <Text onPress={() => editor.current.trigger()}>trigger</Text>
      <Text onPress={() => editor.current.addAtUser({ username: 'liuyunjs', id: '10086' })}>
        addUser
      </Text>
      <View style={{ height: 200 }}>
        <ATEditor
          defaultValue="hello @[liuyunjs](id: 10087), This is an @input box"
          onAt={console.log}
          onChange={console.log}
          ref={editor}
        />
      </View>
    </View>
  );
};
```

## props

| 名称                  | 类型                                                   | 默认值                                                 | 是否必传 | 描述                                                                                 |
| :-------------------- | :----------------------------------------------------- | :----------------------------------------------------- | :------- | :----------------------------------------------------------------------------------- |
| defaultValue          | string                                                 | void                                                   | 否       | 输入框默认值                                                                         |
| onAt                  | () => void                                             | void                                                   | 否       | 检测到输入@时触发的回调                                                              |
| onChange              | ({displayText: string, text: string, users: ATUser[]}) | void                                                   | 否       | 输入框文本变化时触发的回调，如果传入了 defaultValue，会在渲染之后立即触发一次        |
| matchFormattedTextReg | RegExp                                                 | /@\[([^\]]+?)\]\(id:([^\]]+?)\)/gim                    | 否       | 从一串格式化过的字符串中匹配@信息的正则表达式                                        |
| formatAtUser          | (user: ATUser) =>string                                | (user: ATUser) => `@[${user.username}](id:${user.id})` | 否       | 将@信息格式化成固定格式的函数，可以和 matchFormattedTextReg 一起使用实现自定义的格式 |

> 其余参考 TextInput
npm package: @liuyunjs/hooks
Description: ## <a name="Install">Install</a> 1. **npm** ```shell npm install @liuyunjs/hooks --save ``` 1. **yarn** ```shell yarn add @liuyunjs/hooks ```
Author: liuyunjs
Latest version: 1.1.5

# @liuyunjs/hooks

## <a name="Install">Install</a>
1. **npm**
```shell
npm install @liuyunjs/hooks --save
```
1. **yarn**
```shell
yarn add @liuyunjs/hooks
```
npm package: @liuyunjs/interactive-editor
Description: 一个带有可交互的 react-native 输入框
Author: liuyunjs
Latest version: 0.0.1

# at-editor

一个带有@功能的 react-native 输入框

## 安装

```
    npm install @liuyunjs/at-editor --save

    or

    yarn add @liuyunjs/at-editor
```

## 示例

```javascript
import * as React from 'react';
import { View, Text } from 'react-native';
import ATEditor from '@liuyunjs/at-editor';

export default () => {
  const editor = React.useRef();

  return (
    <View style={{ flex: 1 }}>
      <Text onPress={() => editor.current.trigger()}>trigger</Text>
      <Text onPress={() => editor.current.addAtUser({ username: 'liuyunjs', id: '10086' })}>
        addUser
      </Text>
      <View style={{ height: 200 }}>
        <ATEditor
          defaultValue="hello @[liuyunjs](id: 10087), This is an @input box"
          onAt={console.log}
          onChange={console.log}
          ref={editor}
        />
      </View>
    </View>
  );
};
```

## props

| 名称                  | 类型                                                   | 默认值                                                 | 是否必传 | 描述                                                                                 |
| :-------------------- | :----------------------------------------------------- | :----------------------------------------------------- | :------- | :----------------------------------------------------------------------------------- |
| defaultValue          | string                                                 | void                                                   | 否       | 输入框默认值                                                                         |
| onAt                  | () => void                                             | void                                                   | 否       | 检测到输入@时触发的回调                                                              |
| onChange              | ({displayText: string, text: string, users: ATUser[]}) | void                                                   | 否       | 输入框文本变化时触发的回调，如果传入了 defaultValue，会在渲染之后立即触发一次        |
| matchFormattedTextReg | RegExp                                                 | /@\[([^\]]+?)\]\(id:([^\]]+?)\)/gim                    | 否       | 从一串格式化过的字符串中匹配@信息的正则表达式                                        |
| formatAtUser          | (user: ATUser) =>string                                | (user: ATUser) => `@[${user.username}](id:${user.id})` | 否       | 将@信息格式化成固定格式的函数，可以和 matchFormattedTextReg 一起使用实现自定义的格式 |

> 其余参考 TextInput
npm package: @liuyunjs/promise-chain
Description: 创建1个 promise 执行链，可手动暂停、继续、取消、结束、重启
Author: liuyunjs
Latest version: 1.0.2

# promise-chain
创建1个 promise 执行链，可手动暂停、继续、取消、结束、重启

## 安装
### npm
```shell
npm i @liuyunjs/promise-chain --S
```
### yarn
```shell
yarn add @liuyunjs/promise-chain
```

### Api
#### chain: () => <a href="#operators">Operators</a>;
创建一个执行链, 返回一组操作符

#### Operators

##### use: (onFulfilled?: (valueOrReason: any, operators: Operators) => any, onRejected?: (valueOrReason: any, operators: Operators) => any) => number;
向执行链中添加一组任务，返回本组任务的下标；可使用 <a href="#eject-index-number--void">eject</a> 取消任务
##### eject: (index: number) => void
从执行链中取消对应任务

##### run: (params?: any) => any;
启动执行链，已经被启动的执行链如果需要重启应该调用 <a href="#rerun-params-any--void">rerun</a> 方法
##### pause: (value?: any) => void;
暂停正在执行中的执行链，可传入一个参数替代目前执行链的结果
##### restart: (value?: any)=>void;
重新启动一个暂停中的执行链，可传入一个参数替代目前执行链的结果
##### stop: (value?: any) => void;
停止正在执行中的执行链，调用后 <a href="#run-params-any--any">run</a> 函数会变为 fulfilled 可传入一个参数替代执行链的结果, 就是 <a href="#run-params-any--any">run</a> 函数最终执行完成的返回值
##### rerun: (params?: any) => void;
重新启动执行链, 可传入一个参数替代执行 <a href="#run-params-any--any">run</a> 时传入的参数
##### cancel: (reason?: string) => void;
取消执行中的执行链，调用后 <a href="#run-params-any--any">run</a> 函数会变为 rejected 可传入一个字符串作为 <a href="#run-params-any--any">run</a> 函数最终失败的错误提醒


### 示例
```javascript

import { chain } from '@liuyunjs/promise-chain';

const operators = chain();
operators.use(
  (params,operators) => {
    console.log(params);
    
    return new Promise((resolve, reject) => {
      setTimeout(() => {

          // operators.restart('restart');
          // operators.pause('pause');
          // operators.rerun('rerun');
          // operators.stop('stop');
          // operators.cancel('cancel');

          // reject(new Error('reject'));
        resolve('setTimeout');
      }, 3000);
    });
  },
  (reason,operators) => {
    console.log('err', reason);
    return Promise.reject(reason);
  },
);

operators.run('chain run').then(console.log, console.log);

```
npm package: @liuyunjs/react-native-simple-shadow-view
Description: a Native shadow view for react native, for any React Native platform.
Author: Roy Ben-Sasson
Latest version: 1.7.4

# react-native-simple-shadow-view

This Module is updated version of https://github.com/liuyunjs/react-native-simple-shadow-view
Fixing AndroidX support and adds support for Web and Desktop.

## Getting started

`$ npm install @liuyunjs/react-native-simple-shadow-view --save`

### Mostly automatic installation

`$ react-native link @liuyunjs/react-native-simple-shadow-view`

### Manual installation

#### iOS

1. In XCode, in the project navigator, right click `Libraries` ➜ `Add Files to [your project's name]`
2. Go to `node_modules` ➜ `react-native-shadow` and add `RNShadow.xcodeproj`
3. In XCode, in the project navigator, select your project. Add `libRNShadow.a` to your project's `Build Phases` ➜ `Link Binary With Libraries`
4. Run your project (`Cmd+R`)<

#### Android

1. Open up `android/app/src/main/java/[...]/MainActivity.java`

- Add `import com.como.RNTShadowView.ShadowViewPackage;` to the imports at the top of the file
- Add `new ShadowViewPackage()` to the list returned by the `getPackages()` method

2. Append the following lines to `android/settings.gradle`:
   ```
   include ':@liuyunjs/react-native-simple-shadow-view'
   project(':@liuyunjs/react-native-simple-shadow-view').projectDir = new File(rootProject.projectDir, 	'../node_modules/@liuyunjs/react-native-simple-shadow-view/android')
   ```
3. Insert the following lines inside the dependencies block in `android/app/build.gradle`:
   ```
     implementation project(':@liuyunjs/react-native-simple-shadow-view')
   ```
4. Insert the following lines inside the defaultConfig block in `android/app/build.gradle`:
   ```
     renderscriptTargetApi 18
     renderscriptSupportModeEnabled true
   ```

## Usage

Set shadow parameters to the ShadowView just as you use shadows in iOS. it will appear on android same as on iOS.

```javascript
import React, { Component } from 'react';
import { ShadowView } from '@liuyunjs/react-native-simple-shadow-view'

class MyView extends Component {

	render() {
		return (
			<ShadowView
					style={{
						width: 100,
						height: 100,
						shadowColor: 'black',
						shadowOpacity: 1,
						shadowRadius: 20,
						shadowOffset: { width: 0, height: 0 },
						backgroundColor: 'rgba(0,255,0,0.5)',
					}}
				>
				... Texts / Views / etc ...
				</ShadowView>
			);
	}

export default MyView;
```
npm package: @liuyunxi/amap
Description: 高德位置选择，围栏设置，vue3+ts
Author: liuqiang[916000612@qq.com]
Latest version: 0.0.0

# liuyunxi-amap

#### Description
高德地图相关

#### Software Architecture
Software architecture description

#### Installation

1.  xxxx
2.  xxxx
3.  xxxx

#### Instructions

1.  xxxx
2.  xxxx
3.  xxxx

#### Contribution

1.  Fork the repository
2.  Create Feat_xxx branch
3.  Commit your code
4.  Create Pull Request


#### Gitee Feature

1.  You can use Readme\_XXX.md to support different languages, such as Readme\_en.md, Readme\_zh.md
2.  Gitee blog [blog.gitee.com](https://blog.gitee.com)
3.  Explore open source project [https://gitee.com/explore](https://gitee.com/explore)
4.  The most valuable open source project [GVP](https://gitee.com/gvp)
5.  The manual of Gitee [https://gitee.com/help](https://gitee.com/help)
6.  The most popular members  [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)
npm package: @liuyunxi/antd-extend
Description: 基于vue3 + antd 二次封装的组件库。使用更便捷。
Author: liuqiang[916000612@qq.com]
Latest version: 2.0.13

# @liuyunxi-antd-extend

#### Description

基于vue3 + antd 二次封装的组件库。使用更便捷。

#### Software Architecture

Software architecture description

#### Installation

1. xxxx
2. xxxx
3. xxxx

#### Instructions

1. xxxx
2. xxxx
3. xxxx

#### Contribution

1. Fork the repository
2. Create Feat_xxx branch
3. Commit your code
4. Create Pull Request

#### Gitee Feature

1. You can use Readme\_XXX.md to support different languages, such as Readme\_en.md, Readme\_zh.md
2. Gitee blog [blog.gitee.com](https://blog.gitee.com)
3. Explore open source project [https://gitee.com/explore](https://gitee.com/explore)
4. The most valuable open source project [GVP](https://gitee.com/gvp)
5. The manual of Gitee [https://gitee.com/help](https://gitee.com/help)
6. The most popular members  [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)
npm package: @liuyunxi/captcha
Description: 验证码
Author: liuqiang[916000612@qq.com]
Latest version: 1.1.0

# liuyunxi-captcha

### 介绍
验证码

### 用法示例
[https://yx_npm.gitee.io/liuyunxi-captcha/#/](https://yx_npm.gitee.io/liuyunxi-captcha/#/)


---

- 验证码
- @liuyunxi/captcha
- liuyunxi-captcha
- YxCaptcha
npm package: @liuyunxi/date-picker
Description: 日期选择
Author: liuqiang[916000612@qq.com]
Latest version: 1.3.2

# liuyunxi-date-picker

### 介绍
日期选择，时间选择。

### 用法示例
[https://yx_npm.gitee.io/liuyunxi-date-picker/#/](https://yx_npm.gitee.io/liuyunxi-date-picker/#/)


---

- 日期选择
- @liuyunxi/date-picker
- liuyunxi-date-picker
- YxDatePicker
npm package: @liuyunxi/image
Description: 图片预览排序
Author: liuqiang[916000612@qq.com]
Latest version: 1.3.0

# liuyunxi-image

### 介绍
图片预览，拖动排序，删除，预览。

### 用法示例
[https://yx_npm.gitee.io/liuyunxi-image/#/](https://yx_npm.gitee.io/liuyunxi-image/#/)
npm package: @liuyunxi/lds-ui
Description: #### Description
Author: liuqiang[916000612@qq.com]
Latest version: 1.1.2

# @liuyunxi-large-data-screen-ui

#### Description

基于vue3 + antd 二次封装的组件库。使用更便捷。

#### Software Architecture

Software architecture description

#### Installation

1. xxxx
2. xxxx
3. xxxx

#### Instructions

1. xxxx
2. xxxx
3. xxxx

#### Contribution

1. Fork the repository
2. Create Feat_xxx branch
3. Commit your code
4. Create Pull Request

#### Gitee Feature

1. You can use Readme\_XXX.md to support different languages, such as Readme\_en.md, Readme\_zh.md
2. Gitee blog [blog.gitee.com](https://blog.gitee.com)
3. Explore open source project [https://gitee.com/explore](https://gitee.com/explore)
4. The most valuable open source project [GVP](https://gitee.com/gvp)
5. The manual of Gitee [https://gitee.com/help](https://gitee.com/help)
6. The most popular members  [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)
npm package: @liuyunxi/modal
Description: 弹窗
Author: liuqiang[916000612@qq.com]
Latest version: 1.2.1

# liuyunxi-modal

### 介绍
弹窗

### 用法示例
[https://yx_npm.gitee.io/liuyunxi-modal/#/](https://yx_npm.gitee.io/liuyunxi-modal/#/)


---

- 弹窗
- @liuyunxi/modal
- liuyunxi-modal
- YxModal
npm package: @liuyunxi/office-viewer
Description: office预览 vue3+ts
Author: liuqiang[916000612@qq.com]
Latest version: 1.0.1


# Office文件预览

# 代码演示
```vue
<template>
    <YxOfficeViewer :url="docx">word预览</YxOfficeViewer>
    <YxOfficeViewer :url="xls">xls预览</YxOfficeViewer>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const docx = ref(
    'https://norisk-prod-1305901002.cos.ap-chengdu.myqcloud.com/20211028/100a84754dd549da8dc6c9f9594a7d57.docx',
)
const xls = ref(
    'https://norisk-prod-1305901002.cos.ap-chengdu.myqcloud.com/test/%E7%BA%B3%E6%A0%BC%E5%8F%8C%E9%87%8D%E9%A2%84%E9%98%B2%E6%9C%BA%E5%88%B6%E8%BF%90%E8%A1%8C%E8%AF%84%E5%88%86%E6%A0%87%E5%87%86%20V2.0.xls',
)
</script>

<style scoped lang="less"></style>

```


# API

## 参数

| 参数  | 说明           |   类型   | 默认值   |
|-----|--------------|:------:|-------|
| url  | 文件地址（公网可以访问） | string |  |
npm package: @liuyunxi/picture-viewer
Description: 图片预览,删除，排序 vue3+ts
Author: liuqiang[916000612@qq.com]
Latest version: 1.0.2



# 图片预览 YxPictureViewer
- 图片预览
- 删除
- 排序
# 代码演示
```vue
<template>
    <YxPictureViewer
        :drag="true"
        @dragend="dragend"
        :del="true"
        :images="images"
        :width="100"
        :height="100"
        @delete="handelDelete"
    ></YxPictureViewer>
</template>

<script setup lang="ts">
import { ref } from 'vue'

import { ImagesTypes } from '../src/types'

const images = ref<ImagesTypes[]>([
    {
        src: 'https://norisk-prod-1305901002.cos.ap-chengdu.myqcloud.com/20220119/014026340563464bb7ee74d653325825.png',
    },
    {
        src: 'https://norisk-dev-1305901002.cos.ap-chengdu.myqcloud.com/20210914/7fdae4d8277c4cbe89cc03930247a9c5.png',
    },
])

const dragend = (params: any) => {
    console.log(params)
}

const handelDelete = ({ index, images }: { index: number; images: ImagesTypes[] }) => {
    console.log(index, images)
}
</script>

<style scoped lang="less"></style>

```

# API

## YxPictureViewer

| 参数                      | 说明   |     类型     | 默认值   |
|-------------------------|------|:----------:|-------|
| drag                    | 开启拖拽 |  boolean   | false |
| del                     | 开启删除 |  boolean   | false |
| images[v-model:images] | 数据列表 | [{src:xx}] | []    |

## 事件
| 事件名称    | 说明   | 回调参数                                      |
|---------|------|-------------------------------------------|
| dragend | 拖拽事件 | function({item,oldIndex,newIndex,images}) |
| delete  | 删除事件 | function({index,images})                  |
npm package: @liuyunxi/rich-text
Description: 富文本 vue3+ts
Author: liuqiang[916000612@qq.com]
Latest version: 1.0.0

# 富文本 YxRichText

# 代码演示

```vue

<template>
  <YxRichText
      height="300px"
      :imageSize="3"
      v-model:value="values"
      @change="handelChange"
  ></YxRichText>
</template>

<script setup lang="ts">
import {ref} from 'vue'

const values = ref('')

/*模拟延迟加载数据*/
setTimeout(() => {
  values.value = '<h1>测试内容</h1>'
}, 3000)

const handelChange = (value: string) => {
  console.log(value)
  console.log(values.value)
}
</script>

<style scoped lang="less"></style>


```

# API

## 参数

| 参数            | 说明         | 类型       | 默认值     |
|---------------|------------|----------|---------|
| v-model:value | 绑定值        | string   |         |
| height        | 高度         | string   | '500px' |
| imageSize          | 图片大小限制,单位M | number   | 5   |

## 事件

| 事件名称 | 说明 | 回调参数                  |
|------|----------------------|-----------------------|
| change   | 内容改变 | function(value:string) |
npm package: @liuyunxi/search-bar
Description: 高级搜索
Author: liuqiang[916000612@qq.com]
Latest version: 1.5.0

# liuyunxi-search-bar

### 介绍
高级搜索,自定义配置

### 用法示例
[https://yx_npm.gitee.io/liuyunxi-search-bar/#/](https://yx_npm.gitee.io/liuyunxi-search-bar/#/)
npm package: @liuyunxi/table
Description: 超级表格
Author: liuqiang[916000612@qq.com]
Latest version: 1.5.3

# liuyunxi-table

### 介绍
超级表格，拖动排序，删除，预览。

### 用法示例
[https://yx_npm.gitee.io/liuyunxi-table/#/](https://yx_npm.gitee.io/liuyunxi-table/#/)
npm package: @liuyunxi/upload-vod
Description: 腾讯云点播上传 vue3+ts
Author: liuqiang[916000612@qq.com]
Latest version: 1.0.0


# 腾讯云点播上传
限制上传数量
限制上传格式
限制上传大小
显示上传进度
断点续传

# 代码演示
```vue
<template>
  <AButton @click="ok" style="margin-bottom: 10px">打印文件上传结果</AButton>
  <YxVodUpload
      v-model:value="fileList"
      :signature="signature"
      rootUrl="http://127.0.0.1:8080"
      :headers="getHeaders"
      :max="5"
      :size="50000"
  ></YxVodUpload>
</template>

<script setup lang="ts">
/**
 * 视频: .mp4,.avi,.mpeg
 */
import { ref } from 'vue'
const signature = 'http://localhost:8010/file/v1/tx/vod/signature'
const fileList = ref([
  {
    fileId: '243791577886541835',
    name: 'xx视频',
    url: '//1500017108.vod2.myqcloud.com/6cad6439vodcq1500017108/260d7322243791577886541835/Wk1OT4igLfMA.mp4',
  },
])
const ok = () => {
  console.log(fileList.value)
  console.log(JSON.stringify(fileList.value))
}
/**
 * 获取请求头
 */
const getHeaders = () => {
  return {
    'Cache-Id':
        'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJwYXlsb2FkIjp7ImZyZXNoVGltZSI6MTY4MjE1NDUxNCwiaW5mbyI6IntcImF2YXRhclwiOlwie1xcXCJ1cmxcXFwiOiBudWxsLCBcXFwibmFtZVxcXCI6IFxcXCJjcm9wcGVkLTE2NzYzMzkzNzM3MTcucG5nXFxcIiwgXFxcInBhdGhcXFwiOiBcXFwiXFxcXFxcXFxkZXZcXFxcXFxcXDIwMjMwMjE0XFxcXFxcXFxhYjhhMjI5ZjM3YmQ0MmUzODg0YjhiNmVlMTI5ZmNkYy5wbmdcXFwiLCBcXFwic2l6ZVxcXCI6IG51bGwsIFxcXCJzdWZmaXhcXFwiOiBcXFwicG5nXFxcIn1cIixcImVtYWlsXCI6XCJcIixcImlkXCI6XCIyOGMxMTQ2NC0zZTY3LTRhNGEtYjI1MC04YzQyMjZhNzAxNDhcIixcImxvZ2luSXBcIjpcIjE5Mi4xNjguMzEuMTg4XCIsXCJsb2dpbk5hbWVcIjpcImFkbWluXCIsXCJsb2dpblRpbWVTdHJcIjpcIjIwMjMtMDQtMTkgMTY6NThcIixcInBob25lTnVtYmVyXCI6XCIxNzMzNTc3ODY4NVwiLFwicm9sZXNcIjpbXCLnrqHnkIblkZhcIl0sXCJzZXhcIjpcIlwiLFwidGVuYW50SWRcIjpcImZhMzY5ZTE5LTI2NDgtNGNkYy1hOGUzLWQwMDEyODgwMmRlYVwiLFwidXNlck5hbWVcIjpcIuW5s-WPsOWFrOWPuOi2heeuoVwifSJ9LCJleHAiOjE2ODIwNzE3MTR9.fv_VHuCy3aQ0MFdsiS3X3aHmOcI8qeRmSQN8ezt-AxE',
  }
}
setTimeout(() => {
  fileList.value = [
    {
      fileId: '243791577886541835',
      name: 'xx视频',
      url: '//1500017108.vod2.myqcloud.com/6cad6439vodcq1500017108/260d7322243791577886541835/Wk1OT4igLfMA.mp4',
    },
  ]
}, 1000)
</script>

<style scoped lang="less"></style>


```

# API

## 参数

| 参数            | 说明             |    类型    | 默认值  |
|---------------|----------------|:--------:|------|
| v-model:value | 绑定数据           |  Array   | []   |
| action        | 上传地址           |  string  |      |
| rootUrl       | 文件访问跟地址        |  string  |      |
| headers       | 请求头            | Function |    |
| accept        | 允许格式（详见demo）   |  string  |      |
| max           | 最大数量限制         |  number  | 5    |
| size          | 最大大小限制 单位M     |  number  | 200  |
| showUpload          | 是否显示上传按钮       | boolean  | true |
| showDelete          | 是否显示删除按钮       | boolean  | true |


## 事件
| 事件名称   | 说明   | 回调参数              |
|--------|------|-------------------|
| change | fileList | function({fileList:[]}) |
npm package: @liuyunxi/viewer-pdf
Description: pdf预览 vue3+ts
Author: liuqiang[916000612@qq.com]
Latest version: 1.0.3


# PDF预览

# 代码演示
```vue
<template>
    <YxPdfViewer
        url="https://norisk-dev-1305901002.cos.ap-chengdu.myqcloud.com/%E5%AE%89%E5%85%A8%E6%A0%87%E5%BF%97%E5%8F%8A%E5%85%B6%E4%BD%BF%E7%94%A8%E5%AF%BC%E5%88%99-2008.pdf"
        >pdf</YxPdfViewer
    >
    <YxPdfViewer
        url="https://norisk-dev-1305901002.cos.ap-chengdu.myqcloud.com/%E5%AE%89%E5%85%A8%E6%A0%87%E5%BF%97%E5%8F%8A%E5%85%B6%E4%BD%BF%E7%94%A8%E5%AF%BC%E5%88%99-2008.pdf"
        >点我查看</YxPdfViewer
    >
</template>

<script setup lang="ts"></script>

<style scoped lang="less"></style>

```

# API

## 参数

| 参数  | 说明      |   类型   | 默认值   |
|-----|---------|:------:|-------|
| url | pdf文件地址 | string |  |
npm package: @liuyunxi/viewer-video
Description: 视频预览 vue3+ts
Author: liuqiang[916000612@qq.com]
Latest version: 1.0.8


# 视频预览

# 代码演示
```vue
<template>
    <YxVideoViewer :cover="cover" :url="url">{{ name }}</YxVideoViewer>
    <YxVideoViewer :cover="cover" :url="mp4">Mp4预览</YxVideoViewer>
</template>

<script setup lang="ts">
const name = '视频名称'
const cover =
    '//1305901002.vod2.myqcloud.com/f06aa63fvodtranscq1305901002/29f6ba3e243791577370716668/coverBySnapshot/coverBySnapshot_10_0.jpg'
const url =
    '//1305901002.vod2.myqcloud.com/f06aa63fvodtranscq1305901002/29f6ba3e243791577370716668/adp.10.m3u8'

const mp4 =
    '//1305901002.vod2.myqcloud.com/1980b897vodcq1305901002/8dd1dbb9387702305960755827/2NnaZ48Hrs8A.mp4'
</script>

<style scoped lang="less"></style>

```

# API

## 参数

| 参数  | 说明    |   类型   | 默认值   |
|-----|-------|:------:|-------|
| cover  | 封面地址  | string |  |
| url  | 源文件地址 | string |  |