1.0.5 • Published 2 years ago
说明
项目里常用的公共组件封装
特性
安装
# npm方式安装
npm i @ylkh_ui/khzx_uni_ui --save
快速上手
main.js引入组件库
// main.js
import khzx_uni_ui from "@ylkh_ui/khzx_uni_ui";
Vue.use(khzx_uni_ui);
App.vue引入基础样式(注意style标签需声明scss属性支持)
/* App.vue */
<style lang="scss">
@import "@ylkh_ui/khzx_uni_ui/index.scss";
</style>
pages.json配置easycom规则(按需引入)
// pages.json
{
"easycom": {
"^k-(.*)": "@ylkh_ui/khzx_uni_ui/components/$1/index.vue"
},
// 此为本身已有的内容
"pages": [
// ......
]
}
使用方法
配置easycom规则后，自动按需引入，无需import组件，直接引用即可。
<template>
<k-volid></k-volid>
</template>
date-label (日期转换)
参数
| 参数 | 说明 | 类型 | 默认值 |
|---|
| value | 内容值 | String | "" |
| type | 时间类型 dateTime,date,time | String | "dateTime" |
des—num (脱敏组件)
参数
| 参数 | 说明 | 类型 | 默认值 |
|---|
| value | 内容值 | String, Number | "" |
| type | 类型: phone(手机号),idCard(身份证),name(姓名) | String | "phone" |
map (地图选址)
参数
| 参数 | 说明 | 类型 | 默认值 |
|---|
| height | 地图高度 | String | "800rpx" |
| width | 地图宽度 | String | "100%" |
| scale | 缩放级别 | Number | 12 |
| center | 地图中心点(必填) | Array | 118.140239,24.496616 |
事件
| 事件名称 | 说明 | 回调参数 |
|---|
| change | 地图移动选址结束后事件 | Object(locate经纬度，address地址对象) |
multi-select (多选选择组件)
参数
| 参数 | 说明 | 类型 | 默认值 |
|---|
| title | 标题 | String | "" |
| default_index | 默认已选的选项下标 | Array | [] |
| options | key,name 字段名配置 | Object | {key:"key",name:"name"} |
| list | 选项数据 | Array | [] |
| duration | 遮罩打开或收起的动画过渡时间，单位ms | String, Number | 250 |
| style_default | 自定义弹窗样式 | Object | {} |
| maskStyle_default | 遮罩自定义样式 | Object | {} |
| show | 是否显示遮罩 | Boolean | true |
| v-model | 组件显示隐藏 | Boolean | false |
事件
| 事件名称 | 说明 | 回调参数 |
|---|
| tagClick | 选项点击事件 | {data选项item,index下标索引} |
| entTag | 确认选择事件 | {chooseItem选择的项集合(Arry),chooseIndex选择的下标索引集合(Arry)} |
volid (验证码倒计时组件)
参数
| 参数 | 说明 | 类型 | 默认值 |
|---|
| value | 倒计时时间 | Number | 0 |
事件
| 事件名称 | 说明 | 回调参数 |
|---|
| click | 点击开始计时事件 | 无 |
| endTime | 倒计时结束事件 | 无 |