vue-admin-template Drawer抽屉 显示下拉箭头

最新推荐文章于 2023-09-12 15:35:40 发布
最新推荐文章于 2023-09-12 15:35:40 发布
阅读量671 收藏 1
点赞数 1
分类专栏： Python 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jidushanzhu/article/details/122150231
版权

使用抽屉组件展示pdf文档，pdf文档放public文件夹下按照参考文章2，3可实现抽屉显示pdf文档，但仍存在两个主要问题：一是无法拖动上下连着的PDF页面，二是PDF文档宽度有点短，看不清PDF文档。

第一个问题解决方法网上有很多文章，修改代码主要的地方是删除style中的scoped，此外设置el-drawer的格式。

  .el-drawer {
    overflow: scroll;
  }

第二个问题：第一个解决办法，<pdf>中的style设置width变大后可左右拖动，但是不方便；

第二个解决办法大概意思是通过chrome调试找到对应的element.style设置width即可，但程序中如何实现还在解决

【参考文章】

【1】element-ui Drawer 抽屉 滚动条解决 - TinaRoot - 博客园

【2】使用vue-pdf进行pdf预览及打印及滚动显示pdf，本地运行和部署均成功 - 知乎

【3】vue-pdf 插件 不翻页 滚动效果_闲人有点忙的博客-CSDN博客_vue-pdf 滚动加载

【4】Element - The world's most popular Vue UI framework

jidushanzhu
关注
专栏目录
vue-element-admin 和 vue-admin-template及新版本vue-element-admin调用后端接口和跨域
xxh_1229的博客
01-20 5248
vue-element-admin 和 vue-admin-template简介及新版本vue-element-admin调用后端接口和跨域 一、vue-element-admin 1、简介 而vue-element-admin是基于element-ui 的一套后台管理系统集成方案。 功能：https://panjiachen.github.io/vue-element-admin-site/zh/guide/ GitHub地址：https://github.com/PanJiaChen/vue-eleme
运行vue-admin-template和vue-element-admin及可能问题点解决
garra_的博客
07-20 1492
系统：windows10，64位 需求：安装node.js，git客户端（ssh公钥设定好），安装node-sass。 前提 安装好node.js ，配置好环境 安装好的nodejs文件夹下如下图所示，其中node_global和node——cache是自行创建，在配置环境时需要加载。 环境配置： 我的电脑（右键）-->属性-->高级系统属性-->高级-->环境变量-->用户变量-->path中，新建增加nodejs安装文件夹位置和nodejs安装文件夹.
菜单动态变箭头DrawerArrowDrawable
08-11
NULL 博文链接：https://iaiai.iteye.com/blog/2231911
iview+vue左侧打开抽屉的图标
无极
11-11 1197
1、实现效果 2、代码 css <style> .Anchor_fixmain{ position: fixed; top: 0; left: 0; z-index: 101; border-left: 1px #ccc solid; width: 0; height: 100%; -webkit-b...
vue笔记：抽屉样式记录
qq_44429079的博客
12-03 491
代码： <div class="step1"> <div class="chosetitle">1.选择抽屉</div> <!-- drawer_area 抽屉区 --> <div class="drawer_area"> <div class="row" :class="nowDrawId == item.id ? 'ac.
vue-element-admin遇到的一些小问题
sxm的博客
05-27 125
vue-element-admin 导航栏选中背景颜色 使用vue-element-admin想修改背景颜色可以使用一下css （放全局css文件中） #app .sidebar-container .el-submenu .el-menu-item.is-active { background-color: #40a0ff28 !important; } vue-element-admin 快捷导航栏 需求是快捷导航栏两边有箭头点击快捷导航栏移动如图效果： 找的项目 src\layo.
el-drawer组件封装及调用（包含动画效果）
qq_42241873的博客
08-05 7199
el-drawer组件封装及调用（包含动画效果） 开发项目中用到elementUI的抽屉组件，但是都没有去封装成组件并且加入动画效果，这篇文章参考其他人的文章写的，在这里只是做个记录； 界面效果参考elementui官网【网址：https://element.eleme.io/#/zh-CN/component/drawer】动画效果即可；这里就不展示了； 为尊重他人成果，这里是在下参考借鉴的网址： 网址 废话不多说，上代码并进行注释 以下是封装好的组件 <template>
两小时从零学会vue-admin-template框架
drhrht的博客
03-06 6679
一、vue-admin-template 1.项目简介 官网：https://github.com/PanJiaChen vue-element-admin是含有丰富的组件，vue-admin-template是一个基础的单页面应用的框架，适合在vue-admin-template上二次开发，开发需要的组件就可以直接的从vue-element-admin里面拷贝上去。适合于后台管理的中小型项目，内部的架构非常的完善，简单易上手。 1.2下载项目 vue-element-admin 官网 vue-admi
vue-admin-template 404跳转问题
BoomJNTM的博客
01-26 1631
解决设置动态路由后的404跳转的问题 在src下的permission.js中的router.addRoutes(accessRoutes)后面加上404路由代码，如下 router.beforeEach(async(to, from, next) => { // start progress bar NProgress.start() // determine whether the user has logged in const hasToken = getToken()
vue-admin-template开发（头像上传功能）
黑马Jack的博客
05-19 3032
vue-admin-template开发（头像上传功能） vue-admin-template是一个后台管理系统的前端框架，提供了登录、导航栏、路由等功能，是一个强大简洁的后台管理系统的前端框架。本文将讲述在 vue-admin-template 的基础上进行二次开发，把 vue-element-admin当做工具箱。 锁定头像上传功能 我们以vue-element-admin的头像上传为例，简单描述如何将头像上传功能移植进入到vue-admin-template中 锁定头像上传功能代码 首先在浏览器导
element-ui中drawer的简易使用介绍，重点介绍调整drawer宽度
qq_43620216的博客
05-22 3175
我们通过el-button来显示Drawer，通过visible.sync来控制Drawer的显示状态。通过设置size属性来调整Drawer的宽度。
vue实现左右伸缩(el-drawer自定义位置展开收缩)
wangjie的博客
09-12 2785
vue实现左右伸缩(el-drawer自定义位置展开收缩)
【Vue】vue-pdf 的简单封装使用
日常问题bug解决、学习分享、个人杂谈等等随便写写哈哈哈
11-24 113
参考文章 可以先去看看这篇博客，了解基本的使用方法。 vue-pdf实现pdf文件在线预览 封装组件 PdfPreview.vue <template> <div class="pdf-wrapper" ref="wrapper"> <pdf ref="pdf" :src="pdfUrl" v-for="i in numPages" :key="i" :...
抽屉el-drawer vue-pdf 显示PDF 迅速重复显示为空白
jidushanzhu的博客
01-20 734
抽屉显示PDF，小文件重复显示点快了，仍然显示正常，大文件重复显示点快了为空白，后面再点就无法正常显示了。 【原因】具体原因不太清楚，自己挨个试一试，大概可能是缓存，未清除变量的问题 【解决办法】在el-drawer 关闭时的回调函数中，令 this.mydrawer = false this.pdfsrc = '' this.numPages = null this.pageCount = 0 后面显示就正常了 ...
vue + element 实现在线预览pdf并进行打印
hong
09-28 2703
vue + element 实现在线预览pdf并进行打印 element ui 实现在线预览pdf地址并打印 百度了看很多文档都说需要安装一些插件之类的问题 其实不需要 现在大多数的浏览器都支持打印和预览 很简单的一句代码实现 1.添加打印按钮 <el-button type="primary" @click="printBtn(scope.$index, scope.row)">打印</el-button > 添加打印事件 我的地址是后端生成的 直接带过去 使用window
element-ui el-drawer组件在指定div内打开
qq_2411868438的博客
04-27 9300
写在前面 element-ui组件库中的el-drawer默认是相对整个网页窗口呈抽屉形式打开，如果有开发需求要求在指定的div里面打开呢 具体实现 其实也很简单，核心是设置父元素position:relative或absolute，再设置el-drawer的position:absolute，使它相对于它的父元素定位 部分代码示例： （*注:vue语法环境） <div style="height:680px"> <h2>这里是h2...
el-drawer的入门学习
qq_40765784的博客
08-22 7077
el-drawer入门实例
vue-admin-template笔记（六）
seedcup的专栏
12-16 6876
文章目录Vue学习笔记（六）layoutlayout.jsResizeHandler.jsnvabar.vuehamburgerBreadcrumbAppMain.vuesidebarsidebaritemitemlink总结参考 Vue学习笔记（六） 学习vue-admin-template https://github.com/PanJiaChen/vue-admin-template 这...
VUE组件 之 Drawer 抽屉
YUSIR 完美CODING世界
11-08 6663
一、源码地址 https://github.com/imxiaoer/DrawerForVue 二、效果图 三、具体代码 drawer.vue <template> <div class="drawer"> <div :class="maskClass" @click="closeByMask"></div&gt...
vue-admin-template和vue-element-admin
最新发布
09-13
vue-admin-template和vue-element-admin是两个不同的项目。 vue-admin-template是一个基于vue-element-admin的后台管理系统基础模板，可以作为模板进行二次开发。它提供了一个简洁的基础框架，适合用于中小型后台...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值