element-ui默认的table组件支持的表头筛选（过滤）是比较简单的，只支持数组的方式，单选或多选的形式，但有时候我们喜欢支持输入框形式（其实感觉有点扯淡，一般列表页上面都有搜索条件）。 注意：里面用到的jsx语法，可能需要安装一些插件。 准备工作：1.安装babel-plugin-jsx-v-model插件 npm i babel-plugin-jsx-v-model -D或者 yarn add babel-plugin-jsx-v-model -D2..babelrc: {"presets": ["es2015"],"plugins": ["jsx-v-m...
正巧在之前面试中遇到问实现拖拽效果 当时面试的时候简单回答了实现的方式与逻辑。 现在闲来无事，把这个东西实现了一下。 原理很简单，写的很方便。 数据驱动，建立一个数组，数组初始长度为1 拖动触发时，添加一个对象到数组中，拖动的是下标为0的对象，新建的还在原来位置放着，等待下次拖动。 话不多说，上代码 <template><div class="view"><div class="x" @mousedown="move($event,index)" v-for="(x,index) in i"><span v-i...
前言 Blob 对象表示一个不可变、原始数据的类文件对象。Blob 表示的不一定是JavaScript原生格式的数据。File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。 本文主要给大家介绍了关于js获取图片url的Blob值并预览的相关内容，下面话不多说了，来一起看看详细的介绍吧 方法如下 1）使用 XMLHttpRequest 对象获取图片url的Blob值 //获取图片的Blob值 function getImageBlob(url, cb) {var xhr = new XMLHt...
1.顶部导航栏: html:<div class="tab-pane"><tabs><tab-pane label="上崗時間明細" name="detail-report" class="tab1"><div class="tab-pane-1">0000000000</div><upload multiple :action="uploadUrl":show-upload-list="false" :on-success="uploadSuccess" accept=".xlsx"><i-button class="upload" type="primary"><icon class="icon3"></icon>上傳清單</i-button></upload><i-input class="search" v-model="input_data3" id...
业务需求，需要在系统登陆的时候，使用“滑动图片验证码”，来验证操作的不是机器人。 效果图使用方式在一般的页面组件引用即可。onReload这个函数一般是用来请求后台图片的。 class App extends Component {state = {url: ""}componentDidMount() {this.setState({ url: getImage() })}onReload = () => {this.setState({ url: getImage() })}render() {return (<div><ImageCodeimageUrl={this.state.url}onReload={this.onReload...
我用vuex做状态管理，七牛云做图床。 项目地址：多图片上传组件 效果展示项目执行流程 首先，让我们来分析一下实现多图片上传的流程： 前端向后端请求用来上传图片至服务器的token后端为每张要上传的图片生成一个图片名，并用这个图片名生成token后端将图片名和token返回给前端前端拿到token以后，将图片上传至服务器上传成功以后，前端将图片名发给后端后端将图片名存入数据库项目实现过程 1.我们要利用element-ui的Upload组件布置...
背景最近做了一个微信小程序的即时通讯功能，之前我也做过node.js的websocket服务，不过是在web端应用的socket.io服务。小程序本身对http、websocket等连接均有诸多限制，所以这次项目选择了node.js自带的ws模块。服务端初始化一个node.js项目，引入ws模块const webSocket = require(ws);创建websocket实例，并设置监听端口const wss = new webSocket.Server({port: 3001 });定义wss实例方法，实现socket监听和信息发布。下面贴上简...
一： 环境搭建 使用vue-cli脚手架工具构建 安装 vue-cli npm install -g vue-cli使用vue-cli初始化项目 vue init demo1进到目录 cd demo1安装依赖 npm install开始运行 npm run dev浏览器访问http://localhost:80801、首先会打开首页 也就是我们看到的index.html文件 2、使用webpack打包之后默认加载main.js文件并将其引入到index.html文件中 二： 开发 在main.js中可以引入相关模块以及组件 import Vue from vue import App from ...
批量截图任务作为一个软件工程师，不只是做好自己的本职工作（iOS），而是需要解决项目中的技术问题。这次就是解决自动截图的问题早期公司的数据工程师利用 phantomjs 来截图，后期不断发现截图效率低，加之开发者团队不再维护，因此决定将截图这部分跟你剥离开来，以后方便开发维护。我就承担了这个工作puppeteerPuppeteer is a Node library which provides a high-level API to control Chrome or Chromium over the DevTools P...
最近有个需求是要添加一个左滑删除的功能。参考了一下别的老哥的代码,做了一点点改进。记录一下。以备不时之需,话不多说 ，上代码 <template><div class="slider-item"><divclass="content"@touchstart=touchStart@touchmove=touchMove@touchend=touchEnd:style="deleteSlider"><div class="remove">删除</div></div></div> </template> <script> // 获取删除按钮的宽度，此宽度为滑块左滑的最大距离 const DELBTNWIDTH = 60; expo...
最近在自己写页面，模仿思否论坛，然后写登录注册UI的时候需要一个验证码组件. 去搜一下没找到什么合适的，而且大多都是基于后端的，于是自己手写一个。 演示分析验证码组件 分析验证码功能 随机出现的数字大小写字母 （基础功能）不同的数字或者字母有不同的颜色 (功能优化)不同的数字或者字母有不同的字体大写 (功能优化)不同的数字或者字母有不同的边距 (功能优化)不同的数字或者字母有不同的倾斜角度 (功能优化)更多功能优化.....
本文介绍了React 实现拖拽功能的示例代码，分享给大家，具体如下： 实现效果：因为工作中会用到 JIRA 所以想实现一下相似的功能，顺便学习一下 H5 的拖拽。不支持拖拽改变顺序，感觉有点麻烦，而且没必要。感觉相关的博文好少的，大部分都是直接上代码，没有解释。 图片默认可以拖动，其他元素的拖动效果同图片。正常的 div 是不能被拖动的，鼠标点击选择后移动没有效果，需要加 draggable="true" 使得元素可以被拖动。 拖拽相关的...
1.antd官网Upload组件： https://ant.design/components/upload-cn/ 2.下图是最近开发的上传文档的效果：3.文件上传的实现： （1）方法一：antd默认上传。 a：渲染文件上传组件。getPDFURL（）方法为实现文件的上传。showUploadList为是否展示 uploadList, true显示，false不显示，其可设为一个对象，用于单独设定 showPreviewIcon 和 showRemoveIcon。type为上传按钮的图标。如下图所示。 {/* 渲染文件上传组件 */}<Upload {...th...
最近用Vue开发后台系统时，有些数据需要在地图上标注出来，需要用到地图功能，因为是国际项目，国内的地图不太适用，所以选用了Google地图，谷歌地图API： https://developers.google.cn/maps/documentation/javascript/tutorial 。 一、必须的开发要求 1.获取密钥API Key 首先，要使用Google Maps JavaScript API，必须获取一个可用的API密钥，并且必须启用结算，具体获取步骤可百度查询，在此就不一一叙述了，主要想讲的地图用法...
每个项目网络请求接口封装都是很重要的一块，第一次做Vue项目，我们的封装方法如下： (1).新建一个js文件，取名api.js (2).引入 axios ，mint-UI ,如下图： import axios from axios import {MessageBox, Toast} from mint-uiaxios.defaults.timeout = 50000//默认请求超时时间 axios.defaults.headers = 请求头(2).封装get方法 export function getHttp (url, params = {}) {// 创建动画mint-uiIndicator.open({text: 加载中...,s...