Vue中vc-date-picker使用masks属性自定义标题如何避免字符被解析

你遇到的展示异常确实是vc-date-picker的masks属性解析逻辑导致的：默认掩码字符串中所有未做转义的字母都会被识别为日期格式占位符，自动替换为对应的日期数值，所以你拼接的多语言办公室名称里的字符会被误解析。

vc-date-picker的日期掩码支持专用转义规则，只需要把不需要解析的静态内容用方括号[]包裹，包裹的内容就会原样输出，不会被识别为日期占位符。

修正后的组件配置如下，仅需调整masks属性的写法即可：

<vc-date-picker  
  class="consultation-calendar"
  ref="calendar"
  is-expanded 
  :masks="{title: `YYYY MMMM [${$t(`registration.${selectedOffice.office_key}`)}]`}"
  :first-day-of-week="2"
  mode="date" 
  :min-date="new Date(min_consultation_date)"
  :max-date="new Date(reservation_form.due_date)"
  v-model="form.consultation_date"
  @update:from-page="updateCalendarYear"
  :attributes="calendar_attribute"
  :disabled-dates="computed_calendar_setup.disabled_dates"
/>

如果你的多语言返回的办公室名称本身包含方括号[]，只需要把名称里的方括号再额外套一层方括号做转义即可，比如名称为[北京总部]，对应输出内容写为[[北京总部]]，就可以正常渲染出带方括号的原名称。

内容的提问来源于stack exchange，提问作者Ace