Input add readonly prop & focus、blur events

Input add readonly prop & focus、blur events

Input add readonly prop & focus、blur events
梁灏
1 parent c571d9ec
Showing 8 changed files with 78 additions and 4 deletions Show diff stats
src/components/cascader/cascader.vue
src/components/cascader/index.js
src/components/input/input.vue
src/index.js
test/app.vue
test/main.js
test/routers/cascader.vue
test/routers/input.vue
+<template>
+    
+</template>
+<script>
+    export default {
+        props: {
+        
+        },
+        data () {
+            return {
+            
+            }
+        },
+        computed: {
+        
+        },
+        methods: {
+        
+        }
+    }
+</script>
 \ No newline at end of file
+import Cascader from './cascader.vue';
+export default Cascader;
 \ No newline at end of file
@@ -9,8 +9,11 @@
                 :placeholder="placeholder"
                 :disabled="disabled"
                 :maxlength="maxlength"
+                :readonly="readonly"
                 v-model="value"
-                @keyup.enter="handleEnter">
+                @keyup.enter="handleEnter"
+                @focus="handleFocus"
+                @blur="handleBlur">
             <div :class="[prefixCls + '-group-append']" v-if="append" v-el:append><slot name="append"></slot></div>
         </template>
         <textarea
@@ -22,8 +25,11 @@
             :disabled="disabled"
             :rows="rows"
             :maxlength="maxlength"
+            :readonly="readonly"
             v-model="value"
-            @keyup.enter="handleEnter">
+            @keyup.enter="handleEnter"
+            @focus="handleFocus"
+            @blur="handleBlur">
         </textarea>
     </div>
 </template>
@@ -70,6 +76,10 @@
             rows: {
                 type: Number,
                 default: 2
+            },
+            readonly: {
+                type: Boolean,
+                default: false
             }
         },
         data () {
@@ -117,6 +127,12 @@
             handleIconClick () {
                 this.$emit('on-click');
             },
+            handleFocus () {
+                this.$emit('on-focus');
+            },
+            handleBlur () {
+                this.$emit('on-blur');
+            },
             resizeTextarea () {
                 const autosize = this.autosize;
                 if (!autosize || this.type !== 'textarea') {
@@ -5,6 +5,7 @@ import Badge from &#39;./components/badge&#39;;
 import Breadcrumb from './components/breadcrumb';
 import Button from './components/button';
 import Card from './components/card';
+import Cascader from './components/cascader';
 import Checkbox from './components/checkbox';
 import Circle from './components/circle';
 import Collapse from './components/collapse';
@@ -40,6 +41,7 @@ const iview = {
     iButton: Button,
     ButtonGroup: Button.Group,
     Card,
+    Cascader,
     Checkbox,
     CheckboxGroup: Checkbox.Group,
     Circle,
@@ -41,6 +41,7 @@ li + li {
                 <li><a v-link="'/alert'">Alert</a></li>
                 <li><a v-link="'/tag'">Tag</a></li>
                 <li><a v-link="'/input'">Input</a></li>
+                <li><a v-link="'/cascader'">Cascader</a></li>
             </ul>
         </nav>
         <router-view></router-view>
@@ -92,6 +92,11 @@ router.map({
         component: function (resolve) {
             require(['./routers/tooltip.vue'], resolve);
         }
+    },
+    '/cascader': {
+        component: function (resolve) {
+            require(['./routers/cascader.vue'], resolve);
+        }
     }
 });
+<template>
+    
+</template>
+<script>
+    export default {
+        props: {
+        
+        },
+        data () {
+            return {
+            
+            }
+        },
+        computed: {
+        
+        },
+        methods: {
+        
+        }
+    }
+</script>
 \ No newline at end of file
 <template>
-    <i-input icon="ios-clock-outline" style="width:200px;" :value.sync="v" @on-enter="enter" @on-click="iconclick" size="large" placeholder="请输入"></i-input>
+    <i-input icon="ios-clock-outline" @on-focus="focus" @on-blur="blur" readonly style="width:200px;" :value.sync="v" @on-enter="enter" @on-click="iconclick" size="large" placeholder="请输入"></i-input>
     <i-input icon="ios-clock-outline" style="width:200px;" :value.sync="v" @on-enter="enter" placeholder="请输入"></i-input>
     <i-input icon="ios-clock-outline" style="width:200px;" :value.sync="v" @on-enter="enter" size="small" placeholder="请输入"></i-input>
     <br>
@@ -10,7 +10,7 @@
     {{ v }}
     <br>
     <br>
-    <i-input placeholder="this is something" style="width:200px;" :value.sync="t" type="textarea" :autosize="autosize"></i-input>
+    <i-input readonly placeholder="this is something" style="width:200px;" :value.sync="t" type="textarea" :autosize="autosize"></i-input>
     {{ t }}
     <br>
     <br>
@@ -116,6 +116,12 @@
             },
             change (val) {
                 console.log(val)
+            },
+            focus () {
+                this.$Message.info('focus');
+            },
+            blur () {
+                this.$Message.info('blur');
             }
         }
     }