修改 ant design tour 漫游式导航的弹窗边框样式

 一 说明

        应项目要求,调整ant design tour 弹窗边框的样式。tour 原本样式是有遮罩层,因此没有边框看起来也不突兀。原图如下:

但是UI设计是取消遮罩层,并设置边框样式。当 取消 了遮罩层,没有设置边框样式的图片如下:

由上可以看出,不设置边框的tour似乎跟网页页面融合了在一起。因此,就需要设置边框。 设置后的效果如下:

二 实现方式

         最初我试着直接去修改ant design的内部css样式,修改 .ant-tour 的css 样式,但是始终不生效。于是,在反复观看官方文档,发现有一个全局token可以用来设置边框样式,那就是:

 因此,设置代码如下:

    <ConfigProvider
      theme={{
        token: {
          boxShadowTertiary: " 0px 4px 16px 0px red"
        },
      }}
    >
      <Tour open={true} mask={false} steps={step}/>
    </ConfigProvider>

  • 9
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
你想了解有关 Ant Design Vue 中弹窗的内容吗?Ant Design Vue 是一个基于 Vue.js 的 UI 组件库,它提供了丰富的组件,包括弹窗(Modal)组件。你可以使用 Modal 组件来创建弹窗窗口。 要使用 Ant Design Vue 的弹窗组件,首先确保你已经按照官方文档中的指导安装和引入了 Ant Design Vue。然后,你可以按照以下步骤来创建一个弹窗: 1. 在你的 Vue 组件中引入 Modal 组件: ```vue <template> <div> <a-button @click="showModal">打开弹窗</a-button> <a-modal v-model="visible" title="这是一个弹窗"> <p>这是弹窗的内容。</p> </a-modal> </div> </template> <script> import { Modal, Button } from 'ant-design-vue'; export default { components: { 'a-modal': Modal, 'a-button': Button, }, data() { return { visible: false, }; }, methods: { showModal() { this.visible = true; }, }, }; </script> ``` 在这个示例中,我们引入了 Modal 和 Button 组件,并在点击按钮时设置 `visible` 变量为 `true`,从而显示弹窗。Modal 组件是一个带有标题和内容的弹窗容器,你可以在其中放置任意内容。 2. 根据你的需求,你可以自定义 Modal 组件的行为和样式。你可以在文档中查找更多关于 Modal 组件的信息,例如如何设置弹窗的宽度、高度、遮罩等。 这就是使用 Ant Design Vue 创建弹窗的基本步骤。你可以根据你的实际需求对弹窗进行进一步的定制和使用。希望这能帮到你!如果你还有其他问题,请随时提问。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值