Ant Design of Vue input 添加特殊字符有个需求是在input里显示特殊的字符,使用 unicod

有个需求是在 input 里显示特殊的字符, 使用 unicode 均被原封不动输出;

这里以人民币符号为例:

¥   
    HTML代码 &#165;  &yen;


vue<a-input prefix="&yen;" suffix="RMB" />
<a-input prefix="&#165;" suffix="RMB" />

页面显示效果:

这不是想要的结果, 难道是编译的时候转码了,渲染到页面上被原封不动的输出了;

这时灵机一动使用 js 的 unicode 码试试, 查了下对应的编码是 \u00a5

于是就试了下

<a-input prefix="\u00a5" suffix="RMB" />

结果还是原封不动输出, 码蛋 &^% $%^%$ %^&***

转念又想了想, js 里定义个变量试试吧.

data () {
    return {
      yen: '\u00a5'
    }
  },

<a-input :prefix="yen" suffix="RMB" />

终于正常了, 同理 a-input-numbe 也试了试,完美了.

<a-input-number :min="0" :max="100" :formatter="value => `${yen}` +`${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')" />

在此记录下这个解决方式,以防我这个小菜鸟下次遇到又忘记了.

Ant Design of Vue input 添加 特殊字符