快速开始 主题配置
容器
布局 Layout 容器 Docker 定位 Position 外边距 Margin 内边距 Padding 溢出 Overflow
元素
颜色 Color 文字 Font 图标 Icon 图片 Image 按钮 Button 提示 Tip 标签 Tag 徽标 Badge 表格 Table 菜单 Menu 面包屑 Breadcrumb 选项卡 Tab 分页 Pagination 阴影 Shadow
组件
表单 Form 输入框 Input 文本域 Textarea 单选框 Radio 多选框 Checkbox 选择器 Select 计数器 Counter 折叠面板 Collapse 模态框 Modal 动画 Animation
作者
问题反馈

计数器 Counter

概述

基础组件,触发业务逻辑时使用。

基础计数器

用法:设置类j-counter,默认宽为100%,你可以在外部容器上添加类来定义宽度。利用正则表达式约束仅可输入数字和点(/[^\d]/g,'')如:

<div class="j-counter">
    <span class="j-counter-decrease" role="button">
        <i class="iconfont icon_minus"></i>
    </span>
    <span class="j-counter-increase" role="button">
        <i class="iconfont icon_add"></i>
    </span>
    <div class="j-input">
        <input type="text" placeholder="请输入数量" class="j-input-inner" oninput="value=value.replace(/[^\d]/g,'')">
    </div>
</div>
禁用状态

全局禁用:设置类j-is-disabled。如:

<div class="j-counter j-is-disabled">
    <span class="j-counter-decrease" role="button">
        <i class="iconfont icon_minus"></i>
    </span>
    <span class="j-counter-increase" role="button">
        <i class="iconfont icon_add"></i>
    </span>
    <div class="j-input">
        <input type="text" placeholder="请输入数量" class="j-input-inner" disabled oninput="value=value.replace(/[^\d]/g,'')">
    </div>
</div>

局部禁用,用法和DOM示例:

<div class="j-counter">
    <span class="j-counter-decrease j-is-disabled" role="button">
        <i class="iconfont icon_minus"></i>
    </span>
    <span class="j-counter-increase" role="button">
        <i class="iconfont icon_add"></i>
    </span>
    <div class="j-input">
        <input type="text" placeholder="请输入数量" class="j-input-inner" oninput="value=value.replace(/[^\d]/g,'')">
    </div>
</div>
不同尺寸

用法:设置类j-is-**为尺寸值。如:

<div class="j-counter j-is-small">
    <span class="j-counter-decrease" role="button">
        <i class="iconfont icon_minus"></i>
    </span>
    <span class="j-counter-increase" role="button">
        <i class="iconfont icon_add"></i>
    </span>
    <div class="j-input j-is-small">
        <input type="text" placeholder="请输入数量" class="j-input-inner" oninput="value=value.replace(/[^\d]/g,'')">
    </div>
</div>

4个尺寸:默认尺寸和j-is-mediumj-is-smallj-is-mini

上一章:选择器 Select
下一章:折叠面板 Collapse