vue-router 默认路由模式为 hash 模式，该模式是使用 url 的 hash 来模拟一个完整的 url。但使用这种模式，URL 中会带一个 # 号（比如 http://127.0.0.1:9090/#/about），比较丑，不像是正常的 url。 除了默认的 hash 模式外，我们也可以用路由的 history 模式。 当我们使用 history 模式时，URL 就像正常的 url 了，例如 http://127.0.0.1:9090/about。不过要使用这种模式，还需要后台服务端的支持。下面以使用 …
在vue2.x下需要展示pdf，详见：https://blog.terrynow.com/2022/09/06/vue2-show-pdf-paging-http-header-with-token-pinch-zooom/ 不过在依赖添加了 后，有一个报错： vue-resize-sensor Cannot read properties of undefined (reading 'catch') 使用指定版本的pdfjs-dist和vue-pdf即可解决，如下： npm i [email protected]…
我们开发普通的下载链接，只主要写一个标签，不过有一些需求是要针对这个下载链接做权限校验，而权限校验需要在请求这个链接的时候，在Header里加上token之类的。 使用axios来调用get请求，并发送自定义的Header，然后把请求到的数据组成下载内容，示例代码如下： download() { axios.get('http://192.168.1.1:8081/api/export_pdf', { headers: { 'Content-Disposition': "attachment; filename=d…
需要在vue项目中的页面中显示PDF文件，经过一番查找，决定使用这个项目：https://github.com/FranckFreiburger/vue-pdf/ 另外还有手指缩放功能，使用的是：https://github.com/drozhzhin-n-e/vue-pinch-zoom package.json中引入： "dependencies": { "pdfjs-dist": "2.5.207", "vue-pdf": "4.2.0", "vue-pinch-zoom": "^0.2.5" } 最简单的使…
如下代码所示的菜单： <Menu mode="horizontal" :active-name="activeMenu" ref="menu"> <MenuItem name="menu1"> <Icon type="ios-paper" /> 内容管理 </MenuItem> <MenuItem name="menu2"> <Icon type="ios-people" /> 用户管理 </MenuItem> </Menu&…
iView下的Select选择器，使用了可搜索和远程搜索，示例如下： <Select v-model="model13" filterable :remote-method="remoteMethod1" :loading="loading1"> <Option v-for="(option, index) in options1" :value="option.value" :key="index">{{option.label}}</Option> </Select&g…
如题的需求：使用input 标签type=file来选择图片文件并显示在div/image标签中的实现。不过文件选择组件不能自定义我要的按钮，我使用了样式给input隐藏起来，然后自己再使用div画了一个按钮（选择照片） html代码如下: <div style="width:96px;height: 128px;border: #A2A2A2 1px solid;text-align: center;background: #FAFAFA;"> <img :src="portraitData" …
需要在网页浏览器中调用连接摄像头/音频，并显示在浏览器中 Javascript代码如下： this.getUserMediaToPhoto({ video: { width: 480, height: 320 }, audio: true }, function(stream) { var video = document.getElementById('video'); video.srcObject = stream; }, function(error) { console.log(error); }); /…
如图所示，VUE下需要实现通过鼠标拖动来实现左右的滚动效果（而不是拉动左右的滚动条） 可以使用github开源的滚动插件：https://github.com/donmbelembe/vue-dragscroll, 文档地址：https://vue-dragscroll.donfalcon.com/ package.json引入依赖(查看以下代码，其他依赖和配置我都省略了)： { "dependencies": { "vue-dragscroll": "^3.0.1" } } vue代码引入： import { d…
fontawesome的图标库还是很全的，使用fontawesome可以免费的很容易的整合高清的图标。 { "dependencies": { "@fortawesome/fontawesome-svg-core": "^1.3.3", "@fortawesome/vue-fontawesome": "^2.0.8", "@fortawesome/free-solid-svg-icons": "^6.1.1", "@fortawesome/free-regular-svg-icons": "^6.1.1", "@f…
