码迷,mamicode.com
首页 > 其他好文 > 详细

Vue系列之 => 自定义全局指定让文本框自动获取焦点

时间:2018-12-24 22:36:07      阅读:177      评论:0      收藏:0      [点我收藏+]

标签:fun   bsp   nbsp   指定   func   text   styles   label   src   

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>Document</title>
 8     <script src="./lib//Vue2.5.17.js"></script>
 9     <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
10     <link rel="stylesheet" href="./lib/bootstrap-3.3.7-dist/css/bootstrap.css">
11 </head>
12 <body>
13     <div id="app">
14         <div class="panel panel-primary">
15               <div class="panel-heading">
16                     <h3 class="panel-title">Panel title</h3>
17               </div>
18               <div class="panel-body table-inline">
19                     <label for="id">id:
20                         <input type="text" class="form-control">
21                     </label>
22 
23                     <label for="name">name:
24                             <input type="text" class="form-control" id="name" v-focus>
25                         </label>
26               </div>
27         </div>
28         
29     </div>
30 
31     <script>
32         //定义全局指定,focus为自定义指令名称,调用时必须加 v- 
33         Vue.directive("focus",{
34             //如果focus绑定到哪个元素,el就代表被绑定的那个元素。
35             //注意:在每个函数中,第一个参数,永远是el,el是一个原和一的js对象。
36             bind : function(el){ //当指定一绑定到元素上的时候就会立即执行这个bind函数,只触发一次
37 
38             },
39             inserted : function(el){ //inserted表示元素插入到DOM中的时候,会执行inserted函数,只触发一次
40                 el.focus();
41             },
42             updated : function(){ //当VNode更新的时候会执行updated,可能会触发多次
43 
44             }
45 
46         })
47 
48         var vm = new Vue({
49             el : "#app"
50         })
51     </script>
52 </body>
53 </html>

 

Vue系列之 => 自定义全局指定让文本框自动获取焦点

标签:fun   bsp   nbsp   指定   func   text   styles   label   src   

原文地址:https://www.cnblogs.com/winter-shadow/p/10171297.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!