首页手记 Vue-ElementUI组件改造

Vue-ElementUI组件改造

标签：

Vue.js

前言

站在巨人的肩膀上，才能看得更远，我们可以借助别人的轮子让自己跑的更快，但是照搬照抄还是不可取的，先把别人的学会了再创造自己的，也是不错的思路。我在使用ElementUI的时候，发现这个组件很不错，一直在持续维护更新，而且组件很丰富，有着不错的口碑，我于是也开始使用，而且还加上了自己的风格。
我可以先来看看效果
（1）对于input框的改造，如果有的时候原来的ElementUI自带的el-input框是很完美，但是却不够灵活，如何仿制一个呢？

（2）修改el-input框样式图标

（3）修改el-table表表头和行样式

（4）自制移动端弹窗

仿制el-input

<div style="display:inline-block;width:220px;height:38px;border:#DCDFE6 1px solid;vertical-align:top;border-radius:4px;margin-top:2px;padding:0 10px;overflow:hidden">
                <span style="color:#C0C4CC">封面</span>
                <span class="coverimgp" @click="showViewImageDialog()">{{addForm.url}}</span>
                <i  class="iconfont icon-zhaopianphotos11 supicselect" style="float:right" @click="showPiclibDialogCover"></i>
            </div>

为什么要仿制这个el-input呢？主要是因为我有这样一个需求，我要给input框绑定一个值，而且这个值是要可以响应点击事件的，所以原来的el-input有很多不能订制，我于是就自己仿制了一个，在右侧加一个小icon可以响应点击事件，用于弹出图片库选择框，当选择好图片后，input内会展示图片名称，点击图片名称会显示图片的预览。

修改el-input样式

<el-input v-model="loginForm.username" placeholder="账号" class="username-input login-input-fixed" ref="loginInput">
            <i slot="prefix" class="iconfont icon-user login-icon-fixed"></i>
          </el-input>

下面为CSS样式

.username-input{
  margin-top: .4rem;
}

.login-input-fixed /deep/ input.el-input__inner {
  border-top: 0px;
  border-left: 0px;
  border-right: 0px;
  border-radius: 0px;
  padding-left: 1rem;
}

修改el-table样式

<el-table :data="productlist" border
          :header-cell-style="this.globaltabRowClassName"
          :row-style="this.globalRowHeaderObj"
          :cell-style="{padding:'0px'}"
          :row-class-name="this.globaltabRowClassName"
        >
            <el-table-column label="#" type="index"></el-table-column>
            <!-- 此处省略column -->
        </el-table>

参数解释：
:data 为table行参数
:header-cell-style 为行样式，用于展示斑马纹
:row-style 为行样式，用于展示表头样式
:row-class-name 为行样式，用于展示斑马纹
为了可以自由调整行样式而且达到所有样式可以统一，我将样式参数封装了一下，保存在了main.js当中，可以写死，也可以从数据库获取，具体看需求了。
main.js

// 全局变量表头颜色对象
Vue.prototype.globalRowHeaderObj = {
  height: '36px',
  fontSize: '13px'
}
// 全局表格颜色变换方法
Vue.prototype.globaltabRowClassName = function ({row, rowIndex}) {
  if (rowIndex === 0) {
    return 'background:#0F506A;color:#E5E5E0;fontSize:.3rem;'
  }
  let index = rowIndex + 1
  if (index % 2 === 0) {
    return 'warning-row'
  }
}

自制移动端弹窗

alertV.vue

<template>
    <el-dialog
        :visible.sync="alertToLoginDialogVisible"
        :append-to-body="true"
        :show-close="false"
        class="alertdialog"
        width="60%"
        >
        <p style="text-align:center;padding:.3rem">您还没登陆呢！</p>
          <el-row style="border-top:#EDEDED 1px solid">
            <el-col :span="12" >
              <p class="tologin-style" @click="alertToLoginDialogVisible = false">我再看看</p>
            </el-col>
            <el-col :span="12" style="border-left:#EDEDED 1px solid">
              <p class="tologin-style" style="color:#086C79" @click="tologinClick">赶快去登录</p>
            </el-col>
          </el-row>
    </el-dialog>
</template>

<script>
export default {
  name: 'AlertToLogin',
  data() {
    return {
      alertToLoginDialogVisible: false
    }
  },
  props: {
    styleObjsub: Object
  },
  methods: {
    showDialog() {
      this.alertToLoginDialogVisible = true
    },
    tologinClick() {
      this.alertToLoginDialogVisible = false
    }
  }
}
</script>

<style scoped>
.tologin-style{
  padding: .2rem;
  text-align: center;
  background-color: #fff;
}
.el-dialog__footer{
  padding: 0!important;
}
.el-button{
  padding: .2rem .3rem .2rem .3rem!important;
  margin: 0!important;
  border-radius: 0;
  border: 0px;
}
.alertdialog >>>.el-dialog{
  /* background-color: rgba(155,152,152,0.5)!important; */
  padding: 0!important;
}
.alertdialog >>> .el-dialog .el-dialog__header{
  padding: 0!important;
}
.alertdialog >>> .el-dialog .el-dialog__body{
  padding: 0!important;
}
</style>

这个是仿制移动端弹窗的代码，因为Vue全是组件的思想，所有我将该弹窗也封装成一个组件，可以直接调用，调用方法如下：

import DetailAlertToLogin from '@/pages/mobile/product/components/AlertToLogin'

<detail-alert-to-login ref="alerttologinRef" ></detail-alert-to-login>

this.$refs.alerttologinRef.showDialog()

总结

以上的改造算是我疫情期间闭关修炼的成果，没那么高大上，但是也是一两个月总结出来的精华，毕竟在前端开发方面我还是不是那么熟练，所以还望前端大佬给予指点。以上代码基本上学了Vue的小伙伴都是可以拿走就能用的，在后台管理系统的开发基本都可以用到，希望小伙伴多多提意见，我可以继续改进，谢谢。
最后我想说一下，我这个项目还没有完全开发完，后续还有很多代码需要提交，所以只能一点点的讲解代码，从简到繁，一点点深入，慢慢的我将开源所有代码，前端的后台的，数据库的，我都会一一讲解感谢小伙伴支持！