npm-components

常用的后台组件，包括请求发时的loading动画、弹窗、置顶功能、导航栏功能

Project setup

npm i luo-vue-admin

动画加载

import { loading } from 'luo-vue-admin'
loading.creatLoading() //创建默认加载动画
loading.closeLoading() //关闭默认动画

弹窗

import { tips } from 'luo-vue-admin'
tips.success('成功提示类型弹窗！')
tips.error('错误提示类型弹窗！')
tips.warning('警告提示类型弹窗！')

置顶功能组件

//全局引入
import Vue from 'vue'
import LuoVueAdmin from 'luo-vue-admin'
import LuoVueAdmin from 'luo-vue-admin/lib/vcolorpicker.css'
Vue.use(LuoVueAdmin)

在vue组件中使用

<c-acktop/>

导航菜单组件

//全局引入
import Vue from 'vue'
import LuoVueAdmin from 'luo-vue-admin'
import LuoVueAdmin from 'luo-vue-admin/lib/vcolorpicker.css'
Vue.use(LuoVueAdmin)

在vue组件中使用

<c-nav-menu :menuList=menuList :isOpen="isOpen" :scenery="scenery" :layout="layout" @change="changeValue"></c-nav-menu>

data() {
    return {
      menuList: [
        {
          index: '1',
          name: '第一',
          child: [{ index: '1-1', name: '第一孩子' }],
          icon: 'icon-user'
        },
        {
          index: '2',
          name: '第二',
          child: [{ index: '2-1', name: '第一孩子' }],
          icon: ''
        },
        {
          index: '3',
          name: '第三',
          icon: ''
        }
      ],
      isOpen: true,//or false
      layout: 'vertically', 
      scenery: 'black' //or white
    }
  },
  methods: {
    changeValue(oneVal, twoVal) {
      console.log(oneVal, twoVal)
    }
  }

参数说明

menuList: Array
        生成菜单数据，暂时支持两层张开。
isOpen：Boolean
        是否展开菜单
layout：String
        水平还是垂直布局
scenery：String 
        白天还是黑夜模式