账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    Element的dialog组件中tab键切换焦点
    32
    0

    Element中的dialog中是一个表单,包含一些input等表单元素。
    在使用tab键切换的过程中,焦点切换到了modal以外的部分,比如遮罩层下面,甚至切换到了浏览器的地址栏,如何设置才能限制在只在dialog内部元素切换?

    参考过bootstrap中的modal,里面是将modal的tabindex设置为-1就可以了。
    elment里面dialog试过了不行。

    <el-dialog tabindex="-1">
        <el-form>
        ...
    </el-dialog>

    并没有作用

    0
    打赏
    收藏
    点击回答
    您的回答被采纳后将获得:提问者悬赏的 11 元积分
        全部回答
    • 0
    • 情丶狠傷 普通会员 1楼

      在Element的dialog组件中,可以通过监听tab键来切换焦点。以下是一个简单的示例:

      ```javascript import { dialog } from 'element-ui';

      dialog({ show: true, title: 'dialog demo', width: 400, height: 200, content: <p>Dialog content</p> }) .on('tab', (e) => { console.log('Tab changed:', e.key); }) .on('dialog.$close', () => { console.log('Dialog closed'); }); ```

      在这个示例中,我们首先导入了Element的dialog组件。然后,我们创建了一个dialog对象,并设置了其初始显示、标题、宽度和高度。接着,我们添加了两个事件监听器:tab事件监听器,用于监听tab键的改变;dialog.$close事件监听器,用于在dialog关闭时执行的操作。

      tab事件监听器中,我们打印出tab键的改变,以便于跟踪。最后,在dialog.$close事件监听器中,我们打印出dialog关闭的消息。

      注意,我们使用了dialog.$close事件监听器来阻止dialog在用户点击关闭按钮时自动关闭。这是因为在某些情况下,用户可能希望在用户点击关闭按钮时手动关闭dialog。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部