ValPopupContainer 弹出层

引入

import PressValPopupContainer from '@tencent/press-next/press-val-popup-container/press-val-popup-container';

代码演示

基础用法

<PressValPopupContainer
  :is-show="dialog.show"
  :title="dialog.title"
  :is-close="true"
  @onClose="clickClose"
  @topRightBtn="topRightBtn"
>
  <template #content>
    <div style="height: 100px;padding: 20px;">
      content
    </div>
  </template>
</PressValPopupContainer

const dialog = ref({
  show: true,
  title: '弹窗标题',
});

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

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

API

Props

interface Props {
  customClass?: string; // 样式class
  customStyle?: string; //  样式style
  isShow?: boolean; // 是否显示
  title?: string; // 标题
  isClose?: boolean; // 是否显示关闭按钮
  content?: string; // 内容
}

withDefaults(defineProps<Props>(), {
  // 设置默认样式: 通过组件传递
  customClass: '',
  customStyle: '',
  // 设置默认属性
  isShow: false,
  title: '',
  isClose: true,
  content: '',
});

Events

const emit = defineEmits<{
  onClose: []
}>();