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: [email protected]