hifeteam
cat-ui
喜马拉雅国际版前端基础组件库
浏览器支持
 IE / Edge |
 Firefox |
 Chrome |
 Safari |
 iOS Safari |
 Electron |
|---|---|---|---|---|---|
| IE11, Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
更新日志
安装
npm install @hife/catuior
yarn add hife-catui使用
1 在入口中导入 css 文件
// index.js
import '@hife/catui/styles/index.css';2 使用组件
import { Button } from '@hife/catui';
const App = () => {
return <Button>Add</Button>;
};
export default App;3 组件按需加载
yarn add babel-plugin-import -D下载babel-plugin-import插件- 配置
babel-plugin-import插件：
webpack.config.js
/**
* css name covert
* 1 Button => button
* 2 ElementSelect => element-select
* @param {string} name 组件名称
*/
const cssNameConvert = function(name) {
const len = name.length;
let ret = '';
for (let i = 0; i < len; i++) {
const charCode = name.charCodeAt(i);
if (charCode >= 65 && charCode <= 90) {
ret +=
i === 0
? String.fromCharCode(charCode + 32)
: `-${String.fromCharCode(charCode + 32)}`;
} else {
ret += name[i];
}
}
return ret;
};
module.exprots = {
module: {
rules: [
{
{
test: /\.(js|mjs|jsx|ts|tsx)$/,
loader: require.resolve('babel-loader'),
options: {
plugins: [
[
'import',
{
libraryName: '@hife/catui',
libraryDirectory: 'lib/components',
"camel2DashComponentName": false,
customStyleName: name => {
const newName = cssNameConvert(name);
return `@hife/catui/styles/${newName}.css`;
}
}
]
]
}
}
}
]
}
}