zj-header

Pd Header Logo 页头商标

页面头部的标题

基本用法

初始化中心坐标、缩放比例和背景图层，默认坐标为北京天安门。

<pd-header-logo title="北京大学" subtitle="Peking University" :logo-url="logoUrl"/>

<script>
    export default {
        components: {
            // 需修改，引入正确的组件路径
            PdHeaderLogo: () => import('@/components/pd-header-logo/pd-header-logo.vue'),
        },
        data: ()=>({
            logoUrl: "https://www.pku.edu.cn/Uploads/Picture/2019/12/26/s5e04147ee4a83.png",
        })
    };
</script>

Pd-Header-Logo Attributes

参数	说明	类型	可选值	默认值
title	标题	string	-	"企业标题"
subtitle	子标题	string	-	"二级标题"
logo-url	图标URL	string	-	-

版本说明

V0.0.1.211130-alpha

初版

pd-header-menu 页头菜单

页面头部右侧按钮组件

基本用法

局部引入，在 vue页面文件中写入以下内容

<pd-header-menu :list="list" ></pd-header-menu>

export default {
    components: {
       PdHeaderMenu:() => import('@/components/pd-header-menu/pd-header-menu.vue'),    
    },
    
      data:()=>({
          list: [
              { key: "search", text: "搜索", icon: require('@/components/pd-header-menu/header-search.svg'),}
          ]
      }),
};

事件用法

<pd-header-menu :list="list" @search="onSearch" ></pd-header-menu>

export default {
    components: {
       PdHeaderMenu:() => import('@/components/pd-header-menu/pd-header-menu.vue'),    
    },
    
    data:()=>({
        list: [
            { key: "search", text: "搜索", icon: require('@/components/pd-header-menu/header-search.svg'), emit: "search"},
            { key: "boyimg", text: "头像", icon: require('@/components/pd-header-menu/header-boy.svg'), emit: "avatar"},
            { key: "installimg", text: "设置", icon: require('@/components/pd-header-menu/header-install.svg'), emit: "settings"},
            { key: "backimg", text: "退出", icon: require('@/components/pd-header-menu/header-back.svg'), emit: "exit"},
        ]
    }),
	mounted: {
        onSearch(value){
            console.log("onSearch:", value)
        },
    }
};

pd-header-menu Attributes

参数	说明	类型	可选值	默认值
search	搜索图标	STring	-	-
boy	头像图标	STring	-	-
install	设置图标	STring	-	-
back	返回图标	STring	-	-

Data Attributes

参数	说明	类型	可选值	默认值
showSearchBox	点击事件	boolean	true	false

版本说明

V0.0.1.20211201-alpha

初版