Quasar Datepicker的mask属性如何转义普通字符串避免被解析为令牌

Quasar 的 q-input 组件中，mask 属性是用来定义输入约束规则的，属性值里的 d/a/y/s 等字符属于预定义掩码令牌，会被组件自动解析替换。你直接把计算得到的时长文本（比如2 Days）传给mask属性，其中的普通字符会被识别为占位符，最终出现2 Dfys这类错乱结果。
另外原代码存在两处逻辑问题：

• 计算时长时用了from.diff(to)，会得到负的时间差，最终生成的时长文本不准确
• 把日期对象序列化后的JSON字符串绑定给v-model，和展示时长文本的需求不匹配

方案1：移除mask，直接绑定格式化后的时长（推荐） #

输入掩码的作用是限制用户手动输入的格式，你的场景是日期选择后自动展示计算结果，完全不需要使用mask。直接把计算好的时长文本绑定给输入框，加readonly属性禁止用户手动修改即可。
修正后的完整代码如下：

<template>
  <q-input
    v-model="formattedDatepicker"
    outlined
    dense
    readonly>
    <template #prepend>
      <q-icon
        name="bi-calendar-check"
        class="cursor-pointer">
        <q-popup-proxy
          ref="qDateProxy"
          cover
          transition-show="scale"
          transition-hide="scale">
          <q-date
            v-model="data.datepicker"
            range>
            <div class="row items-center justify-between">
              <q-btn
                v-close-popup
                label="Close"
                flat
                color="text"
                :ripple="false" />
              <q-btn
                v-close-popup
                label="Select"
                :ripple="false"
                color="primary"
                flat />
            </div>
          </q-date>
        </q-popup-proxy>
      </q-icon>
    </template>
  </q-input>
</template>

<script lang='ts' setup>
  import {
    computed, reactive, watch,
  } from 'vue';
  import dayjs from 'dayjs';
  import duration from 'dayjs/plugin/duration';
  import relativeTime from 'dayjs/plugin/relativeTime';

  dayjs.extend(duration);
  dayjs.extend(relativeTime);

  const data = reactive({
    datepicker: {
      from: undefined as string | undefined,
      to: undefined as string | undefined,
    },
  });

  const formattedDatepicker = computed(() => {
    if (!data.datepicker.from || !data.datepicker.to) return ''
    const from = dayjs(data.datepicker.from);
    const to = dayjs(data.datepicker.to);
    // 修正时间差计算方向，用结束时间减开始时间
    return dayjs.duration(to.diff(from)).humanize();
  });

  // 弹窗打开时初始化本地数据
  watch(() => props.isOpen, () => {
    if (props.isOpen) {
      data.datepicker = {
        from: props.trip?.starting_date ? dayjs(props.trip.starting_date).format('YYYY/MM/DD') : undefined,
        to: props.trip?.ending_date ? dayjs(props.trip.ending_date).format('YYYY/MM/DD') : undefined,
      };
    }
  });
</script>

方案2：必须保留mask时，转义普通文本 #

如果业务场景必须使用mask属性，Quasar的mask规则支持用#标记后续连续字符为不需要解析的字面量，不会被识别为掩码令牌。比如要展示2 Days，对应的mask值写为2 #Days即可正常显示。
你可以修改时长计算逻辑，自动给非数字的文本部分添加转义标记：

const formattedDatepicker = computed(() => {
  if (!data.datepicker.from || !data.datepicker.to) return ''
  const from = dayjs(data.datepicker.from);
  const to = dayjs(data.datepicker.to);
  const durationText = dayjs.duration(to.diff(from)).humanize();
  // 拆分数字和文本部分，给文本部分加#转义前缀
  const [, num, text] = durationText.match(/^(\d+)\s*(.*)$/) || []
  return num ? `${num} #${text}` : ''
});

内容的提问来源于stack exchange，提问作者J. Jackson