ofs-hor-view

description

ofs-hor-view is a view int a horizontal layout with some components。

see also ofs-hor-layout

ofs-hor-layout is a layout with a horizontal alignment。

the url for the example with this is here.

installing

$ npm install ofs-hor-view
$ npm install ofs-hor-layout

import in main.ts

// main.ts

import { createApp } from 'vue'
import App from './App.vue'
import OfsHorView from 'ofs-hor-view'
import 'ofs-hor-view/lib/style.css'
import 'ofs-hor-layout/lib/style.css'

const app = createApp(App)
app.use(ElementPlus)
    .use(OfsHorView)
    .mount('#app')

using in page

<ofs-hor-view
  :side-width="260"
  :side-collapse-width="64"
  :header-height="50"
  :tags-view-height="20"
  :menus="menus"
  :options="state.options"
  :current-lang="state.currentLang"
  :logo-router="state.logoRouter"
  :avatar-url="state.avatarUrl"
  :dark="state.dark"
  :is-language="state.isLanguage"
  :is-theme-switch="state.isThemeSwitch"
  :is-avatar="state.isAvatar"
  :dark-text="state.darkText"
  :logout-text="state.logoutText"
  :setting-items="state.settingItems"
  @collapse="toggle"
  @select="menuSelected"
  @language="state.languageChange"
  @dark-switch="darkSwitch"
  @setting-command="settingCommand"
  @logout="logout"
>
  <template #logoImage>
    <div style="font-size: 28px">RK</div>
  </template>
  <template #logoTitle>
    <div style="font-size: 24px">Rui Kang</div>
  </template>
  <template #hContent>
    <div>header content</div>
  </template>
  <template #view>
    <div class="main">main content</div>
  </template>
</ofs-hor-view>

import { reactive } from 'vue'
import OfsHorView from 'ofs-hor-view'
import type { SettingItem, SideMenu } from 'ofs-hor-types'

const state = reactive({
  options: [
    {
      value: 'zh-CN',
      label: '中文',
    },
    {
      value: 'en',
      label: 'English',
    },
    {
      value: 'en1',
      label: 'English1',
    },
  ],
  currentLang: 'zh-CN',
  logoRouter: '/test',
  avatarUrl:
    'https://www.npmjs.com/npm-avatar/eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhdmF0YXJVUkwiOiJodHRwczovL3MuZ3JhdmF0YXIuY29tL2F2YXRhci81MDNmMTkxNDUwNzNkNmFkMjlhZWJkMDEzYTVmZjI3OD9zaXplPTQ5NiZkZWZhdWx0PXJldHJvIn0.5OSXtGzFm9QS7bDnYwGGZQSfatCPy25BzeoYaSmid_E', //默认值
  dark: true,
  isLanguage: true,
  isThemeSwitch: true,
  isAvatar: true,
  darkText: '暗黑模式',
  logoutText: '退出',
  settingItems: [{ command: 'test', text: 'test' } as typeof SettingItem],
  languageChange: (val: string) => {
    window.console.log('OfsHorView language change:', val)
    if (val === 'zh-CN') {
      // i18n.global.locale.value = 'zh-CN'
    }
    if (val === 'en') {
      // i18n.global.locale.value = 'en'
    }
  },
})

const toggle = (val: boolean) => {
  window.console.log('OfsHorView toggle:', val)
}

const menuSelected = (val: string) => {
  window.console.log('OfsHorView menu selected:', val)
}

const darkSwitch = () => {
  window.console.log('OfsHorView dark switch')
}

const logout = () => {
  window.console.log('OfsHorView logout')
}

const settingCommand = (val: string | number | object) => {
  window.console.log('OfsHorView setting command:', val)
}
const menus: typeof SideMenu[] = [
    {
      id: 1,
      parentId: 0,
      parentName: 'Test Parent Name One',
      name: 'Test Name One',
      url: 'test/url/1',
      component: null,
      permission: null,
      type: 0,
      icon: 'view',
      orderNum: 1,
      children: [
        {
          id: 2,
          parentId: 1,
          parentName: 'Test Parent Name Two',
          name: 'Test Name Two',
          url: 'test/url/2',
          component: null,
          permission: null,
          type: 1,
          icon: 'view',
          orderNum: 1,
        },
      ],
    },
    {
      id: 1,
      parentId: 0,
      parentName: 'Test Parent Name Two',
      name: 'Test Name Two',
      url: 'test/url/3',
      component: null,
      permission: null,
      type: 0,
      icon: 'view',
      orderNum: 1,
      children: [
        {
          id: 2,
          parentId: 1,
          parentName: 'Test Parent Name Two',
          name: 'Test Name Two',
          url: 'test/url/4',
          component: null,
          permission: null,
          type: 1,
          icon: 'view',
          orderNum: 1,
        },
      ],
    },
  ]

html {
  --ofs-menu-bg-color: #001529;
  --ofs-menu-text-color: rgb(192, 196, 204);
  --ofs-menu-active-bg-color: #409eff;
  --ofs-menu-active-text-color: #ffffff;
  --ofs-menu-hover-bg-color: #434343;
  --ofs-menu-hover-text-color: #ffffff;
}

.main {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}