需求分析

在实际项目中，表单中的日期选择是一个常见的组件。Vant提供了日期组件，但没有提供下拉日期组件。不过所有的组件都有，自己打包一个吧。

在封装组件的过程中，我们应该解决：

并且表单的样式可以兼容错误提示参数问题事件机制格式化来解决问题

新组件名为VantFieldDate。

当你期望使用它时，它是这样的

Vant-field-date标签=“发布时间”v-model=“form data”。publish date ' type=' datetime ' : max-date=' new date()'/具体实现，我会贴出代码详细解释。

模板div class=' vant-field-date ' van-cell : title=' label ' : class=' { ' readonly ' : readonly，' placeholder ' : text } ' : is-link='！readonly ' :必选='必选' @ click=' show '！-显示当前值，没有值显示提示文字- {{ text？文本：占位符}}!-自定义错误显示-div v-if=' $ attrs。错误' v-text=' $ attrs[' error-message ']' class=' van-field _ _ error-message '/van-cell！-用行动表来包裹弹出层日期控件-van-action sheet v-model=' IsShowPicker '！- $attrs可以把根节点的属性放到目标组件上，如此可以像使用日期选择器组件一样使用这个新组件-van-datetime-picker v-bind=' $ attrs ' : type=' type ' title='请选择日期：分钟-日期=' minDate ' :最大-日期=' maxDate ' @取消=' cancel ' @确认=' confirm '/van-动作表/div/模板脚本导出默认值{ name: ' VantFieldDate '，inheritAttrs: false，//https://cn . vuejs . org/v2/API/# inherattrs prop 3360 { value : { type :[Number，Date]，默认值3360 undefined//值不能是null，日期选择器会报错},//单元格显示的文字label: { type: String，default: null }，//必填的星号需要： { type:布尔值，default: false }，//只读状态readonly: { type:布尔值，default: false }，//占位提示文字放置支架： {类型：字符串，默认值： '请选择' }, //展示的格式化format: { type: String，default: null } }，data(){ return { selecteditem : null，isShowPicker: false } }，computed: { //展示的格式化，时间提交的值是日期类型数据格式化公式(){ if(this。format){返回这个。format } else if(this。type==' date '){ return ' yyyy-MM-DD ' datetime ' } else if(this。type==' time '){ return ' hh :mm ' } else if(this。type=='年-月'){ return ' yyyy-MM ' }，text() { return this.value？this.dateFormat(this.value，this.formatFormula) : '' }，方法： { Dateformat :(value，format)={ if(！值)返回if(！(日期的值实例){ value=new Date(值)} let o={ ' M ' :值。getmonth()1，//month 'd ': value.getDate()，//day 'h ': value.getHours()，//hour 'm ': value.getMinutes()，//minutes ' S ' :值。getseconds()，//second ' q ' 3:数学。floor((值。getmonth(3)/3)，//quarty ' quarty ' format | | format==' '){ format=' yyyy-MM-DD hh :MM 3360s ' } if(/(y)/.测试(格式)){ format=format。替换(RegExp .$1，(value.getFullYear()' ').substr(4 - RegExp .$1.length)) }用于(让k进入o) { if (new RegExp('(' k ')').测试(格式)){ format=format。替换(RegExp .一美元，RegExp .$1.length===1？o[k] : ('00' o[k]).substr((' o[k]).长度))} }返回格式}、show() { if(！这个。readonly){ this。is show picker=true } }，确认（值){ //更新v型绑定的价值值，第二个参数是毫秒数，第三个参数是原始值，根据自己的项目的数据结构来修改//输入事件同时也会触发vee-验证的验证事件这个$emit('input '，value.getTime()，value) //onChange事件，虽然重写@输入可以实现，但这样会破坏v型写法这个$emit('change '，value.getTime()，value) this.cancel() }，//隐藏弹框取消(){此。isshow picker=false } } }/script效果

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。