vue 支持IE,回车点击事件

上几篇文章说过了,最近在做vue 项目,由于项目前端人员紧张,所以身为后台人员的我也做了一下前端工作,而在使用vue 过程中遇得了一些小问题,下面针对这些问题做一些记录

一、vue 支持IE问题,

由于Chrome 浏览器的强大简洁,所以大部分开发人员都在使用Chrome 浏览器做开发和调试,但是在上线后要兼容许多其他浏览器

最普遍的就是IE浏览器兼容问题,那么如何使用vue兼容IE呢

1、安装 babel-polyfill

npm install --save babel-polyfill

2、 引用 babel-polyfill——修改webpack.base.conf.js 中 entry(我是用的方式)

module.exports = {//原来配置
  // entry: {
  //   app: ‘./src/main.js‘;
  // },

//新的配置
  entry: {
    app: ["babel-polyfill", "./src/main.js"]
  },  ........}

备注:

针对该问题查了一些其他的网上的解决方案——下面一位开发人员的说明更详细一些(原链接:https://www.cnblogs.com/princesong/p/6728250.html

安装babel-polyfill后

引用方式有三种:

1.require("babel-polyfill");

2.import "babel-polyfill";

3.module.exports = {

  entry: ["babel-polyfill", "./app/js"]

};

注:第三种方法适用于使用webpack构建的同学,加入到webpack配置文件(webpack.config.js)entry项中

重新执行构建命令,在低版本的浏览器中就可以正常打开页面了。

说了半天babel-polyfill到底是干什么的;在网上查找一些资料后发现原因(参考文章:https://www.jianshu.com/p/4822852792d1

vue 应用了许多ES6语法和API,但是一些浏览器由于版本和开发等问题无法识别和支持这些语法和命令;而BabelBabel 可以将ES6代码转为ES5代码,但是BabelBabel 默认只转换新的JavaScript语法(syntax),如箭头函数等,而不转换新的API,比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局对象,以及一些定义在全局对象上的方法(比如Object.assign)都不会转码;因此我们需要polyfill

二、回车键——点击事件

在进行列表页面开发时,会不可避免的设计查询操作,比较好的用户体验是——输入查询条件后,点击回车键,自动触发事件于是添加了代码(为了更好的体现内容删减了一些)

<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
  <el-form :inline="true" :model="filters" @submit.native.prevent>
      <el-form-item>
         <el-autocomplete class="inline-input"  v-model="filters.unitName" placeholder="请输入内容"style="min-width: 240px;"    @keyup.enter.native="handleSearch"></el-autocomplete>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="handleSearch">搜索</el-button>
    </el-form-item>

  </el-form>
</el-col>
其中  @keyup.enter.native="handleSearch"  为回车键功能

但是在使用的时候,发现在点击回车键时会整个页面刷新,而不是根据条件局部数据更新——由于不是前端人员所以问题原因不再做细致分析;

只针对网上查找的解决方案进行记录

做过的同学应该已经看出来了 <el-form>中的一段代码就是解决该问题的

@submit.native.prevent

@submit.native.prevent  阻止默认提交

  

原文地址:https://www.cnblogs.com/yutf/p/11721233.html

时间: 2024-08-12 20:23:41

vue 支持IE,回车点击事件的相关文章

vue router-link 上添加点击事件

在vue学习中遇到给router-link 标签添加事件@click .@mouseover等无效的情况 我想要做的是鼠标移上去出现删除标签,移除标签消失的效果 原代码: <router-link v-for="(item, index) in pageMenuList" :to="{ path: item.listLink }" @mouseover="overTag" @mouseout="outTag">{{

【WebForm】编程点滴:由文本框回车触发按钮点击事件想到的

在WebFomr中我们常常会需要实现这样一个功能:文本框回车时触发触发其他按钮的click事件.在JS中我们常常这样做: <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

vue.js click点击事件获取当前元素对象

Vue.js可以传递$event对象 <body id="app"> <ul> <li v-on:click="say('hello!', $event)">点击当前行文本</li> <li>li2</li> <li>li3</li> </ul> <script> new Vue({ el: '#app', data: { message: 'He

VUE 点击事件(父子层级元素点击时踩坑记录)

<ul> <li @click="fatherClick"> <div @click.stop="childClick"> </div> </li> </ul> var vm_target = new Vue({ el: '#vm_target', data: { }, methods:{ /**父元素点击事件**/ fatherClick:function(event){ var el1 =

app内嵌vue h5,安卓和ios拦截H5点击事件

安卓和ios拦截h5点击事件,这个函数事件必须是暴漏在window下的 安卓和ios拦截普通h5函数: 1 <div onclick = "show(),window.android.show()"></div> 2 <script> 3 function show(){ //如果需要传值,可以在show里添加参数,在上面的点击事件中直接进行传值就好 4 alert(1) 5 } 6 </script> vue函数并没有直接暴漏在wind

vue中解决拖动和点击事件的冲突

BUG说明: 鼠标上下方向拖拽,如果松开时鼠标位于悬浮按钮上会默认执行click事件,经验证,click事件与mouse事件的执行顺序为onmousedown =>onmouseup =>onclick,意味着在click事件执行时会与与其相关的mouse事件冲突. 解决方案:因为click事件执行时间短,所以利用鼠标拖动的时间差作为标志,在拖拽事件中计算鼠标从onmousedown 到onmouseup 所用的时间差,与200ms作比较,作为全局变量.由于vue的directives自定义指

vue.js click点击事件获取当前元素对象及获取自定义属性

Vue.js可以传递$event对象 <body id="app"> <ul> <li :data-price="m.price" v-on:click="say('hello!', $event)">点击当前行文本</li> <li>li2</li> <li>li3</li> </ul> <script> new Vue({

Vue 接收数据for循环渲染出的标签jQuery渲染的点击事件无效

Vue 接收数据for循环渲染出的标签jQuery渲染的点击事件无效 Vue在渲染页面的时候使用jQuery的时候会发现当在created生命周期中获取后台数据,写在 mounted 生命周期的jquery渲染的点击事件不管用了. 理论上,mounted是界面html生成结束才会开始执行的,应该是可以的,但实际效果就是不行. 原因 问题的原因出现在,jquery确实在界面HTML生成之后执行了,但是当时向后台请求的数据还没请求回来,当请求回来用for循环重新渲染数据后,jquery已经执行完了,

支持添加文字效果或点击事件功能

源码WPAttributedMarkup, WPAttributedMarkup能给Label中某关键字添加文字效果或点击事件.Label中的某个关键字词可以改变字体的特性如颜色.加粗,下划线等,也可以为某个关键字词添加点击事件.<ignore_js_op> 使用方法: 通过创建不同的style的字典后就可以对label的属性进行设置,示例如下: // Example using fonts and colours NSDictionary* style1 = @{@"body&qu