vue加多页面键盘事件,js完结被选中状态的退换方法

小编司开辟品种,用的是vue+elementUI,做登入页面包车型客车时候,点击enter键的时候要贯彻和点击登入开关一样的效应,所以就百度了一下,于是壹通百度未来,就在点击按钮上边直接加多了@keyup.enter.native=”submitForm(‘loginData’)”,特么安心乐意的保存之后去登录页面点击enter键竟然未有暖子用。接着百度意识只要您用了element间接在按键只怕el-input上面绑定键盘事件是未曾用的,因为急需先得到关节巴拉巴拉一大堆。消除难题是首要的,接着百度。找到了未可厚非的绑定方法:在vue的created钩子里面插入如下代码就ojbk

遭逢了一个事情场景:

1.点击贰个按钮跳转到另多个页面 (网站)   两种写法:

在采取原型达成使不选中状态改变以往,接触到vue,就想着能否应用vue再把职能达成壹边,在上篇中的页面并不曾动态实现页面,全体的数额也都是平素写在html中。而接纳vue之后,已经能够落成页面依照数量的略微动态变化。而且代码量也大幅压缩。

created(){
            var _self = this;
            document.onkeydown = function(e){
                var key = window.event.keyCode;
                if(key == 13){
                    _self.submitForm('loginData');
                }
            }
        }

某些开关按下去此前要求先推断它是还是不是登入,即便未有登录供给跳转到对应的登入页面,不然就再三再四该按键之后的操作。

<button onclick="{location.href='location.html'}">获取现在的位置</button> 

<input type="button" value="go" onclick="location.href='http://www.runoob.com">

html部分的代码:

vue加多页面键盘事件,js完结被选中状态的退换方法。顺手把自家的登录代码也贴上来:

对此那种难题,很醒目不可能每种按键都去判定,所以自个儿思虑了一下组成自定义指令和vuex落成了相应的完成。

  

<div data-role="page " class="page "> 
 <div class="center " id="app"> 
 <div class="group "> 
 <ul> 
 <li v-for = "todo in todos "> 
  <div class="groupheader "> 
  <div class="Gheadertext ">{{todo.groupheader}}</div> 
  </div> 
  <div class = "groupbody "> 
  <ul class="list "> 
  <li v-for="cell in todo.groupbody" v-on:click="exchange($event)" class="groupcell"> 
  <div class="celltext"> 
   {{ cell.text }} 
  </div> 
  <img class="selectimg" src="img/select.png "> 
  </li> 
  </ul> 
  </div> 
  </li> 
 </ul> 
 </div> 
 </div> 
</div> 
 1 methods: {
 2             submitForm(formName) {
 3                 var _self = this;
 4                 this.$refs[formName].validate((valid) => {
 5                     if (valid) {
 6                        getInfo.post('api-token-auth/',{username:_self.loginData.userCount,password:_self.loginData.password}).then(function(data){
 7                             if(data.data.code == 0){
 8                                 let jwtSession = 'JWT'+' '+data.data.token;
 9                                 localStorage.setItem("checkSession", jwtSession);
10                                 localStorage.setItem("userInfo", data.data.userinfo.username);
11                                 localStorage.setItem("routes",JSON.stringify(data.data.userinfo.permissions))
12                                 // 路由权限过滤
13                                 var menuData = JSON.parse(localStorage.getItem('routes'));
14                                 var localRouter = _self.$router.options.routes
15                                 for(let i = 0;i<menuData.length;i++){
16                                   for(let q = 0;q<localRouter.length;q++){
17                                     if(menuData[i].codename == localRouter[q].path.replace(/\//,"")){
18                                       localRouter[q].hidden = false;
19                                     } 
20                                   }
21                                 }
22                                 _self.$router.addRoutes(localRouter)
23                                 _self.$router.push({ path: '/ops_menu_sever_manage'});
24                             }
25                             else{
26                                 _self.$message({
27                                     message: data.data.msg,
28                                     type: 'warning'
29                                 });
30                                 // _self.$router.push({ path: '/login'});
31                             }
32                             
33                        });
34                     } else {
35                         console.log("验证没通过!")
36                     }
37                 });
38             },
39             
40         },

入眼的代码完结

2.假使想弹出1个承认框之后再跳转   

数据代码:

诸如此类,马到成功。

const directive = Vue.directive('permission-click', {
 bind: (el, binding, vnode) => {
  el.addEventListener('click', (e) => {
   if (!store.getters.isLogin) {
    store.dispatch('showLogin')
   } else {
    typeof binding.value === 'function' && binding.value()
   }
  })
 }
})

  直接加代码 if(confirm(‘明确跳转?’)) 

var datas = { 
 todos :[ 
 { 
 groupheader : 'MB3101', 
 groupbody:[ 
  { text: '调整不当'}, 
  { text: '光电开关损坏' }, 
  { text: '镜面积灰' }, 
  { text: '调整不当' }, 
  { text: '光电开关损坏' }, 
  { text: '镜面积灰' }, 
  { text: '调整不当' }, 
  { text: '光电开关损坏' }, 
  { text: '镜面积灰' }, 
 ] 
 }, 
 { 
 groupheader : 'MB3102', 
 groupbody:[ 
  { text: '调整不当' }, 
  { text: '光电开关损坏' }, 
  { text: '镜面积灰' }, 
  { text: '调整不当' }, 
  { text: '光电开关损坏' }, 
  { text: '镜面积灰' }, 
  { text: '调整不当' }, 
  { text: '光电开关损坏' }, 
  { text: '镜面积灰' }, 
 ] 
 }, 
 { 
 groupheader : 'MB3103', 
 groupbody:[ 
  { text: '调整不当' }, 
  { text: '光电开关损坏' }, 
  { text: '镜面积灰' }, 
  { text: '调整不当' }, 
  { text: '光电开关损坏' }, 
  { text: '镜面积灰' }, 
  { text: '调整不当' }, 
  { text: '光电开关损坏' }, 
  { text: '镜面积灰' }, 
 ] 
 } 
 ] 
} 

 

那边封装了多少个自定义指令,增添了一个点击事件,对于已经登录的则调用传进来的函数,不然通过vuex去控制登入(此处的登入是透过弹窗落成的)

<button onclick="{ if(confirm('确定跳转?'))location.href='body/location.html'}">获取现在的位置</button>

<input type="button" value="go" onclick="if(confirm('确定跳转?')){location.href='http://www.runoob.com'}">

js部分的代码:

自定义组件使用的时候也大为简约

  

new Vue({ 
 el: '#app', 
 data:datas, 
 methods:{ 
 exchange:function(event){ 
  //获取被点击的元素对象 
  var a = event.target; 
  //获取被点击元素中的子元素<img> 
  var cellimg = a.getElementsByTagName("img")[0]; 
  if(a.className == "groupcell") { 
  a.className = "selectcell"; 
  cellimg.style.display = "block"; 
 } 
 else if(a.className == "selectcell") { 
  a.className = "groupcell"; 
  cellimg.style.display = "none"; 
 } 
 } 
 } 
}) 
<div class="" v-permission-click="doSomething">
 ...
</div>
3.打开网页时自动触发按钮的单击事件

 // 在<body>里加一个onload="abc()"的属性就行了
                     <head>
                        <script type="text/javascript">
                               function abc(){
                                   alert("onload");
                                                    }
                       </script>
                     </head>
                        <body onload="abc()">
                        </body>

效果如图所示:

vuex里面包车型客车showLogin那些action无非就是对login的突显隐藏flag的操作。

  

亚洲必赢官网 1

此间只是实现了简易的登录权限决定,从登录权限出发,能够参与越多的权杖调整,举个例子依照role剧中人物推断,然后能够全局部定价权限,且完毕起来颇为精简。

4. asp跳转

上述那篇利用vue.js达成被选中状态的更改方法正是笔者分享给大家的全体内容了,希望能给我们1个参照,也期待大家多多扶助脚本之家。

Github: github.com/lyh2668

   
 即使是在ASP.net中,双击开关,就足以进来后台页面,然在在后台页面写跳转代码
Response.Redirect(“你想要跳转的网页”);
   
 固然在html中,能够写3个form,钦点你要跳转到的页面,当然这几个按键要以此form里面

你大概感兴趣的篇章:

  • vue中改换选中当前项的展示隐藏大概状态的落到实处方式
  • vue绑定的点击事件阻止冒泡的实例
  • Vue.js
    点击按键展现/隐藏内容的实例代码

以上就是本文的全部内容,希望对大家的学习抱有协理,也期待大家多多协助脚本之家。

     比方:<form action=”你要跳到的地方” method=”post” >      
 </form>

你也许感兴趣的文章:

  • vue项目中利用ueditor自定义上传开关作用
  • Vue写1个简易的倒计时开关作用
  • vue完成验证码开关倒计时功用
  • vue
    开辟三个开关组件的言传身教代码
  • Vue.js
    点击按键展现/隐藏内容的实例代码
  • Vue.js表单标签中的单选开关、复选按键和下拉列表的取值难点
  • 亚洲必赢官网 ,VueJS 集成 Medium 艾德itor的言传身教代码
    (自定义编辑器按键)
  • Vue.js实现开关的动态绑定效果及达成代码
  • vue组件中式点心击开关后修改输入框的境况实例代码
  • 应用vue达成点击按键滑出面板的贯彻代码
  • Vue波纹开关组件制作

5. button 与 submit  的不同

    type=button 就单纯是开关功效 
    type=submit 是出殡和埋葬表单
不过对于从业WEB UI的人应有要留心到,使用submit来增加页面易用性:
选取submit后,页面帮忙键盘enter键操作,而过多WEB软件设计员,也许未有在意到submit统壹.

用button后频仍页面不援救enter键了。所以须要扶助enter键,必需要设置个submit,暗中认可enter键对页面第3个submit实行操作。

\***************************************************
*

<input type="submit" name="b1" value="提交" onClick="bt_submit_onclick()">
//执行完onClick,转到action。可以自动提交不需要onClick。onclick这里可以不要。



<input type="button" name="b1" value="提交" onClick="bt_submit_onclick()">
//执行完onClick,跳转文件在 js文件里控制。提交需要onClick。


//比如:
1,onclick="form1.action='a.jsp';form1.submit();" //这样就实现了submit的功能了。
2. <form name="form1" method="post" action="http://www.meijus.com"> 
<input type="button" name="Button" value="Button" onClick="submit()"> </form>
3. <input type="button" name="Button" value="Button" onClick="javascript:windows.location.href="你的url"">

  

 

陆. js兑现页面跳转的二种办法:

 

//第一种:
<script language="javascript" type="text/javascript">
window.location.href="login.jsp?backurl="+window.location.href; 
</script>
//第二种:
<script language="javascript">
alert("返回");
window.history.back(-1);
</script>
//第三种:
<script language="javascript">
window.navigate("top.jsp");
</script>
//第四种:
<script language="JavaScript">
self.location='top.htm';
</script>
//第五种:
<script language="javascript">
alert("非法访问!");
top.location='xx.jsp';
</script>

<input type="button" name="btn" value="跳转" onclick="javascript:location.href='index.php'">
<input type="button" name="btn" value="返回" onclick="javascript:history.back(-1)">

  

 

         

网站地图xml地图