codehe-ui v2.0.4

toc

hexiang-ui

示例

欢迎访问我的博客查看示例

项目初始化

安装

npm install --save codehe-ui

启动

npm run serve

组件

canvas-bg：用canvas绘制的动态背景

attribute

live-rem：live2d蕾姆

attribute

welcomeBack

textureConfig

注：toastAction是在调用showToast方法时，人物进行指定动作的配置。根据个人爱好配置即可。 参数|说明|类型|可选值|默认值|是否必填 --|:--:|:--:|--:|:--:|:-- id | 纹理id | Number | - | - | 是 name | 纹理名字 | String | - | - | 是 width | 适配当前纹理的canvas宽度，如：当前纹理宽为300，则width: 300 | String | - | - | 是 height | 适配当前纹理的canvas高度，如：当前纹理高为300，则height: 300 | String | - | - | 是 texture | 当前纹理的地址 | String | - | - | 是 toastAction | 提示的动作 | Object | - | 见默认纹理配置 | 否

默认的纹理配置

textureConfig = [
    {   
        id: 1,
        name: 'normal',
        texture: '/live-model/rem/rem.json',
        width: 250,
        height: 280,
        toastAction: { 
            // normal为动作key，可通过调用实例方法showToast({type: 'normal'})，指定执行normal配置好的动作
            normal: {
                name: 'remindAction', // model.json中对应的动作数组key
                index: 12, // 动作数组下标
                priority: 4 // 默认动作优先级为3，超过3则立即停止默认动作，加载指定动作
            },
        
            lovely: {
                name: 'remindAction',
                index: 16
            },
        
            error: {
                name: 'remindAction',
                index: 21
            },
        
            success: {
                name: 'remindAction',
                index: 25
            },
        
            smail: {
                name: 'remindAction',
                index: 33
            },

            sad: {
                name: 'remindAction',
                index: 21 // 带寻找悲伤的表情动作
            }
        }
    },
    {
        id: 2,
        name: 'swim',
        width: 250,
        height: 325,
        texture: '/live-model/rem-swim/neko.model.json'
    }
]

event

background-video：视频背景

attribute

event

bg-curtain：幕布背景

attribute

event

drawer：抽屉

attribute

load-animation

attribute

tree

attribute

tree配置表

tree示例数据

const tree = {
  title: '你好你好你好',
  children: [
    {
      label: '前端',
      href: '',
      children: [
        {
          label: 'javaScript',
          href: 'https://www.baidu.com'
        },
        {
          label: 'css',
          href: 'https://www.jianshu.com/p/1614ef2b8bcb'
        },
        {
          label: 'nodejs',
          children: [
            {
              label: '你好,nodejs',
              href: 'https://www.jianshu.com/p/1614ef2b8bcb'
            }
          ]
        }
      ]
    },
    {
      label: '娱乐娱乐娱乐',
      children: [
        {
          label: 'B站B站B站B站B站B站B站B站B站B站B站B站B站B站B站B站B站B站B站B站B站B站B站',
          href: 'https://www.bilibili.com'
        },
        {
          label: '来啊nodejs'
        }
      ]
    }
  ]
}

renderKey

注： renderKey为指定key值渲染，label是树中渲染出来的文字，可指定数据源中任意符合要求的属性值。

event

组件方法

Scoped Slot

dialog: 弹框组件

attribute

event

slot

hx-form-item：单个表单控件

hxSwitch：开关

slot

hxSlider：滑块组件

hxAlbum： 相册组件

imageItem

classList

event

slot

hxImagePreview:全屏预览图片

event

pagination: 分页组件

event

hx-table: 表格组件

event

hx-table-column: 表格列组件

Scoped slot

hx-date-picker 日期范围选择组件

event

hx-select 下拉框选择

slot

hx-music 下拉框选择

event

musicLyric例：

musicLyric = `[00:00.000] 作词 : 迟木
[00:01.000] 作曲 : 迟木
[00:24]没有酒 而我醉好几夜
[00:30]没有风 却飘在青雾间
[00:36]没朝夕 只有我 与神仙
[00:48]没有山 犹立在云之巅
[00:54]没有船 也渡到苦海边
[01:00]没日月 只有我 和妖孽
[01:12]飘不到 一千万座岛屿
[01:17]赶不上 一千万次花期
[01:24]我梦了 一千万道涟漪
[01:31]全是你
[01:37]不愿留 一千万页过去
[01:42]换最后 一千万首怨曲
[01:49]我所求 一千万个故事
[01:55]只有你
[02:00]没有诗 捉呓语谱作曲
[02:06]没有琴 戏流水弄笑语
[02:12]没鬼神 只有我 只有你
[02:48]没有灯 铜铃声照四壁
[02:54]没有火 燃烧爱与身体
[03:00]没天地 还有我 还有你
[03:12]飘不到 一千万座岛屿
[03:19]赶不上 一千万次花期
[03:25]我梦了 一千万道涟漪
[03:30]全是你
[03:37]不愿留 一千万页过去
[03:43]换最后 一千万首怨曲
[03:50]我所求 一千万个故事
[03:55]只有你
[04:18]全是你
[04:24]不愿留 一千万页过去
[04:31]换最后 一千万首怨曲
[04:37]我所求 一千万个故事
[04:42]只有你
[04:48]没有酒 而我醉好几夜
[04:54]没有风 却飘在青雾间
[05:00]没朝夕 只有我 与神仙
`