ucar-view

基于Vue的ucar内部组件库

安装

$ npm install ucar-view -S

使用

在 main.js 文件中引入插件并注册

# main.js
import uHeader from 'ucar-view'
Vue.use(uHeader)

在项目中使用 ucar-view

<template>
  <u-header />
</template>

参数 | 说明|参数类型 ---|---|---| user-name | 当前登录用户姓名 |String category-list | 搜索条件列表 |Array category-name | 当前页面默认搜索类型名称 |String category-id | 当前页面默认搜索类型Id |Number,String search-key|当前页面搜索条件|Number,String menu-list | 菜单列表 |Array current-menu-id | 当前页面对应的菜单Id |Number,String notice-url | 通知跳转地址 |String have-new-notice | 是否有新的提示 |Boolean msg-url | 消息跳转地址 |String have-new-msg | 是否有新的消息 |Boolean

方法 | 说明|返回参数 ---|---|---| @after-search | 点击搜索事件 |Object 返回当前选中的搜索类型名称、Id、搜索条件 @check-info | 查看个人信息 | / @modify-pwd | 点击修改密码时间 |/ @login-out | 点击注销事件 |/

示例

<template>
  <u-header 
  :have-new-msg="haveNewMsg" 
  :user-name="userName"
  :category-list="categoryList"
  :menu-list="menuList"
  @after-search="searchClick"
  @login-out="loginOut"></u-header>
</template>

data(){
    return {
        userName:'张三',
        messageList:[{msg:'这是一条新消息'}],
        categoryList:
        [{ CategoryName: "找人", CategoryId: 1 },
        { CategoryName: "搜知识", CategoryId: 2 },
        { CategoryName: "查会议", CategoryId: 3 }],
        menuList:
        [{ Name: "首页", Href: "http://w3.ucarinc.com", Id: 0 },
        { Name: "人力助手", Href: "http://hcm.ucarinc.com", Id: 1 },
        { Name: "财务助手", Href: "http://ems.corp.ucarinc.com/main.screen", Id: 2 },
        { Name: "通讯录", Href: "http://hcm.ucarinc.com", Id: 3 },
        { Name: "采购合同系统", Href: "http://pms.corp.ucarinc.com/.com", Id: 4 },
        { Name: "制度流程管理", Href: "http://w3cms.ucarinc.com/portalcms/article/client/index.do", Id: 5 },
        { Name: "学习助手", Href: "http://www.ulearnsystem.ucarinc.com/ulearnsystem/client/index", Id: 6 }]
    }
},
computed:{
    haveNewMsg(){
        return this.messageList.length > 0
    }
},
methods:{
    searchClick(){
        console.log('点击了搜索按钮');
    },
    loginOut(){
        console.log('点击了注销按钮');
    }
}