vue-自定义pc端键盘-动画

<template> <div class="keyboard"> <div class="keyboard_key"> <div class="keyboard_character" @click="_chraClick"> <button type="button" class="pad-num1 specialkey" data…

lib-flexible + px2rem Loader lib-flexible 阿里伸缩布局方案 px2rem-loader:px转rem: 依赖首先需要安装 vue-cli 脚手架,这里我安装的是 cli3. 项目初始化完成后,在项目目录中安装 lib-flexible 和 px2rem-loader. npm install lib-flexible --save-dev npm i postcss-px2rem --save 接着在项目入口文件 main.js 中引入 lib-fle…

vue实现PC端调用摄像头拍照人脸录入、移动端调用手机前置摄像头人脸录入、及图片旋转矫正、压缩上传base64格式/文件格式

进入正题 1. PC端调用摄像头拍照上传base64格式到后台,这个没什么花里胡哨的骚操作,直接看代码 (canvas + video) <template> <div>  <img @click="callCamera" :src="headImgSrc" alt="摄像头">  <canvas "><…

vue实现pc端无限加载功能

主要思路通过自定义指令,在视图初始化完成后,绑定scroll事件.当scrollTop + clientHeight >= scrollHeight时(此时滚定条到了底部)触发loadMore事件, <template> <div class="index" v-scroll="loadMore">  <my-item :l…

vue 自定义移动端筛选条件

1.创建组件 components/FilterBar/FilterBar.vue <template> <div class="filterbar" :style="{'top': top + 'px'}"> <div class="container"> <div class="row"> <div class="col" :class="…

Vue——解决移动端键盘弹起导致的页面fixed定位元素布局错乱

最近做了一个移动端项目,页面主体是由form表单和底部fixed定位的按钮组成,当用户进行表单输入时,手机软键盘弹起,此时页面的尺寸发生变化,底部fixed定位的元素自然也会上移,可能就会覆盖页面中的某些元素.具体情形,如下图所示(按钮将文字覆盖了): 解决方案: 上面提到,产生这种情况的原因是软键盘弹起,窗口尺寸发生变化,那么就通过监听尺寸的方式解决一下这个问题(当键盘弹出时,将按钮隐藏:键盘收回时,将按钮显示出来): data中声明数据: data() {…

vue实现pc端上拉加载功能，不兼容移动端

所用插件:Mock.js 这个只用到它简单的功能,拦截ajax请求. vue和axios,vue基础知识请看文档. axios类似于jquery的ajax方法. 以下是是该功能所有代码,其中mock的数据可以不必理会. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <l…

js验证input输入正整数和输入的金额小数点后保留两位（PC端键盘输入）

// 验证开头不为零的正整数 WST.zhengZhengShuIn = function (className){ var rex = /^[1-9]{1}[0-9]*$/;//正整数 $("."+className).keyup(function(event){ var event = event || window.event; var value = $(this).val(); if(value.length>1){ var flagRex =/^0/; if(flag…

基于Vue.js PC桌面端弹出框组件|vue自定义弹层组件|vue模态框

vue.js构建的轻量级PC网页端交互式弹层组件VLayer. 前段时间有分享过一个vue移动端弹窗组件,今天给大家分享一个最近开发的vue pc端弹出层组件. VLayer 一款集Alert.Dialog.Message.Notification.ActionSheet.Toast.Popover.Popconfirm等众多功能于一身的轻量级pc弹层组件.通过精巧的逻辑.布局解决复杂的对话框功能,为你呈现多样化弹出框效果! VLayer 在设计开发之初借鉴了业界有名的Layer弹窗.Eleme…

使用vue实现简单键盘，支持移动端和pc端

常看到各种app应用中使用自定义的键盘,本例子中使用vue2实现个简单的键盘,支持在移动端和PC端使用,欢迎点赞,h5 ios输入框与键盘兼容性优化实现效果: Keyboard.vue <template> <div class="keyboard" v-show="showKeyboard" v-clickoutside="closeModal"> <p v-for="keys in keyList&…