bzcy-ui2022 v0.0.4
BZ-UI 文档
介绍说明
为什么要使用组件化和模块化开发?
- 项目或者业务越来越复杂的情况下,组件化开发更适合快速迭代,在添加修改组件时候不需担心影响其他组件
- 解决业务模块划分不清晰,耦合度大,较难维护
- 可单独开发,测试,发布一个组件,不需要像以前一样开发完某个功能,就需要编译、运行、打包整个项目
- 某个组件出现问题,可直接对组件进行处理,不必担心会因为修改而影响到整个项目
如果有新人的加入,可以直接分配模块进行开发,而非需要熟悉整个项目,可以从一个模块的开发使新进人员比较快速熟悉项目、了解到开发规范
组件类型
1. 模块组件
说明
模块化组件指的是将某个页面进行拆分成一个一个模块,这样可以降低耦合度
例子
<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等
例子
<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方式导入,通过标签化进行调用
例子
<bz-date-picker class="start" :startDate="today" v-model="today" ></bz-date-picker>
参数
props: { value: { type: String, default: "", }, placeholder: { type: String, default: "请选择", }, startDate: { type: String, default: "", //日期开始时间 }, endDate: { type: String, default: "", //日期结束时间 }, },
方法
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中 :参数 ,语法
组件内向组件外传值
this.$emit("onchange", 'test');
组件外部调用组件内部方法
<bz-date-picker class="start" :startDate="today" v-model="today" @onchange="onchange"></bz-date-picker>
function onchange(val){ console.log(val) }
2. 事件驱动型组件
说明
通过点击事件或者某些操作才能触发的组件。
我们在开发中往往会遇到多个页面都需要用到同一个组件,而这些组件并不会在页面渲染后就直接展示在页面上,需要通过某些操作或者场景才会触发,而在以前我们往往会在每个页面进行引用,这样会导致很多冗余的代码,使用事件驱动型的思想来封装组件能让我们的代码更加优美,我们只有在需要用的时候才调用组件,而vue的原型方法就为我们提供了很好的途径。
原理
使用vue提供的render函数,将组件绑定在vue的原型上。
例子
/* 自定义 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(); } }; } }
参数
const INITDATA = { title: '提示', //标题 type: 'normal', //弹框类型 //默认为normal类型 custom为自定义类型 template: '', //自定义插入的模板 showCancel: true, //是否隐藏取消按钮 showConfirm: true, //是否隐藏确定按钮 confirmText: '确定', //确定按钮文字 cancelText: '取消', //取消按钮文字 countDown: 10, //倒计时 init: function () {}, //组件初始化后的方法 cancel: function () {}, //cancel按钮方法 confirm: function () {}, //确认按钮的方法 }
方法
组件内方法
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); } },
组件外方法
//获取组件内的属性 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中引用
// 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中如下使用
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; }, });
通信
单向通信
this.$showModal(obj)//obj是向组件传入的参数
双向通信(实现双向绑定)
组件内向组件外传值
this.$showModal.getValue(key)//key指的是获取组件的某一个定义的变量
组件外向组件内传值
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的方法
Vue.prototype.$showModal['close'] = function () { //执行。。。 }
组件目录
showModal - index.js ------------------------------------组件主要的逻辑写在这里 - index.css ------------------------------------组件样式写在这里 - img -------------------------------------可能需要引用的icon或者图片放在这里 - js -------------------------------------可能需要引用的js文件放这个文件夹
UI
1.输入框 bz-input
使用
<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 左边插入文字,即将弃用,推荐slot插槽用法 right Boolean false 右边插入文字,即将弃用,推荐slot插槽用法 slot Template - 目前有两个插槽:1.left-icon,input左边插槽,2.right-icon,input右边插槽
2.下拉框 bz-select
使用
<bz-select placeholder="请选择" @change="change" v-model="yg" size="mini" ref="yg" :disabled="value == 'bg'"></bz-select>
后续版本可能会重新设计select的模式,采取原生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
使用
<bz-image class="img-box" :src="imgList" :obj="obj"></bz-image>
属性
属性 类型 默认值 说明 src Array [] 图片的数组 obj Object {value1:'',value2:'',value3:''} 图片长宽以及旋转后的大小
事件
4.单选框 bz-radio
使用
<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
使用
<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
使用
<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
使用
<bz-cascader class="cascader" :data="courtInfo" v-model="court"></bz-cascader>
属性
属性 类型 默认值 说明 placeholder String 请选择 占位符 data Array [] 下拉框绑定的数据 model String '' 选中的值
方法
方法名 作用 回调 change 监听用户选择操作 返回选中的值
8.多选框 bz-checkbox
使用
<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
使用
<bz-date-picker class="start" :startDate="today" v-model="today"></bz-date-picker>
属性
属性 类型 默认值 说明 value String "" 选择的日期值 placeholder String 请选择 占位符 startDate String - 日期组件开始的日期 endDate String - 日期组件结束的日期 后续版本可能会新增支持输出日期格式的设定,例如时间戳、yyyy-MM-dd
方法
方法名 作用 回调 change 监听用户选择日期操作 返回选中的日期
10.窗口 bz-page
使用
<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右边插槽 slotTemplate-无数据的空白页,即将废弃,后续会调整为数据驱动型组件方法
11.滚动列表 bz-scrollBox
使用
<bz-scroll-box class="info-box"></bz-scroll-box>
属性
属性 类型 默认值 说明 slot template - 插槽
方法
方法名 作用 回调 onScroll 监听用户滚动操作 滚动事件参数
12.文本域 bz-textarea
使用
<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
使用
<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
使用
this.$loading.show()
属性
-
方法
方法名 作用 回调 show 显示加载动画 - hide 关闭加载动画 -
2.模态弹框$showModal
使用
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
使用
this.$showToast('提示')
属性
属性 类型 默认值 说明 text String 提示 消息提示的内容 time Number 3000(毫秒) 消息提示消失的时间 方法
-
4.预览$preview
使用
that.$preview({});
属性
属性 类型 默认值 说明 type String image 预览的类型 array Array - 预览的数据 index Number 0 预览数据显示的索引 isDelete Boolean - 是否显示删除按钮 isPrint Boolean - 是否显示打印按钮 方法
-
新增canvans动画
使用
<canvans></canvans>
新增Keyboard虚拟键盘
使用
<Keyboard @onChange="onChange" @onKeyPress="onKeyPress" :input="input"></Keyboard>
属性
属性 类型 默认值 说明 onChange String onChange 监听输入虚拟键盘是否改变 onKeyPress Array - 监听输入虚拟键盘的变化 input String input 预览数据显示的索引