zj-widget

1.0.5 • Public • Published

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

初版

Package Sidebar

Install

npm i zj-widget

Weekly Downloads

0

Version

1.0.5

License

MIT

Unpacked Size

23.5 kB

Total Files

10

Last publish

Collaborators

  • sieyoo