ucar-view v1.7.4

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>

示例

<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('点击了注销按钮');
    }
}