vue.js 自定义组件_简单的可自定义Vue.js时间选择器组件

vue.js 自定义组件

时间选择器 (vue-timeselector)

🕒 Simple customizable Vue.js timepicker component.

🕒简单的可定制Vue.js时间选择器组件。

View demo 查看演示 Download Source 下载源

安装 (Install)

npm install vue-timeselector --save

or

要么

yarn add vue-timeselector

import Timeselector from 'vue-timeselector';

export default {
  // ...
  components: {
    Timeselector
  }
  // ...
}

用法 (Usage)

基本用法 (Basic Usage)

<!-- Default to 24-Hour format HH:mm -->
<timeselector></timeselector>

value prop if passed should be a Date object in order to pass a preconfigured time or Null if you want to set the picker default time as 00:00.

如果传递，则value道具应该是Date对象，以便传递预配置的时间；如果要将选择器的默认时间设置为00:00则为Null。

<script>
export default {
  components: { Timeselector },
  data() {
    return {
      time: new Date() // or null
    }
  }
}
</script>
<timeselector :value="time"></timeselector>

Using v-model

使用v-model

<datepicker v-model="time"></datepicker>

Support name attribute for normal html form submission

普通html表单提交的支持名称属性

<datepicker :value="time" :name="uniquename"></datepicker>

Support id attribute as well

也支持id属性

<datepicker :value="time" :id="uniqueid"></datepicker>

Make a use of state attributes like disabled or required

利用状态属性，例如禁用或必需

<datepicker :value="time" :required="true" :disabled="false"></datepicker>

Choose a placeholder as default views (need more tests)

选择一个占位符作为默认视图(需要更多测试)

<datepicker :value="time" :placeholder="'Select a time'"></datepicker>

Emits events

发出事件

<datepicker :value="time" @input="myInputFunc" @opened="myOpenFunc" @closed="myCloseFunc">

定制模态 (Custom modal)

• displayHours

  displayHours

• displayMinutes

  displayMinutes

• displaySeconds

  displaySeconds

自定义时间格式 (Customized Time Format)

• displayed

  显示

• returned

  回来

• utc

  世界标准时间

• separator

  分隔器

...

...

模态12小时 (12 Hours in modal)

...

...

模态间隔 (Interval in modal)

...

...

高光时间 (Highligth time)

...

...

禁用时间 (Disable time)

...

...

插槽(TODO) (Slot (TODO))

...

...

Style Sdelector(TODO) (Style sdelector (TODO))

使用类来简化元素 (Use classes to curstomize elements)

类结构 (Classes structure)

vue-timeselector is built following BEM guidelines so it's easy for everyone to overrides the component's styles for each elements and their modifiers. Here is that classes structure.

vue-timeselector是根据BEM准则构建的，因此每个人都可以轻松覆盖每个元素及其修饰符的组件样式。 这是类的结构。

块-元素 (Block - Elements)

| .vtimeselector
|
|----- .vtimeselector__input
|----- .vtimeselector__box
|      |
|      | ----- .vtimeselector__box__list .vtimeselector__box__list--hours
|      |       |
|      |       | ----- vtimeselector__box__item .vtimeselector__box__item--hours
|      |       | ----- vtimeselector__box__item .vtimeselector__box__item--hours
|      |       | ----- ...
|      |
|      | ----- .vtimeselector__box__list .vtimeselector__box__list--minutes
|      |       |
|      |       | ----- vtimeselector__box__item .vtimeselector__box__item--minutes
|      |       | ----- vtimeselector__box__item .vtimeselector__box__item--minutes
|      |       | ----- ...
|      |
|      | ----- .vtimeselector__box__list .vtimeselector__box__list--seconds
|      |       |
|      |       | ----- vtimeselector__box__item .vtimeselector__box__item--seconds
|      |       | ----- vtimeselector__box__item .vtimeselector__box__item--seconds
|      |       | ----- ..
|      |
|      | ----- .vtimeselector__box__list .vtimeselector__box__list--ampm
|      |       |
|      |       | ----- vtimeselector__box__item .vtimeselector__box__item--ampm
|      |       | ----- vtimeselector__box__item .vtimeselector__box__item--ampm
|      |       | ----- ...

Mofifiers (Mofifiers)

• .vtimeselector__input--is-open: Modifier displayed on .vtimeselector__input element when the modal is opened

  .vtimeselector__input--is-open ：模态打开时在.vtimeselector__input元素上显示的修饰符

• .vtimeselector__box--is-closed: Modifier displayed on .vtimeselector__box element when the modal is closed

  .vtimeselector__box--is-closed ：闭模时显示在.vtimeselector__box元素上的修饰符

• .timeselector__box__item--is-highlighted: Modifier displayed on .timeselector__box__item element when the item is highlighted

  .timeselector__box__item--is-highlighted ： .timeselector__box__item--is-highlighted显示.timeselector__box__item时， .timeselector__box__item元素上.timeselector__box__item--is-highlighted修饰符

• .timeselector__box__item--is-selected: Modifier displayed on .timeselector__box__item element when the item is selected

  .timeselector__box__item--is-selected ： .timeselector__box__item--is-selected .timeselector__box__item时， .timeselector__box__item元素上显示的修饰符

• .timeselector__box__item--is-disabled: Modifier displayed on .timeselector__box__item element when the item is disabled

  .timeselector__box__item--is-disabled ：禁用该项目时， .timeselector__box__item元素上显示的修饰符

可用道具 (Available props)

Prop	Type	Default	Description
value	Date / Null		Date value of the timepicker
name	String		Input name property
id	String		Input id
placeholder	String		Input placeholder text
required	Boolean	false	Sets html required attribute on input
disabled	Boolean	false	If true, disable timepicker on screen
displayHours	Boolean	true	Display hours to the input
displayMinutes	Boolean	true	Display minutes to the input
displaySeconds	Boolean	false	Display seconds to the input
separator	String	":"	Separator symbol used if no displayFormat
padTime	Boolean	true	Pads number with a zero (both input and modal)
displayFormat	String		Time formatting string displayed
returnFormat	String	TODO	Time formatting string returned
h24	Boolean	false	Display 24 hours format
utc	Boolean	true	Return UTC date format
inline	Boolean	false	Show the timepicker always open
initialView	Boolean	false	Open on the first
interval	Object	{h:1, m:10, s:10}	Define hours, minutes and seconds interval to the picker
highlight	Object		Hightligth defined time on hours, minutes and seconds
disable	Object		Disable specific time on hours, minutes and seconds
pickerStyle	String	TODO	Set the timepicker style

Struts	类型	默认	描述
值	日期/空		时间选择器的日期值
名称	串		输入名称属性
ID	串		输入编号
占位符	串		输入占位符文本
需要	布尔型	假	在输入上设置html required属性
残障人士	布尔型	假	如果为true，请在屏幕上禁用时间选择器
displayHours	布尔型	真正	显示输入小时
displayMinutes	布尔型	真正	显示分钟到输入
displaySeconds	布尔型	假	显示秒到输入
分隔器	串	“：”	如果没有displayFormat，则使用分隔符
padTime	布尔型	真正	填充编号为零(输入和模态)
displayFormat	串		显示时间格式字符串
returnFormat	串	TODO	返回时间格式字符串
h24	布尔型	假	显示24小时格式
世界标准时间	布尔型	真正	返回UTC日期格式
排队	布尔型	假	显示时间选择器始终打开
initialView	布尔型	假	在第一个打开
间隔	目的	{h：1，m：10，s：10}	为选择器定义小时，分钟和秒的间隔
突出	目的		高度定义的时间(小时，分钟和秒)
禁用	目的		禁用小时，分钟和秒的特定时间
pickerStyle	串	TODO	设置时间选择器样式

大事记 (Events)

These events are emitted on actions in the timepicker

这些事件在时间选择器中的操作上发出

Event	Output	Description
opened	Node	The picker is opened
closed	Node	The picker is closed
selectedHour	Date	An hour has been selected
selectedMinute	Date	A minute has been selected
selectedSecond	Date	A second has been selected
selectedAmpm	String	A ampm field has been selected
selectedDisabled	Object	A disabled time has been selected
input	Date	Input value has been modified
cleared		Selected time has been cleared

事件	输出量	描述
开了	节点	选择器已打开
关闭	节点	选取器已关闭
选择小时	日期	已选择一个小时
selectedMinute	日期	已选择一分钟
选择第二	日期	已选择一秒钟
selectedAmpm	串	已选择ampm字段
selectedDisabled	目的	选择了禁用时间
输入	日期	输入值已被修改
已清除		所选时间已清除

时间格式 (Time formatting)

字符串格式化程序 (String formatter)

Token	Desc	Example
H	hour from 0 to 23 (non-zero padded)	0 1 ... 22 23
HH	hour from 0 to 23 (zero padded)	00 01 ... 22 23
h	hour from 1 to 12 (non-zero padded)	1 2 ... 11 12
hh	hour from 1 to 12 (zero padded)	01 02 ... 11 12
k	hour from 1 to 24 (non-zero padded)	1 2 ... 23 24
kk	hour from 1 to 24 (zero padded)	01 02 ... 23 24
m	one digit minutes	0 1 ... 58 59
mm	two digits minutes	00 01 ... 58 59
s	one digit seconds	0 1 ... 58 59
ss	two digits seconds	00 01 ... 58 59

代币	描述	例
H	0到23小时(非零填充)	0 1 ... 22 23
H	小时，从0到23(零填充)	00 01 ... 22 23
H	1到12小时(非零填充)	1 2 ... 11 12
h	1到12小时(零填充)	01 02 ... 11 12
ķ	1到24小时(非零填充)	1 2 ... 23 24
kk	1到24小时(零填充)	01 02 ... 23 24
米	一位数分钟	0 1 ... 58 59
毫米	分钟两位数	00 01 ... 58 59
s	一位数秒	0 1 ... 58 59
ss	两位数秒	00 01 ... 58 59

翻译自: https://vuejsexamples.com/src-vuetimeselector-vue/

vue.js 自定义组件