step-ui

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 参数列表

参数	说明	类型	是否必填	可选值	默认值
model	绑定实体对象	Object	是	-	null
labelWidth	表单label的宽度	String	否	-	150px
labelAlign	表单label对齐方式	String	否	left / right / center	left
rules	绑定的验证规则，如果不需要验证，可不填	Object	否	-	-
showMessage		Boolean	否	-	true

（3）form-item 参数列表

参数	说明	类型	是否必填	可选值	默认值
prop	form-item唯一标识，与绑定属性名,验证规则属性名相同	String	是	-	null
label	label文字描述	String	是	-	null
labelType	label展示的位置,oneline和组件在一行展示，twoline各自独立一行	String	否	oneline	twoline
required	是否为必填项，设置为true,则在label前面显示红色星号	Boolean	否	true / false	false
maskType	出错文案位置, 默认右侧，可设置为bottom 下边	String	否	bottom / right	right
customMask	自定义出错文案	String	否	-	-

方法

参数	说明	参数	返回值
setMask	显示出错提示	-	-
hideMask	隐藏出错提示	-	-

验证规则说明

按如下规则进行配置，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) 参数列表

参数	说明	类型	是否必填	可选值	默认值
value	input绑定值，建议使用value,便于最终结果遍历	String	是	-	null
placeholder	placeholder 提示语	String	否	-	请输入
width	输入框宽度	String	否	-	-
height	输入框宽度	String	否	-	-
size	组件大小，支持big middle small	String	否	big(380*34)/ middle(270*34) / small(120*34)	-
disabled	是否禁用	Boolean	否	true / false	false
validateEvent	是否需要验证	Boolean	否	true / false	true

事件

参数	说明	回调参数
valueChange	输入数据发生变化	返回的是input绑定值

• 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) 参数列表

参数	说明	类型	是否必填	可选值	默认值
value	textarea 绑定值，建议使用value,便于最终结果遍历	String	是	-	null
placeholder	placeholder 提示语	String	否	-	请输入
width	输入框宽度	String	否	-	-
height	输入框高度	String	否	-	-
size	输入框大小，有三种尺寸供选择 big:380px middle:270px small:120px	String	否	big / middle / small	middle
disabled	是否禁用	Boolean	否	true / false	false
validateEvent	是否需要验证	Boolean	否	true / false	true

事件

参数	说明	回调参数
valueChange	输入数据发生变化	返回的是文本框绑定值

• 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) 参数列表

参数	说明	类型	是否必填	可选值	默认值
value	seletor绑定值，建议使用value,便于最终结果遍历	String	是	-	null
placeholder	placeholder 提示语	String	否	-	请选择
size	输入框大小，有三种尺寸供选择 big:380px middle:270px small:120px	String	否	big / middle / small	middle
disabled	是否禁用	Boolean	否	true / false	false
options	列表数据,其中约定数组对象为{label:"北京"，value:"1"} label为文本描述，value为属性值，如果没有属性值，则属性值默认为文本描述	Array	否	-	[]
name	原生name	String	否	-	-
id	原生id属性	String	否	-	-
optionValue	属性值对应的配置字段名称	String / Number	否	-	value
optionLabel	文本描述对应的配置字段名称	String	否	-	label
showDefault	是否添加“不限”选项，对应的value值为空字符串	Boolean	否	true / false	false

事件

参数	说明	回调参数
valueChange	输入数据发生变化	返回的是选框绑定值

• 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) 参数列表

参数	说明	类型	是否必填	可选值	默认值
value	绑定值，建议使用value,便于最终结果遍历	String	是	-	null
min	最小值设定	Number	否	-	0
max	最大值设定	Number	否	-	-
step	步长，加减按钮数据步长	Number	否	-	-
disabled	是否禁用	Boolean	否	true / false	false
validateEvent	是否需要验证	Boolean	否	true / false	true

• 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) 参数列表

参数	说明	类型	是否必填	可选值	默认值
values	SpCascader绑定值，建议使用values,便于最终结果遍历	String	是	-	[]
placeholder	placeholder 提示语	String	否	-	请选择
size	输入框大小，有三种尺寸供选择 big:380px middle:270px small:120px	String	否	big / middle / small	middle
showAllLevel	选中回显显示数据层级，true 为显示三级，false 为显示最后一级	Boolean	否	true / false	true
separator	选中回显显示数据分隔符。默认为 /	String	否	-	/
props	属性配置，默认key 值 为 {value:"",label:"",children:[]},可通过此属性配置关联属性，例如 {value: "id", label: "discribe", children: "children"}	Object	否	-	-
options	列表数据,其中约定数组对象为{label:"北京"，value:"1",children:[]} label为文本描述，value为属性值，children 为下一级数据 。如果想更改绑定值，参考props属性	Array	否	-	[]
optionValue	属性值对应的配置字段名称	String / Number	否	-	value
optionLabel	文本描述对应的配置字段名称	String	否	-	label
disabled	是否禁用	Boolean	否	true / false	false
validateEvent	是否需要验证	Boolean	否	true / false	true

事件

参数	说明	回调参数
valueChange	输入数据发生变化	返回的是选框绑定值

• 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 参数列表

参数	说明	类型	是否必填	可选值	默认值
label	选项文本描述	String	否	-
labelPosition	描述文本位置,可设置在左侧或右侧，默认为右侧	String	否	left / right	right
disabled	是否禁用	Boolean	否	true / false	false
checked	设置选中状态，设置此状态后，需要同时初始化选中值	Boolean	否	true / false	false
trueLabel	选中时获取的数据值，不设置则为label	String / Number	否	-	label
indeterminate	是否全选	Boolean	否	true / false	false
disabled	是否禁用	Boolean	否	true / false	false
name	原生name属性	String	否	-	label
id	原生id属性	String	否	-	label

(3) SpCheckboxGroup 参数列表

参数	说明	类型	是否必填	可选值	默认值
values	复选框组绑定属性，建议设置为values,以便后续遍历	Array	是	-	[]
name	原生name 属性，组标志	String	否	-
itemStyle	选项排列方式，可选横向或者纵向，默认为纵向列表	String	否	oneline / default	default
all	添加全选按钮，控制整个SpCheckboxGroup	Boolean	否	true/ false	false

事件

参数	说明	回调参数
valueChange	输入数据发生变化	返回的是选框绑定值

(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 参数列表

参数	说明	类型	是否必填	可选值	默认值
label	选项文本描述	String	否	-
labelPosition	描述文本位置,可设置在左侧或右侧，默认为右侧	String	否	left / right	right
disabled	是否禁用	Boolean	否	true / false	false
checked	设置选中状态，设置此状态后，需要同时初始化选中值	Boolean	否	true / false	false
trueLabel	选中时获取的数据值，不设置则为label	String	否	-	label
name	原生name 属性	String	否	-	-
id	原生id属性	String	否	-	-

(3) SpRadioGroup 参数列表

参数	说明	类型	是否必填	可选值	默认值
value	复选框组绑定属性，建议设置为value,以便后续遍历	String	是	-	-
name	原生name 属性，组标志	String	否	-
itemStyle	选项排列方式，可选横向或者纵向，默认为纵向列表	String	否	oneline / default	default

• SpButton 按钮组件 (待完善)

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

(1) 基础用法

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

......

(2) 参数列表

参数	说明	类型	是否必填	可选值	默认值
type	原生类型，目前支持 submit / button	String	否	default / primary / warning / danger / secondary	default
nativeType	原生类型，目前支持 submit / button	String	否	submit / button	button
disabled	是否禁用	Boolean	否	true / false	false
plain	朴素按钮	Boolean	否	true / false	false
size	按钮大小，有三种尺寸供选择 big:380px middle:270px small:120px	String	否	big / middle / small	middle

toast提示插件

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

(1)基本用法

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

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

(2) SpToast参数表

参数	说明	类型	是否必填	可选值	默认值
type	Toast类型	Number	否	0失败 / 1成功 / 2警告	0
text	提示文案	String	否	-	操作失败

loading状态插件

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

(1)基本用法

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

(2) SpLoading参数表

参数	说明	类型	是否必填	可选值	默认值
status	出现消失状态	Boolean	否	true 显示 / false 隐藏	false
loadingImg	loading加载图片	String	否	-	-
text	loading提示语	String	否	-	加载中，请稍后...

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参数列表

参数	说明	类型	是否必填	可选值	默认值
type	选项卡样式	String	否	normal 基础 / card 卡片	normal
active	默认选中编号	Number	否	-	1

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参数列表

参数	说明	类型	是否必填	可选值	默认值
headerType	表头样式	String	否	normal 基础 / fixed 固定	normal
data	所绑定的数据源	Array	否	-	-
contentStyle	容器样式，自定义容器宽高	{width:width,height:height}	否	-	100% ,auto
columnType	列样式，可选固定第一列，最后一列，同时固定	String	否	first / last / both	-

(2) SpTableColumn参数列表

参数	说明	类型	是否必填	可选值	默认值
width	列定宽	String	否	-	-
prop	数据属性key值	String	否	-	-
hint	表头鼠标提示	String	否	-	-
data	所绑定的数据	props.data	是	-	-
index	列表序号	Number	否	-	-
inside	是否使用自定义内容	Boolean	否	-	-
sortable	是否显示排序	Boolean	否	-	-
all	是否显示全选	Boolean	否	-	-
hint	表头鼠标悬浮提示文案	String	否	-	-

(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参数列表

参数	说明	类型	是否必填	可选值	默认值
align	对齐方式	String	否	left / right/ center	left
nStyle	导航样式，支持css属性，自定义导航样式	{height:'60px',lineHeight:'60px',backgroundColor:'#1b2130'} ...	否	-	-
logoUrl	logo图链接	String	否	-	默认不显示logo

(3) SpNavItem参数列表

参数	说明	类型	是否必填	可选值	默认值
index	导航层级，第一层1，2，3，第二层1-1，1-2，2-1，2-2，三级1-1-1，1-1-2，2-1-2...依此类推	String	是	-	-
to	跳转地址，支持路由和绝对url	String	否	-	-

SpPagination 分页器

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

（1）基础用法

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

（2）SpPagination 参数列表

参数	说明	类型	是否必填	可选值	默认值
total	数据总条数	Number	否	-	1
pgCallBack	事件触发后的回调函数，返回当前页码	Function	否	-	-
current	当前选中页，用于初始化选中页	Number	否	-	1
pageSize	每页显示的个数	Number	否	-	10
pagerCount	页码按钮的数量，当总页数超过该值时会折叠	Number	否	-	7

SpTree 树型控件

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

（1）基础用法

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

（2）SpTree 参数列表

属性

参数	说明	类型	是否必填	可选值	默认值
options	传入的数组	Array	是	-	-
showCheckbox	是否显示选框	Boolean	否	true|false	false
optionLabel	显示的文本字段名称	String	是	-	label
children	子节点字段名称	String	是	-	children

方法

参数	说明	参数	返回值
getCheckedNodes	获取所有选中的节点	-	Array[{}...]

事件

参数	说明	回调参数
getCheckedNode	获取当前操作的节点	返回的是Object，为当前操作的节点
getChangedNode	获取当前文本修改的节点	返回的是Object，为当前操作的节点
getCheckedNodes	获取所有被选中节点	返回的是Array，包含所有被选中节点

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

（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 参数列表

参数	说明	类型	是否必填	可选值	默认值
limit	标签显示类型	Boolean	否	true 绑定列表，有选中和非选中操作 / false 数据无限，可添加删除，字符串数组	true
options	传入的数据,其中约定数组对象为{label:"标签1"，value:"1"，checked:true} label为文本描述，value为属性值，checked为是否选中的状态	Array	否	-	[]
optionValue	属性值对应的配置字段名称	String	否	-	value
optionLabel	文本描述对应的配置字段名称	String	否	-	label

• 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 参数列表

参数	说明	类型	是否必填	可选值	默认值
value	当前激活的面板	String / Array	是		true

SpCollapsePane

参数	说明	类型	是否必填	可选值	默认值
name	原生name 属性	String	是	-	-
title	面板标题	String	否	-	-

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

（1）基础用法

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

（2） SpBreadcrumbGroup 参数列表

参数	说明	类型	是否必填	可选值	默认值
separator	分隔符	String	否	-	/
separatorClass	图标分隔符 class	String	否	-	-

（3） SpBreadcrumb参数列表

参数	说明	类型	是否必填	可选值	默认值
to	路由跳转对象	Object	否	-	-