Zj Widget 普通窗口

页面头部的标题

基本用法

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

<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

初版