@arco.design Modal renderContent 增加样式

方式一:通过 h 函数

import { h } from 'vue'

Message.error({
  content: () => {
    return h('div', {}, ['手机号 ', h('span', { style: { color: 'red' } }, staffPhone), ' 已存在'])
  },
})

在这里插入图片描述
方式二:通过 jsx 方式

注意:lang 需要改为 jsx 或者 tsx
<script setup lang="jsx">

Message.error({
  content: () => {
    return (
      <div>
        手机号 <span style="color: red">{staffPhone}</span> 已存在
      </div>
    )
  },
})
### Arco.Design 模块化使用指南 #### 3.1 按需加载简介 为了优化项目的打包体积并提升性能,按需加载成为现代前端开发中的一个重要概念。Arco.Design 支持通过多种方式实现组件库的模块化导入,从而减少不必要的代码冗余[^2]。 #### 3.2 使用 Babel 插件进行按需加载 对于 Vue 项目而言,可以借助 `babel-plugin-import` 实现 Arco.Design 组件的按需引入。安装该插件后,在 `.babelrc` 或者 `babel.config.js` 文件中配置如下: ```json { "plugins": [ ["import", { "libraryName": "arco-design", "style": true, "libraryDirectory": "es" }] ] } ``` 此设置允许只引入所需的特定组件及其样式文件,而不是整个组件库。 #### 3.3 手动引入单个组件 除了利用工具自动完成按需加载外,也可以手动挑选所需组件单独引入。例如要使用按钮(Button)和对话框(Dialog),可以在相应页面或组件内这样操作: ```javascript // main.js or any component file import { Button, Dialog } from 'arco-design'; import 'arco-design/es/button/style/css'; // Import CSS for button only import 'arco-design/es/dialog/style/css'; // Import CSS for dialog only export default { components: { AButton: Button, ADialog: Dialog } }; ``` 这种方式不仅能够精确控制哪些资源被加载到最终的应用程序中,还可以提高构建效率。 #### 3.4 配置 Webpack 解析路径 (可选) 为了让 import 路径更加简洁明了,可以通过修改 webpack 的 alias 设置简化路径书写: ```javascript module.exports = { resolve: { alias: { '@arco': path.resolve(__dirname, './node_modules/arco-design') } } }; ``` 之后就可以像下面这样做更短形式的 imports: ```javascript import { Input } from '@arco/components/input'; ``` 这种做法使得代码更具可读性和维护性。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值