GpPopupOperating 操作面板

引入

import PressGpPopupOperating from '@tencent/press-next/press-gp-popup-operating/press-gp-popup-operating';

export default {
  components: {
    PressGpPopupOperating,
  }
}

代码演示

基础用法

<PressPopupOperation
  :show="show"
  @clickCancel="clickCancel"
  @clickWrap="clickCancel"
  @clickButton="clickButton"
/>

import { ref } from 'vue';
const show = ref(true);

const clickCancel = () => show.value = false;
const clickButton = () => {
  console.log('[clickButton]');
  show.value = false;
};

API

Props

interface Button {
  type: 'warn' | 'default',
  title: string;
}
interface Props {
  show: boolean;
  buttonList?: Array<Button>
}

withDefaults(defineProps<Props>(), {
  show: false,
  buttonList: () => [{
    type: 'warn',
    title: '确认取消报名',
  }],
});

Events

const emits = defineEmits<{
  clickWrap: [];
  clickButton: [item: Button, index: number];
  clickCancel: [];
}>();