GeneralShell.vue 1.7 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364
  1. <template>
  2. <div class="nut-general-shell">
  3. <item-contents
  4. :item="item"
  5. @delIconClick="delShellClick"
  6. @editIconClick="editShellClick"
  7. @itemClick="itemShellClick"
  8. >
  9. <template v-slot:contentTop>
  10. <slot name="contentInfo"></slot>
  11. </template>
  12. <template v-slot:contentIcon>
  13. <slot name="contentIcons"></slot>
  14. </template>
  15. <template v-slot:contentAddr>
  16. <slot name="contentAddrs"></slot>
  17. </template>
  18. </item-contents>
  19. </div>
  20. </template>
  21. <script lang="ts">
  22. import { ref, watch, reactive, toRefs, onMounted, useSlots } from 'vue';
  23. import { createComponent } from '@/packages/utils/create';
  24. const { componentName, create } = createComponent('general-shell');
  25. import ItemContents from './ItemContents.vue';
  26. export default create({
  27. props: {
  28. item: {
  29. type: Object,
  30. default: {}
  31. }
  32. },
  33. emits: ['handleDelIcon', 'handleEditIcon', 'handleItemContent', 'handelSwipeDel'],
  34. components: {
  35. ItemContents
  36. },
  37. setup(props: any, { emit, slots }) {
  38. const delShellClick = (event, item) => {
  39. emit('handleDelIcon', event, props.item);
  40. event.stopPropagation();
  41. };
  42. const editShellClick = (event, item) => {
  43. emit('handleEditIcon', event, props.item);
  44. event.stopPropagation();
  45. };
  46. const itemShellClick = (event, item) => {
  47. emit('handleItemContent', event, props.item);
  48. event.stopPropagation();
  49. };
  50. const swipeDelClick = (event, item) => {
  51. emit('handelSwipeDel', event, props.item);
  52. event.stopPropagation();
  53. };
  54. return {
  55. delShellClick,
  56. editShellClick,
  57. itemShellClick,
  58. swipeDelClick
  59. };
  60. }
  61. });
  62. </script>