h5+vant+vue3 开发经验和技巧

前端小怪兽zmy

已于 2024-05-27 15:36:01 修改

阅读量249

点赞数 3

分类专栏：实践经验文章标签：前端

于 2024-04-12 17:01:41 首次发布

本文链接：https://blog.csdn.net/zmy967131/article/details/137687188

版权

实践经验专栏收录该内容

22 篇文章 0 订阅

订阅专栏

本文探讨了在Web开发中如何利用SVG保持图标质量，postCSS的px到rem转换、mixin复用以及在H5中解决字体一致性问题。此外，还介绍了如何在Vant库的dialog组件中通过teleport进行CSS修改以适应不同需求。

摘要由CSDN通过智能技术生成

1、大背景用PNG，小图标用svg。

svg主要是用于图标logo，可以做到不失真。缺点是没办法压缩，因为都是代码

2、开发时写的是px，后面会自动转换成rem，方便开发，实现的插件：postCss

https://juejin.cn/post/7062717813764390948?searchId=20240527152854E981ADE44961FA55D3E0

postCss还引入了mixin，定义可以在整个代码中重复使用的样式

在h5中，UI中的自动字体判断失效，每个开发对字体的判断都不一样，为了规范每一个开发人员的字体，因此用了这个功能。

定义代码：

css中使用代码：

配置postCss的vite.config.js：

3、vant中dialog的css无法更改，是因为它自动挂在的最底层的body节点中，没办法找到

方法：通过teleport配置更改挂载节点，这样样式就在挂载的div上了

  /**
   * 弹窗函数
   * @param text 弹窗文字
   */
  function showDialogWrap(text) {
    //登录按钮禁用
    canClick.value = false
    //弹出提示
    showDialog({ message: `${text}`, className: 'myDialog', teleport: '.dialogContainer' })
  }

//校验提示框
:deep(.dialogContainer) {
  .myDialog {
    width: 400px;
  }
  .van-dialog__content {
    padding: 20px;
  }
  .van-dialog__message {
    font-size: 26px;
  }
  .van-button__text {
    font-size: 26px;
  }
}