Omiu 是什么?Omiu 介绍 - 文章教程

Omiu 是什么?Omiu 介绍

发布于 2021-10-18 字数 4830 浏览 898 评论 0

Omiu 是基于 Omi 开发的跨框架 UI 组件库,输出标准 Web Components 的 Custom Elements,任意组件可以同时在 React、Vue、Preact、Omi 或者原生 JS 等任意框架或无框架中使用,非常方便。总体来看,Omiu 有这些特性:

Omiu Codepen 合集

  • 跨框架使用
  • 集成 MUI 海量 ICON
  • 移动端和 PC 共用一套组件
  • 运行时的主题切换支持(颜色、字体和圆角)
  • 组件直接解耦,独立打磨,独立发布,独立引用
  • 扩展了 HTML 能力,你可以通过字符串 '0' 或者字符串 'false' 传递 false 给元素

使用指南

通过 script

<script src="https://unpkg.com/omi"></script>
<script src="https://unpkg.com/@omiu/button"></script>

<o-button>I am button</o-button>

通过 npm

npm install @omiu/button

然后导入(自动全局注册):

import '@omiu/button'

然后在任意框架中使用,比如 Omi, React, Vue or Angular:

<o-button>I am button</o-button>

也可以原生 JS 使用:

var button = document.createElement('o-button')
button.innerHTML = 'I am omiu button'
document.body.append(button)
button.addEventListener('click', function () {
  console.log('Clicked!')
})

//or
//document.body.innerHTML = '<o-button>I am omiu button</o-button>'

HTML 扩展

当默认值为 true,需要传递 false 给 element 的时候,以前是历史难题,Omi 完美解决了这一点,你可以通过字符串 '0' 或者 字符串 'false' 来设置。

define('my-element', class extends WeElement {
  static defaultProps = {
    show: true
  }

 static propTypes = {
    show: Boolean
  }

  render(props) {
    ...
    ...
  }
})

Use:

<my-element show="false"></my-element>

or

<my-element show="0"></my-element>

React 中使用 omiu

import { useState } from 'react'
import '@omiu/icon-button'

export default function SomeComponent(props) {
    const [result, setSwitch] = useState(false)

    return (
      <div>
        <p>The switch is {result ? 'on' : 'off'}</p>
        {//使用 addEventListener 绑定自定义事件}
        <o-icon-button color="red" icons="['favorite', 'favorite_border']">
        </o-icon-button>
      </div>
    )
}

Vue 中使用 Omiu

<script>
import '@omiu/icon-button'

export default {
  name: 'HelloWorld',
  data: function() {
    return {
      result: false
    }
  },
  methods: {
    myEvent: function(evt) {
      this.result = evt.detail.isOn
    }
  }
}
</script>

<template>
  <div class="component">
    <p>The switch is {{result? 'on' : 'off'}}</p>
    <o-icon-button color="red" icons="['favorite', 'favorite_border']" @change="myEvent"></o-icon-button>
  </div>
</template>

事件触发和绑定最佳实践

由于需要跨框架,在事件绑定上为了统一组件行为这里给除了组件开发和使用的最佳实践。Omiu 组件的事件触发统一使用小写的形式:

this.fire('change')
this.fire('my-event')

在 Omi 中进行对应的事件绑定:

<my-ele onChange={this.changeHandler} onMyEvent={this.myEventHandler}></my-ele>

在 Preact 中进行对应的事件绑定:

<my-ele onchange={this.changeHandler} onmy-event={this.myEventHandler}></my-ele>

在 Vue 中进行对应的事件绑定:

<my-ele @change="changeHandler" @my-event="myEventHandler"></my-ele>

在 React 和 JS 中进行对应的事件绑定:

myEl.addEventListener('my-event', (evt) => {})

贡献

一些命令

Build 组件:

npm run build 

Build 例子:

npm start

生成文档:

npm run docs

发布:

npm publish --access public

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

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

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

关于作者

JSmiles

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

2512 文章
30 评论
82839 人气
更多

推荐作者

qianbiandeboy

文章 0 评论 0

少女净妖师

文章 2 评论 0

zangqw

文章 0 评论 0

qq_7HKsl

文章 0 评论 0

伪装你

文章 1 评论 0