0.0.1 • Published 2 years ago
prh-ui v0.0.1
pan-ui
这个项目是一个简单的vue3UI库，初心是给自己的博客用的。
目前只有对音乐组件的ui美化
安装
npm install prh-ui
// or
pnpm install prh-ui使用
// script
import { PanMusic } from 'prh-ui'
import 'prh-ui/dist/style.css'
const list= [
{
name: '少年愁',
singer: '锦城',
url: 'http://dl.stream.qqmusic.qq.com/C4000001KD8S1MFeRB.m4a?guid=5042201483&vkey=63AB82C1A5E1BFBBE715E7A9F42C5421E30E2C7FA9F66C5B0D00ADC5C4B009D217ADA44BD4B3B6009AE9BD34FA8EC99E5E89A7B5654D6859&uin=&fromtag=120002',
pic: 'https://y.qq.com/music/photo_new/T002R300x300M0000018TdJQ3R6yO2.jpg?max_age=2592000'
},
{
name: '雪月',
singer: '万玲琳',
url: 'http://dl.stream.qqmusic.qq.com/C400000MIoae3J7BhV.m4a?guid=8879733800&vkey=6713038ED3F4AAB0A9ECF653A1AE58F110037C4F67F1F55314864A7C909D8E4EE14AA05D187A5FE498C00C412CD7E677BDA7480DC4617F4E&uin=1875377706&fromtag=120002',
pic: 'https://y.qq.com/music/photo_new/T002R300x300M000002DzQ632vXrHN_1.jpg?max_age=2592000'
}
]
// template
<PanMusic :data="list"></PanMusic>属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| url | string | url | 音乐地址/data中的key，当data为默认值时，url承担单曲功能 |
| autoplay | boolean | false | 是否自动播放 |
| loop | boolean | false | 是否循环播放 |
| pic | string | pic | 音乐封面/data中的key |
| name | string | name | 音乐名称/data中的key |
| singer | string | singer | 歌手/data中的key |
| musicIndex | Number | 0 | 当传入data时默认播放第几首（0开始） |
| data | Array | [] | 对象的key可以是url，pic，name，singer，其中url必须有 |
| isAnimate | boolean | false | 音乐图片动画是否启用 |
注意
- 当data为默认值时，url承担单曲功能
- 本人水平有限，在使用过程中有可能出现bug，如果发现请及时反馈
- 如果有好的建议，请及时反馈
反馈
email: 1875377706@qq.com
0.0.1
2 years ago