index.vue 933 B

123456789101112131415161718192021222324252627282930313233343536373839404142
  1. <template>
  2. <div class="btn-list">
  3. <a-button :class="item.className"
  4. v-for="item in btnList"
  5. :key="item.lable"
  6. @click.stop="onClick(item)">
  7. {{item.lable}}
  8. </a-button>
  9. </div>
  10. </template>
  11. <script lang="ts">
  12. import { defineComponent, PropType } from 'vue';
  13. import { BtnList } from './interface';
  14. export default defineComponent({
  15. props: {
  16. btnList: {
  17. // 按钮列表数据
  18. default: [],
  19. type: Array as PropType<BtnList[]>,
  20. },
  21. record: {
  22. default: {},
  23. type: Object,
  24. },
  25. },
  26. setup(props, context) {
  27. function onClick(item: BtnList) {
  28. console.log(`${item.lable}:${item.code}`);
  29. context.emit('click', item, props.record);
  30. }
  31. return { onClick };
  32. },
  33. });
  34. </script>
  35. <style lang="less">
  36. .btn-list {
  37. display: inline-flex;
  38. }
  39. </style>