Step-ui NPM | npm.io

step-ui 使用文档

简介

step-ui 是一套基于vue 基础上的PC端通用组件库，组件库包括基础表单组件，表单验证，基础弹框，弹出层，toast ,表格及常用插件，如日期组件，卡片，tab及容器。目前大部分组件都已完成，并且支持typescript,配合文档说明，可以直接使用。后续将不断开发和维护，目标是成为一套企业级快速搭建应用的框架

安装使用

（1）在项目中安装 step-ui 组件库

  npm install step-ui --save

（2）在入口文件main.js 中安装使用,选择需要的组件进行全局注册

全量引入

 import stepUI from "step-ui";
 Vue.use(stepUI);

或者单独引入

 import {
    SpBreadcrumb,
    SpBreadcrumbGroup,
    SpButton,
    SpCascader
 }
 
 Vue.use(SpBreadcrumb);
 Vue.use(SpBreadcrumbGroup);
 Vue.use(SpButton);
 Vue.use(SpCascader);
 ...

（3）为保证组件能够正常显示及使用，请在全局添加如下css

button,div,form,img,input,label,li,ol,p,select,span,textarea,ul{box-sizing:border-box;margin:0;padding:0}body,button,img,input,optgroup,option,select,textarea{font:14px/1 "Helvetica Neue",Helvetica,Arial,"PingFang SC","Hiragino Sans GB","Heiti SC","Microsoft YaHei","WenQuanYi Micro Hei",sans-serif;outline:0;border:0}textarea{resize:none;overflow:auto}ol,ul{list-style:none}.icon-mask{width:12px;height:12px;position:relative;top:2px}

组件使用说明

表单组件

表单组件通常在一个form 容器中使用，form 表单包含一个个 form-item ,form-item 用于label 和 message展示控制及表单验证。表单组件：input 、inputnumber、radio 、checkbox、selector、cascader来做具体的展示及交互。如下是各个组件的使用说明

form - 表单容器

用于绑定form 对象，设置label宽度，对齐方式，绑定验证规则，绑定回调函数。

（1）基本使用

<template>
  <div>
    <SpForm :model="form" @doSubmit="submitForm" labelAlign="center">
        <SpFormItem prop="username" label="姓名">
            <SpInput v-model="form.username" placeholder="请输入姓名" size="small"></SpInput>
        </SpFormItem>
        <SpFormItem prop="phone" label="手机号">
            <SpInput v-model="form.phone" placeholder="请输入手机号" size="small"></SpInput>
        </SpFormItem>
        <SpFormItem prop="cascader" label="组件">
            <SpCascader :options="caseOptions" v-model="form.job" size="small"></SpCascader>
        </SpFormItem>
        <SpFormItem prop="phoneResult" label="电话跟进">
            <SpSelector v-model="form.phoneResult" label="电话跟进结果" :options="options" size="small"></SpSelector>
        </SpFormItem>

        <SpFormItem prop="time">
            <SpRadioGroup name="time" v-model="form.time" itemStyle="oneline">
                <SpRadio label="今天"></SpRadio>
                <SpRadio label="一周"></SpRadio>
                <SpRadio label="一月"></SpRadio>
            </SpRadioGroup>
        </SpFormItem>
        <SpButton size="small" type="primary" nativeType="submit">搜索</SpButton>
        <SpButton size="small" type="secondary" nativeType="reset">清空</SpButton>
    </SpForm>
  </div>
</template>
<script>
    export default{
        data(){
            return{
              labelType:"oneline",
              form:{
                username:'',
                phone:'',
                job:[],
                phoneResult:'',
                time:''
               }
            }
        }
    }
</script>

(2) form 参数列表

（3）form-item 参数列表

方法

验证规则说明

按如下规则进行配置，name 为需要验证的属性名，即form-item 的prop属性值。包含12种 type 类型验证规则，其中pattern reg 可进行正则表达式验证，message 为验证提示语，trigger 为验证触发时机，可选值：blur 失去焦点验证，change 数据变化时验证

  rules:  {
              name: [
                { type:'required',message: '请输入活动名称', trigger: 'blur' },
                { type:'valueRange', min:3, max:10, message:'最小不小于3,最大不大于10', trigger: 'blur' },
                { type:'lengthRange', min:3, max:10, message:'长度在 3 到 10 个字符', trigger: 'blur' },
                { type:'url',message:'请输入正确网址地址', trigger: 'blur'},
                { type:'min',min:3,message:'最小值不于3', trigger: 'blur'},
                { type:'max',max:10,message:'最大值不于10', trigger: 'blur'},
                { type:'minlength',min:3,message:'请输入最少3个字符', trigger: 'blur'},
                { type:'maxlength',max:10,message:'请输入最多10个字符', trigger: 'blur'},
                { type:'phone',message:'请输入正确的手机号', trigger: 'blur'},
                { type:'email',message:'请输入正确的邮箱地址', trigger: 'blur'},
                { type:'number',message:'请输入数字', trigger: 'blur'},
                { type:'pattern',reg:'^[#$%^&*]$/g',message:'请勿输入非法字符', trigger: 'blur'}
              ]
          }

常用表单组件

SpInput 文本框组件

（1）基本用法

<SpFormItem prop="username" label="用户姓名" required=true :labelType="labelType">
        <SpInput v-model="form.username.value" placeholder="请输入姓名" size="big"></SpInput>
</SpFormItem>

export default{
        data(){
            return{
              labelType:"oneline",
              form:{
                username:{
                  value:""
                },
              },
              rules:{
                username:[
                   { type:'required',message: '请输入姓名', trigger: 'blur' },
                ]
              }
            }
        }
    }

(2) 参数列表

事件

SpTextArea 文本框组件

(1) 基础用法

 <SpFormItem prop="intro" label="自我介绍" required=true :labelType="labelType">
        <SpTextArea v-model="form.intro.value" placeholder="请填写自我介绍" width="380px" height="200px"></SpTextArea>
 </SpFormItem>
 ......
 
  intro:{
                   value:""
  }
  
 ......

(2) 参数列表

事件

SpSelector 选择组件

(1) 基础用法

 <SpFormItem prop="city" required=true  label="请选择你所在的城市" :labelType="labelType">
        <SpSelector v-model="form.city.value" label="请选择城市"  :options="form.city.options" size="small"></SpSelector>
 </SpFormItem>
 
    export default{
        data(){
            return{
              labelType:"oneline",
              form:{
                city:{
                  value:"",
                  options:[
                    {
                      value:1,
                      label:"北京"
                    },
                    {
                      value:2,
                      label:"上海"
                    },
                    {
                      value:3,
                      label:"广州"
                    }
                  ]
                }
              },
            }
        }
    }

(2) 参数列表

事件

SpInputNumber 数字设置组件

（1）基础用法

 <SpFormItem prop="usercount" label="人数设置" required=true :labelType="labelType">
        <SpInputNumber v-model="form.usercount.value" min="1" max="10" step="2"></SpInputNumber>
 </SpFormItem>
 ...
    export default{
        data(){
            return{
              labelType:"oneline",
              form:{
                usercount:{
                  value:""
                },
              },
              rules:{
                usercount:[
                   { type:'valueRange', min:1, max:10, message:'最小不小于1,最大不大于10', trigger: 'change' },
                ]
              }
            }
        }

    }

(2) 参数列表

SpCascader 级联选择组件

(1) 基础用法

 <SpFormItem prop="cascader" label="请选择详细地址" required=true :labelType="labelType">
        <SpCascader :options="form.cascader.options" size="middle" v-model="form.cascader.value"></SpCascader>
 </SpFormItem>
 
  form:{
            cascader: {
                  value: [],
                  required: true,
                  options:ccdata.data.options
            }
  ......

(2) 参数列表

事件

SpCheckbox / SpCheckboxGroup 复选框 /复选框组

(1) 基础用法

<SpFormItem prop="language" required=true :labelType="labelType" label="请选择你喜欢的编程语言">
        <SpCheckboxGroup name="language" v-model="form.language.value">
          <SpCheckbox label="JAVA" trueLabel="java"></SpCheckbox>
          <SpCheckbox label="PHP"  trueLabel="php"></SpCheckbox>
          <SpCheckbox label="JAVASCRIPT" trueLabel="js"></SpCheckbox>
        </SpCheckboxGroup>
</SpFormItem>

 
 ......
            language:{
                   value:""
            }
 ......

(2) SpCheckbox 参数列表

(3) SpCheckboxGroup 参数列表

事件

(4) 默认选中值说明:将对应项checked属性设为true,并在绑定属性里设置默认值即可

SpRadio / SpRadioGroup 单选框/单选框组

（1）基础用法

  
      <SpFormItem prop="color" required=true :labelType="labelType" label="选中你喜欢的颜色"
                  :maskType="maskType">
        <SpRadioGroup name="color" v-model="form.color.value">
          <SpRadio label="红色"></SpRadio>
          <SpRadio label="蓝色"></SpRadio>
          <SpRadio label="黄色"></SpRadio>
        </SpRadioGroup>
      </SpFormItem>
     
      ......

（2） SpRadio 参数列表

(3) SpRadioGroup 参数列表

SpButton 按钮组件 (待完善)

按钮组件可在表单组件 SpForm 中使用，点击进行表单验证提交

(1) 基础用法

<SpButton size="middle" type="primary" nativeType="submit">立即提交</SpButton>

......

(2) 参数列表

toast 提示组件，目前支持三种状态，成功，失败，警告。可以通过传参设置提示语。

(1)基本用法

toast插件是一个全局插件，通过Vue.use()进行全局注册，在组件中通过 this.$toast(1,'请求成功')进行使用

 ...
 Vue.use(SpToast);
 
 ...
 
 this.$toast(1,'请求成功');
 this.$toast(0,'请求成败');
 this.$toast(2,'警告');

(2) SpToast参数表

loading状态插件

使用方式同toast 。是一个全局插件，通过Vue.use()进行全局注册使用

(1)基本用法

 ...
 Vue.use(SpLoading);
 
 ...
 
 this.$loading(true,"http://xxxx.xx.com/loading.gif","加载中，请稍后");
 this.$loading(false)

(2) SpLoading参数表

tab选项卡组件

tab选项卡，实现点击选项卡片，展示对应的内容区，内容区自定义。目前支持两种样式，一种基础样式，一种卡片样式。支持设置默认选中项等功能。

基础版

卡片版

（1）基础用法

 <SpTabs :active=2 type="card">
        <SpTabsPane name="标签一">标签一</SpTabsPane>
        <SpTabsPane name="标签阿斯加德爱上大二">标签阿斯加德爱上大二</SpTabsPane>
        <SpTabsPane name="标签三">标签三</SpTabsPane>
        <SpTabsPane name="标签不标签" >标签不标签</SpTabsPane>
        <SpTabsPane name="我没有名字">我没有名字</SpTabsPane>
 </SpTabs>

 ...

(2) SpTabs参数列表

SpTable表格组件

SpTable组件提供基础表格渲染，通过绑定列属性，实现表格渲染，支持固定表头，支持自定义列内容等

（1）基础用法

 ...

 <SpTable  :data="tableList" :contentStyle="contentStyle">
        <template slot-scope='props'>
            <SpTableColumn prop="name"  :data="props.data">
                <span @click="handleClick(props.data)">删除</span>
            </SpTableColumn>
            <SpTableColumn prop="age"   :data="props.data"></SpTableColumn>
            <SpTableColumn prop="sex"   :data="props.data"></SpTableColumn>
            <SpTableColumn prop="phone" :data="props.data"></SpTableColumn>
        </template>
  </SpTable>

 ...
  
 export default {

    data() {
      return {

        tableList:[
          {
            name:"姓名",
            age:"年龄",
            sex:"性别",
            phone:'手机号'
          },
          {
            name:"2222",
            age:"30",
            sex:"女",
            phone:'1877777777'
          },
          {
            name:"3333",
            age:"30",
            sex:"女",
            phone:'1877777777'
          },
          {
            name:"4444",
            age:"30",
            sex:"女",
            phone:'1877777777'
          },
          {
            name:"555",
            age:"30",
            sex:"女",
            phone:'1877777777'
          },
        ],

        contentStyle:{
          width:"1000px",
          //height:"300px"
        }, 
    }
    
    ...

(2) SpTable参数列表

(2) SpTableColumn参数列表

(4) 列数据绑定及列组件事件绑定说明

列组件需要放到下使用，并定义 slot-scope='props' ，参见VUE作用域插槽。列属性数据需要绑定data使用, :data="props.data" 同样，当列组件绑定事件是可以通过props.data 拿到当前数据。

(5) 固定列使用方法需要先指定contentStyle width 和 SpTableColumn的 width

SpNav 导航组件

导航组件支持单层导航组件及带多级展开子组件的导航组件，支持logo配置，可通过自定义样式进行配置，

(1) 基础用法

 <SpNav align='left' :nStyle="nStyle" current="3" logoUrl='http://pic1.58cdn.com.cn/nowater/chrop/n_v2adc10f34519c4a8184cb659a1f620381.png'>
    <SpNavItem index="1">首页</SpNavItem>
    <SpNavGroup index="2">
        <template slot="title">个人中心</template>
        <SpNavItem index="2-1" to="/index2">一级展开1</SpNavItem>
        <SpNavItem index="2-2" to="http://www.chinahr.com">一级展开2</SpNavItem>
        <SpNavGroup index="2-3" >
            <template slot="title">展开title</template>
            <SpNavItem index="2-3-1">二级展开1</SpNavItem>
            <SpNavItem index="2-3-2">二级展开2</SpNavItem>
            <SpNavGroup index="2-3-3">
                <template slot="title" >展开title</template>
                <SpNavItem index="2-3-3-1">三级展开1</SpNavItem>
                <SpNavItem index="2-3-3-2">三级展开2</SpNavItem>
            </SpNavGroup>
        </SpNavGroup>
    </SpNavGroup>
    <SpNavItem index="3">
        <template slot="title">订单管理</template>
    </SpNavItem>
</SpNav>

（2）SpNav参数列表

(3) SpNavItem参数列表

SpPagination 分页器

分页器，点击，跳转，上下页触发事件，调起回调函数，自行处理回调结果

（1）基础用法

  <SpPagination :total=6 :pgCallBack="changePage" :current=5 :pageSize="10" :pagerCount="8"></SpPagination>

（2）SpPagination 参数列表

SpTree 树型控件

显示层级信息，可控制是否能选择，可折叠或展开

Alt text

（1）基础用法

  <sp-tree :options="arr" @getChangedNode="getChangedNode" :showCheckbox="true" @getCheckedNode="getCheckedNode" @getCheckedNodes="getCheckedNodes" optionLabel="label" childrenFieldName="children"></sp-tree>

（2）SpTree 参数列表

属性

方法

事件

SpTag 单选框/单选框组用于标记和选择，包含动态新增、移除等功能。

Alt text

（1）基础用法

  
     <div>
        <SpTag :options="tag1" @handleClick="handleTags"></SpTag>
        <SpTag :options="tag2" :limit="false" @handleRemove="handleRemove" @handleAdd="handleAdd"></SpTag>
    </div>
     
      ......
  
	  tag1: [
        {
          value: "1",
          label: "标签1",
          selected: true
        },
        {
          value: "2",
          label: "标签2"
        }
      ],
      tag2: ["abc","basdj","sahsdh"]

（2） SpTag 参数列表

SpCollapse / SpCollapsePane 折叠面板通过折叠面板收纳内容区域。

（1）基础用法

  
     <SpCollapse v-model="activeNames" @onChange="handleChange">
       <SpCollapsePane title="标题一" name="1">
          <div>我是标题一标题一标题一标题一标题一标题一标题一标题一标题一标题一</div>
        </SpCollapsePane>
        <SpCollapsePane title="标题二" name="2">
          <div>我是标题二标题二标题二标题二标题二标题二标题二标题二标题二标题二</div>
        </SpCollapsePane>
      </SpCollapse>
      
      ......
  
	  activeNames: ['1']

（2） SpCollapse 参数列表

SpCollapsePane

SpBreadcrumbGroup / SpBreadcrumb 面包屑显示当前页面的路径，快速返回之前的任意页面。

Alt text

（1）基础用法

     <SpBreadcrumbGroup separator="/">
         <SpBreadcrumb to="/">首页</SpBreadcrumb>
         <SpBreadcrumb>组件</SpBreadcrumb>
         <SpBreadcrumb>表单</SpBreadcrumb>
     </SpBreadcrumbGroup>

（2） SpBreadcrumbGroup 参数列表

（3） SpBreadcrumb参数列表

vue babel-preset-es2015 babel-preset-es2015-loose less less-loader vue-js-modal vue-bus

@infinitebrahmanuniverse/nolb-step @everything-registry/sub-chunk-2826

5 years ago

5 years ago

5 years ago

5 years ago