❤ Vue 2 中使用Element 饿了么组件

❤ Vue使用Element

1、 ElementUI 输入框样式更改未生效

原因：

ElementUI 输入框样式需要穿透

//使用 !important （一般不生效）
.el-input.el-input__inner {
    background-color: rgba(255, 255, 255, 0.247);
}
//使用 /deep/ 
.el-input /deep/ .el-input__inner {
    background-color: rgba(255, 255, 255, 0.247);
}
//使用 >>>
.el-input >>> .el-input__inner {
    background-color: rgba(255, 255, 255, 0.247);
}

样式包含

//输入框边框
.el-input /deep/ .el-input__inner{
   border-color: #aab7b8;
   background: #F4F6F6;
}

//输入框提示的文字倾斜
.el-input /deep/ .el-input__inner::placeholder {
  font-weight: 600;
  font-style: italic;
}
//禁用的输入框边框
.el-select /deep/ .is-disabled .el-input__inner{
   border-color: #aab7b8;
   background: #F4F6F6;
}

更改提示文字的颜色

 .el-input__inner::placeholder {
 	color: #5FA968;
}

// color: #5FA968 !important;

不生效的时候加个!important 或者 看看style有没有 scoped

适配浏览器

/* 谷歌 */
.el-input::-webkit-input-placeholder {
  color: #3A8542;
}
/* 火狐 */
.el-input:-moz-placeholder {
  color: #3A8542;
}
/*ie*/
.el-input:-ms-input-placeholder {
  color: #3A8542;
}

获取焦点时候的颜色

/* 获取焦点时的颜色*/
 .el-input:focus::-webkit-input-placeholder {
  color: #3A8542;
}

.el-input:focus::-moz-input-placeholder {
  color: #3A8542;
}

.el-input:focus::-ms-input-placeholder {
  color: #3A8542;
}

2、ElementUI 下拉选择框样式

选择框样式更改

查看结构可以发现

先来试试正常样式

.el-select .el-input.is-focus .el-input__inner{
    border-color: #008296;
    background-color: #000 !important;
}

结果：完全无效果

/deep/ 穿透属性（生效）

// 修改选中的下拉框边框颜色 
.el-select /deep/ .el-input.is-focus .el-input__inner{
    border-color: #008296;
    background-color: #000 !important;
}
// 选中的下拉框背景颜色和字体 
.el-select-dropdown__item.selected {
    color: #000;
    background: #F4F6F6;
    border: 2px solid  #008296;
}

🐩 修改下拉框默认的字体样式

// 修改下拉框默认的字体样式
.el-select /deep/ .el-input__inner::placeholder{
    color: #000;
}

3、使用Radio 单选框

基本使用

<template>
  <el-radio-group v-model="radio">
    <el-radio :label="3">备选项</el-radio>
    <el-radio :label="6">备选项</el-radio>
    <el-radio :label="9">备选项</el-radio>
  </el-radio-group>
</template>

<script>
  export default {
    data () {
      return {
        radio: 3
      };
    }
  }
</script>

更改颜色

在这里插入代码片

4、form表单

Label 样式

label文字位置设置
label-position="top"


 <el-form ref="selectFollow" 
 :model="selectFollow" label-width="140px" label-position="top"></el-form>
 

5、Pagination 分页

el-pagination修改默认的文字“前往”

该方法一定要放在mounted 里头 ，网上说的放在created 里头才不报错 【尝试是错误的！】
document.getElementsByClassName(‘el-pagination__jump’)[0].childNodes[0].nodeValue = ‘跳至’

控制分页布局layout
layout="prev, pager, next"   
jumper // 前往多少页数
<el-pagination
    layout="prev, pager, next"
    :total="50">
</el-pagination>

设置最大页码按钮数

<el-pagination
    layout="prev, pager, next"
    :total="50">
</el-pagination>

:pager-count="pagerCount"
pagerCount:5, 

带有背景色的分页 
background


 <el-pagination
  background
  layout="prev, pager, next"
  :total="1000">
</el-pagination>


 控制分页尺寸大小
 小型分页
 small

el-date-picker日期选择器

常规使用

<el-date-picker v-model="riqivalue" type="date" placeholder="选择日期"
                      value-format="yyyy-MM-dd" format="yyyy-MM-dd" style="width:150px">
</el-date-picker>
riqivalue:'',

更改自主选择快捷时间

利用pickerOptions

<el-date-picker v-model="riqivalue" type="date" placeholder="选择日期"
       value-format="yyyy-MM-dd" format="yyyy/M/dd" style="width:150px" 
       @change="handleUpdata()"   :picker-options="pickerOptions">

</el-date-picker>


pickerOptions: {
        disabledDate(time) {
          // 在这里可以自定义禁用日期的逻辑
        },
        shortcuts: [
          {
            text: '设为今天',
            onClick(picker) {
              picker.$emit('pick', new Date()); // 点击后设为今天
            }
          },
          {
            text: '设为2024/3/21',
            onClick(picker) {
              picker.$emit('pick', new Date(2024, 2, 21)); // 点击后设为指定日期
            }
          }
        ]
      },

更改确认以后显示的时间

format 显示在输入框中的格式
value-format 可选，绑定值的格式。不指定则绑定值为 Date 对象

总结一下就是

format 只是控制显示时间的，而value-format 控制实际提交值！

// 时间改变
 handleUpdata(){
 	console.log(this.riqivalue,'riqivalue');
 },
<el-date-picker v-model="riqivalue" type="date" placeholder="选择日期"
                      value-format="yyyy-MM-dd" format="yyyy/M/dd" style="width:150px" @change="handleUpdata()">
</el-date-picker>

去我们的node_modules 依赖块里面 更改el-date-picker 源码：

找到lib文件夹下的 date-picker.js文件，盲猜也知道，这个是时间组件。

搜索el.datepicker.month 找到代码，我将这两部分替换 （结果没效果）

实现不了，行吧，自己写组件去了！！

date-picker时间限制

<el-date-picker v-model="value1" type="date" placeholder="选择日期" :picker-options="pickerOptions">
</el-date-picker>

限制一年内

 pickerOptions: {
                disabledDate(time) {
                    let t = new Date();
                    let Y = t.getFullYear();
                    let M = t.getMonth();
                    let D = t.getDate();
                    return (time.getTime() > new Date(Y + 1, M, D).getTime());
                  
                }
},

6、使用Element的自定义主题

Element 默认提供一套主题，CSS 命名采用 BEM 的风格，方便使用者覆盖样式。我们提供了四种方法，可以进行不同程度的样式自定义。

① 下载主题：

② 引入和使用自定义主题

import '../theme/index.css'
import ElementUI from 'element-ui'
import Vue from 'vue'

Vue.use(ElementUI)

7、抽屉 el-drawer

使用Element的抽屉 el-drawer被其他内容覆盖

如图，加载出来的效果是这样的，被一个蒙层盖住了整个抽屉，点击也无法消失

这是由于元素的一些层级设置不同导致的，所以蒙层被放在了最顶端

解决方法:

      :append-to-body="true"
      :modal-append-to-body="false"

解决效果（成功）.

8、 el-rate 评分样式

.el-rate .el-rate__icon{
  color:#fff;
}

效果：

9、element 定制主题错误

10、查看放大图片缩略图

<el-image :src="val.picImg" class="rppglitopimgtu" @click.stop="handleAvator(val)" 
 :preview-src-list="srcList"></el-image>

srcList:[],

handleAvator(row){
      console.log(row);
      this.srcList=[];
      this.srcList.push(row.picImg);
      console.log(this.srcList);
    },