kyfq-ui

VUE UI Plugin, include components of ui

Usage no npm install needed!

<script type="module">
  import kyfqUi from 'https://cdn.skypack.dev/kyfq-ui';
</script>

README

Introduction

该插件为基于Vue框架的UI组件,目前已写入1个组件。
1.菜单:可使用多级菜单,可自定义背景、文字颜色


Install

# 安装
npm install ky-ui --save

# 引入
/src/main.js

import KyUI from 'ky-ui'
Vue.use(KyUI)

Attribute

name|type|default|isRequired -|-:-|-:-|- dataList|array|[ ]|true backgroundColor|string|#666666|false textColor|string|#fff|false activeIndex|strong or number|0|true activeTextColor|string|rgb(255, 208, 75)|false


Example

    <!-- HTML -->
    <ky-menu 
        backgroundColor="@32ac37"
        :dataList="list"
        textColor="#333"
        activeIndex="0"
        activeTextColor="#CCC"
        @select="select"		// 点击菜单项触发事件
    />
    
    <!-- script -->
    const list = [
        {
            id: 0,
            text: 'Test1',
            icon: 'iconPath'
        },{
            id: 1,
            text: 'Test2',
            isShowChild: false,
            child: [
                {
                    id: '1-0',
                    text: 'Test2-1',
                    icon: 'iconPath'
                }
            ]
        }
    ]
    
    export default {
        ...
        data() {
            return {
                list: list
            }
        methods: {
            <!-- level: 选中项的级数, id:选中项的id -->
            select(level, id){	
                console.log(level, id)
            }
        }
    }