vue.js - 与 Pug 一起使用时 Vue 插件行为异常

Question

我正在使用 Vue 插件vue-masked-input来屏蔽我网站上的一些输入。默认情况下，该插件可以正常工作并且符合预期，但是在使用 Pug 运行相同的代码时，我遇到了问题。

工作代码：

<template>
  <masked-input v-model="phone_number"mask="\+\1 [phone]" placeholder-char="_" placeholder="[phone]" type="tel" />
</template>

不起作用：

<template lang="pug">
  masked-input(v-model='phone_number' mask='\+\1 [phone]' placeholder-char='_' placeholder='[phone]' type='tel')
</template>

我使用 Pug 已经有一段时间了，从来没有遇到过这样的问题。有人可以帮帮我吗？

标签： vue.jsnuxt.jspugmaskedinput

Answer 1

问题的解释

您问题中的 Pug 代码不会产生与“工作代码”相同的 HTML。（至少在原版 Pug 中；不确定何时将 Pug 和 Vue 一起使用，但我猜 Vue 使用相同的 Pug。）

pugjs.org上的大多数代码块都是可编辑的（例如在属性页面上）。您可以将 Pug 代码复制粘贴到那里的可编辑代码块之一，以查看最终结果：

<!-- Your "Working code" -->
<masked-input
  v-model="phone_number"
  mask="\+\1 [phone]"
  placeholder-char="_"
  placeholder="[phone]"
  type="tel"
/>

<!-- The HTML code generated from the Pug code -->
<masked-input
  v-model="phone_number"
  mask="+ [phone]"
  placeholder-char="_"
  placeholder="[phone]"
  type="tel"
></masked-input>

差异：

• masked-input标签不是自动关闭的。
• \+被转换为+。
• \1转换为\u0001（Unicode 控制字符“标题开头”）。
  • 该字符在上面的代码块中不可见，并且在编辑此答案时无论如何都会被剥离。
  • 该字符在 pugjs.org 上显示为一个红点。

来自 pugjs.org 的截图（出于演示目的，我使用浏览器的开发工具修改了右侧的代码块以跨越多行）：

如果您将mask属性的值从 pugjs.org 复制粘贴到vue-masked-input 的演示（在“您自己的掩码”标题下的左侧输入），您将获得与第二个屏幕截图相同的结果。这证实了问题很可能出在mask属性的不正确值上。

修复

需要对 Pug 代码进行两项更改才能修复 HTML：

• 通过附加斜杠进行masked-input自动关闭：masked-input()→ masked-input()/。
  • 这可能没有必要，但也不应该受到伤害。
  • 请参阅Pug 文档上的自闭标签。
• 用额外的反斜杠转义反斜杠：
  • \+→\\+
  • \1→\\1

像这样：

<template lang="pug">
  masked-input(
    v-model='phone_number'
    mask='\\+\\1 [phone]'
    placeholder-char='_'
    placeholder='[phone]'
    type='tel'
  )/
</template>

您也可以将 Pug 代码放在一行中，但将其放在多行上可以提高可读性。

结果（与您的“工作代码”相同）：

<masked-input
  v-model="phone_number"
  mask="\+\1 [phone]"
  placeholder-char="_"
  placeholder="[phone]"
  type="tel"
/>