lm-element-plus-test v0.0.2

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

Slots

Events

使用示例

<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

lm-input 输入框

Attributes

Events

lm-select 下拉选择框和单选按钮

Attributes

Events

lm-date-time 日期时间选择器

Attributes

Events

lm-cascader 级联选择器

Attributes

代码示例

<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

Events

Methods

使用示例

<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

Slots

Events

文件图片上传组件

文件上传组件和图片上传组件虽然不是表单，但是是为表单设计的，必须放在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

fields配置说明

resConfig配置说明

文件和图片上传组件Slots

文件和图片上传组件Events

文件和图片上传校验

校验函数为 validIsEnd，返回Promise，可以使用ref调用

lm-up-file 文件上传

Attributes

Slots

lm-up-file 图片上传

图片上传组件，如果需要图片裁剪，确保引入lm-ui-element的lm-img-cropper组件。

当图片大于200kb时，默认开启图片压缩

headImg属性为true时，默认开启图片裁剪

Attributes

Slots

代码示例

<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

Slots

Methods

Events

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

Methods

Events

公用方法,lm_methods，lm-validate，lm-validate-methods

返回首页 返回上一级

lm-methods

提供部分公共函数 引用示例：

import {formatDate} from "lm-ui-element/lib/utils/global-methods";

lm-validate

提供验证函数 引用示例：

import {isvalidPhone} from "lm-ui-element/lib/utils/lm-validate";

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']}],
        }
  }
}

挂在在vue原型链上的方法 $lm

有些函数需要挂载到原型链上，主要方便在dom中使用,当然在生命周期和方法中也可以使用。这部分方法统一挂在到$lm下

使用示例： 首先在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>