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来…

阿里云播放器Alipalayer官方的展示和配置详见：https://player.alicdn.com/aliplayer/presentation/index.html 官方的展示使用的并不是vue的写法，这边整理了了一下vue的写法，如果是配置方面的，可以把配置的代码复制过来直接时候，另外也考虑到了插件组件的使用，也是集成进去了。 示例中使用了2.9.20版本的js和css，使用了ali的CDN引用的，组件使用的是1.0.8的版本，这个是没有CDN的，需要直接从github上下载 https://github…

使用Vant做一个Field，点击Field的前面部分，触发catClicked，弹出Picker选择框；另外右侧使用插槽放置了一个按钮，也可以使用触发里面的addCatClicked方法。 代码如下： <van-field :value="cat" @click="catClicked" readonly placeholder="请选择分类" > <template #button> <van-button size="mini" icon="plus" type="info" @…