prep-popup

prep-popup

Cái này là Prep Popup UI

Cài đặt

    npm install prep-popup --save

hoặc

    yarn add prep-popup

Cách dùng trong Vue
Sử dụng PrepPopup Component Global Tại main.js

  import {PrepPopupPlugin} from "prep-popup";
  app.use(PrepPopupPlugin);

import popup style, tailwindCSS requirement

  import "prep-popup/style";

hoặc trong postcss

  @import "prep-popup/style";

Tại view component thêm thẻ <PrepPopup name="test-name"></PrepPopup>

Sử dụng PrepPopup trong local component thì cần import với lệnh sau

import {PrepPopup} from "prep-popup";

Các phương thức hỗ trợ: Các phương thưc của plugins được truy cập thông qua đối tượng

Để mở popup trong composition api sử dụng lệnh

 usePrepPopup().popup(popupName).open(options:Object);

Trong options API sử dụng lệnh

   this.$prepPopup.popup(popupName).open(options:Object);

Để đóng popup trong composition api sử dụng lệnh

 usePrepPopup().popup(popupName).close(options:Object);

Trong options API sử dụng lệnh

   this.$prepPopup.popup(popupName).close(options:Object);

Để đóng toàn bộ popup sử dụng lênh this.$prepPopup.closeAll() hoặc usePrepPopup().closeAll()

Danh sách các props

const props = defineProps({
  name: {
    default: "default-prep-popup"
  },
  primaryButtonLabel: {
    default: "Confirm Label"
  },
  secondaryButtonLabel: {
    default: "Cancel Label"
  },
  showPrimaryButton: {
    default: true
  },
  showSecondaryButton: {
    default: true
  },
  width: {
    default: 385
  },
  height: {
    default: 'auto'
  },
  title: {
    default: "Popup Title"
  },
  body: {
    default: ""
  },
  showCloseButton: {
    default: true
  },
  icon: {
    default: false,
  },
  iconLink: {
    default: ""
  },
  allowCloseWhenClickBackdrop: {
    default: true
  },
  onPrimaryButtonClick: {
    default: () => {
    },
    type: Function
  },
  onSecondaryButtonClick: {
    default: () => {
    },
    type: Function
  },
  onClosePopupClick: {
    default: () => {
    },
    type: Function
  },
  primaryButtonClass: {
    default: ""
  },
  secondaryButtonClass: {
    default: ""
  },
  buttonLayout: {
    default: 'column'
  },
  wrapperClass: {
    default: ''
  },
  showFooter: {
    default: true
  },
  wrapperStyle: {
    default: ''
  },
  contentClass: {
    default: ''
  }
})

Các props có thể truyền qua component trong template hoặc truyền trực tiếp khi gọi lệnh open thông qua tham số options

Các custom slot

<slot></slot> -> main content
<slot name="title"></slot> -> title
<slot name="footer"></slot> ->footer
<slot name="icon"></slot> -> icon
<slot name="primaryButton"></slot> ->primary button
<slot name="secondaryButton"></slot> -> secondary button