首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Bootstrap Vue侧边栏关闭侧边栏后,滚动回到切换按钮所在的位置

Bootstrap Vue 是一个基于 Vue.js 的开源框架,它可以帮助开发者快速构建响应式的 Web 应用程序。Bootstrap Vue 的侧边栏组件可以实现侧边栏的展示和隐藏,并且提供了回到切换按钮所在位置的功能。

在 Bootstrap Vue 中关闭侧边栏后滚动回到切换按钮所在的位置,可以通过以下步骤实现:

  1. 在 Vue 组件中引入 Bootstrap Vue 的侧边栏组件和相关的样式文件。
代码语言:txt
复制
import { BSidebar, BButton } from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
  1. 在 Vue 组件的模板中使用 BSidebar 和 BButton 组件创建侧边栏和切换按钮。
代码语言:txt
复制
<template>
  <div>
    <b-button @click="toggleSidebar">切换侧边栏</b-button>
    <b-sidebar v-model="showSidebar" @hidden="scrollToButton">
      <!-- 侧边栏内容 -->
    </b-sidebar>
  </div>
</template>
  1. 在 Vue 组件的脚本中定义相关的数据和方法。
代码语言:txt
复制
export default {
  data() {
    return {
      showSidebar: false
    }
  },
  methods: {
    toggleSidebar() {
      this.showSidebar = !this.showSidebar
    },
    scrollToButton() {
      const buttonElement = document.querySelector('b-button')
      buttonElement.scrollIntoView({ behavior: 'smooth' })
    }
  }
}

在上述代码中,通过点击切换按钮来改变 showSidebar 数据的值,从而控制侧边栏的显示和隐藏。当侧边栏隐藏后,会触发 hidden 事件,然后调用 scrollToButton 方法,使用原生的 JavaScript API scrollIntoView 将切换按钮滚动到可视区域。

这样就实现了 Bootstrap Vue 侧边栏关闭后滚动回到切换按钮所在位置的功能。

推荐的腾讯云相关产品:腾讯云服务器(CVM)和腾讯云容器服务(TKE)。腾讯云服务器提供可扩展的云计算能力,适用于各种规模的应用程序和工作负载;腾讯云容器服务则提供了一种简化的容器管理解决方案,可帮助开发者轻松部署、管理和扩展应用程序。

更多关于腾讯云服务器和腾讯云容器服务的信息,请访问以下链接:

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

【vite+vue3+Ts+element-plus】肩并肩带你写后台管理之主页面开发(侧边菜单生成、标签开发)

margin-left: 16px; transition: all 0.3s; &.row { transform: rotate(90deg); } } 这里控制侧边折叠按钮我是通过...我们在按照以下层级创建侧边需要用到组件 layout -> components -> Sidebar -> index.vue , SidebarItem.vue, SidebarMenu.vue...,还有一个小细节,就是当标签比较多了之后,我们通过侧边或者其他方式跳转到已经访问过页面,如果该页面的标签被超出屏幕被隐藏了,我们需要把标签滚动到该标签位置。...比如首页,固定标签不可关闭,这里是通过在菜单管理时候配置是否固定标签,固定标签排序顺序跟菜单排序顺序一样。...如果是公共路由,我们也可以给路由meta配置affix: true来实现。 固定标签没有关闭按钮 页面切换过渡效果 刚才说标签时候提到了缓存页面,不过没有说怎么写,这里和过渡效果一起说。

4.1K31
  • 这个key我查了,没问题

    案发现场 Vue 项目,页面上点击在某个功能按钮切换左侧菜单,控制台报照片上错误,页面卡死。...初步分析 这个 Vue 项目侧边是登录根据用户权限数据动态渲染出来侧边菜单深度达到三级,动态绑定部分涉及到 v-for 嵌套使用,侧边点击时候会不会是那里 key 有问题导致,由于之前这个项目也了解一些...功能按钮,再次点击侧边切换页面异常。...根据多次测试发现如下几点 侧边 key 是正常,签入功能执行后会影响页面渲染,侧边点击切换异常是 签入 功能导致 通过打印log,发现 vue 页面的 created 事件能进入, mounted...之前分析页面切换能进入 created 函数,通过把 template 里面内容全部注释随便写个文字运行尝试,发现侧边点击页面正常切换,内容正常显示,控制台无报错,看来是 template 里面的某个元素收影响了

    92420

    vue系列教程之微商城项目|分类

    描述 本文需要实现页面如下,点击左侧导航按钮,右侧自动滑动到对应位置。当滑动右侧内容,左侧导航也要做出相应变动。 ?...静态布局 顶部导航引入 fenlei.vue ? ? 引入侧边导航 结构大致如下,需要content-style占满屏幕中剩余空间,也就是除去顶部和底部导航空间. ?...在fenlei.vue中引入请求函数,并在created函数中请求数据,保存到goods属性中. 请求数据(res.data)结构如下 name为分类名称,需要放入侧边导航。...sub为该分类对应商品分类列表. ? 遍历goods数组,将每个元素name放入侧边导航元素中 fenlei.vue ? ? ?...赋值给wheel中selectedIndex属性,就完成了点击左侧导航按钮,右侧自动滚动到对应内容.完整代码如下 fenlei.vue ?

    6.4K10

    VSCode之快捷键和常用插件

    +/ 自动换行 Alt+z F8 移动到下一个错误位置 shift+F8 移动到上一个错误位置 F3 查找快捷键或者 ctrl+F ctrl+D 跳转选中各个相同关键词 ctrl+alt +上下左右箭头...翻转屏幕 ctrl + I 选中光标所在行 分屏快捷键 ctrl + | Alt+shift+F 自动格式化代码 按住shift滚动滚轮可实现左右滚动 ctrl+F2 更改所以匹配项 查找并更改所有的匹配项...个编辑器快捷键:Ctrl+1 Ctrl+2 Ctrl+3 3 个编辑器之间循环切换:Ctrl+ 编辑器换位置, Ctrl+k然后按 Left或 Right 2.2 代码编辑 2.2.1 代码调整 代码行缩进...查找 Ctrl+F 查找替换 Ctrl+H 整个文件夹中查找 Ctrl+Shift+F 2.4 显示相关 全屏:F11 zoomIn/zoomOut:Ctrl +/- 侧边显/隐:Ctrl+B 显示资源管理器...3 Snippets bootstrap必备 13)Vue 2 Snippets vue必备

    2K10

    『React Navigation 3x系列教程』createDrawerNavigator开发指南

    backBehavior: 后退按钮是否会导致标签切换到初始drawer? 如果是,则设切换到初始drawer,否则什么也不做。 默认为切换到初始drawer。...自定义侧边(contentComponent) DrawerNavigator有个默认滚动侧边,你也可以通过重写这个侧边组件来自定义侧边: contentComponent:(props)...侧边操作(打开、关闭切换) 侧边支持以下几种操作方式: navigation.openDrawer(); navigation.closeDrawer(); navigation.toggleDrawer...其中路由名openDrawer对应这打开侧边操作,DrawerClose对应关闭侧边操作,toggleDrawer对应切换侧边操作,要进行这些操作我么还需要一个navigation,navigation...可以从props中获取; 打开侧边:navigation.openDrawer();; 关闭侧边:navigation.closeDrawer();; 切换侧边:navigation.toggleDrawer

    7.1K10

    WordPress免费主题:Document,让阅读变得更加方便

    新建菜单 添加菜单项 发布到顶部菜单  5.小部件、侧边 主题具有文章信息、作者信息、最新文章、最近更新 四个小部件(小部件自带配置,可在添加时候填写),添加默认在文章页面的右侧边显示。...黑夜、白天阅读模式切换、主题色切换 支持黑夜、白天阅读模式,主题色切换,悬浮在屏幕右下角,附带一个屏幕滚动进度; 3....导航搜索 上一篇、下一篇文章 一键回到顶部 主题色、阅读模式切换 文章点赞、踩 文章浏览、评论、发布时间、作者信息显示 4....主题前端优化 文章页右边正常高度时,跟随文章滚动滚动高度超出侧边高度时自动悬浮,保持右边侧边始终存在元素,不会空白; 访问首页时显示自定义站点描述,文章页时自动截取文章内容作为网页描述; 优化...、成功文字块、错误文字块、失败文字块、图片灯箱、文字标记 自定义顶部菜单 404页面 搜索空结果页面 文章密码权限控制 20220617更新 修复窗口大小改变时,固定状态下左右侧边位置没有同步变动,

    4.2K30

    搭建后台管理系统思路

    个人体会是整体基础框架,这个是指最基础框架,比如根 router-view, 侧边以及侧边router-view,以及顶部,等基础布局控制。...页面他是两布局,一是我们侧边导航侧边 如何完成这个两布局 可以使用 float 可以使用弹性布局 display: flex 也可以使用定位 侧边导航,可能我们需要来研究 element-ui...组件 NavMenu 导航菜单 侧边导航需要我们路由一些信息,比如路由对应组件,就像 router-link 对应 router-view 如果菜单是二级菜单,三级菜单,需要怎么处理 如果需要折叠菜单...面包屑 消息通知 下拉菜单 关闭展开侧边按钮 面包屑 需要注意什么呢?...需要注意是否需要点击跳转,定位到那一级菜单问题 需要研究 Breadcrumb 面包屑 关闭展开侧边按钮 需要使用 vuex 来存储打开与否这个状态值,通过 vuex 来更改状态 AppMain.vue

    2.8K20

    最新iOS设计规范三|3大界面要素:(Bars)

    (Bars) ,可以告诉用户在APP中当前在所在位置、能提供导航,还可能包含用于触发操作和传递信息按钮或其他元素。包括6种:导航、搜索侧边、状态、标签、工具。...考虑在搜索下方提供有用快捷方式和其他内容。使用搜索下方区域可帮助人们更快地获取内容。例如,Safari会在您点击搜索字段立即显示您书签。选择一个即可直接进入,而无需输入任何搜索词。...允许用户隐藏侧边以为其内容创造更多空间,并使用内置边缘滑动手势再次显示侧边。避免在默认情况下隐藏边侧边标题要保持简洁明了。省略不必要和多余词。...为了使您界面具有可预测性,选择一个选项卡应始终影响直接连接到选项卡视图,而不影响屏幕上其他位置视图。例如,在拆分视图左侧选择一个选项卡不应导致拆分视图右侧突然改变。...但需要考虑给文本标题按钮足够空间。 ? 避免在工具中使用分段控件。分段控件允许用户切换上下文,而工具只对当前页面提供操作。如果你需要切换页面,请考虑使用标签

    9.9K10

    超好看30款网站侧边设计

    第一部分:为什么需要网站侧边侧边其实就是一种比较经典网站导航设计,它形式通常为竖向一列,展示在网站右侧或者左侧,具体位置当然是取决于整体设计。...Jasminestar Jasminestar侧边文本设计比较独特,看起来像一个左旋90°顶部导航,并且使用留白突出显示,还提供了关闭按钮,方便用户以自己喜欢方式浏览页面。 ? 7....Charliewaite Charliewaite是由设计师Charlie Waite创建个人网站,他使用了大尺寸侧边,展示了自我介绍、设计按钮以及问候语。 ? 16....Intechnic Intechnic具有纯文本排列侧边,还有关闭选项。 ? 22. Wiggs photo Wiggs photo侧边集Logo和导航于一体。 ? 23....此外,使用一些现成导航模板也是一个不错方法,推荐这30个优秀Bootstrap导航模板,用户访问又快又准。 设计+协作,摹客就够了!

    12.3K10

    CSS 侧边在小屏设备中进行隐藏

    图片 侧边作用应该就不用多说了吧,能够很方便我们回到网页指定位置,在大屏设备中,侧边往往是悬浮于屏幕右侧,很方便用户使用,但在小屏设备中,屏幕空间有限,所以我们会通过隐藏侧边方式,来节省视口空间使用...我们先来看下,在大屏设备中,侧边如何显示,继而再讲述,从大屏设备切换到小屏设备,侧边如何隐藏,国际惯例,先看 HTML 结构代码 <img src="img...position: fixed; top: 140px; } .c_nav_tips { display: none; } } JS <em>滚动</em>条事件代码如下...,只有在浏览者需要用到<em>侧边</em><em>栏</em>中<em>的</em>时候,再将<em>侧边</em><em>栏</em>显示出来,在宽度小于等于 1410 px <em>的</em>设备中,<em>侧边</em><em>栏</em>将会在屏幕右侧进行隐藏,并会出现一个提示图片,当鼠标移至图片上时,提示图片隐藏,<em>侧边</em><em>栏</em>出现;当鼠标从<em>侧边</em><em>栏</em>上移开时...,<em>侧边</em><em>栏</em>隐藏,提示图片出现 CSS 媒体查询代码如下 @media screen and (max-width: 1410px) { .c_nav_side { right: -

    1.9K30

    iOS好用第三方侧边控件——MMDrawerController

    点击导航时可以关闭侧边 MMCloseDrawerGestureModeTapNavigationBar = 1 << 4, //点击中心视图控制器视图时可以关闭侧边...@property (nonatomic, strong) UIColor * statusBarViewBackgroundColor; 相关方法解析如下: //切换侧边状态,drawerSide...参数为要切换侧边,animated设置是否有动画效果,completion会在切换完成执行 //注意:如果在切换一个关着侧边时,如果另一个侧边正在开启状态,则此方法不会有任何效果 -(void...要将开启侧边关闭侧边模式设置为MMOpenDrawerGestureModeCustom和MMCloseDrawerGestureModeCustom才有效 -(void)setGestureShouldRecognizeTouchBlock...,这个类可以创建三道杠菜单按钮

    2.8K20

    手势魅力-设置一个触摸菜单

    这个手势方向:你想只能水平移动,或者还是垂直移动?也许是两个? 拖动完成你想要发生什么?它会回到开始还是结束,取决于它在哪里结束?它是否考虑到速度? 详情:我们是否正在用这个手势记住速度?...在我情况下,我只希望手势方向是水平,因为我希望滚动功能正常。我有限制,并且我希望它回到开始或结束。...也就是说,如果将其拖过宽度中间,并且拖动速度大于定义速度(也就是若手指拖动侧边超过该菜单本身宽度一半位置的话,或者拖动速度大于刚开始定义速度,则该侧边关闭或者打开,若不是,则恢复初始前一个位置...DOM中实际位置,这时,需要考虑手指是水平滑动还是垂直,甚至有时候还得考虑手倾斜滑动,还要区分是一根手指滑动,还是多根手指滑动,侧边菜单动画实现,以及要注意阻止默认事件,重叠计算等等一些细节 看似简单效果...(设置限制),也就是侧边菜单滑动位置 重叠计算(透明度变化,也就是用小数来计算,百分比值) 动画结束(菜单打开和关闭状态,菜单位置) 以下是本文陌生词汇(仅供参考) 1.

    1.8K40

    360常用快捷键_10个常用快捷键

    F2、Ctrl + PageUp 切换到下一个标签 F3、Ctrl + PageDown 切换标签 Ctrl+Tab、Ctrl+Shift+Tab --------------------------...--------- 恢复刚关闭标签 Ctrl+E、Alt+Z 新建标签 Ctrl+T 复制标签 Ctrl+K 关闭当前标签 Ctrl+W、Ctrl+F4 关闭其他标签 Ctrl+Alt+W 关闭所有标签...Ctrl+Shift+W ----------------------------------- Alt+ ← 查看之前浏览记录(后退) Alt+ → 查看之后浏览记录(前进) Alt+F4 关闭...== =================================== 添加收藏 Ctrl+D 显示/隐藏收藏 Ctrl+B 显示/隐藏侧边 Ctrl+Shift+S 显示收藏夹菜单 Alt+...Alt+C 打开侧边收藏夹 Alt+E 展开编辑菜单 Alt+F 展开文件菜单 Alt+H 展开帮助菜单 Alt+M 展开菜单更多按钮,用于调整一些类似激活新窗口,使用ie访问等。

    90720

    在 Windows 11 上关闭弹出窗口最正确方法

    以下是完全关闭应用通知方法: 按Windows + i打开设置。单击“系统”以从左侧边中选择相同内容。 在右侧,单击“通知”。 关闭顶部“通知”开关。...这些建议不仅令人讨厌,而且还浪费了宝贵空间。以下是禁用它们方法: 打开文件资源管理器。 然后单击顶部工具省略号按钮。 选择“选项”。 单击并切换到“查看”选项卡。...然后向下滚动并找到“弹出窗口和重定向”并单击它。 打开“阻止(推荐)”切换开关。 您将不会再收到任何烦人弹出窗口。...另外,如果您希望关闭具有侵入性或误导性广告,您可以回到“Cookie 和网站权限”页面,然后选择“广告”。 在这里,也可以切换“打开”“阻止显示侵入性或误导性广告网站”选项。...regedit 现在使用左侧边导航到以下路径。您也可以在屏幕顶部地址中复制粘贴相同内容。

    53010

    如何用 CocosCreator 对接抖音小游戏侧边复访

    这个我还真不知道,那只能去官方看文档了,位置是小游戏开发文档 -> 指南 -> 开放能力 -> 侧边能力。...文档我也大概看了,大概流程就是打开游戏,判断是不是侧边进来,是的话就相当老用户给他一些奖励,不是的话给一些引导弹窗,让用户触发打开侧边。...流程创建去侧边按钮和引导层对接抖音提供方法检测和跳转打包后去抖音开发工具调测操作创建去侧边按钮打开游戏场景画布,找到主界面面板,分别添加 “去侧边按钮节点” ,添加图文素材。...创建引导层节点继续在主界面下添加引导层空白节点,就是展示一个遮罩,一个引导图片和跳转侧边关闭按钮。...关闭侧边引导对话框 this.btnCloseSidebar.on('touchstart', this.closeSidebar, this); // 点击进入抖音侧边

    18610

    Joe主题再续前缘版 - 本站同款

    ,打开QQ内可直接调用QQ浏览器 UC浏览器 打开网址 新增开启关闭文章评论画图模式功能 新增首页文章列表可分别放置移动端和PC端谷歌广告代码,可设置两处展示位置关闭 新增博主鼠标移入漂浮物可设置显示或隐藏...移动端情况下侧边头像优化为圆形 新增移动端可设置侧边壁纸显示模式为半屏或全屏 新增可自定义侧边登录注册URL函数 优化移动端当页面已经往下滑动之后点击分类等栏目不会返回顶部 文章收录检测失败改为手动提交收录...新增如果主题没有配置邮箱那么用户注册时则无需验证码 1.12 优化打开文章导读目录后背景层模糊效果 优化移动端侧边功能模块背景为85%白色透明效果 可配合壁纸高度功能使用全屏壁纸 新增可开启或关闭...BUG 新增可开启页面顶部位置展示屏幕浏览进度条 新增可开启页面底部位置展示灵动鱼群跳跃,增添网站灵动气氛 优化文章导读目录点击处理流程 采用描点拦截无感滚动定位技术 优化首页推荐文章推荐卡片显示位置...需要用请使用主题内自定义js代码设置引入 还原移动端侧边和搜索动画,移除毛玻璃效果,因为毛玻璃对页面的性能下拉太严重了 移除控制台页面加载计时,减少臃肿性 新增反QQ用户恶意举报功能 新增可开启关闭反蜘蛛爬虫非法扫描

    3K20

    11 个高级 Vue 编码技巧

    我最近在一个项目中使用它来生成动态侧边导航组件。我在路由器中某些路由上设置了一个 showInSidebar 元数据属性,我想隐藏在侧边中。...客户端还有一个额外要求,他们不仅需要从路由器生成这些侧边路由,还需要从他们 API 数据生成这些侧边路由。上述方法也以一种干净且可管理方式解决了这个任务。...在此下方(此处未显示)我还有一个单独部分,允许侧边切换到使用从 API 发送一组路由。...5、路线更改时滚动到顶部 当更改路线ni时,Vue 会保持在页面上的当前位置。这有时很有用,但主要是麻烦。如果向下滚动一个长列表,然后转到另一个页面,滚动条将位于新页面的底部,而不是期望顶部。...只需在 app.js 文件中添加一个 watch: 在每次路由更改触发滚动到顶部: // In App.vue watch: { $route() { window.scrollTo

    2.6K30
    领券