亲宝软件园·资讯

展开

element日期选择器el-date-picker

zttbee 人气:2

1、基本用法

代码:

<el-date-picker
	type="date"
	v-model="valueStart"
	value-format="yyyy-MM-dd"
	placeholder="开始时间" >
 </el-date-picker>

代码解读:

type参数是用来定义选择器选择的对象,这里我们选择的是日期(date),也可以只选择年(year),只选择月(month),或只选择周(week)。

v-model是绑定一个值,如果不绑定的话,即使选择了某一个日期,框框里也没有数值。

value-format定义获取的时间的格式

placeholder是占位提示文字。

效果:背景白色,与页面颜色不搭

2、调高度、颜色

代码

::v-deep .el-input__inner {
	  background-color: transparent !important;
	  border-color:#80ffff;
	  box-shadow: 1px 1px 5px 1px  RGB(128,255,255,0.8) inset;
	  height: 30px;
	}

代码解读

background-color设置颜色,设置为透明,!important表示要覆盖以前的样式,本样式优先。

border-color设置边框颜色

box-shadow设置阴影样式

height设置高度。

效果

背景变透明后与页面风格搭了起来,但日历图表没有垂直居中,反而有些靠下。

3、调日历图标位置

代码

::v-deep .el-input__icon {
	    line-height: 30px;
	}

代码解读

把行高设为与日期框一样的高度就OK了,我这里日期框高是30px。

效果

图标居中了

4、调日历面板

代码

首先自定义一个样式名elDatePicker

<el-date-picker
	popper-class="elDatePicker"
	type="date"
	v-model="valueStart"
	placeholder="开始时间">
</el-date-picker>

然后在全局样式中定义该样式,我这个全局样式文件叫home.scss,在main.js引入了该文件(import “./assets/styles/home.scss”

加载全部内容

相关教程
猜你喜欢
用户评论