vue-cli3构建优化_为Vue构建并优化了简单的时间选择器

vue-cli3构建优化

Vue时间选择器 (Vue Time Picker)

Simple, no nonsense time picker built and optimized for Vue.

简单，没有胡说八道的时间选择器，并且为Vue优化。

View Demo 查看演示 View Github 查看Github

安装 (Installation)

纱 (Yarn)

yarn add -D @tygr/vue-time-picker

import TimePicker from '@tygr/vue-time-picker'

export default {
  components: {
    TimePicker,
  }
}

浏览器 (Browser)

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/@tygr/vue-time-picker/dist/vue-time-picker.min.js" charset="utf-8"></script>
<script>
  Vue.use(TimePicker)
</script>

• Charset attribute required

  字符集属性为必填项

用法 (Usage)

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

export default {
  data: () => ({
    time: ''
  })
}

Time format is h:mm A

时间格式为h:mm A

道具 (Props)

prop	type	default	description
am-color	string	'green'	Color of the slider when 'AM' is chosen
pm-color	string	'blue'	Color of the slider when 'PM' is chosen
value	string	'12:00 AM'	The value of the time picker. (used by v-model)
mobile-query	string	'only screen and (max-width : 839px)'	Media query used to check if mobile user

Struts	类型	默认	描述
彩色	串	'绿色'	选择“ AM”时滑块的颜色
pm-颜色	串	'蓝色'	选择“ PM”时滑块的颜色
值	串	'12:00 AM'	时间选择器的值。 (由v-model使用)
移动查询	串	“仅屏幕和(最大宽度：839px)”	媒体查询，用于检查移动用户是否

大事记 (Events)

event	payload	description
input	string	Time selected (used by v-model)

事件	有效载荷	描述
输入	串	选择的时间(由v模型使用)

翻译自: https://vuejsexamples.com/simple-time-picker-built-and-optimized-for-vue/

vue-cli3构建优化