1.字母组件给父组件传递当前点击的字母值 @click="handleLetterClick" //绑定事件 handleLetterClick (e) { //向上传递参数 this.$emit('change',e.target.innerText) }, 2.父组件接收字母组件传递的值 <city-alphabet :cities="cities" @change="handleLetterChange"></city-a

1.安装:npm install --save vue-picture-preview 2.使用: (1)入口文件中main.js中全局引入: import Vue from 'vue' import vuePicturePreview from 'vue-picture-preview'; Vue.component('Previewer', vuePicturePreview); (2)按需局部引入: import vuePicturePreview from 'vue-picture-pr

官网地址: https://muse-ui.org/#/zh-CN/installation

html: <div class="list" ref="scrollTopList"> <div class="listsmall" v-for="(item,index) of list" :key="index" @click="getDeviceInfo(item.id)"> <span class="state" :class=

使用场景:有适配pc端改为适配pc端和移动端,使用2套css 代码实现App.vue created: function () { if(document.documentElement.clientWidth > 640){ require('./style/index.scss'); this.plaform = 'pc'; }else{ require('./style/mobile.scss'); this.plaform = 'mobile'; } 注意: 为2套css分别指定不同的父

背景 在一pc端的web项目里,由于某些特性需要由动态语言处理,所以只在有需要使用vue来处理数据的页面,直接引入vue.js来处理.由于刚开始并没有打算使用前端来渲染数据和处理交互,所以使用了一些非vue的ui和插件,导致后来冲突坑点不少.非vue模块化下使用vue,虽然不能import vue文件,使用组件方式也有点恶心,但处理一些事情还是不错的. 使用formdata提交表单数据 先上代码 var that = this; var myForm = document.getElementB

1, 首先判断设备:在main.js里面写 // vue原型挂载 - 是否PC端 if (/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) { Vue.prototype.$pc = false hostConfig.vconsole && new VConsole() } else { Vue.prototype.$pc = true let winWidth = document.documentEle

Vue PC端框架 1. Element 中文文档:http://element-cn.eleme.io/#/zh-CN github地址:https://github.com/ElemeFE/element 2. iView 中文文档:https://www.iviewui.com/ github地址:https://github.com/iview/iview 3. vue-element-admin 中文文档:https://panjiachen.github.io/vue-element

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

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

原因:pc端微信浏览器不支持es6,而代码中使用了 let . 解决:将 let 改为 var(若使用 es6 语法比较多,可以进行转换,将 es6 语法转为 es5) 参考博客: 1,h5微信页面在手机微信端和微信web开发者工具中都能正常显示,但是在pc端微信浏览器上打不开(显示空白) - Alonge的博客 - CSDN博客https://blog.csdn.net/m0_37543652/article/details/83059696

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

思路:1.先做出一个上传的图片的上传区 <!-- 上传区 --> <label for="fileUp"> <div class="upBorder"> <img src="../assets/add.png" alt="" /> <input ref="fileUp" type="file" id="fileUp"

阻止pc端浏览器缩放js代码 众所周知:移动端页面禁止用户缩放界面只需加上<meta name="viewport" content="user-scalable=0">即可,但是pc端确实比较麻烦,用户可以通过如下几种方式来缩放: windows: ctrl + +/- ctrl + 滚轮 浏览器菜单栏 mac: cammond + +/- 浏览器菜单栏 由于浏览器菜单栏属于系统软件权限,没发控制,我们着手解决ctrl/cammond + +/- 或

最近新调到一个项目,由原来的pc端,调到移动端,一切都是那么的不一样,在得知即将调到移动端的时候,听说我们的技术要用到vue,Aladdin,还有es6,有点懵... 我做了以下准备工作: 1,买了本阮老师的es6入门 2,下了vue学习视频,招朋友要各种vue的资料,然后加各种vue技术qq群 3,寻找对应项目的网站,嘿嘿,找到了饿了么的官网 4,准备mac本 5,招同时要对应项目的代码 6,发现原来的编辑器不能用了(webstorm),换编辑器 7,.... 到了新项目组,发现自己准备的还是

vue判断是pc端还是移动端分别进入不同的页面 判断移动端代码如下: function IsPC(){ var userAgentInfo = navigator.userAgent; var Agents = new Array("Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"); var flag =

众所周知:移动端页面禁止用户缩放界面只需加上<meta name="viewport" content="user-scalable=0">即可,但是pc端确实比较麻烦,用户可以通过如下几种方式来缩放: windows: ctrl + +/- ctrl + 滚轮 浏览器菜单栏 mac: cammond + +/- 浏览器菜单栏 由于浏览器菜单栏属于系统软件权限,没发控制,我们着手解决ctrl/cammond + +/- 或 Windows下ctrl +

目前上拉刷新,下拉加载,以及区域回弹的组件,绝大多数都是通过transform去实现的.在移动端效果很好,但是PC端使用鼠标拖拽的方式,查看下文首先不符合逻辑,其次容易点进其他页面. 起初,项目的初衷是在微信浏览器中查看,但是客户反应有些页面pc端没办法上下滑动(使用了vue-scroller的页面都跪了).鼠标滚轮默认控制的是滚动条,不是容器的transform属性,怎么可能上下滑动. 然后就想如果能监听到鼠标滚轮事件,然后再更改transform:translate3d(x,y,z),这样不

pc端个性化日历实现 技术:vue => v-for.slot-scop 插槽域 需求:需要实现日历上每一天动态显示不同的信息 思路:运用vue 中 slot-scop 插槽域的知识点,将个性化的代码样式放到slot中 再通过slot-scop 获取这个插槽中的所需数据 一.实现日历组件 思路:布局上就是一个7列,行数不确定的表格.只不过,日历的表格是宽和高相等,随着浏览器的大小变化,表格大大小也要变化,所以要用padding布局,难点在日期数组的生成上面. 1.布局的实现 <div clas

处理 在主JS代码之上附加以下代码 : <script> if (~navigator.userAgent.toLowerCase().indexOf('windowswechat')) { delete window.ontouchstart } </script> 解析 mint-ui 判定是否是移动端源码 从源码可以看出,MintUI主要通过判断window有无ontouchstart属性来控制picker用鼠标滑动还是用touch滑动. # mint-ui-master\p

pc端如何实现 1.当弹窗显示时,为body元素添加属性:overflow:hidden, 当关闭弹窗时移除该属性即可2.在弹窗的div上设置 @scroll.stop.prevent 3.前端页面弹框遮罩禁止页面滚动 <div @scroll.stop.prevent> 你要显示的内容 </div> 3.出现弹窗时,为body元素添加position:fixed,这样主页面就禁止滑动,同时很好地解决了弹窗穿透的问题.若弹窗为独立组件,可以采用如下代码: beforeMount()