lm-ui-element v0.7.7
#龙马UI lm-ui
安装
首先创建项目,使用vue-cli3创建项目
vue create lm-ui-element-test
创建好后,进入项目文件夹lm-ui-element-test,先安装element-ui,然后安装lm-ui-element
安装element-ui
npm i element-ui
使用npm安装
npm i lm-ui-element
使用cnpm安装
cnpm i lm-ui-element
main.js
import Vue from 'vue'
import App from './App.vue'
/**
* 除了lm-calendar组件,其他组件均依赖element-ui,所以请先引入element-ui
*/
import ElementUi from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import LmUIElement from 'lm-ui-element' //引入lm-ui-element
import 'lm-ui-element/lib/lm-ui-element-style/index.css' //引入样式文件
Vue.use(ElementUi)
Vue.use(LmUIElement)
Vue.config.productionTip = false
new Vue({
render: h => h(App)
}).$mount('#app')
使用
安装好后可直接在项目中使用 App.vue
<template>
<div class="exampleBox">
<div class="lm-ui-title rowCenter">
<strong>龙马-ui</strong>
</div>
<div class="componentsBox">
<div class="componentItemBox columnCenter">
<lm-calendar></lm-calendar>
<el-button type="text">日历</el-button>
</div>
<el-form width="1000">
<el-row>
<lm-input></lm-input>
<lm-select></lm-select>
</el-row>
<el-row>
<lm-date-time></lm-date-time>
<lm-cascader></lm-cascader>
</el-row>
</el-form>
</div>
</div>
</template>
自定义主题
lm-ui-element基于element-ui,除了不依赖element-ui的组件,其他组件的主题,请直接使用element-ui的主题设定方式
组件
lm-calendar 日历
日历组件,提供日历基础显示功能以及数据插入功能(有数据标志),日期点击,月份切换等
基础用法
<lm-calendar></lm-calendar>
Attributes
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
initDate | 初始化日期值 | String / Date / Number | -- | new Date() |
width | 日历宽度 | String / Number | -- | 100% |
height | 日历高度 | String/ Number | -- | 100% |
calendarClass | 日历自定义样式类名 | String | -- | -- |
titleClass | 年月标题自定义样式类名 | String | -- | -- |
titleH | 年月标题高度 | String / Number | -- | 35px |
titleBk | 年月标题颜色 | String | -- | #ffffff |
bodyBk | 日历体背景 | String | -- | #ffffff |
bodyClass | 日历体自定义样式类名 | String | -- | -- |
dateDefaultClass | 自定义日期默认类名 | String | -- | -- |
dateActivDateClass | 自定义日期选中类名 | String | -- | -- |
dateDisabledDateClass | 自定义日期不可用类名 | String | -- | -- |
titleDateConnector | 标题日期连接符 | String | -- | -- |
insertData | 插入的数据 | Array | -- | [] |
weeks | 日历头部周数据 | Array | -- | '日','一','二','三','四','五','六' |
dateProp | 自定义表示时间的字段 | String | -- | -- |
calenCellClass | 日历单元格自定义样式 | String | -- | -- |
firstRowCellClass | 日历第一行单元格自定义样式 | String | -- | -- |
cellBorder | 是否有边框 | Boolean | -- | -- |
cellTitleHeight | 日历标题高度 | String / Number | -- | 40px |
cellTitleColor | 日历标题颜色 | String | -- | #333333 |
options | 配置 | Object | -- | { range:[] } |
Slots
name | 说明 |
---|---|
calendarTitle | 日历顶部标题内容 |
calendarHead | 日历头内容 |
changeMonthBtn | 月份切换按钮 |
weeks | 日历头部周数据 |
day | 日期 |
haveDataTag | 有数据标志 |
Events
事件名 | 说明 | 回调参数 |
---|---|---|
getChooseDate | 选择日期 | (date:String) |
monthChange | 月份改变 | (date:String) |
使用示例
<template>
<div class="canlendarExample">
<lm-calendar ref="canlendar" @getChooseDate="checkDate=>date=checkDate" :insert-data="insertData" :options="{range:['',new Date()]}" date-prop="hasDataDate" @monthChange="v=>date=v">
<template #weeks>
<div class="weeksBox rowCenter">
<div class="weekItem rowCenter font16" v-for="(week,index) in weeks" :key="week">
<span class="week">{{week}}</span>
<span class="rightLine verticalLine"></span>
<span class="leftLine verticalLine" v-if="index===0"></span>
</div>
</div>
</template>
<template #calendarHead="{currentYear,currentMonth,changeMonth}">
<div class="canlendar-top-box">
<div class="canlendar-top-inner-box rowCenter">
<div class="rowCenter year-back-box">
<span class="changeMonth rowCenter el-icon-caret-left" @click="changeMonth(0)"></span>
<strong style="margin:0 20px;">{{date}}</strong>
<span class="changeMonth rowCenter el-icon-caret-right" @click="changeMonth(1)"></span>
</div>
<span class="violet back-today font14 rowCenter" @click="changeMonth(2)">返回今天</span>
</div>
</div>
</template>
<template #haveDataTag="{day}">
<div class="haveDataTag rowCenter font12 violet"></div>
</template>
<template #day="{day,index}">
<div class="dayBox columnStart" :class="[day.dateClass,index%7===0 ? 'dayBorderLeft' : '',index<7 ? 'dayBorderTop' : '']">
<span class="font30 daySpan">{{day.day}}</span>
<div class="otherDataBox font20 rowBtween">
<i class="iconfont icon-weather-qing" :style="{color:'#333333'}"></i>
<i class="iconfont icon-weather-duoyun" :style="{color:'#333333'}"></i>
<i class="iconfont icon-weather-xiaoyu" :style="{color:'#333333'}"></i>
<i class="iconfont icon-weather-yin" :style="{color:'#333333'}"></i>
</div>
</div>
</template>
</lm-calendar>
</div>
</template>
<script>
import {formatDate} from "lm-ui-element/lib/utils/global-methods";
export default {
name: "LmCanlendarComponent",
components: {},
props: {},
data() {
return {
insertData: [],//插入的数据
date:'',//日期
changeMonth:null,//月份改变函数
weeks:['星期日','星期一','星期二','星期三','星期四','星期五','星期六'],
}
},
computed: {},
created() {
this.date=formatDate(new Date(),'-')
let roundNumArr=[]
for(let i=0;i<10;i++){
let roundNum=Math.floor(Math.random()*(28-1+1)+1)
roundNum<0 && (roundNum='0'+roundNum)
roundNumArr.push(roundNum)
}
let year=new Date().getFullYear()
let month=new Date().getMonth()+1
month<0 && (month='0'+month)
for(let i=0;i<roundNumArr.length;i++){
this.insertData.push({
hasDataDate:`${year}-${month}-${roundNumArr[i]}`
})
}
},
mounted() {
},
methods: {
//月份改变
getMonthChange({changeMonth,currentYear,currentMonth,type}){
//console.log(currentYear,currentMonth)
let currentMonthArr=[currentMonth-1,currentMonth+1]
this.$sunRainMethods.getMonthChange(changeMonth,type,{currentYear,currentMonth:currentMonthArr[type],that:this})
},
},
watch: {}
}
</script>
<style lang="scss" scoped type="text/scss">
@import "lm-ui-element/lm-ui-element-style/src/common/mix";
.canlendarExample{
.customCalendarHeadBox{
background:#ffffff;
padding:20px;
border-bottom:solid 1px #dddddd;
.monthBox{
.changeMonthBtnBox{
width:50px;
font-weight: bold;
margin-right:20px;
cursor:pointer;
}
.monthTextBox{
strong{
cursor:default;
letter-spacing: 2px;
}
}
}
}
.canlendar-top-box{
margin-bottom:20px;
.canlendar-top-inner-box{
width:100%;
position: relative;
.year-back-box{
.changeMonth{
width: 38px;
height: 38px;
background: #FFFFFF;
border: 1px solid #CCCCCC;
border-radius: 2px;
cursor:pointer;
}
}
.back-today{
margin-right:10px;
cursor:pointer;
@include positionTopRightSizeIndex($width:auto,$height:auto,$translateX:-50%,$translateY:-50%,$top:50%);
}
}
}
.dayBox{
height:40px;
border-right:solid 1px #cccccc;
border-bottom:solid 1px #cccccc;
padding:10px 0 10px 15px;
align-items: flex-start;
position: relative;
}
.dateDefaultCss{
.daySpan{
color:#333333;
}
}
.dateActiveCss{
background:rgba(84, 94, 188, 0.2);
.daySpan{
color:#333333;
}
}
.disableDateCss{
}
.dayBorderLeft{
border-left:solid 1px #cccccc;
}
.dayBorderTop{
border-Top:solid 1px #E7E9FC;
}
.haveDataTag{
@include positionLeftBottomSizeIndex($width:6px,$height:6px,$radius:50%,$bottom:10px,$left:50%,$translateX:-50%);
background:#37C37C;
}
.otherDataBox{
flex-wrap:wrap;
@include positionTopRightSizeIndex($width:50%,$height:72px,$top:5px,$right:1px);
.iconfont{
width:50%;
}
}
.weeksBox{
width:100%;
.weekItem{
height:48px;
width:14%;
border-top:solid 1px #cccccc;
border-bottom:solid 1px #cccccc;
background:#ebeef5;
position: relative;
.week{
}
.verticalLine{
background:#cccccc;
@include positionTopRightSizeIndex($width:1px,$height:48px);
}
.leftLine{
left:0;
}
}
}
}
</style>
<style>
.canlendarExample .calen-cell{
margin-bottom:0 !important;
}
.canlendarExample .body-title{
border-bottom:solid 1px #cccccc;
border-top:solid 1px #cccccc;
background:#eeeeee;
}
</style>
表单组件
表单组件共有lm-input输入框,lm-select选择框(包含单个下拉选择,多个下拉先选择,单项选择radio,),lm-date-time时间日期选择器,lm-cascader级联选择器
lm-form 表单组件包含 lm-input、lm-select、lm-date-time 、lm-cascader 组件 表单组件必须包含在 element-ui 的 el-form 组件和 el-row 组件中,请确保引入了element-ui 的 ElFrom、ElFormItem、ElRow 组件 表单组件支持表单状态(可编辑修改)和查看状态,不可见状态的切换,只需根据条件设置is-edit属性和disabled属性即可。
所有表单组件Attributes
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
span | 位置占位 | Number | 同 el-col 的span属性 | 12 |
label | 标题 | String | -- | '' |
prop | 验证属性值 | String | -- | '' |
width | 宽度 | Number / String | -- | -- |
height | 高度 | Number / String | -- | -- |
size | 尺寸 | String | medium / small / mini | -- |
labelWidth | 表单项文字宽度 | String | -- | -- |
isEdit | 是否是编辑状态 | Boolean | -- | true |
spanStyle | 查看状态下样式 | Object | -- | {} |
lmRef | 标志以及按回车下一次跳转标志 | Array | -- | [] |
disabled | 是否禁用 | Boolean | -- | -- |
required | 是否必须 | Boolean | -- | -- |
marginBottom | 表单项下边距 | String | -- | -- |
lm-input 输入框
Attributes
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
value | 值 | String / Number | -- | -- |
appendText | 尾部文字 | String | -- | -- |
appendIcon | 尾部图标 | String | -- | -- |
placeholder | placeholder | String | -- | 请输入 |
type | 类型 | String | text,textarea 和其他 原生 input 的 type 值 | text |
prefixIcon | 输入框前置图标 | String | -- | -- |
maxlength | 最大长度 | String / Number | -- | -- |
minlength | 最小长度 | String / Number | -- | -- |
min | 最小值 | Number | -- | -- |
max | 最大值 | Number | -- | -- |
toFixed | 保留的小数 | Number | -- | -- |
autosize | type="textarea"有效,自动尺寸 | Boolean / Object | -- | { minRows: 2 } |
elAuto | 是否启用el-autocomplete组件 | Boolean | -- | -- |
valueKey | elAuto=true 有效,el-autocomplete输入建议对象中用于显示的键名 | String | -- | name |
placement | elAuto=true 有效,el-autocomplete菜单弹出位置 | String | -- | -- |
triggerOnFocus | elAuto=true 有效,el-autocomplete组件是否在输入框 focus 时显示建议列表 | Boolean | -- | false |
inputQueryData | elAuto=true 有效,el-autocomplete输入框建议数据 | Array | -- | [] |
Events
事件名 | 说明 | 回调参数 |
---|---|---|
change | 输入框改变 | (any) |
enter | 回车事件 | -- |
lm-select 下拉选择框和单选按钮
Attributes
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
value | 值 | String / Number /Array | -- | -- |
formType | 表单类型 | String | radio / multiSelect | select |
list | 尾部图标 | Array | -- | '否','是' |
placeholder | placeholder | String / Array | -- | 请选择 |
selectClass | select类名 | String | -- | -- |
oName | 选项文字 | String / Array | -- | name |
oValue | 选项值 | String / Array | -- | value |
filterable | 是否可搜索 | Boolean | -- | true |
changeFun | 下拉框改变的函数 | Function / Array | -- | -- |
multiMargin | 多个下拉框的边距 | String | -- | 0 10px 0 0 |
multiList | 多个下拉框的数据 | Array | -- | -- |
Events
事件名 | 说明 | 回调参数 |
---|---|---|
change | 下拉框,单选框改变 | (value:Object/Array) |
lm-date-time 日期时间选择器
Attributes
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
value | 值 | String / Number /Array / Date | -- | -- |
formType | 表单类型 | String | rangeDateTime | dateTime |
dateTimeType | 日期时间类型(同element-ui el-date-picker) | String | year/month/date/dates/ week/datetime/datetimerange/ daterange/monthrange | date |
placeholder | placeholder | String / Array | -- | 请选择 |
defaultDateTimeValue | 默认值 | String / Array / Date / Number | -- | -- |
dateTimeValueFormat | 时间格式(格式同element-ui el-date-picker) | String | -- | -- |
dateTimeFormat | 时间格式(格式同element-ui el-date-picker) | String | -- | -- |
pickerOptions | 时间日期配置(配置内容同element-ui el-date-picker配置,formType=rangeDateTime时晴传数组) | Object / Array | -- | -- |
conectionText | formType=rangeDateTime有效,时间范围连接符 | String | -- | - |
Events
事件名 | 说明 | 回调参数 |
---|---|---|
change | 事件日期改变 | (date:String/Number/Date/Array) |
lm-cascader 级联选择器
Attributes
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
value | 值 | String / Number | -- | -- |
placeholder | placeholder | 请选择 | ||
options | 数据 | Array | -- | -- |
oName | 选项文字 | String | -- | name |
oValue | 选项值 | String | -- | value |
filterable | 是否可搜索 | Boolean | -- | true |
pickerOptions | 级联配置(配置内容同element-ui el-cascader配置 props) | Object | -- | -- |
代码示例
<template>
<el-form :model="form" ref="form" :rules="rules" class="form" label-width="110px" size="mini">
<el-row >
<lm-input label="姓名:" v-model="form.name" prop="name" :lm-ref="['name','phoneNum']" :maxlength="20"/>
<lm-input label="手机号:" v-model="form.phoneNum" prop="phoneNum" type="tel" :lm-ref="['phoneNum','orgId']" v-if="!isCert"/>
</el-row>
<el-row >
<lm-select form-type="select" label="公司:" v-model="form.orgId" :list="addPersonCompanys" prop="orgId" :lm-ref="['orgId','idcard']" @change="companyChange" :disabled="!!personDetailInfo.position"/>
<lm-input label="身份证号:" v-model="form.idcard" prop="idcard" :lm-ref="['idcard','sex']" type="idcard"/>
</el-row>
<el-row>
<lm-select form-type="radio" label="性别:" v-model="form.sex" :list="['女','男']" prop="sex"/>
<lm-date-time
label="出生日期:"
prop="birthday"
v-model="form.birthday"
:picker-options="{disabledDate:birthdayDisableFun}"
:default-date-time-value="Date.now()-10*365*24*60*60*1000"
/>
</el-row>
<el-row>
<lm-date-time :span="16" form-type="rangeDateTime" label="有效时间:" prop="effectiveTime" :placeholder="['请选择开始时间','请选择结束时间']" :disabled="[false,true]" v-model="form.effectiveTime" :width="220">
<template #dateTimeConection><span style="display: inline-block; margin:auto 10px;">至</span></template>
</lm-date-time>
</el-row>
<el-row>
<el-button type="primary" @click="savePersonInfo" style="width:90px;height:40px;">保存</el-button>
</el-row>
</el-form>
</template>
<script>
import {validPhone,validIDCard} from 'lm-ui-element/lib/utils/lm-validate-methods'
export default {
data(){
return {
form:{},//表单
rules: {
orgId: [{required: true, message: "请选择公司", trigger: ['blur', 'change']}],
name: [{required: true,message: '请输入姓名'},{min: 1,max: 10,message: '长度在 1 到 10 个字符'}],
phoneNum: [{required: true,message: '请输入联系方式',validator: validPhone},{min: 11,max: 11,message: '11位长度'}],
sex: [{required: true,message:'请选择性别',trigger: ['blur', 'change']}],
idcard: [{required: true,validator:validIDCard, trigger: ['blur', 'change']}],
birthday: [{required: true,message: '请选择出生日期', trigger: ['blur', 'change']}],
effectiveTime:[{
required: true,
validator:(rule, value, callback)=> validRangeDateTime(rule, value, callback,'请选择有效日期',this.idcardIsLongPeriod,{startRequired:true}),
trigger: ['blur', 'change']}],
},//实名表单验证
inputWidth:300,
},
},
methods: {
//保存信息
async savePersonInfo(){
await this.$refs.form.validate()
//console.log(this.form)
},
//分包单位改变
companyChange({value}){
//console.log(value)
},
},
}
</script>
地址选择组件
自带中国省市区县地址数据,组件较大,请按需引入。提供地址选择,地址搜索,根据地址获取经纬度功能
使用地址组件,请确保在项目中引入高德地图或者百度地图(0.7.6版本开始支持),确保AMap或者BMapGL或者BMap实例正确初始化,也可以不初始化地图实例,使用web服务api
以高德地图为例,实例初始化可在入口html文件,即index.html中引入 示例:
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=你的key"></script>
如果使用vue-amap的则要在main.js中引入 示例:
import VueAMap from 'vue-amap'; // 高德地图
VueAMap.initAMapApiLoader({
key:'你的key',
plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor', 'AMap.Geolocation', 'AMap.DistrictSearch'],
v: '1.4.4',
uiVersion: '1.0.11', // 版本号
})
严格来说地址组件也属于表单组件,lm-address组件必须包含在element-ui的el-form组件内部,lm-address默认占一行的位置,所以通常情况下,你不需要在lm-address外面套上el-row,也没有span属性 需要做表单校验的,可以从'lm-ui-element/lib/utils/lm-validate-methods'引入validAddressInfo进行校验,校验rule规则同element-ui的表单校验。或者自定义校验方法。
lm-address支持表单状态(可编辑修改)和查看状态,不可见状态的切换,只需根据条件设置is-edit属性和disabled属性即可。
当你在页面中直接从编辑状态切换到查看状态时,地址显示数据可能不能正确更新,可以使用setFullAddress方法解决
由于获取经纬度是异步的,有可能用户点击保存的时候,经纬度还没获取到或者还没更新,这时候如果直接保存,经纬度数据就不正确。 解决方案:lm-address 提供了addressChange事件,你可以在使用的组件中声明变量来确定是否获取到了经纬度,默认false,当获取到经纬度后改为true,addressChange事件触发时,改为false,这样就可以确保用户提交后的经纬度数据为正确数据
通过web api调用高德配置amap-key属性,百度地图配置bmap-key属性
当高德地图和百度地图均有配置时,只会使用高德地图
基础用法
<template>
<el-form ref="form" :rules="rules" :model="form" label-width="120px">
<lm-address v-model="form.address"/>
</el-form>
</template>
<script>
import {validAddressInfo} from 'lm-ui-element/lib/utils/lm-validate-methods'
export default {
data(){
return {
form:{},//表单
rules: {
address:[{validator:validAddressInfo,trigger:['blur']}],
},
}
}
}
</script>
Attributes
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
required | 是否必须 | Boolean | -- | true |
title | 标题 | String | -- | 选择地址 |
maxlength | 最大长度 | String / Number | -- | -- |
showStreet | 是否显示输入详情地址 | Boolean | -- | true |
defaultAddress | 默认地址 | Object | -- | -- |
isEdit | 是否为编辑状态 | Boolean | -- | true |
size | 尺寸 | String | -- | -- |
inputWidth | 详情地址输入框宽度 | Number / String | -- | 'auto' |
filterable | 省市区选择栏是否可搜索 | Boolean | -- | true |
elAuto | 是否选择el-autocomplete组件(用于自动搜索匹配的目标地址) | Boolean | -- | true |
valueKey | elAuto为true有效,el-autocomplete组件输入建议对象中用于显示的键名 | String | -- | name |
placement | elAuto为true有效,el-autocomplete组件菜单弹出位置 | String | -- | -- |
triggerOnFocus | elAuto为true有效,el-autocomplete组件是否在输入框 focus 时显示建议列表 | Boolean | -- | -- |
maxlength | 地址输入框的最大长度 | String,Number | -- | -- |
selectWidth | 下拉框宽度 | String,Number | -- | -- |
disabled | 是否可见 | Boolean,Array | -- | -- |
getLngLat | 是否获取默认经纬度 | Boolean | false | true |
amapKey | 高德地图web服务api key | String | -- | -- |
bmapKey | 百度地图web服务api key | String | -- | -- |
bmapRetCoordtype | 百度地图经纬度类型 | String | -- | gcj02ll |
Events
事件名 | 说明 | 回调参数 |
---|---|---|
addressChange | 地址发生变化 | (address:Object) |
getLngLatInfo | 获取经纬度 | ({lng:String,lat:String}:Object) |
provinceChange | 省发生改变回调 | (address:Object) |
cityChange | 市发生改变回调 | (address:Object) |
districtChange | 区县发生改变回调 | (address:Object) |
streetChange | 详细地址发生改变回调 | (address:Object) |
Methods
方法名 | 说明 | 参数 |
---|---|---|
setFullAddress | 设置地址全名(用于查看状态下) | (address:String) |
使用示例
<template>
<div>
<el-button @click="isEdit=!isEdit">{{isEdit ? '查看' : '编辑'}}</div>
<el-form ref="form" :rules="rules" :model="form" label-width="120px">
<lm-address
v-model="form.companyAddress"
:is-edit="isEdit"
ref="address"
@getLngLatFun="getLngLatInfo"
title="公司地址:"
input-width="300px"
address-prop="companyAddress"
@addressChange="isGetLonLat=false"
:disabled="[true,false,true,fasle]"
/>
</el-form>
<div>
<el-button @click="cancel"></el-button>
<el-button type="primary" @click="save"></el-button>
</div>
</div>
</template>
<script>
import {validAddressInfo} from 'lm-ui-element/lib/utils/lm-validate-methods'
import axios from 'axios'
export default {
data(){
return {
form:{},//表单
rules: {
companyAddress:[{validator:validAddressInfo,trigger:['blur']}],
},
isEdit:false,//是否编辑
lngLatInfo:{},//经纬度信息
isGetLonLat:false,//是否获取到经纬度
}
},
methods:{
//获取经纬度
getLngLatInfo(lngLatInfo){
this.lngLatInfo=lngLatInfo
// 获取到了经纬度后将isGetLonLat设为true
this.isGetLonLat=true
},
//保存
async save(){
await this.$refs.form.validate()
let {lngLatInfo,form,isGetLonLat}=this
if(!isGetLonLat){
//确保已经获取到了经纬度或者经纬度数据已经更新
this.$message.warning('正在努力获取经纬度,请稍后再试!')
}
let {msg,code}=await axios({
url:'/save',
data:{
...form,
...lngLatInfo
},
method:'POST'
})
this.isEdit=false
//console.log(code+msg)
if(code===1){
//成功
this.$refs.address.setFullAddress(form.addressArea.join(' '))
}
}
}
}
</script>
自定义弹窗组件
使用时请确保引入了element-ui 的 ElButton 组件
基础用法
<template>
<div class="exampleBox">
<el-button type="primary" @click="showDialog=true">打开弹窗</el-button>
<lm-dialog v-if="showDialog" @cancel="showDialog=false" @close="showDialog=false" @sure="sure">
<span>弹窗内容</span>
</lm-dialog>
</div>
</template>
<script>
export default {
data() {
return {
showDialog:false,//是否显示弹窗
}
},
methods: {
sure(){
this.showDialog=false
},
},
}
</script>
Attributes
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
title | 标题 | String | -- | -- |
width | 宽度 | String / Number | -- | 400 |
background | 背景色 | String / Number | -- | 40 |
titleHeight | 标题栏高度 | String | -- | -- |
titleBk | 标题背景色 | String | -- | -- |
titleTextColor | 标题文字颜色 | String | -- | -- |
bottomPadding | 底部内边距 | String / Number | -- | 30 |
contentMarginBottom | 内容底部外边距 | String / Number | -- | 30 |
contentPadding | 内容区域内边距 | String / Number | -- | '30px 20px 10px 20px' |
showFooter | 是否显示底部 | Boolean | -- | true |
saveText | 保存按钮文字 | String | -- | -- |
backText | 返回按钮文字 | String | -- | -- |
btnWidth | 按钮宽度 | String | -- | 100px |
btnHeight | 按钮高度 | String | -- | 40px |
showLoading | 是否显示保存按钮的加载状态 | Boolean | -- | -- |
contentBoxStyle | 内容框样式 | Object | -- | -- |
Slots
name | 说明 |
---|---|
footer | 底部内容 |
Events
事件名 | 说明 | 回调参数 |
---|---|---|
close | 关闭弹窗 | -- |
sure | 点击确定 | -- |
cancel | 点击取消 | -- |
文件图片上传组件
文件上传组件和图片上传组件虽然不是表单,但是是为表单设计的,必须放在element-ui的el-form标签中,基于element-ui的el-upload组件实现,带进度条,删除,预览功能。
0.7.7版本开始支持 v-model
请确保引入了element-ui 的 ElFrom、ElFormItem、ElUpload、ElButton、ElProgress、ElIcon 组件
若需要使用拍照功能,请确保引入element-ui的el-radio-group和el-radio组件
文件上传组件和图片上传组件支持表单状态(可编辑修改)和查看状态,只需根据条件设置is-edit属性即可
fileList属性和action属性必填
基础用法
<template>
<div>
<el-form>
<lm-up-img :file-list="imgList" action="http:xxx.com/upload"/>
<lm-up-file :file-list="fileList" action="http:xxx.com/upload"/>
</el-form>
</div>
</template>
<script>
export default {
data(){
return{
fileList:[],//文件
imgList:[],//图片
}
}
}
</script>
文件和图片上传组件公用Attributes
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
fileList | 文件/图片数据 | Array | -- | -- |
isEdit | 是否编辑状态 | Boolean | -- | true |
drag | 启用拖拽上传 | Boolean | -- | -- |
limit | 文件限制数量 | Number | -- | -- |
otherData | 上传附带的额外参数 | Boolean | -- | -- |
required | 是否必须 | Array | -- | -- |
hiddenCamera | 是否隐藏拍照 | Boolean | -- | true |
action | 上传地址 | String | -- | -- |
fileBaseUrl | 文件域名 | String | -- | -- |
customPreviewImgMethod | 自定义图片预览方法 | Function | -- | -- |
fileProp | 校验的prop,使用v-model时有效 | String | -- | fileList |
fields | 字段配置,使用v-model时有效 | Object | -- | -- |
resConfig | 返回值配置,使用v-model时有效 | Object | -- | -- |
fields配置说明
字段 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
fileId | 文件路径 | String | -- | fileId |
fileName | 文件名称 | String | -- | fileName |
fileType | 文件类型 | String | -- | fileType |
resConfig配置说明
字段 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
fileId | 文件路径 | String | -- | url |
fileType | 文件类型 | String | -- | fileType |
fileSize | 文件大小 | String | -- | fileSize |
文件和图片上传组件Slots
name | 说明 |
---|---|
fileView | 文件/图片列表内容 |
chooseFileBtn | 选择图片/文件按钮 |
cameraFile | 拍照的文件/图片 |
dragCameraBtn | 拖拽时相机图标 |
cameraBtn | 相机按钮 |
fileMethod | 文件图片上传方式(拍照还是上传) |
文件和图片上传组件Events
事件名 | 说明 | 回调参数 |
---|---|---|
filePreview | 图片文件预览 | (file:File) |
fileChange | 图片文件改变 | ({file:File,fileList:Array}) |
beforeUpload | 图片文件上传之前 | -- |
fileSuccess | 图片文件上传成功 | ({canICommit:Boolean,fileList:Array}) |
delFile | 图片文件删除 | -- |
fileMethodChange | 拍照和上传切换 | -- |
fileErr | 上传出错 | {err,file,fileList} |
文件和图片上传校验
校验函数为 validIsEnd,返回Promise,可以使用ref调用
lm-up-file 文件上传
Attributes
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
label | 表单项标题 | String | -- | isEdit 为true时: '上传文件:,false时: '文件:' |
btnText | 按钮名称 | String | -- | 选择文件 |
fileAccept | 文件类型 | String | -- | .jpg,.jpeg,.png,.pdf,.webp' |
toastText | 提示文字 | String | -- | -- |
cameraText | 相机按钮文字 | String | -- | 点击拍照 |
toastColumn | 相机按钮文字 | String | -- | 点击拍照 |
cameraText | 提示文字是否竖排 | Boolean | -- | -- |
fileListStyle | 文件列表样式 | Object | -- | -- |
multiple | 是否多张 | Boolean | false | true |
overViewAccept | 可预览文件 | Array | -- | '.png','.jpg','.jpeg','.webp','.pdf','.docx' |
Slots
name | 说明 |
---|---|
filePrev | 文件前置内容 |
lm-up-file 图片上传
图片上传组件,如果需要图片裁剪,确保引入lm-ui-element的lm-img-cropper组件。
当图片大于200kb时,默认开启图片压缩
headImg属性为true时,默认开启图片裁剪
Attributes
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
label | 表单项标题 | String | -- | isEdit 为true时: '上传图片:,false时: '图片:' |
imgWidth | 图片宽度 | String / Number | -- | 120px |
imgHeight | 图片高度 | String / Number | -- | 90px |
compressSize | 压缩尺寸 | Object | -- | { width:400 } |
hiddenCropper | 不裁剪图片 | Boolean | -- | true |
headImg | 是否是头像 | Boolean | -- | -- |
multiple | 是否多张 | Boolean | -- | -- |
Slots
name | 说明 |
---|---|
delIcon | 图片删除按钮 |
代码示例
<template>
<div>
<el-form ref="uploadMaterial" label-width="120px" size="small">
<el-row>
<lm-up-img
label="项目鸟瞰图"
:fileList="fileList"
:otherData="{bucketName:'project'}"
@fileSuccess="v=>canICommitImg=v.canICommitImg"
@beforeUpload="canICommitImg=false" multiple
@delFile="canICommitImg=true"
/>
</el-row>
<el-row>
<lm-up-file
:hiddenCamera="true"
:file-list="fileList"
:other-data="{bucketName:'material'}"
@fileSuccess="v=>canICommit=v.canICommit"
@beforeUpload="canICommit=false"
label="上传资料:"
fileAccept="*"
:file-list-style="{'padding-left':'40px'}"
@delFile="canICommitImg=true"
>
<template #filePrev="{fileViewForm,file}">
<el-row style="width:40%;" class="fileViewFormRow">
<lm-input width="200" :span="24" label="文件名称:" v-model="file.name" margin-bottom="0"/>
</el-row>
</template>
</lm-up-file>
</el-row>
</el-form>
<div>
<el-button @click="save">保存</el-button>
</div>
</div>
</template>
<script>
import axios from 'axios'
export default {
data() {
return {
fileList:[],//文件
canICommit:true,//是否可以提交文件
imgList:[],//图片
canICommitImg:true,//是否可以提交图片
}
},
methods: {
//确定上传
async save(){
let {fileList,imgList,canICommitImg,canICommit}=this
if(!canICommit){
this.$message.warning('请等待文件上传完成')
return
}
if(!canICommitImg){
this.$message.warning('请等待文件上传完成')
return
}
let res=await axios.post('/save',{fileList,imgList})
code===0 ? this.$message.success(res.data.msg) : this.$message.warning(res.data.msg)
}
},
}
</script>
使用v-model(0.7.7版本开始支持)
<template>
<el-form v-model="form" :model="form" ref="form" :rules="rules" label-width="120px">
<lm-up-file v-model="form.fileList"
action="/admin/sys-file/upload"
:fields="{fileId:'fileUrl',fileType:'type',fileSize:'size'}"
ref="fileList"
/>
<lm-up-img
v-model="form.imgList"
file-prop="imgList"
action="/admin/sys-file/upload"
:fields="{fileId:'fileUrl',fileType:'type',fileSize:'size'}"
ref="imgList"
/>
<el-row>
<el-button @click="save">保存</el-button>
</el-row>
</el-form>
</template>
<script>
export default {
data() {
return {
form:{},//
rules:{
imgList:[{required:true,message:'请上传图片',trigger:['change','blue']}],
fileList:[{required:true,message:'请上传文件',trigger:['change','blue']}],
},
}
},
methods: {
async save(){
await this.$refs.form.validate()
await this.$refs.fileList.validIsEnd()
await this.$refs.imgList.validIsEnd()
console.log(this.form)
},
},
}
</script>
图片裁剪组件
图片裁剪弹窗组件,基于vue-cropper插件,同时组件内部使用lm-dialog弹窗组件,使用时确保引入element-ui的el-button组件,lm-ui-element的lm-dialog组件
Attributes
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
imgSrc | 裁剪图片的地址 | String / Blob | -- | -- |
info | 显示裁剪框的大小信息 | Boolean | -- | true |
outputSize | 剪切后的图片质量 | Number | 0.1~1 | 1 |
full | 输出原图比例截图 | Boolean | -- | true |
outputType | 裁剪生成额图片的格式 | String | -- | -- |
canMove | 能否拖动图片 | Boolean | -- | true |
original | 上传图片是否显示原始宽高 | Boolean | -- | true |
canMoveBox | 能否拖动截图框 | Boolean | -- | true |
autoCrop | 是否默认生成截图框 | Boolean | -- | true |
autoCropWidth | 裁剪框宽度 | Number | -- | 200 |
autoCropHeight | 裁剪框高度 | Number | -- | 260 |
fixedBox | 截图框固定大小 | Boolean | -- | true |
fileSize | 文件尺寸 | Number | -- | -- |
exampleImg | 示例图片路径 | String | -- | -- |
maxSize | 图片最大值 | String / Number | -- | 200 |
title | 标题 | String | -- | 图片裁剪 |
width | 截图弹窗宽度 | String / Number | -- | 850 |
previewText | 预览文字 | String | -- | 预览 |
exampleText | 示例文字 | String | -- | 示例 |
completeBtnText | 裁剪完成按钮 | String | -- | 裁剪完成 |
cancelBtnText | 取消裁剪按钮 | String | -- | 不裁剪 |
Slots
name | 说明 |
---|---|
footer | 底部内容 |
sizeWarning | 尺寸超出时提示内容 |
Methods
方法名 | 说明 | 参数 | 返回值 |
---|---|---|---|
openDialog | 打开裁剪弹窗 | -- | 点击裁剪成功,返回裁剪的文件对象file,点击关闭无返回值 |
Events
事件名 | 说明 | 回调参数 |
---|---|---|
cropperSuccess | 裁剪成功事件 | (file:File) |
close | 关闭弹窗 | -- |
loading组件
可在main.js中全局引入
import {LmLoading} from 'lm-ui-element'
Vue.use(LmLoading)
Vue.prototype.$lmLoading=LmLoading
页面调用
//显示加载
this.$lmLoading.show()
//改变加载图标颜色,大小
this.$lmLoading.show({color:'#ffffff',size:32})
//关闭加载
this.$lmLoading.hidden()
Slots
name | 说明 |
---|---|
footer | 底部内容 |
sizeWarning | 尺寸超出时提示内容 |
Methods
方法名 | 说明 | 参数 | 返回值 |
---|---|---|---|
openDialog | 打开裁剪弹窗 | -- | 点击裁剪成功,返回裁剪的文件对象file,点击关闭无返回值 |
Events
事件名 | 说明 | 回调参数 |
---|---|---|
cropperSuccess | 裁剪成功事件 | (file:File) |
close | 关闭弹窗 | -- |
公用方法,lm_methods,lm-validate,lm-validate-methods
lm-methods
提供部分公共函数 引用示例:
import {formatDate} from "lm-ui-element/lib/utils/global-methods";
函数名 | 说明 | 参数说明 | 返回值 |
---|---|---|---|
formatDate | 日期格式化,年月日 | 接收两个参数,第一个参数为时间(date:String/Number/Date,connector),第二个参数为日期连接符,默认为'/' | 字符串格式日期 |
formatDateTime | 日期格式化,年月日 时分秒 | 接收两个参数,第一个参数为时间(date:String/Number/Date,connector),第二个参数为日期连接符,默认为'/' | 字符串格式日期 |
noRepeatArrHasObject | 带对象的数组去重 | 接收两个参数,第一个参数为需要去重的目标数组(arr:Array),第二个参数为用于比较的具有唯一值的id属性名(onlyId:String),默认为"id" | 去重后的数组 |
isIEFun | 是否是ie浏览器 | -- | true或false |
isEdgFun | 是否是edg浏览器 | -- | true或false |
compressImageFun | 判断文件类型与压缩图片 | 接收一个对象做参数:{file, width, height, quality = 0.8, maxWidth = 1920, maxHeight = 1080,compressSize=200000,maxSize=9000000},file:File,二进制图片数据;width:Number,图片宽度;height:Number,图片高度;quality:Number,压缩质量,默认0.8,可选值0.1~1;maxWidth:Number,最大宽度,默认1920;maxHeight:Number,最大高度,默认1080;compressSize:Number,图片大于多少开始压缩,单位字节,默认200000字节;maxSize:Number,可接受的最大大小,单位字节,默认9000000字节 | 返回对象:{code:Number,msg:String,data:File}。code=1,成功;code=2成功但压缩后的图片大小大于maxSize;data为二进制文件数据 |
base64ToBlob | 将base64转换为blob | 接收一个参数,base64字符串(base64Str:String) | Blob |
base64ToFile | 将base64转换为file | 接收一个参数,base64字符串(base64Str:String) | File |
toThousands | 金额格式(分隔) | 接收两个参数,第一个参数是数字num:Number,第二个参数是是否带小数isFloat:Boolean,默认true | File |
lm-validate
提供验证函数 引用示例:
import {isvalidPhone} from "lm-ui-element/lib/utils/lm-validate";
函数名 | 说明 | 参数说明 | 返回值 |
---|---|---|---|
isvalidPhone | 验证手机号 | (phone:any) | true或false |
isvalidCardNo | 验证身份证 | (idCard:any) | true或false |
isvalidBankNo | 验证银行卡 | (bankNo:any) | true或false |
isvalidNo | 非数字证验证 | (str:any) | true或false |
isValidDate | 判断日期格式是否正确 | (dateTime:any) | 返回对象,正确时返回{dateTime:Date,isValid:true},错误时返回{isValid:false} |
isNumber | 判断是否为数字,整数或者小数 | (val:any) | true或false |
lm-validate-methods
封装elememt-ui的自定义表单验证方法,rule, value, callback是element-ui自定义验证回调参数 引用用法示例:
import {validPhone} from "lm-ui-element/lib/utils/lm-validate-methods";
data(){
return {
rules:{
mobile: [{required: true, validator:validPhone,trigger: ['blur', 'change']}],
}
}
}
函数名 | 说明 | 参数说明 |
---|---|---|
validPhone | 验证手机号 | (rule, value, callback) |
validIDCard | 验证身份证 | (rule, value, callback,config) ,其中config为配置项,可选配置参数为:maxAge 最大年龄 Number,默认81 ;minAge 最小年龄 Number,默认15 |
validBankNo | 验证银行卡 | (rule, value, callback) |
towPassIsAlike | 两次密码是否一致校验 | (rule, value, callback,confirmPass) ,其中confirmPass为确认密码 |
validAddressInfo | 检查地址是否完善,通常和地址组件lm-address配套使用 | (rule, value, callback,config) ,config为配置对象,可配置参数为:msg 错误信息 String,默认值“请完善地址信息”;isReset 是否是重置表单 Boolean |
validMultiSelect | 多个级联下拉框校验,通常配合lm-select form-type="multiSelect"使用 | (rule, value, callback,length,msg) ,length是下拉框个数 Number,msg是信息 String,默认为“请完善信息” |
validRangeDateTime | 验证时间范围,通常配合lm-date-time form-type="rangeDateTime" 使用, | (rule, value, callback,msg,stopValid) ,其中msg时错误信息 String,默认为“请完善信息”,stopValid为是否停止验证的条件 Boolean |
validateChinese | 中文校验 | (rule, value, callback,config) ,其中config为配置对象,可选参数为:msgs 错误信息,Array,默认值是'请输入' ; min 字符最小长度 Number ;max 字符最大长度 Number ; required 是否必须 Boolean ,默认值true |
validateAbcAndNumber | 字母数字校验 | (rule, value, callback,config) ,其中config为配置对象,可选参数为:msg 错误信息 String,默认值是"请输入数字或者字母" ; min 字符最小长度 Number ;max 字符最大长度 Number ; required 是否必须 Boolean ,默认值true |
validateCertificateNo | 企业资质编号校验 | (rule, value, callback,config) ,其中config为配置对象,可选参数为:msg 错误信息 String,默认值"企业资质编号为中文开头的13~20位字符串"; required 是否必须 Boolean ,默认值true |
validateLngLat | 经纬度校验 | (rule, value, callback,isLgnOrLat) ,isLgnOrLat用于区分 是经度还是纬度 String,可选值有lng 经度,lat 纬度 |
validateAbcAnd_ | 验证字母和下划线正则 | (rule, value, callback,config) ,其中config为配置对象,可选参数为:msg 错误信息 String,默认值是"请输入字母和下划线组成的字符串" ; required 是否必须 Boolean ,默认值true |
挂在在vue原型链上的方法 $lm
有些函数需要挂载到原型链上,主要方便在dom中使用,当然在生命周期和方法中也可以使用。这部分方法统一挂在到$lm下
函数名 | 说明 | 参数说明 |
---|---|---|
dateRangeDisabled | 日期范围内不可见设置 | 接收三个参数,(time, range, config) ,time是时间组件返回的时间 Date;range是时间范围值,由开始时间和结束时间组成的一个数组 Array,第一个值是开始时间 String/Date/Number,第二个值是结束时间 String/Date/Number;config 配置信息,包含startEqual 开始日期是否可以相等 Boolean,endEqual 结束日期是否可以相等 Boolean |
使用示例: 首先在main.js中添加如下代码
import $lm from 'lm-ui-element/lib/utils/$lm'
Vue.use($lm)
使用
<template>
<el-form width="1000" ref="form" :model="form" label-width="100px">
<el-row>
<lm-date-time label="日期范围:" v-model="form.date" form-type="rangeDateTime" width="46%"
date-time-type="datetime"
:picker-options="[
{
disabledDate:(time)=>$lm.dateRangeDisabled(time,[0,form.date ? form.date[1] : new Date()],{endEqual:true})
},
{
disabledDate:time=> $lm.dateRangeDisabled(time,[form.date ? form.date[0] : 0,new Date()],{endEqual:true,startEqual:true})
}
]"
/>
</el-row>
</el-form>
</template>
<script>
export default {
data(){
return{
form:{},//表单
}
}
}
</script>
3 years ago
3 years ago
3 years ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago