增加了点击事件

src/packages/avatar/avatar.vue

@@ -1,5 +1,5 @@
 <template>
-    <div :style="styles" :class="['nut-avatar', 'avatar-'+size,'avatar-'+shape]">
+    <div :style="styles" :class="['nut-avatar', 'avatar-'+size,'avatar-'+shape]" @click="activeAvatar">
         <i class="icon" :style="iconStyles"></i>
         <span class="text"><slot></slot></span>
     </div>
@@ -30,13 +30,13 @@ export default {
         }
     },
     computed:{
-        styles:function(){
+        styles(){
             return {
                 'background':this.bgColor + ' url('+this.bgImage+')'+'no-repeat',
                 'backgroundSize':'100%'
             }
         },
-        iconStyles:function(){
+        iconStyles(){
             return {
                 'backgroundImage': 'url('+this.bgIcon+')'
             }
@@ -46,6 +46,9 @@ export default {
         return {};
     },
     methods: {
+        activeAvatar(){
+            this.$emit('activeAvatar');
+        }
     }
 }
 </script>

src/packages/avatar/demo.vue

@@ -24,6 +24,8 @@
       <div class="white-bg">
         <nut-avatar bgIcon="http://img10.360buyimg.com/uba/jfs/t1/69001/30/2126/550/5d06f947Effd02898/95f18e668670e598.png"></nut-avatar>
       </div>
+      <h4>点击头像有触发事件</h4>
+      <div class="white-bg"><nut-avatar @activeAvatar="activeAvatar"></nut-avatar></div>
     </div>
 </template>
 
@@ -36,7 +38,9 @@ export default {
     return {};
   },
   methods: {
-      
+      activeAvatar(){
+        console.log('点击了头像');
+      }
   }
 };
 </script>