feat: ✨add checkbox event

xpyjs · May 16, 2023 · 9e33b68 · 9e33b68
1 parent 4839744
commit 9e33b68
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 9 deletions.
diff --git a/demo/demo.vue b/demo/demo.vue
@@ -12,6 +12,7 @@
       :show-weekend="true"
       @row-click="onClickRow"
       @row-dbl-click="onDblClickRow"
+      @row-checked="onCheckedRow"
       @move-slider="onMoveSlider"
       @add-link="onAddLink"
       @click-link="onClickLink"
@@ -195,6 +196,10 @@ const onDblClickRow = (data: any) => {
   console.log('dblclick row', data);
 };
 
+const onCheckedRow = (state: boolean, data: any) => {
+  console.log('checked row', state, data);
+};
+
 const onMoveSlider = (data: any) => {
   console.log('move slider', data);
 };

diff --git a/src/components/column/selection.vue b/src/components/column/selection.vue
@@ -23,16 +23,14 @@
 </template>
 
 <script lang="ts" setup>
-import { PropType, ref } from 'vue';
+import { PropType, ref, watch } from 'vue';
 import useStyle from '@/composables/useStyle';
 import useData from '@/composables/useData';
 import RowItem from '@/models/data/row';
 import Icon from '../common/Icon.vue';
+import useEvent from '@/composables/useEvent';
 
-const { rowHeight, $styleBox } = useStyle();
-const checked = ref(false);
-
-defineProps({
+const props = defineProps({
   data: {
     type: Object as PropType<RowItem>,
     default: () => ({})
@@ -43,6 +41,16 @@ defineProps({
   }
 });
 
+const { rowHeight, $styleBox } = useStyle();
+const checked = ref(false);
+const { EmitRowChecked } = useEvent();
+watch(
+  () => checked.value,
+  val => {
+    EmitRowChecked(val, props.data);
+  }
+);
+
 const { flattenData } = useData();
 </script>
 

diff --git a/src/composables/useEvent.ts b/src/composables/useEvent.ts
@@ -17,7 +17,6 @@ export default () => {
     rootEmit.value?.('row-click', toRaw(row));
   }
 
-  // (e: 'row-dbl-click', data: any): void;
   /**
    * 双击行事件
    * @param row 该行的原始数据
@@ -26,13 +25,13 @@ export default () => {
     rootEmit.value?.('row-dbl-click', toRaw(row));
   }
 
-  // (e: 'row-checked', state: boolean, data: any): void;
   /**
    * 选择行事件 checkbox
+   * @param state 选择状态
    * @param row 该行的原始数据
    */
-  function EmitRowChecked(row: any) {
-    rootEmit.value?.('row-checked', toRaw(row));
+  function EmitRowChecked(state: boolean, row: any) {
+    rootEmit.value?.('row-checked', state, toRaw(row));
   }
 
   /**