doc: change event on select, checkbox and switch

demo/components/checkboxDemo.vue

@@ -59,6 +59,51 @@
 </div></textarea>
         </div>
       </div>
+      <div class="n-doc-section">
+        <div class="n-doc-section__header">
+          Change Event
+        </div>
+        <div class="n-doc-section__view">
+          <n-checkbox
+            v-model="isChecked"
+            style="width: 120px;"
+            @change="handleChange"
+          >
+            checkbox
+          </n-checkbox>
+          <div style="width: 120px;">
+            isChecked: {{ isChecked }}
+          </div>
+        </div>
+        <div class="n-doc-section__source">
+          <textarea v-pre>
+<n-checkbox
+  v-model="isChecked"
+  style="width: 120px;"
+  @change="handleChange"
+>
+  checkbox
+</n-checkbox>
+<div style="width: 120px;">
+  isChecked: {{ isChecked }}
+</div>
+<script>
+export default {
+  data () {
+    return {
+      isChecked: false
+    }
+  },
+  methods: {
+    handleChange (isChecked) {
+      alert(String(isChecked))
+    }
+  }
+}
+</script>
+          </textarea>
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -73,6 +118,9 @@ export default {
     }
   },
   methods: {
+    handleChange (isChecked) {
+      alert(String(isChecked))
+    }
   }
 }
 </script>

demo/components/selectDemo.vue

@@ -211,6 +211,93 @@ export default {
     }
   }
 }
+</script></textarea>
+        </div>
+      </div>
+      <div class="n-doc-section">
+        <div class="n-doc-section__header">
+          Change Event
+        </div>
+        <div class="n-doc-section__view">
+          <div style="flex-grow: 1;">
+            selectedValue: {{ selectedValue }}
+          </div>
+          <div style="flex-grow: 1;">
+            selectedArray: {{ selectedArray }}
+          </div>
+          <n-select
+            v-model="selectedValue"
+            placeholder="Please Select Type"
+            :items="items"
+            @change="handleChange"
+          />
+          <br><br>
+          <n-select
+            v-model="selectedArray"
+            multiple
+            size="small"
+            placeholder="Please Select Type"
+            :items="items"
+            verbose-transition
+            @change="handleChange"
+          />
+        </div>
+        <div class="n-doc-section__source">
+          <textarea v-pre>
+<div>
+  selectedValue: {{ selectedValue }}
+</div>
+<div>
+  selectedArray: {{ selectedArray }}
+</div>
+<n-select
+  v-model="selectedValue"
+  placeholder="Please Select Type"
+  :items="items"
+  @change="handleChange"
+/>
+<br><br>
+<n-select
+  v-model="selectedArray"
+  multiple
+  size="small"
+  placeholder="Please Select Type"
+  :items="items"
+  verbose-transition
+  @change="handleChange"
+/>
+<script>
+export default {
+  data () {
+    return {
+      selectedValue: null,
+      selectedArray: [],
+      items: [
+        {
+          label: 'Artifactory',
+          value: 'Artifactory'
+        },
+        {
+          label: 'Registry',
+          value: 'Registry'
+        },
+        {
+          label: 'Public',
+          value: 'Public'
+        },
+        {
+          label: 'Custom',
+          value: 'Custom'
+        }
+      ]
+    }
+  },
+  methods: {
+    handleChange (newValue) {
+      alert(String(newValue))
+    }
+  }
+}
 </script></textarea>
         </div>
       </div>
@@ -247,6 +334,9 @@ export default {
     }
   },
   methods: {
+    handleChange (newValue) {
+      alert(String(newValue))
+    }
   }
 }
 </script>

demo/components/switchDemo.vue

@@ -48,6 +48,31 @@ export default {
 </script></textarea>
         </div>
       </div>
+      <div class="n-doc-section">
+        <div class="n-doc-section__header">
+          Change Event
+        </div>
+        <div class="n-doc-section__view">
+          <n-switch
+            v-model="isActive"
+            @change="handleChange"
+          />
+          <div style="margin: 0 14px;">
+            active: {{ isActive }}
+          </div>
+        </div>
+        <div class="n-doc-section__source">
+          <textarea v-pre>
+<n-switch
+  v-model="isActive"
+  @change="handleChange"
+/>
+<div style="margin: 0 14px;">
+  active: {{ isActive }}
+</div>
+</textarea>
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -62,6 +87,9 @@ export default {
     }
   },
   methods: {
+    handleChange (isOn) {
+      alert(isOn)
+    }
   }
 }
 </script>