# bzfar-ui

> 百智诚远前端UI

Latest version **0.1.21** (published 2022-03-03) · ISC license · 0 weekly downloads

## Install

```sh
npm install bzfar-ui
pnpm add bzfar-ui
yarn add bzfar-ui
bun add bzfar-ui
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.21 |
| Published | 2022-03-03 |
| First published | 2021-12-20 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 4 |
| Unpacked size | 211 KB |
| Known vulnerabilities | 0 (+3 in 3 direct dependencies) |
| Install scripts | no |
| Author | pengpai |
| Maintainers | superpengpai |
| Keywords | bzfar |

## Links

- npm: https://www.npmjs.com/package/bzfar-ui
- npm.io page: https://npm.io/package/bzfar-ui

## Dependencies (4)

- [vue](https://npm.io/package/vue.md) ^2.5.2
- [save-dev](https://npm.io/package/save-dev.md) 0.0.1-security
- [node-sass](https://npm.io/package/node-sass.md) ^4.0.0
- [sass-loader](https://npm.io/package/sass-loader.md) ^7.3.1

## Recent versions

- 0.1.21 (latest) — 2022-03-03
- 0.1.20 — 2022-03-03
- 0.1.19 — 2022-02-28
- 0.1.18 — 2022-02-09
- 0.1.17 — 2022-01-05
- 0.1.16 — 2022-01-05
- 0.1.15 — 2021-12-28
- 0.1.14 — 2021-12-24
- 0.1.13 — 2021-12-24
- 0.1.12 — 2021-12-24
- 0.1.11 — 2021-12-24
- 0.1.10 — 2021-12-24
- 0.1.9 — 2021-12-22
- 0.1.8 — 2021-12-22
- 0.1.7 — 2021-12-22
- … 16 more at https://npm.io/package/bzfar-ui/versions

## README

# BZ-UI 文档

 ## 介绍说明
   ###   为什么要使用组件化和模块化开发？
1. 项目或者业务越来越复杂的情况下，组件化开发更适合快速迭代，在添加修改组件时候不需担心影响其他组件
2. 解决业务模块划分不清晰，耦合度大，较难维护
3. 可单独开发，测试，发布一个组件，不需要像以前一样开发完某个功能，就需要编译、运行、打包整个项目
4. 某个组件出现问题，可直接对组件进行处理，不必担心会因为修改而影响到整个项目
5. 如果有新人的加入，可以直接分配模块进行开发，而非需要熟悉整个项目，可以从一个模块的开发使新进人员比较快速熟悉项目、了解到开发规范

 ## 组件类型
   ###    1. 模块组件

   - #### 说明

     模块化组件指的是将某个页面进行拆分成一个一个模块，这样可以降低耦合度

   - #### 例子

     ````vue
     <template>
       <div>
         <bz-page title="身份鉴权">
           <div class="identityAuthentication">
             <div class="box">
               <!-- 人脸登录 -->
               <face-login v-if="loginType == 0"></face-login>
               <!-- 身份证登录 -->
               <idcard-login v-if="loginType == 1"></idcard-login>
               <!-- 二维码 -->
               <!-- <qrcode-login v-if="loginType == 2"></qrcode-login> -->
               <!-- 帐号密码 -->
               <!-- <account-login v-if="loginType == 3"></account-login> -->
               <!-- 证件号登录
               <certificate-login v-if="loginType == 4"></certificate-login> -->
               <div class="label-box">
                 <div class="dashed-line"></div>
                 <div class="title-label">其他登录方式</div>
                 <div class="dashed-line"></div>
               </div>
               <div class="btn-box">
                 <div class="change-btn" v-if="loginType != 0" @click="check(0)">
                   <img
                     class="btn-icon"
                     src="../../assets/img/通用图/人脸识别.png"
                     alt=""
                   />
                   <div class="btn-label">人脸识别登录</div>
                 </div>
                 <div class="change-btn" v-if="loginType != 1" @click="check(1)">
                   <img
                     class="btn-icon"
                     src="../../assets/img/通用图/身份证登录.png"
                     alt=""
                   />
                   <div class="btn-label">身份证登录</div>
                 </div>
                 <div class="change-btn" v-if="loginType != 4" @click="toPage('identityAuthentication/certificateLogin')">
                   <img
                     class="btn-icon"
                     src="../../assets/img/通用图/证件号登录 2.png"
                     alt=""
                   />
                   <div class="btn-label">证件号登录</div>
                 </div>
               </div>
             </div>
           </div>
         </bz-page>
         <bz-disconnection v-if="isError"></bz-disconnection>
       </div>
     </template>
     ````

     

### 2. 基础组件

- #### 说明

  单一性基础性组件，比如说原生html中的input 、select等

- #### 例子

  ````vue
  <bz-input size="small" placeholder="请输入案件编号、当事人、承办人搜索" class="right" v-model="value">
     <template v-slot:left-icon>
        <img class="icon" src="../../assets/img/综合查询/搜索.png" alt="" />
     </template>
  </bz-input>
  ````





## 组件模式

###  1. 标签化组件

- #### 说明

  使用.vue文件进行组件封装，其他页面通过import方式导入，通过标签化进行调用

- #### 例子

  ````vue
  <bz-date-picker class="start" :startDate="today" v-model="today" ></bz-date-picker>
  ````

- #### 参数

  ````js
  props: {
      value: {
        type: String,
        default: "",
      },
      placeholder: {
        type: String,
        default: "请选择",
      },
      startDate: {
        type: String,
        default: "", //日期开始时间
      },
      endDate: {
        type: String,
        default: "", //日期结束时间
      },
  },
  ````

- #### 方法

  ````js
    methods: {
      // 绑定dom事件，点击空白处收起
      click() {
        const that = this;
        document.addEventListener("click", function (e) {
          if (that.$refs.datePicker) {
            if (!!that.$refs.datePicker.contains(e.target)) {
              that.isShow = !that.isShow;
            } else {
              that.isShow = false;
            }
          }
        });
      },
     //举例
      onchange(){
          this.$emit("onchange", 'test'); 
      }
    },
  ````

  

- #### 通信

  - 组件外向组件内传值

    vue中 :参数 ，语法

  - 组件内向组件外传值

    ````js
     this.$emit("onchange", 'test');
    ````

  - 组件外部调用组件内部方法

    ````vue
    <bz-date-picker class="start" :startDate="today" v-model="today" @onchange="onchange($event,1)"></bz-date-picker>
    ````

    ````js
    function onchange(val,val2){
       console.log(val,val2)
    }
    ````

    

    

### 2. 事件驱动型组件

- #### 说明

   通过点击事件或者某些操作才能触发的组件。

    我们在开发中往往会遇到多个页面都需要用到同一个组件，而这些组件并不会在页面渲染后就直接展示在页面上，需要通过某些操作或者场景才会触发，而在以前我们往往会在每个页面进行引用，这样会导致很多冗余的代码，使用事件驱动型的思想来封装组件能让我们的代码更加优美，我们只有在需要用的时候才调用组件，而vue的原型方法就为我们提供了很好的途径。

- #### 原理

   使用vue提供的render函数，将组件绑定在vue的原型上。

- #### 例子

  ````js
   /*
      自定义 showModal 组件
      调用
      this.$showModal(obj);
      作者:pengpai
  */
   let _ShowModal = {
     show: false, // Boolean showModal显示状态
     component: null // Object showModal组件
   };
   import BzInput from "../input/bz-input.vue";
   import BzRadio from "../radio/bz-radio.vue";
   export default {
  
     install(Vue) {
       /*
           obj: Object
           type: String
       */
       const INITDATA = {
         title: '提示', //标题
         type: 'normal', //弹框类型  //默认为normal类型 custom为自定义类型
         template: '', //自定义插入的模板
         showCancel: true, //是否隐藏取消按钮
         showConfirm: true, //是否隐藏确定按钮
         confirmText: '确定', //确定按钮文字
         cancelText: '取消', //取消按钮文字
         countDown: 10, //倒计时
         init: function () {}, //组件初始化后的方法
         cancel: function () {}, //cancel按钮方法
         confirm: function () {}, //确认按钮的方法
       }
       Vue.prototype.$showModal = function (obj = {}) {
  
         if (_ShowModal.show) {
           return;
         }
         let ShowModalComponent = Vue.extend({
           //  引入可能需要用到的bz-input 组件
           components: {
             BzInput,
             BzRadio,
           },
           watch: {
             template(val) {
               console.log('变化了')
               obj.template = this.template;
             },
             countDown(val) {
               console.log(val);
             },
           },
           data: function () {
             return {
               show: _ShowModal.show,
               value: '',
               countDown: obj.countDown,
               template: obj.template,
             }
           },
           mounted() {},
           created() {
             //初始化
             this.value = obj.value ? obj.value : '';
             if (obj.init !== undefined) {
               obj.init();
             }
           },
           methods: {
             init() {
               obj.init();
             },
             confirm() {
               obj.confirm();
               this.close();
             },
             cancel() {
               obj.cancel();
               this.close();
             },
             close() {
               _ShowModal.component.show = _ShowModal.show = false;
               document.body.removeChild(element);
             }
           },
           template: `<div v-show="show" class="modal-container">
                <div class="modal-box">
                 <div class="modal-top" v-show="${obj.type!='custom'}">
                  <div  class="modal-title">${obj.title?obj.title:INITDATA.title}</div>
                 </div>
                 <div  class="modal-slot" v-show="${obj.type=='custom'}">
                  ${obj.template}
                 </div>
                 <div :class="['modal-bottom',${obj.showConfirm||obj.showCancel}?'top-border':'' ]" >
                 <button v-show="${obj.showCancel }" @click.stop="cancel" class="cancel-btn">${obj.cancelText?obj.cancelText:INITDATA.cancelText}</button>
                  <button v-show="${obj.showConfirm }" class="confirm-btn" @click.stop="confirm">${obj.confirmText?obj.confirmText:INITDATA.confirmText}</button>
                 </div>
                </div>
              
              </div>`
         });
         _ShowModal.component = new ShowModalComponent();
         let element = _ShowModal.component.$mount().$el;
         document.body.appendChild(element);
         _ShowModal.component.show = _ShowModal.show = true;
         //  console.log(_ShowModal.component)
  
         //获取组件内的属性
         Vue.prototype.$showModal['getValue'] = function (key) {
           return _ShowModal.component[key];
         }
         //设置属性内的属性
         Vue.prototype.$showModal['setValue'] = function (key, value) {
           _ShowModal.component[key] = value;
         }
         //关闭弹框
         Vue.prototype.$showModal['close'] = function () {
           _ShowModal.component.close();
         }
  
       };
  
     }
   }
  
  ````

- #### 参数

  ````js
   const INITDATA = {
         title: '提示', //标题
         type: 'normal', //弹框类型  //默认为normal类型 custom为自定义类型
         template: '', //自定义插入的模板
         showCancel: true, //是否隐藏取消按钮
         showConfirm: true, //是否隐藏确定按钮
         confirmText: '确定', //确定按钮文字
         cancelText: '取消', //取消按钮文字
         countDown: 10, //倒计时
         init: function () {}, //组件初始化后的方法
         cancel: function () {}, //cancel按钮方法
         confirm: function () {}, //确认按钮的方法
   }
  ````

- #### 方法

  - 组件内方法

    ````js
    methods: {
        init() {
            obj.init();
         },
        confirm() {
            obj.confirm();
            this.close();
         },
        cancel() {
            obj.cancel();
            this.close();
         },
        close() {
            _ShowModal.component.show = _ShowModal.show = false;
             document.body.removeChild(element);
         }
     },
    ````

  - 组件外方法

    ````js
    //获取组件内的属性
      Vue.prototype.$showModal['getValue'] = function (key) {
         return _ShowModal.component[key];
      }
    //设置属性内的属性
      Vue.prototype.$showModal['setValue'] = function (key, value) {
         _ShowModal.component[key] = value;
      }
    //关闭弹框
      Vue.prototype.$showModal['close'] = function () {
         _ShowModal.component.close();
      }
    ````

- #### 使用

  - 首先在vue项目入口文件main.js中引用

    ````js
    // modal
    import(`./components/showModal/index${window.screen.width}&${window.screen.height}.css`)
    // import './components/showModal/index.css';
    import ShowModal from './components/showModal/index.js';
    Vue.use(ShowModal);
    ````

  - 在vue中如下使用

    ````js
    const that = this;
          this.$showModal({
            title: "123",
            type: "custom",
            showCancel: false,
            showConfirm: true,
            confirmText: "退出系统",
            cancelText: "继续使用",
            countDown: this.countDown,
            template: `
                   <div style="width:128px;height:128px;margin-top:16px;background:url(${require("../../assets/img/诉费缴纳/二维码框.png")})"></div>
    <div style="margin-top:8px;display:flex;flex-direction: row;align-items:center;	font-family: SourceHanSansCN-Regular;
    	       font-size: 24px;
            	font-weight: normal;
    	           font-stretch: normal;
    	      line-height:24px;
    	   letter-spacing: 1px;
    	      color: #333333;">
            <span>请用</span>
            <img class="icon" src="${require("../../assets/img/诉费缴纳/微信.png")}" alt="" />
            <span>或</span>
            <img class="icon" src="${require("../../assets/img/诉费缴纳/支付宝.png")}"alt="" />
                <span>扫码支付</span>
            </div> 
            <div style="">
            <span id="time" style="font-family: SourceHanSansCN-Regular;
    	font-size: 22px;
    	font-weight: bold;
    	letter-spacing: 1px;
    	color: #3c62fb;"
      >{{countDown}}</span>
            <span style="	font-family: SourceHanSansCN-Regular;
    	font-size: 24px;
    	font-weight: normal;
    	letter-spacing: 1px;
    	color: #333333;"> 秒后 </span>
            <span style="	font-family: SourceHanSansCN-Medium;
    	font-size: 26px;
    	font-weight: normal;
    	letter-spacing: 1px;
    	color: #3c62fb;">退出系统</span>
      
            </div>
                  <div style="font-family: SourceHanSansCN-Regular;
    	font-size: 24px;
    	font-weight: normal;
    	font-stretch: normal;
    	line-height: 24x;
    	letter-spacing: 0px;
    	color: #333333;">
            <span >缴费结果请在</span>
            <span style="	font-family: SourceHanSansCN-Medium;
    	font-size: 26px;
    	font-weight: normal;
    	letter-spacing: 0px;
    	color: #3c62fb;"> 已缴费 </span>
            <span >中查看</span>
            </div>
            `,
            init: function () {
              that.countDowner = setInterval(() => {
                that.countDown--;
                that.$showModal.setValue("countDown", that.countDown);
                if (that.countDown == 0) {
                  that.$showModal.close();
                  that.countDown = 10;
                  clearInterval(that.countDowner);
                }
              }, 1000);
            },
            confirm: function () {
              console.log("成功！！");
              clearInterval(that.countDowner);
              that.countDown = 10;
            },
            cancel: function () {
              console.log("失败！！");
              clearInterval(that.countDowner);
              that.countDown = 10;
            },
          });
    ````

    

  

- #### 通信

  - 单向通信

    ````js
      this.$showModal(obj)//obj是向组件传入的参数
    ````

  - 双向通信（实现双向绑定）

    - 组件内向组件外传值

      ````js
      this.$showModal.getValue(key)//key指的是获取组件的某一个定义的变量
      ````

    - 组件外向组件内传值

      ````js
      this.$showModal.setValue(key,value)//key指的是组件内的参数名，value指的是给key设置的值
      ````

## 组件封装

### 1. 标签化组件封装

- #### 命名

  bz+组件的功能，例如bz-input

- #### 方法

  具体方法参考vue官方网站的说明, https://cn.vuejs.org/v2/guide/components-registration.html

  在这里就不一一说明了。

### 2. 数据驱动型组件封装

- #### 命名

  因为组件通过js来调用所以，通常使用组件的功能命名，如遇到多单词，使用驼峰命名，例如showToast

- #### 参数

  - 内部参数

    内部参数与标签化组件的初始化data一样

  - 外部参数

    一般通过组件内部的INITDATA来传值 

- #### 方法

  - 内部方法

    写在methods里面，这里和标签化组件的使用一样

  - 外部方法

    通过Vue.prototype.$+组件名+[方法名] = function () {  }

    如我要实现showModal中一个close的方法

    ````js
    Vue.prototype.$showModal['close'] = function () {
      //执行。。。
    }   
    ````
    


   - ####  组件目录
     
      showModal
       - index.js                                      ------------------------------------组件主要的逻辑写在这里
      - index.css                                   ------------------------------------组件样式写在这里
      - img                                            -------------------------------------可能需要引用的icon或者图片放在这里
      - js                                                -------------------------------------可能需要引用的js文件放这个文件夹

 ## UI

### 1.输入框 bz-input

- #### 使用

  ````html
        <bz-input
          size="small"
          placeholder="请输入案件编号、承办人、当事人搜索"
          class="search"
          v-model="value"
        >
          <template v-slot:left-icon>
            <img class="icon" src="../../assets/img/综合查询/搜索.png" alt="" />
          </template>
        </bz-input>
  ````

  

- #### 属性

  |     属性     |   类型   | 默认值 |                             说明                             |
  | :----------: | :------: | :----: | :----------------------------------------------------------: |
  |     type     |  String  |  text  |                      同原生input的type                       |
  | placeholder  |  String  | 请输入 |                   同原生input的placeholder                   |
  |  maxlength   |  String  |   无   |                   最大长度（string的数字）                   |
  |   keyBoard   | Boolean  | false  |                         是否开启键盘                         |
  |    clear     | Boolean  | false  |                       是否展示清除按钮                       |
  |    model     |  String  |   ""   |                         input绑定值                          |
  |     size     |  String  |   ""   |                         input的大小                          |
  |     rule     |  Object  |   {}   | isError-获得焦点时,isFocus-失去焦点时, icon-是否显示icon,label-错误提示 |
  | keyBoardType |  String  |   ""   |    keyBoardType在keyBoard为true的时候才会起作用，1.number    |
  |  isDisabled  | Boolean  | false  |                        input是否禁用                         |
  |     left     | Boolean  | false  |       <u>左边插入文字，即将弃用，推荐slot插槽用法</u>        |
  |    right     | Boolean  | false  |       <u>右边插入文字，即将弃用，推荐slot插槽用法</u>        |
  |     slot     | Template |   -    | 目前有两个插槽：1.left-icon，input左边插槽，2.right-icon，input右边插槽 |

### 2.下拉框 bz-select

- #### 使用

  ````html
  <bz-select placeholder="请选择" @change="change" v-model="yg" size="mini" ref="yg" :disabled="value == 'bg'"></bz-select>
  ````

  <font color="#660000">后续版本可能会重新设计select的模式，采取原生html的设计模式</font>

  ````html
  <bz-select v-model="value">
  	<bz-option :label="label" :value="value">label</bz-option>
  </bz-select>
  ````

- #### 属性

  |    属性     |  类型   |    默认值    |              说明               |
  | :---------: | :-----: | :----------: | :-----------------------------: |
  | placeholder | String  |      ""      |             占位符              |
  |    size     | String  | 需要重新整理 |           select尺寸            |
  |    array    |  Array  |      []      |        下拉框展示的数据         |
  |  arrayKey   | String  |      ""      |     下拉框展示的数据的key值     |
  |    model    | String  |      ""      |         下拉框选择的值          |
  |    type     | String  |      ""      | //date 年份  //caseType案件类型 |
  |  disabled   | Boolean |    false     |            是否禁用             |

- #### 方法

  | 方法名 |          作用          |      回调      |
  | :----: | :--------------------: | :------------: |
  | change | 监听用户点击下拉框选项 | 返回name字段值 |

### 3.图片查看 bz-image

- #### 使用

  ````html
  <bz-image class="img-box" :src="imgList" :obj="obj"></bz-image>
  ````

  

- #### 属性

  | 属性 |  类型  |             默认值              |           说明           |
  | :--: | :----: | :-----------------------------: | :----------------------: |
  | src  | Array  |               []                |        图片的数组        |
  | obj  | Object | {value1:'',value2:'',value3:''} | 图片长宽以及旋转后的大小 |

  

- #### 事件

### 4.单选框 bz-radio

- #### 使用

  ````html
  <bz-radio class="radio-left" v-model="sendType" label="0">在线送达</bz-radio
  ````

  

- #### 属性

  | 属性  |     类型      | 默认值 |    说明     |
  | :---: | :-----------: | :----: | :---------: |
  | model | String,Number |   ""   |  选中的值   |
  | label | String,Number |   ""   | 选中的label |
  | slot  |   Template    |   -    |  插槽内容   |

- #### 方法

  | 方法名 |       作用       |     回调      |
  | :----: | :--------------: | :-----------: |
  | change | 监听用户切换选项 | 选中的value值 |

  

### 5.气泡 bz-bubble 

- #### 使用

  ````html
  <bz-bubble :text="item.yg" :width="390">
      <div class="value-more">{{ item.yg ? item.yg : "—" }}</div>
  </bz-bubble>
  ````

  

- #### 属性

  | 属性  |     类型      | 默认值 |      说明      |
  | :---: | :-----------: | :----: | :------------: |
  | text  | String,Number |   ""   | 气泡展示的内容 |
  | width |    Number     |   -    | 文字最大的宽度 |
  | slot  |   Template    |   -    |   显示的内容   |

  

- #### 方法



### 6.按钮 bz-button

- #### 使用

  ````html
  <bz-button size="medium" type="success" class="confirm" @click="toPage">清除数据</bz-button>
  ````

- #### 属性

  |   属性   |  类型   | 默认值 |              说明               |
  | :------: | :-----: | :----: | :-----------------------------: |
  |   type   | String  |   ""   | button的风格，1.success2.normal |
  |   size   | String  | medium |  button的大小，1.small2.medium  |
  | disabled | Boolean | false  |         是否是禁用状态          |

  

- #### 方法

### 7.多级下拉框 bz-cascader

- #### 使用

  ````html
  <bz-cascader class="cascader" :data="courtInfo" v-model="court"></bz-cascader>
  ````

  

- #### 属性

  |    属性     |  类型  | 默认值 |       说明       |
  | :---------: | :----: | :----: | :--------------: |
  | placeholder | String | 请选择 |      占位符      |
  |    data     | Array  |   []   | 下拉框绑定的数据 |
  |    model    | String |   ''   |     选中的值     |

  

- #### 方法

  | 方法名 |       作用       |     回调     |
  | :----: | :--------------: | :----------: |
  | change | 监听用户选择操作 | 返回选中的值 |

### 8.多选框 bz-checkbox

- #### 使用

  ````html
  <bz-checkbox class="checkbox" :label="items.answer" v-model="items.isCheck"></bz-checkbox>
  ````

  

- #### 属性

  | 属性  |      类型      | 默认值 |        说明        |
  | :---: | :------------: | :----: | :----------------: |
  | value |    Boolean     | false  | 当前选项是否被选中 |
  | label | String, Number |   -    |    选项绑定的值    |
  | slot  |    template    |   -    |   当前选项的插槽   |

  

- #### 方法

  | 方法名 |       作用       |     回调     |
  | :----: | :--------------: | :----------: |
  | change | 监听用户选择操作 | 返回选中的值 |

  

### 9.日期选择框 bz-datePicker

- #### 使用

  ````html
  <bz-date-picker class="start" :startDate="today" v-model="today"></bz-date-picker>
  ````

- #### 属性

  |    属性     |  类型  | 默认值 |        说明        |
  | :---------: | :----: | :----: | :----------------: |
  |    value    | String |   ""   |    选择的日期值    |
  | placeholder | String | 请选择 |       占位符       |
  |  startDate  | String |   -    | 日期组件开始的日期 |
  |   endDate   | String |   -    | 日期组件结束的日期 |

  <font color="#660000">后续版本可能会新增支持输出日期格式的设定，例如时间戳、yyyy-MM-dd </font>

- #### 方法

  | 方法名 |         作用         |      回调      |
  | :----: | :------------------: | :------------: |
  | change | 监听用户选择日期操作 | 返回选中的日期 |

### 10.窗口 bz-page

- #### 使用

  ````html
  <bz-page title="电子阅卷" :other="'(' + dataInfo.length + ')'" isBack></bz-page>
  ````

  

- #### 属性

  |   属性    |     类型     | 默认值 |                           说明                           |
  | :-------: | :----------: | :----: | :------------------------------------------------------: |
  |  isBack   |   Boolean    | false  |                      是否有返回按钮                      |
  |  isClose  |   Boolean    |  true  |                      是否有关闭按钮                      |
  |   title   |    String    |   ""   |                         页面标题                         |
  |   other   |    String    |   ""   |                     页面标题辅助字段                     |
  |  return   |   Function   |   -    |                    返回按钮绑定的事件                    |
  |   close   |   Function   |   -    |                    关闭按钮绑定的事件                    |
  | main-slot |   Template   |   -    |                      主要内容的插槽                      |
  |   slot    |   Template   |   -    |       1.name为left左边插槽，2.name为right右边插槽        |
  | ~~slot~~  | ~~Template~~ | ~~-~~  | ~~无数据的空白页，即将废弃，后续会调整为数据驱动型组件~~ |

- #### 方法

### 11.滚动列表 bz-scrollBox

- #### 使用

  ````html
  <bz-scroll-box class="info-box"></bz-scroll-box>
  ````

  

- #### 属性

  | 属性 |   类型   | 默认值 | 说明 |
  | :--: | :------: | :----: | :--: |
  | slot | template |   -    | 插槽 |

  

- #### 方法

  |  方法名  |       作用       |     回调     |
  | :------: | :--------------: | :----------: |
  | onScroll | 监听用户滚动操作 | 滚动事件参数 |
  
  

### 12.文本域 bz-textarea

- #### 使用

  ````html
  <bz-textarea class="textarea" placeholder="请输入现住地" :statistics="false" v-model="item.Address"></bz-textarea>
  ````

  

- #### 属性

  |    属性     |      类型      | 默认值 |             说明             |
  | :---------: | :------------: | :----: | :--------------------------: |
  |    model    | String，Number |   -    |          文本域的值          |
  | placeholder |     String     |   -    |         文本域占位符         |
  | statistics  |    Boolean     |  true  | 是否展示文本域输入的长度统计 |
  |    total    | String，Number |  140   |      文本域最大长度限制      |

  

- #### 方法

  

### 13.进度条 bz-progress

- #### 使用

  ````html
  <bz-progress class="progress" :val="activeIndex + 1" :total="dataInfo.length"></bz-progress>
  ````

  

- #### 属性

  |    属性    |      类型       |          默认值          |         说明         |
  | :--------: | :-------------: | :----------------------: | :------------------: |
  |    val     |     Number      |            1             | 进度条占总长度的份数 |
  |   total    |     Number      |            1             |        总份数        |
  |   length   |     Number      |           426            |    进度条的总宽度    |
  |  boxColor  | String（color） | rgba(145, 167, 255, 0.5) |     进度条的底色     |
  | blockColor | String（color） |         \#3c62fb         |     进度条的颜色     |

  

- #### 方法



## API

### 1.加载框 $loading

- #### 使用

  ````js
  this.$loading.show()
  ````

  

- #### 属性

  -

- #### 方法

  | 方法名 |     作用     | 回调 |
  | :----: | :----------: | :--: |
  |  show  | 显示加载动画 |  -   |
  |  hide  | 关闭加载动画 |  -   |


### 2.模态弹框$showModal

- #### 使用

  ```js
  this.$showModal()
  ```

  

- #### 属性

  |    属性     |   类型   | 默认值 |                     说明                     |
  | :---------: | :------: | :----: | :------------------------------------------: |
  |    title    |  String  |   ""   |                     标题                     |
  |    type     |  String  | normal | 弹框类型 默认为normal类型 custom为自定义类型 |
  |  template   | Template |   -    |             自定义插入的html片段             |
  | showCancel  | Boolean  |  true  |               是否隐藏取消按钮               |
  | showConfirm | Boolean  |  true  |               是否隐藏确定按钮               |
  | confirmText |  String  |   ""   |                 确定按钮文字                 |
  | cancelText  |  String  |   ""   |                 取消按钮文字                 |
  |    init     | Function |   -    |              组件初始化后的方法              |
  |   cancel    | Function |   -    |             cancel按钮绑定的方法             |
  |   confirm   | Function |   -    |            confirm按钮绑定的方法             |

- #### 方法

  |  方法名  |            作用             |         回调          |
  | :------: | :-------------------------: | :-------------------: |
  | getValue | 获取组件内部字段名为key的值 | 返回传入key字段名的值 |
  | setValue | 设置组件内部的字段名为key值 |           -           |
  |  close   |        关闭/销毁组件        |           -           |

### 3.消息提示$showToast

- #### 使用

  ```js
  this.$showToast('提示')
  ```

- #### 属性

  | 属性 |  类型  |    默认值    |        说明        |
  | :--: | :----: | :----------: | :----------------: |
  | text | String |     提示     |   消息提示的内容   |
  | time | Number | 3000（毫秒） | 消息提示消失的时间 |

- #### 方法

  -

### 4.预览$preview

- #### 使用

  ```js
  that.$preview({});
  ```

- #### 属性

  |   属性   |  类型   | 默认值 |        说明        |
  | :------: | :-----: | :----: | :----------------: |
  |   type   | String  | image  |     预览的类型     |
  |  array   |  Array  |   -    |     预览的数据     |
  |  index   | Number  |   0    | 预览数据显示的索引 |
  | isDelete | Boolean |   -    |  是否显示删除按钮  |
  | isPrint  | Boolean |   -    |  是否显示打印按钮  |

- #### 方法

  -

### 


## 版本更新规则：

版本格式：主版本号.次版本号.修订号，版本号递增规则如下：

主版本号：当你做了不兼容的 API 修改，
次版本号：当你做了向下兼容的功能性新增，
修订号：当你做了向下兼容的问题修正。

例如：我原本的项目是1.0.0版本的话
若是1中情况，变为1.0.1
若是2中情况，变为1.1.0
若是3中情况，变为2.0.0

通过npm version <update_type>自动改变版本
update_type为patch, minor, or major其中之一，分别表示补丁，小改，大改。

---
_Source: https://npm.io/package/bzfar-ui · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._