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

大家好，欢迎来到IT知识分享网。

❤ 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修改默认的文字“前往”

控制分页布局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-pagination__total{ 
    color: #fff; } // 修改前往下一页的颜色 .rppglistspect .el-pagination__jump{ 
    color: #fff; } 

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); },