万卡UI组件库文档

万卡UI组件库是基于UED部门新出的规范和现有万卡H5的业务抽象出来的一部分组件
http://wxtest.9fbank.com/doc/packages/UiDoc/index.html

---

组件列表

• 万卡UI组件库文档
  • 组件列表
  • 1. button
  • 2. input
  • 3. pwd-input
  • 4. shadow
  • 5. dialog
  • 6. 密码键盘
  • 7. 短信验证码输入框
  • 8. 底部弹层
  • 9. toast框
  • 10. loading
  • 11. page-loading
  • 12.底部选择框及展示框 2.0
  • 13.数字键盘V2.0

---

1. button

根据配置的不同的参数 [ model, curStyle ] 渲染不同颜色，状态，大小的button

model: 模式，根据你配置的模式，调取该模式对应基础样式 (demo图片尺寸缩小一半)
curStyle: 当前按钮的样式，默认normal样式

1. normal默认模式
2. disabled 代表当前按钮置灰不可以点击，并且渲染对应的ui
3. highlight 高亮模式
4. shadow button会显示阴影

  <jf-button
     model="big"
  >标准大按键</jf-button>

  <jf-button
     model="big"
     curStyle=['disabled']
  >标准大按键</jf-button>

  <jf-button
     model="big"
     curStyle=['highlight']
  >标准大按键</jf-button>

  <jf-button
     model="small"
  >标准大按键</jf-button>

  <jf-button
     model="small"
     curStyle=['disabled']
  >标准大按键</jf-button>

  <jf-button
     model="small"
     curStyle=['highlight']
     @click="triggerClick"
  >标准大按键</jf-button>

tips:

1. 如果上面的样式无法满足你的需求，也可以通过自定义样式来覆盖原有的样式
2. button的高度需要父级控制
3. 虽然demo中所有实例只是配置了简单的文案，你也可以自定义一些html元素。button组件会通过slot把html代码渲染对应的位置

  <jf-button
     model="small"
     curStyle=['highlight']
     @click="triggerClick"
  >
    <div class="diyStyle">自定义html元素</div>
  </jf-button>

---

2. input

对input标签进行了一层封装，input大部分功能都实现了，并且用法都一样。（待完善）

  <jf-input
    :type="tel"
    :placeholder="默认提示信息"
    :maxlength="1"
    :disabled="true"
    :readonly="false"
    :checked="true",
    :required="required"
    :value="默认value"
    @input="onInput"
    @change="onChange"
    @keyUp="onkeyUp"
    @keyDown="onkeyDown"
    @forcus="onForcus"
    @blur="onBlur"
  />

---

3. pwd-input

基于input组件新增了两个参数
curForcus：true，在输入框中间显示模拟的红色光标
error：true 底部分割线为红色，一般错误情况显示。默认色值为 #EBEBEB

---

4. shadow

背景遮罩层

alpha：定义背景颜色的透明度
click: 点击遮罩层触发点击事件

  <jf-shadow
    :alpha=".5"
    @click="clickShdow"
  >
     <div>自定义html元素</div>
  </jf-shadow>

  methods: {
    clickShdow() {
      console.log('点击遮罩层')
    }
  }

遮罩层内的所有html元素上绑定的事件必须阻止冒泡，请各位知悉

---

5. dialog

dialog组件相比以前的组件设计的更加灵活，提供了两种配置方式

组件传值参数说明：

参数名	参数说明	参数类型	默认值	是否必填
visible	控制dialog显示还是隐藏的	Boolean	false	否
title	弹框标题的，默认为空字符串	String	提示	否
content	内容区的文案，默认为空字符串	String	false	否
leftBtnText	左侧按钮的文案	Boolean	false	否
rightBtnText	右侧按钮的文案	Boolean	false	否
showClose	关闭的图标	Boolean	false	否
isAddHide	是否增加遮罩	Boolean	true	否

组件事件说明：

事件名	事件说明
dialogRightBtnFn	右侧按钮对应的回调函数
dialogLeftBtnFn	左侧按钮对应的回调函数
tapClose	击底部关闭按钮
clickShadow	点击遮罩层

slot说明：

Name	说明	备注
header	标题自定义
content	弹框内容自定义
footer	按钮位置自定义

  <jf-dialog
    :visible="isShowDialog"
    content="对话框内容对话框内容，对话框内容对话框内容"
    title="提示"
    @dialogLeftBtnFn="dialogLeftBtnFn"
    @dialogRightBtnFn="dialogRightBtnFn"
    leftBtnText="取消"
    rightBtnText="确定"
>
</jf-dialog>

slot

 <jf-dialog
  :visible="isShowDialog"
  @dialogLeftBtnFn="dialogLeftBtnFn"
  @dialogRightBtnFn="dialogRightBtnFn"
  leftBtnText="取消"
  rightBtnText="确定"
 >
    <div slot="header" class="jf-dialog-header">提示</div>
    <div slot="content" class="jf-dialog-content">对话框内容对话框内容，对话框内容对话框内容</div>
    <footer class="jf-dialog-footer flex" slot="footer">
        <button class="jf-btn-cancel cell_1 jf-btn">
        取消
      </button>
      <button class="jf-btn-active cell_1 jf-btn">
        确定
      </button>
    </footer>
 </jf-dialog>

slot的模式更加灵活，可以自定义html代码片段，不过需要自行开发对应的样式

tips: 如果只需要一个button，可以只配置一个按钮即可（leftBtnText，rightBtnText 两者任一个）

    带关闭按钮
    
   <jf-dialog
   :visible="isShowDialog"
   :showClose="true"
    @tapClose="tapClose"
 >
 </jf-dialog>

tips: 内容区域高度完全靠内容撑起来，没有最小高度

上面的几个dialog demo只不过是几个简单的实例，我们可以通过slot模式组装出来各种不同风格的dialog

---

6. 密码键盘

  <jfPassword
    :visible="isShowSMSValidCode"
    @click="tapKeyBoard"
    @delete="tapDelete"
  />

visible: 控制键盘显示隐藏的
click: 点击数字键盘
delete: 点击删除按钮

tips: 密码键盘不在包含任何和业务有关的代码，点击数字键盘或者删除的时候，都会通知父级组件，所有的业务操作都在父级组件完成

---

7. 短信验证码输入框

 <jf-sms-verify-code
      :len="4"
      :inputArr="inputArr"
      @close="closeSmsVerif"
      @complete="smsComplete"
      v-if="isShowSMSValidCode"
      :isError="false"
      :isReload="isReload"
      @achieveCode="achieveCode"
  >
    请输入银行预留手机，尾号0978交易验证码
  </jf-sms-verify-code>

len: 控制渲染几个input框，对应的是需要输入几位手机验证码，默认为4
inputArr：每个输入框对应的值，一般流程是，用户在数字键盘上点击元素以后，把点击的元素push到inputArr中，然后验证码会把对应的值渲染到对应的位置上
close：点击右上角关闭按钮的时候的回调函数
complete：当输入框都输入完成以后触发该回调函数
isError：当用户输入错误的时候，比如输入完成以后，接口验证用户输入的验证码错误的时候，需要改变改字段的状态
isReload：重新获取验证码的时候改变该字段状态，一般是在调用完发送短信接口以后改变该字段状态（该字段状态不区分true, false只要改变就会重新进去倒计时状态）
time：倒计时时间，默认60s

---

8. 底部弹层

  /*
    boxList: [
        {
          id: '内容1',
        },
        {
          id: '内容2',
        },
        {
          id: '内容3',
        },
        {
          id: '内容4',
        },
        {
          id: '内容5',
        },
      ]
    */

  <jf-float-frame
      v-if="isShowJfFloatFrame"
      @click="clickBtn"
      :list="boxList"
      :loopkey="id"
      @clickItem="clickItem"
      tick
      @close="triggerClick('isShowJfFloatFrame')"
  >
  <h1 slot="header">标题</h1>
</jf-float-frame>

click：点击底部按钮触发的回调函数
list：需要渲染的数据
showBtn：是否需要显示底部的按钮
loopkey：渲染数据的key (因为目前大部分的数据都是json数组，但是每个数据需要显示的key不尽一样，所以需要在父组件配置)、
tick: 右侧显示图案的样式，此为✅
round：右侧显示图案的样式，此为⭕️
close: 点击右上角的关闭按钮处罚回调函数
clickItem: 点击内容区域每一项触发的回调函数

考虑到内容区域可能样式多种多用，还提供slot模式，开启这种模式以后，所有的样式，事件都交接给了开发自己把控

<jf-float-frame
      v-if="isShowJfFloatFrame"
      @click="clickBtn"
      :list="boxList"
      :loopkey="id"
      @clickItem="clickItem"
      tick
      @close="triggerClick('isShowJfFloatFrame')"
  >
  <h1 slot="header">标题</h1>
  <ul slot="loopContent">
    <li class="" v-for="item in boxList">{{item.id}}</li>
  </ul>
</jf-float-frame>

---

9. toast框

  <jf-toast
      :visible="isShowToast"
      @callBack="toastCallBack"
      :time=1500
   >
     onecard-ui 测试页面
   </jf-toast>

time: toast框显示时间，默认1500ms
visible: toast显示隐藏
callBack: toast框倒计时结束以后的回调函数

---

10. loading

公共loading加载组件

isShowLoadFlag：切换显示/隐藏loading

  <jf-loading
    :isShowLoadFlag = "isShowLoadFlag"
    >
  </jf-loading>

后期如需要扩展loading传入【正在加载】的文字自定义或者图片配置化

---

11. page-loading



该组件用于接口响应中的新版数据加载块loading样式

<jfLoadingPage 
    v-show = isShowLoad>
<jfLoadingPage>

---

12.底部选择框及展示框 2.0



    <jf-float-frame2 
      v-if="isShowJfFloatFrame"
      @clickBtn="clickBtn"
      :showCloseFlag = "true"
      @clickItem="clickItem"
      :list="boxList"
      loopkey="id"
      :showBtn="true"
      :defaultIndex = '4'
      @close="triggerClick('isShowJfFloatFrame')"
    >
      <h1 slot="soloContent" > 内容 </h1>
    </jf-float-frame2>



    <jf-float-frame2
      v-if="isShowJfFloatFrame"
      :showCloseFlag = "true"
      @clickItem="clickItem"
      :list="boxList"
      loopkey="id"
      :defaultIndex = '4'
      @close="triggerClick('isShowJfFloatFrame')"
    >
    </jf-float-frame2>

参数说明：

参数名	参数说明	参数类型	默认值	是否必填
title	弹框标题文字	String	标题	否
list	选择器循环数据	Array, Object	Null	否
loopkey	选择循环对象的key值	String	Null	否
showCloseFlag	标题栏关闭按钮	Boolean	false	否
showBtn	底部按钮	Boolean	false	否
btnText	底部按钮文案	String	确 定	否
defaultIndex	默认选中循环的列表项下标	String, Number	0	否

---

组件事件说明：

事件名	事件说明
clickBtn	点击确认按钮事件
clickItem	选择器点击项目事件
close	关闭弹窗事件

---

slot说明：

Name	说明	备注
slotContent	内容主体标签slot	与默认循环列表的loopList互斥显示
header	标题栏自定义Solt

备注说明：

该组件目前将类选择器配置为默认模式，如果展示自定义的内容可以使用slot 【slotContent】进行填充，目前button为统一样式，后期会开放slot进行自定义；

---

13.数字键盘V2.0



    <jf-pass-word2
      :visible="isShowSMSValidCode"
      @hideKeyboard = 'closeSmsVerif'
      @click="tapKeyBoard"
      @delete="tapDelete"
      @complete = "complete"
    >
    <!-- <div slot="keyboardHeader" class="keyboardHeader">
      <ul class="flex jf-justify-between">
        <li v-for="item in elemArray" :key="item.key" class="cell_0">
          ¥{{item.money}}
        </li>
      </ul>
    </div> -->
  </jf-pass-word2>

组件传值参数说明：

参数名	参数说明	参数类型	默认值	是否必填
visible	底部按钮	Boolean	false	否

组件事件说明：

事件名	事件说明
click	点击数字区域键盘事件
delete	删除事件
complete	完成按钮事件
hideKeyboard	隐藏数字键盘事件

slot说明：

Name	说明	备注
keyboardHeader	键盘头部增加自定义样式Slot