0.0.5 • Published 3 years ago

wbc-ui v0.0.5

Weekly downloads
-
License
MIT
Repository
github
Last release
3 years ago

wbc-ui

NPM version npm npm GitHub stars GitHub stars

wbc-ui是一套使用原生Web Components规范开发的跨框架 UI 组件库。查看文档

github 项目地址

wbc-ui

特性

  • 跨框架。无论是reactvue还是原生项目均可使用。
  • 组件化。shadow dom真正意义上实现了样式和功能的组件化。
  • 类原生。一个组件就像使用一个div标签一样。
  • 无依赖。纯原生,无需任何预处理器编译。
  • 无障碍。支持键盘访问。

兼容性

现代浏览器。

包括移动端,不支持IE

IE不支持原生customElementswebcomponentsjs可以实现对IE的兼容,不过很多CSS特性仍然无效,所以放弃

安装

  • npm
npm i wbc-ui
  • cdn
<script type="module">
	import 'https://unpkg.com/wbc-ui'

	import 'https://unpkg.com/wbc-ui@0.0.3' //指定版本号
</script>

<!--or-->

<script type="module" src="https://unpkg.com/wbc-ui"></script>
  • 直接在github上获取最新文件(推荐)。

目录如下:

.
└── wbc-ui
    ├── components //功能组件
    |   ├── c-icon.js
    |   └── ...
    ├── iconfont //图标库
    |   └── icon.svg
    └── index.js

将整个文件夹放入项目当中(可选择以上几个目录文件即可,其他文件夹均为文档测试)。

<script type="module">
	import './node_modules/wbc-ui/index.js' //推荐
	//如需单独使用,文档中都是单独使用的情况,推荐全部引用,即第一种方式。
	import './node_modules/wbc-ui/components/c-button.js'
</script>

<!--or-->
<script type="module" src="./node_modules/wbc-ui/index.js"></script>

<c-button>button</c-button>

现代浏览器支持原生import语法,不过需要注意script的类型type="module"

react 项目引用

import 'wbc-ui' //推荐
//如需单独使用
import 'wbc-ui/components/c-button.js'
ReactDOM.render(<c-button>button</c-button>, document.body)

关于react中使用Web Components的注意细节可参考https://react.docschina.org/docs/web-components.html

vue 项目引用

import 'wbc-ui' //推荐
//如需单独使用
import 'wbc-ui/components/c-button.js'

使用同原生组件类似

你可能已经注意到 Vue 组件非常类似于自定义元素,它是 Web 组件规范的一部分,这是因为 Vue 的组件语法部分参考了该规范。

为了避免歧义,需要将自定义元素忽略掉,可参考官方文档

Vue.config.ignoredElements = [
	'my-custom-web-component',
	'another-web-component',
	// 用一个 `RegExp` 忽略所有“ion-”开头的元素
	// 仅在 2.5+ 支持
	/^ion-/,
]

其他事件绑定可自行搜索~

其他

大部分情况下,可以把组件当成普通的html标签,

比如给<c-button>button</c-button>添加事件,有以下几种方式

<c-button onclick="alert(5)">button</c-button>
btn.onclick = function () {
	alert(5)
}

btn.addEventListener('click', function () {
	alert(5)
})

自定义事件只能通过addEventListener绑定

比如元素的获取,完全符合html规则

<c-tab>
	<c-tab-content label="tab1">tab1</c-tab-content>
	<c-tab-content label="tab2">tab2</c-tab-content>
	<c-tab-content label="tab3" id="tab3">tab3</c-tab-content>
</c-tab>
const tab3 = document.getElementById('tab3')
tab3.parentNode //c-tab

组件的布尔类型的属性也遵从原生规范(添加和移除属性),比如

<c-dialog show></c-dialog>
<!-- 显示 -->
<c-dialog></c-dialog>
<!-- 隐藏 -->
<c-button loading>button</c-button>
<!-- 加载中 -->
<c-button>button</c-button>
<!-- 正常 -->

总之,大部分情况下把它当成普通的html标签(不用关注 shadow dom 的结构)就好了,以前怎么做现在仍然怎么做,只是新增了方法而已。

License

MIT