需要在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…
页面内点后某个元素，需要跳转到某个锚点，如果传统的HTML了的做法： 即添加一个a标签，href以#开头，然后在需要跳转的地方添加一个element，id设置为a标签href属性相同的值，就可以了 <a href="#miao">去某个锚点</a> <h3 id="miao">需要跳转到的锚点</h3> 如果某些时候不方便设置a标签，用代码也可以实现，那就是： // 跳转到ID是某个值的锚点位置 document.getElementById('someId').sc…
为了防止用户截屏后传播内容，需要给某些内容背景增加水印。本篇是介绍在Vue项目中增加水印，不添加第三方package，原声代码实现。 先上效果图： 新增 directives.js import Vue from 'vue' Vue.directive('watermark',(el,binding)=>{ function addWaterMarker(str,parentNode,font,textColor){// 水印文字，父元素，字体，文字颜色 var can = document.createEl…
项目中使用了quill editor做富文本编辑器，优点是比较简捷，界面也美观，集成起来也很方便，官网地址：https://quilljs.com/ （vue下整合的project: https://github.com/surmon-china/vue-quill-editor）中文文档地址：https://kang-bing-kui.gitbook.io/quill/wen-dang-document/quickstart 不过有个问题，工具栏是英文的，客户希望全部汉化，如图所示： 了解了一番，可以利用css来…
