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