vant4中如何修改Dialog弹框内容的字体大小

最近在开发一个移动端的需求,用的UI组件库是vant4

简单地总结一下,如何修改Dialog弹框内容的字体大小

我们先看一下Dialog弹框简单的使用

javascript 复制代码
import { showConfirmDialog } from 'vant';

showConfirmDialog({
  title: '标题',
  message:
    '如果解决方法是丑陋的,那就肯定还有更好的解决方法,只是还没有发现而已。',
})
  .then(() => {
    // on confirm
  })
  .catch(() => {
    // on cancel
  });

那么如何修改message中的字体大小呢?

通过allowHtml这个属性设置为true,同时在message使用html的写法。
allowHtml 是否允许 message 内容中渲染 HTML

代码如下:

javascript 复制代码
import { showConfirmDialog } from 'vant';

showConfirmDialog({
  title: '标题',
  message:`<p style="font-size:16px;">如果解决方法是丑陋的,那就肯定还有更好的解决方法,只是还没有发现而已。</p>`,
  allowHtml:true // 是否允许 message 内容中渲染 HTML
})
  .then(() => {
    // on confirm
  })
  .catch(() => {
    // on cancel
  });

这样 message 内容中的字体大小就是16px了。