zj-header

    1.0.3 • Public • Published

    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

    初版

    Install

    npm i zj-header

    DownloadsWeekly Downloads

    4

    Version

    1.0.3

    License

    MIT

    Unpacked Size

    34.5 kB

    Total Files

    13

    Last publish

    Collaborators

    • sieyoo