#龙马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>