如何将组件添加至 Omi-Admin - 文章教程

如何将组件添加至 Omi-Admin

发布于 2021-10-12 字数 2536 浏览 976 评论 0

创建组件

在 omi/package/admin/src/components 目录下创建 name-component.tsx

使用目录下的 example-component.tsx 进行修改,添加你的组件展示页面

import { WeElement, h, tag } from 'omi'
import { tw, sheet } from 'omi-twind'
import '../docs/admin-docs'
import './code-demo'
import './code-demo/container'

// 引入你的组件
// TODO
// import '@omiu/name'

interface Props {}

// TODO
const tagName = 'name-component'
declare global {
  namespace JSX {
    interface IntrinsicElements {
      [tagName]: Omi.Props & Props
    }
  }
}

@tag(tagName)
export default class extends WeElement<Props> {
  static css = [sheet.target]

  // TODO
  mdA =
  `
  \`\`\`html
  <div>example</div>
  \`\`\`
  `

  installed() {}

  render() {

    return (
      <code-demo-container>
        <code-demo
          title="例子"
          describe={'不同类型的标签'}
          // TODO
          code={this.mdA}
        >
          <div slot="demo" class={tw`px-5 py-5`}>
              {/* TODO */}
            <div>example</div>
          </div>
        </code-demo>
      </code-demo-container>
    )
  }
}

国际化中添加组件

omi/package/admin/locales/zh.ymlomi/package/admin/locales/en.yml 中加入

// omi/package/admin/locales/en.yml
Name: 'example'
// omi/package/admin/locales/zh.yml
Name: '例子'

将组件展示页加入 Admin 路由 (支持自动加入了)

修改 components 对象 , 添加你的组件名

const components = [
  'button',
  'tabs',
  'slider',
  'loading',
  'toast',
  'card',
  'progress',
  'time-picker',
  'tag',
  'rate',
  //TODO
  'name'
]
components.map((componentName: string) =>
  route(`/${componentName}-component`, () => {
    //lazy load
    import(`./components/components/${componentName}-component.tsx`).then(() =>
      rootEl.transitionTo(`${componentName}-component`)
    )
  })
)

向侧边栏中添加导航

在 /omi/packages/admin/src/nav-tree.ts 中加入

{
    label: i18n.t('Name'),
    id: genId(),
    href: '#/name-component'
},

如果你对这篇文章有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2482 文章
30 评论
71644 人气
更多

推荐作者

坏尐絯

文章 0 评论 999

qq_q3iGo

文章 0 评论 0

佚名

文章 0 评论 0

ternence_li

文章 0 评论 0

离去的眼神

文章 0 评论 975