❤
npm
Sign UpSign In

@hg-ui/h-frame
TypeScript icon, indicating that this package has built-in type declarations

0.1.7 • Public • Published

frame

页面框架

基础应用

<template>
  <h-frame
    :menu-list="menuList"
    :menu-position="menuPostion"
    :default-active="defaultActive"
    :command-list="commandList"
    :user-name="userName"
    :theme="theme"
    @on-command="onCommandFrame"
  >
    <template #breadcrumb>
      <el-breadcrumb v-if="levelList.length">
        <el-breadcrumb-item
          v-for="(item, index) in levelList"
          :key="index"
          :to="(index === levelList.length - 1 || !item.path || (item.meta && item.meta.redirect === true)) ? undefined : item"
        >
          {{ item.meta.title }}
        </el-breadcrumb-item>
      </el-breadcrumb>
    </template>
    <template #default>
      <h-page
        breadcrumb
        :commands="commands"
        @on-command="onCommand"
      >
        <div>主体内容</div>
        <p>主体内容</p>
        <p>主体内容</p>
        <p>主体内容</p>
        <p>主体内容</p>
        <div>主体内容</div>
        <p>主体内容</p>
        <p>主体内容</p>
        <p>主体内容</p>
        <p>主体内容</p>
        <div>主体内容</div>
        <p>主体内容</p>
        <p>主体内容</p>
        <p>主体内容</p>
        <p>主体内容</p>
      </h-page>
    </template>
  </h-frame>
</template>
<script lang="ts">
import {
  defineComponent,
  ref,
  shallowRef
} from 'vue'
import {
  Edit,
  Delete,
  Plus,
  DataLine,
  Connection,
  PictureFilled,
  QuestionFilled,
  Promotion,
  Tools,
  Setting,
} from '@element-plus/icons-vue'

export default defineComponent({
  setup() {
    const levelList = ref([
      {
        name: 'home',
        path: '/home',
        meta: {
          title: '首页'
        }
      },
      {
        name: 'list',
        path: '/list',
        meta: {
          title: '列表'
        }
      },
      {
        name: 'detail',
        path: '/detail',
        meta: {
          title: '详情',
          redirect: true
        }
      }
    ])
    const menuList = shallowRef([
      {
        name: '告警管理',
        icon: DataLine,
        path: '/demo/alarm',
        children: [
          { name: '告警列表', path: '/demo/alarm/list/index' },
          { name: '异常管理', path: '/demo/alarm/unusual' },
          { name: '用户组配置', path: '/demo/alarm/user-group-config' },
          {
            name: '推送策略',
            path: '/demo/alarm/policy',
            children: [{ name: '定时推送', path: '/demo/alarm/policy/11' }, { name: '立即推送', path: '/222', children: [{ name: '周期推送', path: '/333' }] }],
          },
        ],
      },
      { name: '系统管理', path: '/demo/system', icon: Tools, children: [{ name: '异常管理', path: '/demo/system/unusual' }] },
      { name: '管理', icon: Setting, path: '/page' },
    ])
    const commandList = shallowRef([
      { label: '切换主题', icon: PictureFilled, command: 'theme' },
      { label: '帮助文档', icon: QuestionFilled, command: 'help' },
      { label: '快速指南', icon: Promotion, command: 'promotion' }
    ])
    const commands = shallowRef([
      {
        command: "edit",
        label: "编辑",
        props: {
          type: "default",
          icon: Edit
        }
      },
      {
        command: "delete",
        label: "删除",
        props: {
          type: "default",
          icon: Delete
        }
      },
      {
        command: "create",
        label: "新建",
        props: {
          type: "primary",
          icon: Plus
        },
        on: {
          click: () => {
            console.log("点击了", "create")
          }
        }
      }
    ])
    const theme = ref('dark')
    const onCommandFrame = (cmd: string) => {
      if (cmd === 'theme') {
        theme.value = theme.value === 'dark' ? 'light' : 'dark'
      }
    }
    const onCommand = (cmd: string, item) => {
      console.log(cmd, item)
    }

    return {
      levelList,
      menuList,
      commandList,
      commands,
      menuPostion: 'top',
      defaultActive: '/demo/alarm/policy/11',
      userName: '李诗情',
      theme,
      onCommandFrame,
      onCommand
    }
  },
})
</script>

不同主题

<template>
  <h-frame
    :menu-list="menuList"
    :menu-position="menuPostion"
    :default-active="defaultActive"
    :command-list="commandList"
    :user-name="userName"
    :theme="theme"
    @on-command="onCommandFrame"
  >
    <template #breadcrumb>
      <el-breadcrumb v-if="levelList.length">
        <el-breadcrumb-item
          v-for="(item, index) in levelList"
          :key="index"
          :to="(index === levelList.length - 1 || !item.path || (item.meta && item.meta.redirect === true)) ? undefined : item"
        >
          {{ item.meta.title }}
        </el-breadcrumb-item>
      </el-breadcrumb>
    </template>
    <template #default>
      <h-page
        breadcrumb
        :commands="commands"
        @on-command="onCommand"
      >
        <div>主体内容</div>
        <p>主体内容</p>
        <p>主体内容</p>
        <p>主体内容</p>
        <p>主体内容</p>
        <div>主体内容</div>
        <p>主体内容</p>
        <p>主体内容</p>
        <p>主体内容</p>
        <p>主体内容</p>
        <div>主体内容</div>
        <p>主体内容</p>
        <p>主体内容</p>
        <p>主体内容</p>
        <p>主体内容</p>
      </h-page>
    </template>
  </h-frame>
</template>
<script lang="ts">
import {
  defineComponent,
  ref,
  shallowRef
} from 'vue'
import {
  Edit,
  Delete,
  Plus,
  DataLine,
  Connection,
  PictureFilled,
  QuestionFilled,
  Promotion,
  Tools,
  Setting,
} from '@element-plus/icons-vue'

export default defineComponent({
  setup() {
    const levelList = ref([
      {
        name: 'home',
        path: '/home',
        meta: {
          title: '首页'
        }
      },
      {
        name: 'list',
        path: '/list',
        meta: {
          title: '列表'
        }
      },
      {
        name: 'detail',
        path: '/detail',
        meta: {
          title: '详情',
          redirect: true
        }
      }
    ])
    const menuList = shallowRef([
      {
        name: '告警管理',
        icon: DataLine,
        path: '/demo/alarm',
        children: [
          { name: '告警列表', path: '/demo/alarm/list/index' },
          { name: '异常管理', path: '/demo/alarm/unusual' },
          { name: '用户组配置', path: '/demo/alarm/user-group-config' },
          {
            name: '推送策略',
            path: '/demo/alarm/policy',
            children: [{ name: '定时推送', path: '/demo/alarm/policy/11' }, { name: '立即推送', path: '/222', children: [{ name: '周期推送', path: '/333' }] }],
          },
        ],
      },
      { name: '系统管理', path: '/demo/system', icon: Tools, children: [{ name: '异常管理', path: '/demo/system/unusual' }] },
      { name: '管理', icon: Setting, path: '/page' },
    ])
    const commandList = shallowRef([
      { label: '切换主题', icon: PictureFilled, command: 'theme' },
      { label: '帮助文档', icon: QuestionFilled, command: 'help' },
      { label: '快速指南', icon: Promotion, command: 'promotion' }
    ])
    const commands = shallowRef([
      {
        command: "edit",
        label: "编辑",
        props: {
          type: "default",
          icon: Edit
        }
      },
      {
        command: "delete",
        label: "删除",
        props: {
          type: "default",
          icon: Delete
        }
      },
      {
        command: "create",
        label: "新建",
        props: {
          type: "primary",
          icon: Plus
        },
        on: {
          click: () => {
            console.log("点击了", "create")
          }
        }
      }
    ])
    const theme = ref('light')
    const onCommandFrame = (cmd: string) => {
      if (cmd === 'theme') {
        theme.value = theme.value === 'dark' ? 'light' : 'dark'
      }
    }
    const onCommand = (cmd: string, item) => {
      console.log(cmd, item)
    }

    return {
      levelList,
      menuList,
      commandList,
      commands,
      menuPostion: 'top',
      defaultActive: '/demo/alarm/policy/11',
      userName: '李诗情',
      theme,
      onCommandFrame,
      onCommand
    }
  },
})
</script>

Frame Attributes

Attribute Description Type Accepted Values Default
theme 主题配置 string dark / light light
title 网站名称 string — HightDesign
menu-position 菜单位置 string side / top side
menu-list 菜单列表 array — —
default-active 默认菜单项 string — —
command-list 下拉菜单 array — —
user-name 当前登录用户信息 string — —

Frame Events

Event Name Description Parameters
on-command 下拉菜单点击 (command: string)

Frame Slots

Name Description
— 主体内容
logo 自定义 logo
breadcrumb 自定义面包屑
side 自定义顶部用户信息旁边内容
header 自定义顶部用户信息区

Page Attributes

Attribute Description Type Accepted Values Default
padding 配置内边距 string — 20px
gap 布局间隔 number — 20
breadcrumb 是否显示面包屑 boolean — false
commands 操作区按钮配置 array — —
isBottom 操作区是否展示在底部 boolean — false
wrapClass 内容区样式配置 string — —

Page Events

Event Name Description Parameters
on-command 下拉菜单点击 (command: string, item: object)

Page Slots

Name Description
— 主体内容
breadcrumb 自定义面包屑
command 自定义按钮区

Readme

Keywords

Package Sidebar

Install

npm i @hg-ui/h-frame

Repository

github.com/WenHaoHuang/h-frame

Homepage

github.com/WenHaoHuang/h-frame#readme

Weekly Downloads

1

Version

0.1.7

License

ISC

Unpacked Size

69.5 kB

Total Files

17

Last publish

Collaborators

  • wenhao.huang
Try on RunKit
Report malware