OperationDialog 操作弹窗

引入

import PressOperationDialog from '@tencent/press-next/press-operation-dialog/press-operation-dialog';

export default {
  components: {
    PressOperationDialog,
  }
}

代码演示

基础用法

<PressOperationDialog
  :show="dialog.show"
  :operation-list="dialog.operationList"
  :team-a="dialog.teamA"
  :team-b="dialog.teamB"
  @clickClose="() => dialog.show = false"
  @clickOperation="clickOperation"
/>

<script lang="ts" setup>
import { ref } from 'vue';

const OPERATION_MAP = {
  CHECK_RECORD: 'CHECK_RECORD',
  CHECK_SCORE: 'CHECK_SCORE',
  SHARE_SCORE: 'SHARE_SCORE',
  MODIFY_SCORE: 'MODIFY_SCORE',
} as const;

const dialog = ref({
  show: true,
  operationList: [
    {
      icon: 'icon-cup',
      title: '查看成绩',
      name: OPERATION_MAP.CHECK_SCORE,
    },
    {
      icon: 'icon-repost',
      title: '分享成绩',
      name: OPERATION_MAP.SHARE_SCORE,
      isShare: true,
    },
    {
      icon: 'icon-modify',
      title: '改判比分',
      name: OPERATION_MAP.MODIFY_SCORE,
    },
  ],
  teamA: {
    position: '东西',
    member: [
      {
        avatar: 'https://dummyimage.com/44x44',
        isLeader: true,
      }, {
        avatar: 'https://dummyimage.com/44x44',
        isLeader: false,
      },
    ],
    teamName: '队伍名字',
  },
  teamB: {
    position: '南北',
    member: [
      {
        avatar: 'https://dummyimage.com/44x44',
        isLeader: true,
      }, {
        avatar: 'https://dummyimage.com/44x44',
        isLeader: false,
      },
    ],
    teamName: '队伍名字',
  },
});

const clickOperation = (item) => {
  console.log('[clickOperation.item]', item);
};

</script>

API

Props

参数	说明	类型	默认值
show	是否显示弹窗	boolean	false
team-a	左侧队伍	object	-
team-b	右侧队伍	object	-
operation-list	操作列表	array	-

Events

事件名	说明	参数
clickClose	点击关闭	-
clickOperation	点击操作条目	item