### uView 中 `setFormatter` 方法详解 在 uView 组件库中，`setFormatter` 是用于自定义日期时间显示格式的方法。通过此方法可以灵活调整日期时间的选择器展示样式以及返回的数据格式。 对于想要扩展到包含秒级别的 `DatetimePicker` 来说，在原有基础上增加对秒的支持之后，可以通过设置 `formatter` 属性来自定义最终呈现给用户的选项文字[^1]。 具体来说，当创建了一个支持更精细粒度的时间选择器（即加入了秒的部分），则可以在初始化组件时指定一个回调函数作为参数传递给 `formatter` 或者使用 `setFormatter` API 进行动态配置： ```javascript // 假设这是 my-datetime-picker.vue 文件内的部分代码片段 export default { name: 'MyDateTimePicker', props: { formatter: Function, // ...其他属性... }, mounted() { this.setFormatter(this.formatter); }, methods: { setFormatter(fn) { if (typeof fn === 'function') { this.$refs.picker.setFormatter((type, value) => fn(type, value)); } } } } ``` 上述例子展示了如何接收外部传入的 `formatter` 函数，并将其应用到内部使用的 picker 上面去。这里假设有一个名为 `picker` 的子组件实例被挂载到了 `$refs` 下方以便调用其自身的 `setFormatter` 接口[^2]。 为了更好地理解这个过程，下面给出一段完整的 HTML 和 JavaScript 代码来演示如何利用 `setFormatter` 定制化输出格式： ```html <template> <view class="content"> <!-- 自定义 datetime picker --> <my-datetime-picker ref="datetimePicker" v-bind="$attrs" @confirm="handleConfirm"></my-datetime-picker> <button type="primary" @click="toggleShow">打开</button> </view> </template> <script> import MyDateTimePicker from '@/components/my-datetime-picker'; export default { components: { MyDateTimePicker }, data() { return { show: false, // 用户确认后的结果会存储在这里 result: '' }; }, methods: { toggleShow() { this.show = !this.show; if (this.show) { this.$nextTick(() => { const customFormat = (type, val) => `${val}年${parseInt(val)+1}月`; this.$refs.datetimePicker.setFormatter(customFormat); }); } }, handleConfirm(value) { console.log('Selected date:', value); this.result = JSON.stringify(value); this.toggleShow(); } } }; </script> ``` 在这个案例里，每当点击按钮触发 `toggleShow()` 后都会重新设定一次新的格式化逻辑；而一旦选择了具体的日期，则会在控制台打印出来并通过字符串形式保存起来供后续处理。