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

最新推荐文章于 2024-05-09 17:12:20 发布

weixin_30896763

最新推荐文章于 2024-05-09 17:12:20 发布

阅读量307

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/winter-shadow/p/10171297.html

版权

 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>