【Vue.js】Vue.js组件库Element中的时间选择器、日期选择器、日期时间选择器和颜色选择器
1、TimePicker 时间选择器
用于选择或输入日期。
固定时间点
提供几个固定的时间点供用户选择。
使用 el-time-select 标签,分别通过start、end和step指定可选的起始时间、结束时间和步长。
<el-time-select
v-model="value"
:picker-options="{
start: '08:30',
step: '00:15',
end: '18:30'
}"
placeholder="选择时间">
</el-time-select>
<script>
export default {
data() {
return {
value: ''
};
}
}
</script>
任意时间点
可以选择任意时间。
使用 el-time-picker 标签,通过selectableRange限制可选时间范围。提供了两种交互方式:默认情况下通过鼠标滚轮进行选择,打开arrow-control属性则通过界面上的箭头进行选择。
<template>
<el-time-picker
v-model="value1"
:picker-options="{
selectableRange: '18:30:00 - 20:30:00'
}"
placeholder="任意时间点">
</el-time-picker>
<el-time-picker
arrow-control
v-model="value2"
:picker-options="{
selectableRange: '18:30:00 - 20:30:00'
}"
placeholder="任意时间点">
</el-time-picker>
</template>
<script>
export default {
data() {
return {
value1: new Date(2016, 9, 10, 18, 40),
value2: new Date(2016, 9, 10, 18, 40)
};
}
}
</script>
固定时间范围
若先选择开始时间,则结束时间内备选项的状态会随之改变。
<template>
<el-time-select
placeholder="起始时间"
v-model="startTime"
:picker-options="{
start: '08:30',
step: '00:15',
end: '18:30'
}">
</el-time-select>
<el-time-select
placeholder="结束时间"
v-model="endTime"
:picker-options="{
start: '08:30',
step: '00:15',
end: '18:30',
minTime: startTime
}">
</el-time-select>
</template>
<script>
export default {
data() {
return {
startTime: '',
endTime: ''
};
}
}
</script>
任意时间范围
可选择任意的时间范围。
添加is-range属性即可选择时间范围,同样支持arrow-control属性。
<template>
<el-time-picker
is-range
v-model="value1"
range-separator="至"
start-placeholder="开始时间"
end-placeholder="结束时间"
placeholder="选择时间范围">
</el-time-picker>
<el-time-picker
is-range
arrow-control
v-model="value2"
range-separator="至"
start-placeholder="开始时间"
end-placeholder="结束时间"
placeholder="选择时间范围">
</el-time-picker>
</template>
<script>
export default {
data() {
return {
value1: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
value2: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)]
};
}
}
</script>
Attributes
参数 |
说明 |
类型 |
可选值 |
默认值 |
---|---|---|---|---|
value / v-model |
绑定值 |
date(TimePicker) / string(TimeSelect) |
— |
— |
readonly |
完全只读 |
boolean |
— |
false |
disabled |
禁用 |
boolean |
— |
false |
editable |
文本框可输入 |
boolean |
— |
true |
clearable |
是否显示清除按钮 |
boolean |
— |
true |
size |
输入框尺寸 |
string |
medium / small / mini |
— |
placeholder |
非范围选择时的占位内容 |
string |
— |
— |
start-placeholder |
范围选择时开始日期的占位内容 |
string |
— |
— |
end-placeholder |
范围选择时开始日期的占位内容 |
string |
— |
— |
is-range |
是否为时间范围选择,仅对<el-time-picker>有效 |
boolean |
— |
false |
arrow-control |
是否使用箭头进行时间选择,仅对<el-time-picker>有效 |
boolean |
— |
false |
align |
对齐方式 |
string |
left / center / right |
left |
popper-class |
TimePicker 下拉框的类名 |
string |
— |
— |
picker-options |
当前时间日期选择器特有的选项参考下表 |
object |
— |
{} |
range-separator |
选择范围时的分隔符 |
string |
- |
‘-’ |
value-format |
可选,仅TimePicker时可用,绑定值的格式。不指定则绑定值为 Date 对象 string |
日期格式 |
— |
|
default-value |
可选,选择器打开时默认显示的时间 |
Date(TimePicker) / string(TimeSelect) |
可被new Date()解析(TimePicker) / 可选值(TimeSelect) |
— |
name |
原生属性 |
string |
— |
— |
prefix-icon |
自定义头部图标的类名 |
string |
— |
el-icon-time |
clear-icon |
自定义清空图标的类名 |
string |
— |
el-icon-circle-close |
Time Select Options
参数 |
说明 |
类型 |
可选值 |
默认值 |
---|---|---|---|---|
start |
开始时间 |
string |
— |
09:00 |
end |
结束时间 |
string |
— |
18:00 |
step |
间隔时间 |
string |
— |
00:30 |
minTime |
最小时间,小于该时间的时间段将被禁用 |
string |
— |
00:00 |
maxTime |
最大时间,大于该时间的时间段将被禁用 |
string |
— |
— |
Time Picker Options
参数 |
说明 |
类型 |
可选值 |
默认值 |
---|---|---|---|---|
selectableRange |
可选时间段,例如’18:30:00 - 20:30:00’或者传入数组[‘09:30:00 - 12:00:00’, ‘14:30:00 - 18:30:00’] |
string / array |
— |
— |
format |
时间格式化(TimePicker) |
string |
小时:HH,分:mm,秒:ss,AM/PM A |
‘HH:mm:ss’ |
Events
事件名 |
说明 |
参数 |
---|---|---|
change |
用户确认选定的值时触发 |
组件绑定值 |
blur |
当 input 失去焦点时触发 |
组件实例 |
focus |
当 input 获得焦点时触发 |
组件实例 |
Methods
方法名 |
说明 |
参数 |
---|---|---|
focus |
使 input 获取焦点 |
- |
2、DatePicker 日期选择器
用于选择或输入日期。
选择日
以「日」为基本单位,基础的日期选择控件。
基本单位由type属性指定。快捷选项需配置picker-options对象中的shortcuts,禁用日期通过 disabledDate 设置,传入函数。
<template>
<div class="block">
<span class="demonstration">默认</span>
<el-date-picker
v-model="value1"
type="date"
placeholder="选择日期">
</el-date-picker>
</div>
<div class="block">
<span class="demonstration">带快捷选项</span>
<el-date-picker
v-model="value2"
align="right"
type="date"
placeholder="选择日期"
:picker-options="pickerOptions">
</el-date-picker>
</div>
</template>
<script>
export default {
data() {
return {
pickerOptions: {
disabledDate(time) {
return time.getTime() > Date.now();
},
shortcuts: [{
text: '今天',
onClick(picker) {
picker.$emit('pick', new Date());
}
}, {
text: '昨天',
onClick(picker) {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24);
picker.$emit('pick', date);
}
}, {
text: '一周前',
onClick(picker) {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
picker.$emit('pick', date);
}
}]
},
value1: '',
value2: '',
};
}
};
</script>
其他日期单位
通过扩展基础的日期选择,可以选择周、月、年或多个日期。
<div class="container">
<div class="block">
<span class="demonstration">周</span>
<el-date-picker
v-model="value1"
type="week"
format="yyyy 第 WW 周"
placeholder="选择周">
</el-date-picker>
</div>
<div class="block">
<span class="demonstration">月</span>
<el-date-picker
v-model="value2"
type="month"
placeholder="选择月">
</el-date-picker>
</div>
</div>
<div class="container">
<div class="block">
<span class="demonstration">年</span>
<el-date-picker
v-model="value3"
type="year"
placeholder="选择年">
</el-date-picker>
</div>
<div class="block">
<span class="demonstration">多个日期</span>
<el-date-picker
type="dates"
v-model="value4"
placeholder="选择一个或多个日期">
</el-date-picker>
</div>
</div>
<script>
export default {
data() {
return {
value1: '',
value2: '',
value3: '',
value4: ''
};
}
};
</script>
选择日期范围
可在一个选择器中便捷地选择一个时间范围。
在选择日期范围时,默认情况下左右面板会联动。如果希望两个面板各自独立切换当前月份,可以使用unlink-panels属性解除联动。
<template>
<div class="block">
<span class="demonstration">默认</span>
<el-date-picker
v-model="value1"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期">
</el-date-picker>
</div>
<div class="block">
<span class="demonstration">带快捷选项</span>
<el-date-picker
v-model="value2"
type="daterange"
align="right"
unlink-panels
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
:picker-options="pickerOptions">
</el-date-picker>
</div>
</template>
<script>
export default {
data() {
return {
pickerOptions: {
shortcuts: [{
text: '最近一周',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
picker.$emit('pick', [start, end]);
}
}, {
text: '最近一个月',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
picker.$emit('pick', [start, end]);
}
}, {
text: '最近三个月',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
picker.$emit('pick', [start, end]);
}
}]
},
value1: '',
value2: ''
};
}
};
</script>
选择月份范围
可在一个选择器中便捷地选择一个月份范围。
在选择月份范围时,默认情况下左右面板会联动。如果希望两个面板各自独立切换当前年份,可以使用unlink-panels属性解除联动。
<template>
<div class="block">
<span class="demonstration">默认</span>
<el-date-picker
v-model="value1"
type="monthrange"
range-separator="至"
start-placeholder="开始月份"
end-placeholder="结束月份">
</el-date-picker>
</div>
<div class="block">
<span class="demonstration">带快捷选项</span>
<el-date-picker
v-model="value2"
type="monthrange"
align="right"
unlink-panels
range-separator="至"
start-placeholder="开始月份"
end-placeholder="结束月份"
:picker-options="pickerOptions">
</el-date-picker>
</div>
</template>
<script>
export default {
data() {
return {
pickerOptions: {
shortcuts: [{
text: '本月',
onClick(picker) {
picker.$emit('pick', [new Date(), new Date()]);
}
}, {
text: '今年至今',
onClick(picker) {
const end = new Date();
const start = new Date(new Date().getFullYear(), 0);
picker.$emit('pick', [start, end]);
}
}, {
text: '最近六个月',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setMonth(start.getMonth() - 6);
picker.$emit('pick', [start, end]);
}
}]
},
value1: '',
value2: ''
};
}
};
</script>
日期格式
使用format指定输入框的格式;使用value-format指定绑定值的格式。 默认情况下,组件接受并返回Date对象。以下为可用的格式化字串,以 UTC 2017年1月2日 03:04:05 为例:
请注意大小写
格式 |
含义 |
备注 |
举例 |
---|---|---|---|
yyyy |
年 |
2017 |
|
M |
月 |
不补0 |
1 |
MM |
月 |
01 |
|
W |
周 |
仅周选择器的 format 可用;不补0 |
1 |
WW |
周 |
仅周选择器的 format 可用 |
01 |
d |
日 |
不补0 |
2 |
dd |
日 |
02 |
|
H |
小时 |
24小时制;不补0 |
3 |
HH |
小时 |
24小时制 |
03 |
h |
小时 |
12小时制,须和 A 或 a 使用;不补0 |
3 |
hh |
小时 |
12小时制,须和 A 或 a 使用 |
03 |
m |
分钟 |
不补0 |
4 |
mm |
分钟 |
04 |
|
s |
秒 |
不补0 |
5 |
ss |
秒 |
05 |
|
A |
AM/PM |
仅 format 可用,大写 |
AM |
a |
am/pm |
仅 format 可用,小写 |
am |
timestamp |
JS时间戳 |
仅 value-format 可用;组件绑定值为number类型 |
1483326245000 |
[MM] |
不需要格式化字符 |
使用方括号标识不需要格式化的字符 (如 [A] [MM]) |
MM |
<template>
<div class="block">
<span class="demonstration">默认为 Date 对象</span>
<div class="demonstration">值:{{ value1 }}</div>
<el-date-picker
v-model="value1"
type="date"
placeholder="选择日期"
format="yyyy 年 MM 月 dd 日">
</el-date-picker>
</div>
<div class="block">
<span class="demonstration">使用 value-format</span>
<div class="demonstration">值:{{ value2 }}</div>
<el-date-picker
v-model="value2"
type="date"
placeholder="选择日期"
format="yyyy 年 MM 月 dd 日"
value-format="yyyy-MM-dd">
</el-date-picker>
</div>
<div class="block">
<span class="demonstration">时间戳</span>
<div class="demonstration">值:{{ value3 }}</div>
<el-date-picker
v-model="value3"
type="date"
placeholder="选择日期"
format="yyyy 年 MM 月 dd 日"
value-format="timestamp">
</el-date-picker>
</div>
</template>
<script>
export default {
data() {
return {
value1: '',
value2: '',
value3: ''
};
}
};
</script>
默认显示日期
在选择日期范围时,指定起始日期和结束日期的默认时刻。
选择日期范围时,默认情况下,起始日期和结束日期的时间部分均为当天的 0 点 0 分 0 秒。通过default-time可以分别指定二者的具体时刻。default-time接受一个数组,其中的值为形如12:00:00的字符串,第一个值控制起始日期的时刻,第二个值控制结束日期的时刻。
<template>
<div class="block">
<p>组件值:{{ value }}</p>
<el-date-picker
v-model="value"
type="daterange"
start-placeholder="开始日期"
end-placeholder="结束日期"
:default-time="['00:00:00', '23:59:59']">
</el-date-picker>
</div>
</template>
<script>
export default {
data() {
return {
value: ''
};
}
};
</script>
Attributes
参数 |
说明 |
类型 |
可选值 |
默认值 |
---|---|---|---|---|
value / v-model |
绑定值 |
date(DatePicker) / array(DateRangePicker) |
— |
— |
readonly |
完全只读 |
boolean |
— |
false |
disabled |
禁用 |
boolean |
— |
false |
editable |
文本框可输入 |
boolean |
— |
true |
clearable |
是否显示清除按钮 |
boolean |
— |
true |
size |
输入框尺寸 |
string |
large, small, mini |
— |
placeholder |
非范围选择时的占位内容 |
string |
— |
— |
start-placeholder |
范围选择时开始日期的占位内容 |
string |
— |
— |
end-placeholder |
范围选择时结束日期的占位内容 |
string |
— |
— |
type |
显示类型 |
string |
year/month/date/dates/ week/datetime/datetimerange/ daterange/monthrange |
date |
format |
显示在输入框中的格式 |
string |
日期格式 |
yyyy-MM-dd |
align |
对齐方式 |
string |
left, center, right |
left |
popper-class |
DatePicker |
下拉框的类名 |
string |
— |
picker-options |
当前时间日期选择器特有的选项参考下表 |
object |
— |
{} |
range-separator |
选择范围时的分隔符 |
string |
— |
‘-’ |
default-value |
可选,选择器打开时默认显示的时间 |
Date |
可被new Date()解析 |
— |
default-time |
范围选择时选中日期所使用的当日内具体时刻 |
string[] |
数组,长度为 2,每项值为字符串,形如12:00:00,第一项指定开始日期的时刻,第二项指定结束日期的时刻,不指定会使用时刻 00:00:00 |
— |
value-format |
可选,绑定值的格式。不指定则绑定值为 Date 对象 string |
日期格式 |
— |
|
name |
原生属性 |
string |
— |
— |
unlink-panels |
在范围选择器里取消两个日期面板之间的联动 |
boolean |
— |
false |
prefix-icon |
自定义头部图标的类名 |
string |
— |
el-icon-date |
clear-icon |
自定义清空图标的类名 |
string |
— |
el-icon-circle-close |
validate-event |
输入时是否触发表单的校验 |
boolean |
- |
true |
Picker Options
参数 |
说明 |
类型 |
可选值 |
默认值 |
---|---|---|---|---|
shortcuts |
设置快捷选项,需要传入 { text, onClick } 对象用法参考 demo 或下表 |
Object[] |
— |
— |
disabledDate |
设置禁用状态,参数为当前日期,要求返回 Boolean |
Function |
— |
— |
cellClassName |
设置日期的 className |
Function(Date) |
— |
— |
firstDayOfWeek |
周起始日 |
Number |
1 到 7 |
7 |
onPick |
选中日期后会执行的回调,只有当 daterange 或 datetimerange 才生效 |
Function({ maxDate, minDate }) |
— |
— |
Shortcuts
参数 |
说明 |
类型 |
可选值 |
默认值 |
---|---|---|---|---|
text |
标题文本 |
string |
— |
— |
onClick |
选中后的回调函数,参数是 vm,可通过触发 ‘pick’ 事件设置选择器的值。例如 vm.$emit(‘pick’, new Date()) |
function |
— |
— |
Events
事件名称 |
说明 |
回调参数 |
---|---|---|
change |
用户确认选定的值时触发 |
组件绑定值。格式与绑定值一致,可受 value-format 控制 |
blur |
当 input 失去焦点时触发 |
组件实例 |
focus |
当 input 获得焦点时触发 |
组件实例 |
Methods
方法名 |
说明 |
参数 |
---|---|---|
focus |
使 input 获取焦点 |
— |
3、DateTimePicker 日期时间选择器
在同一个选择器里选择日期和时间。
DateTimePicker 由 DatePicker 和 TimePicker 派生,Picker Options 或者其他选项可以参照 DatePicker 和 TimePicker。
日期和时间点
通过设置type属性为datetime,即可在同一个选择器里同时进行日期和时间的选择。快捷选项的使用方法与 Date Picker 相同。
<template>
<div class="block">
<span class="demonstration">默认</span>
<el-date-picker
v-model="value1"
type="datetime"
placeholder="选择日期时间">
</el-date-picker>
</div>
<div class="block">
<span class="demonstration">带快捷选项</span>
<el-date-picker
v-model="value2"
type="datetime"
placeholder="选择日期时间"
align="right"
:picker-options="pickerOptions">
</el-date-picker>
</div>
<div class="block">
<span class="demonstration">设置默认时间</span>
<el-date-picker
v-model="value3"
type="datetime"
placeholder="选择日期时间"
default-time="12:00:00">
</el-date-picker>
</div>
</template>
<script>
export default {
data() {
return {
pickerOptions: {
shortcuts: [{
text: '今天',
onClick(picker) {
picker.$emit('pick', new Date());
}
}, {
text: '昨天',
onClick(picker) {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24);
picker.$emit('pick', date);
}
}, {
text: '一周前',
onClick(picker) {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
picker.$emit('pick', date);
}
}]
},
value1: '',
value2: '',
value3: ''
};
}
};
</script>
日期和时间范围
设置type为datetimerange即可选择日期和时间范围。
<template>
<div class="block">
<span class="demonstration">默认</span>
<el-date-picker
v-model="value1"
type="datetimerange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期">
</el-date-picker>
</div>
<div class="block">
<span class="demonstration">带快捷选项</span>
<el-date-picker
v-model="value2"
type="datetimerange"
:picker-options="pickerOptions"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
align="right">
</el-date-picker>
</div>
</template>
<script>
export default {
data() {
return {
pickerOptions: {
shortcuts: [{
text: '最近一周',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
picker.$emit('pick', [start, end]);
}
}, {
text: '最近一个月',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
picker.$emit('pick', [start, end]);
}
}, {
text: '最近三个月',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
picker.$emit('pick', [start, end]);
}
}]
},
value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
value2: ''
};
}
};
</script>
默认的起始与结束时刻
使用datetimerange进行范围选择时,在日期选择面板中选定起始与结束的日期,默认会使用该日期的00:00:00作为起始与结束的时刻;通过选项default-time可以控制选中起始与结束日期时所使用的具体时刻。default-time接受一个数组,数组每项值为字符串,形如12:00:00,其中第一项控制起始日期的具体时刻,第二项控制结束日期的具体时刻。
<template>
<div class="block">
<span class="demonstration">起始日期时刻为 12:00:00</span>
<el-date-picker
v-model="value1"
type="datetimerange"
start-placeholder="开始日期"
end-placeholder="结束日期"
:default-time="['12:00:00']">
</el-date-picker>
</div>
<div class="block">
<span class="demonstration">起始日期时刻为 12:00:00,结束日期时刻为 08:00:00</span>
<el-date-picker
v-model="value2"
type="datetimerange"
align="right"
start-placeholder="开始日期"
end-placeholder="结束日期"
:default-time="['12:00:00', '08:00:00']">
</el-date-picker>
</div>
</template>
<script>
export default {
data() {
return {
value1: '',
value2: ''
};
}
};
</script>
Attributes
参数 |
说明 |
类型 |
可选值 |
默认值 |
---|---|---|---|---|
value / v-model |
绑定值 |
date(DateTimePicker) / array(DateTimeRangePicker) |
— |
— |
readonly |
完全只读 |
boolean |
— |
false |
disabled |
禁用 |
boolean |
— |
false |
editable |
文本框可输入 |
boolean |
— |
true |
clearable |
是否显示清除按钮 |
boolean |
— |
true |
size |
输入框尺寸 |
string |
large, small, mini |
— |
placeholder |
非范围选择时的占位内容 |
string |
— |
— |
start-placeholder |
范围选择时开始日期的占位内容 |
string |
— |
— |
end-placeholder |
范围选择时结束日期的占位内容 |
string |
— |
— |
time-arrow-control |
是否使用箭头进行时间选择 |
boolean |
— |
false |
type |
显示类型 |
string |
year/month/date/week/ datetime/datetimerange/daterange |
date |
format |
显示在输入框中的格式 |
string |
日期格式 |
yyyy-MM-dd HH:mm:ss |
align |
对齐方式 |
string |
left, center, right |
left |
popper-class |
DateTimePicker |
下拉框的类名 |
string |
— |
picker-options |
当前时间日期选择器特有的选项参考下表 |
object |
— |
{} |
range-separator |
选择范围时的分隔符 |
string |
- |
‘-’ |
default-value |
可选,选择器打开时默认显示的时间 |
Date |
可被new Date()解析 |
— |
default-time |
选中日期后的默认具体时刻 |
非范围选择时:string / 范围选择时:string[] 非范围选择时:形如12:00:00的字符串;范围选择时:数组,长度为 2,每项值为字符串,形如12:00:00,第一项指定开始日期的时刻,第二项指定结束日期的时刻。不指定会使用时刻 00:00:00 |
— |
|
value-format |
可选,绑定值的格式。不指定则绑定值为 Date 对象 |
string |
日期格式 |
— |
name |
原生属性 |
string |
— |
— |
unlink-panels |
在范围选择器里取消两个日期面板之间的联动 |
boolean |
— |
false |
prefix-icon |
自定义头部图标的类名 |
string |
— |
el-icon-date |
clear-icon |
自定义清空图标的类名 |
string |
— |
el-icon-circle-close |
Picker Options
参数 |
说明 |
类型 |
可选值 |
默认值 |
---|---|---|---|---|
shortcuts |
设置快捷选项,需要传入 { text, onClick } 对象用法参考 demo 或下表 |
Object[] |
— |
— |
disabledDate |
设置禁用状态,参数为当前日期,要求返回 Boolean |
Function |
— |
— |
cellClassName |
设置日期的 className |
Function(Date) |
— |
— |
firstDayOfWeek |
周起始日 |
Number |
1 到 7 |
7 |
Shortcuts
参数 |
说明 |
类型 |
可选值 |
默认值 |
---|---|---|---|---|
text |
标题文本 |
string |
— |
— |
onClick |
选中后的回调函数,参数是 vm,可通过触发 ‘pick’ 事件设置选择器的值。例如 vm.$emit(‘pick’, new Date()) |
function |
— |
— |
Events
Event Name |
Description |
Parameters |
---|---|---|
change |
用户确认选定的值时触发 |
组件绑定值。格式与绑定值一致,可受 value-format 控制 |
blur |
当 input 失去焦点时触发 |
组件实例 |
focus |
当 input 获得焦点时触发 |
组件实例 |
Methods
方法名 |
说明 |
参数 |
---|---|---|
focus |
使 input 获取焦点 |
— |
Slots
Name |
说明 |
---|---|
range-separator |
自定义分隔符 |
4、ColorPicker 颜色选择器
用于颜色选择,支持多种格式。
基础用法
使用 v-model 与 Vue 实例中的一个变量进行双向绑定,绑定的变量需要是字符串类型。
<div class="block">
<span class="demonstration">有默认值</span>
<el-color-picker v-model="color1"></el-color-picker>
</div>
<div class="block">
<span class="demonstration">无默认值</span>
<el-color-picker v-model="color2"></el-color-picker>
</div>
<script>
export default {
data() {
return {
color1: '#409EFF',
color2: null
}
}
};
</script>
选择透明度
ColorPicker 支持普通颜色,也支持带 Alpha 通道的颜色,通过show-alpha属性即可控制是否支持透明度的选择。
<el-color-picker v-model="color" show-alpha></el-color-picker>
<script>
export default {
data() {
return {
color: 'rgba(19, 206, 102, 0.8)'
}
}
};
</script>
预定义颜色
ColorPicker 支持预定义颜色。
<el-color-picker
v-model="color"
show-alpha
:predefine="predefineColors">
</el-color-picker>
<script>
export default {
data() {
return {
color: 'rgba(255, 69, 0, 0.68)',
predefineColors: [
'#ff4500',
'#ff8c00',
'#ffd700',
'#90ee90',
'#00ced1',
'#1e90ff',
'#c71585',
'rgba(255, 69, 0, 0.68)',
'rgb(255, 120, 0)',
'hsv(51, 100, 98)',
'hsva(120, 40, 94, 0.5)',
'hsl(181, 100%, 37%)',
'hsla(209, 100%, 56%, 0.73)',
'#c7158577'
]
}
}
};
</script>
不同尺寸
<el-color-picker v-model="color"></el-color-picker>
<el-color-picker v-model="color" size="medium"></el-color-picker>
<el-color-picker v-model="color" size="small"></el-color-picker>
<el-color-picker v-model="color" size="mini"></el-color-picker>
<script>
export default {
data() {
return {
color: '#409EFF'
}
}
};
</script>
Attributes
参数 |
说明 |
类型 |
可选值 |
默认值 |
---|---|---|---|---|
value / v-model |
绑定值 |
string |
— |
— |
disabled |
是否禁用 |
boolean |
— |
false |
size |
尺寸 |
string |
— |
medium / small / mini |
show-alpha |
是否支持透明度选择 |
boolean |
— |
false |
color-format |
写入 v-model 的颜色的格式 |
string |
hsl / hsv / hex / rgb |
hex(show-alpha 为 false)/ rgb(show-alpha 为 true) |
popper-class |
ColorPicker 下拉框的类名 |
string |
— |
— |
predefine |
预定义颜色 |
array |
— |
— |
Events
事件名称 |
说明 |
回调参数 |
---|---|---|
change |
当绑定值变化时触发 |
当前值 |
active-change |
面板中当前显示的颜色发生改变时触发 |
当前显示的颜色值 |
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 如何用R语言绘制生成正态分布图表
- ggplot2-plotly|让你的火山图“活”过来
- 小数据| 描述性统计(Python/R 实现)
- ggplot2|发散性“正负”图
- R语言蒙特卡洛计算和快速傅立叶变换计算矩生成函数
- pheatmap|暴雨暂歇,“热图”来袭!!!
- 统一服务消息接口报48001错误
- ggplot2|ggpubr进行“paper”组图合并
- PostgreSQL drop table 空间不释放的问题解决
- R语言预测人口死亡率:用李·卡特模型、非线性模型进行平滑估计
- Dockerfile 指令
- Docker 构建容器Tomcat+Nginx+MySQL
- 三种动态控制SAP CRM WebClient UI assignment block显示与否的方法
- TCGA数据库中癌症名称缩写
- CloudFlare自定义节点优化网站