npm 包 okc 使用教程-JavaScript中文网-JavaScript教程资源分享门户

什么是 okc？

okc 是一款轻型的前端组件库，提供了一系列的 UI 组件、工具类和 mixin 插件，方便开发者在项目中使用。

其特点包括：

简洁、易用、易扩展
完全基于 CSS3 实现，无任何 JavaScript 依赖

okc 的安装和使用

安装 okc

okc 通过 npm 进行包管理，安装非常方便。使用以下命令进行安装：

npm install okc

使用 okc

okc 支持在项目中使用 ES6、CommonJS 或者 AMD 的方式引入组件、工具类和 mixin 插件。

在 HTML 文件头部添加以下代码，引入 okc 样式文件：

<head>
  <link rel="stylesheet" href="node_modules/okc/dist/okc.min.css">
</head>

在 JavaScript 文件中，通过以下方式引入 okc：

// 引入组件
import { Button, Input } from 'okc';

// 引入工具类
import { addClass, removeClass } from 'okc/utils';

// 引入 mixin 插件
import { flex } from 'okc/mixins';

okc 提供的组件

下面是 okc 提供的常用 UI 组件列表：

Button 按钮

支持多个样式风格
支持禁用状态
支持 loading 状态

import { Button } from 'okc';

<Button type="primary" size="small" disabled>Loading</Button>

Input 输入框

支持单行和多行输入
支持前后缀

import { Input } from 'okc';

<Input prefix="iconfont icon-search" placeholder="输入关键词" />

Radio 单选框

支持水平和垂直布局
支持禁用状态

import { Radio } from 'okc';

<Radio.Group value={this.state.radioValue} onChange={this.handleRadioChange}>
  <Radio.Button value="a">A</Radio.Button>
  <Radio.Button value="b">B</Radio.Button>
  <Radio.Button value="c" disabled>C</Radio.Button>
  <Radio.Button value="d">D</Radio.Button>
</Radio.Group>

Checkbox 多选框

支持水平和垂直布局
支持全选、全不选和反选操作
支持禁用状态

import { Checkbox } from 'okc';

<Checkbox.Group value={this.state.checkboxValues} onChange={this.handleCheckboxChange}>
  <Checkbox.Button value="a">A</Checkbox.Button>
  <Checkbox.Button value="b">B</Checkbox.Button>
  <Checkbox.Button value="c" disabled>C</Checkbox.Button>
  <Checkbox.Button value="d">D</Checkbox.Button>
</Checkbox.Group>

Switch 开关

支持禁用状态
支持自定义颜色

import { Switch } from 'okc';

<Switch color="#ff0000" />

Modal 对话框

支持多种弹出方式
内置了 Alert 和 Confirm 两种常用对话框

import { Modal } from 'okc';

<Modal visible={this.state.modalVisible} onClose={this.handleModalClose}>
  <Modal.Header>标题</Modal.Header>
  <Modal.Body>内容</Modal.Body>
  <Modal.Footer>
    <Button onClick={this.handleModalClose}>取消</Button>
    <Button type="primary" onClick={this.handleModalClose}>确定</Button>
  </Modal.Footer>
</Modal>

okc 提供的工具类

okc 还提供了一些常用的工具类，方便开发者进行样式定义。

以下是 okc 提供的一部分工具类：

.clearfix 清除浮动
.ellipsis 文本省略号
.disable-select 禁止文字选中
.display-none 隐藏元素
.text-center 文本居中
.text-left 文本左对齐
.text-right 文本右对齐
.font-size-xxl 字体大小为 28px
.font-size-xl 字体大小为 24px
.font-size-l 字体大小为 18px
.font-size-m 字体大小为 16px
.font-size-s 字体大小为 14px
.font-weight-bold 字体加粗
.font-weight-normal 字体正常
.transition-all 所有属性支持 transition
.transition-property-${name} 指定属性支持 transition

以下是使用示例：

import { addClass, removeClass, hasClass } from 'okc/utils';
import { clearfix, ellipsis, disableSelect, displayNone } from 'okc/utils';

<div class={classNames('container', clearfix)}>
  <div class={classNames('text', ellipsis)}>这是一段很长的文本，可能会被省略。</div>
  <div class={classNames('modal', disableSelect)}>
    <div class={classNames('header', displayNone)}>标题</div>
    <div class="body">内容</div>
    <div class="footer">底部</div>
  </div>
</div>

okc 提供的 mixin 插件

okc 还提供了一些常用的 mixin 插件，方便开发者进行布局定义。

以下是 okc 提供的一部分 mixin 插件：

flex($direction) 布局为 flex
flex-center($direction, $children) 水平或垂直居中
flex-item($flex, $order, $grow, $shrink, $basis) flex 元素属性

以下是使用示例：

import { flex, flexCenter, flexItem } from 'okc/mixins';

<div class="container">
  <div class={classNames('item', flex, flexCenter('horizontal'))}>水平居中</div>
  <div class={classNames('item', flex, flexCenter('vertical'))}>垂直居中</div>
  <div class={classNames('item', flex, flexItem('auto', 1, 1, 'auto'))}>自适应宽度</div>
</div>

okc 的贡献和维护

okc 是一个开源项目，欢迎开发者贡献自己的代码和想法。如果您发现了 bug 或者有任何想法和建议，请在 Github 上提交 issue 或者 Pull Request。

项目地址：https://github.com/xxxx/okc

总结

okc 是一款轻量级的前端组件库，提供了丰富的 UI 组件、工具类和 mixin 插件。本文介绍了 okc 的安装和使用方法，以及提供的部分组件、工具类和 mixin 插件的使用示例。希望本文对您的学习和开发工作有所帮助。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/60066fac3d1de16d83a671db