Vue项目中修改IView的默认样式 以修改Modal组件的默认样式为例
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
问题描述
在开发过程中使用IView组件库中的Modal组件,想要修改Modal的宽度,但是直接修改Modal组件自带的类名不生效。
解决办法(以修改Modal组件宽度为例)
官方文档提供了如何修改Modal自定义样式的方法:IView-Modal对话框
在Modal组件中使用class-name来给对话框容器添加类名,添加的类名加到了.ivu-modal-wrap
这一容器上,可以辅助实现我们想要的自定义效果。
<template>
<Modal
class-name="modify-style"
title="修改IView默认样式">
</modal>
<Modal
title="修改IView默认样式"
:styles="{width: '800px'}">
</Modal>
<template>
<style>
.modify-style .ivu-modal {
width:800px !important;
}
</style>
如果对你有所帮助,请记得一键三联哦
GitHub 加速计划 / vu / vue
80
16
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:4 个月前 )
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 6 个月前
e428d891
Updated Browser Compatibility reference. The previous currently returns HTTP 404. 6 个月前
更多推荐
已为社区贡献1条内容
所有评论(0)