element后台管理当navbar固定的时候,遮罩层覆盖diglog的问题

104 篇文章 0 订阅

fixedHeader: true, 当固定header 遮罩层覆盖diglog

  • 对遮罩层加属性 :modal-append-to-body=“false” 将遮罩层会插入至 Dialog 的父元素上
module.exports = {

  title: '人事系统',

  /**
   * @type {boolean} true | false
   * @description Whether fix the header 是否修复页眉
   */
  fixedHeader: true,

  /**
   * @type {boolean} true | false
   * @description Whether show the logo in sidebar
   */
  sidebarLogo: true
  // 展示侧边栏顶部图标
}
<el-dialog :close-on-press-escape="false" :modal-append-to-body="false" :close-on-click-modal="false" :visible.sync="passWordShow" width="600px">
      <!-- tabs -->
      <el-tabs>
        <el-tab-pane label="修改密码">
          <el-form ref="passform" label-position="top" :model="passform" label-width="50px" style="padding: 0 80px 0 80px">
            <div class="editbox">
              <el-form-item label="新密码:" prop="newPsaaWord" :rules="[{ required: true, validator:(rule, value, cb) => answerFN(rule, value, cb), trigger: 'blur' }]">
                <el-input v-model="passform.newPsaaWord" show-password />
              </el-form-item>
              <el-form-item label="确认新密码:" prop="confirmNewPsaaWord" :rules="[{ required: true, validator:(rule, value, cb) => answerFNTwo(rule, value, cb), trigger: 'blur' }]">
                <el-input v-model="passform.confirmNewPsaaWord" show-password />
              </el-form-item>
            </div>
          </el-form>
        </el-tab-pane>
      </el-tabs>
      <!-- 确定按钮 -->
      <div slot="footer" class="dialog-footer">
        <el-button @click="passWordShow = false">取 消</el-button>
        <el-button type="primary" @click="employeeNewPass">确 定</el-button>
      </div>
    </el-dialog>
  • 有其他好法子 麻烦评论区留言 我优化一下
React中的Navbar固定是指将导航栏固定在页面的某个位置,无论用户滚动页面与否,导航栏都会保持在固定位置。在React中实现Navbar固定的方法有多种,以下是一种常见的实现方式: 1. 首先,在React组件中引入所需的样式和组件库(如Bootstrap)。 2. 创建一个Navbar组件,并在组件的render方法中编写导航栏的HTML结构。 3. 使用CSS样式将导航栏设置为固定位置。可以使用position: fixed;将导航栏固定在页面的某个位置,例如顶部或底部。可以通过设置top、bottom、left、right等属性来调整导航栏的具体位置。 4. 在组件的生命周期方法中添加事件监听器,以便在用户滚动页面时更新导航栏的状态。可以使用window对象的scroll事件来监听页面滚动事件,并在事件处理函数中更新导航栏的状态。 5. 在组件的render方法中根据导航栏的状态来动态添加或移除CSS类名,以实现导航栏的固定效果。可以使用React的条件渲染功能来实现这一点。 下面是一个示例代码: ```jsx import React, { Component } from 'react'; import './Navbar.css'; class Navbar extends Component { constructor(props) { super(props); this.state = { isFixed: false }; } componentDidMount() { window.addEventListener('scroll', this.handleScroll); } componentWillUnmount() { window.removeEventListener('scroll', this.handleScroll); } handleScroll = () => { if (window.pageYOffset > 0) { this.setState({ isFixed: true }); } else { this.setState({ isFixed: false }); } } render() { const { isFixed } = this.state; return ( <nav className={`navbar ${isFixed ? 'fixed' : ''}`}> {/* 导航栏内容 */} </nav> ); } } export default Navbar; ``` 在上述示例中,Navbar组件根据isFixed状态来动态添加或移除CSS类名`fixed`,从而实现导航栏的固定效果。可以根据具体需求自定义CSS样式来实现不同的固定效果。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值