Popup Dialog

Parameters

Property	Type	Default	Options	Description
mask	Boolean	true	-	Whether to add mask layer
show	Boolean	false	-	Controls popup visibility
title	String	""	-	Popup title
text	String	""	-	Popup content
type	String	confirm	prompt/confirm/primary	Popup type
placeholder	String	"Please enter content"	--	Default placeholder text
value	String	""	--	Default value
cancelBtn	Object	null	--	Cancel button configuration
confirmBtn	Object	null	--	Confirm button configuration
maxHeight	Number	254	--	Maximum height of content area
maxLength	Number	140	--	Maximum text length in content area
inputMaxHeight	Number	132	--	Maximum height for input content

Callbacks

Property	Type	Description
onClick	Function	Returns after button click event

Example Code

<view>
  <fs-page title="confirm" bindonMounted="onMounted">
    <view class="page">
      <fs-scroll height="{{dScrollHeight}}" class="scroll">
        <fs-divider tip="Basic Form"></fs-divider>
        <fs-button class="button" text="Click for demo" plain="{{true}}" type="primary" bindtap="onTap2"></fs-button>

        <fs-divider tip="Multi-line Form"></fs-divider>
        <fs-button class="button" text="Click for demo" plain="{{true}}" type="primary" bindtap="onTap" data-type="1">
        </fs-button>

        <fs-divider tip="Prompt"></fs-divider>
        <fs-button class="button" text="Click for demo" plain="{{true}}" type="primary" bindtap="onTap" data-type="2">
        </fs-button>

        <fs-divider tip="Custom Buttons"></fs-divider>
        <fs-button class="button" text="Custom Cancel" plain="{{true}}" type="primary" bindtap="onTap" data-type="3">
        </fs-button>
        <fs-button class="button" text="Custom Confirm" plain="{{true}}" type="primary" bindtap="onTap" data-type="4">
        </fs-button>

        <fs-divider tip="Custom Content Area"></fs-divider>
        <fs-button class="button" text="Click for demo" plain="{{true}}" type="primary" bindtap="onTap1"></fs-button>
      </fs-scroll>
    </view>
    <fs-confirm title="{{title}}" show="{{show}}" text="{{text}}" cancelBtn="{{cancelBtn}}" confirmBtn="{{confirmBtn}}"
      type="{{type}}" bindonClose="onCancel"></fs-confirm>
    <fs-confirm title="{{title}}" show="{{show1}}" text="{{text}}">
      <fs-button class="button" text="I'm custom content" plain="{{true}}" type="primary" slot="body" bindonClose="onCancel"></fs-button>
    </fs-confirm>
  </fs-page>
</view>

// pages/testComfirm/testConfirm.js
const paramConfig = {
  1: {
    title: "Popup Title,Popup Title,Popup Title,Popup Title,Popup Title",
    text: "This is a demo! This is a demo! This is a demo! This is a demo! This is a demo! This is a demo! This is a demo! This is a demo! This is a demo! This is a demo! This is a demo! This is a demo! This is a demo! This is a demo! This is a demo! This is a demo! This is a demo! This is a demo! This is a demo! This is a demo! This is a demo! This is a demo! This is a demo! This is a demo! This is a demo! This is a demo! This is a demo! This is a demo! This is a demo! This is a demo! This is a demo! This is a demo! This is a demo! This is a demo! This is a demo! This is a demo! This is a demo! This is a demo! This is a demo!"
  },
  2: {
    title: "Popup Title",
    type: "prompt"
  },
  3: {
    cancelBtn: {
      text: "Custom Cancel!",
      onClick(type) {
        console.log(2);
      }
    }
  },
  4: {
    confirmBtn: {
      text: "Custom Confirm!",
      onClick(type) {
        console.log(1);
      }
    }
  }
}

Page({
  data: {
    show: false,
    title: "",
    text: "",
    type: "",
    dScrollHeight: 2000,
    cancelBtn: void 0,
    confirmBtn: void 0,
    show1: false
  },

  onTap(event) {
    let param = {
      title: "Popup Title",
      text: "This is a demo!",
      type: "confirm",
      cancelBtn: {
        text: "Cancel",
        onClick: function () {
          this.onCancel();
        }.bind(this)
      },
      confirmBtn: {
        text: "Confirm",
        onClick: function () {
          this.onConfirm();
        }.bind(this)
      }
    }
    const type = event.target.dataset.type;
    param = Object.assign(param, paramConfig[type] || {});
    this.setData({
      title: param.title,
      text: param.text,
      type: param.type,
      cancelBtn: param.cancelBtn || {},
      confirmBtn: param.confirmBtn || {},
      show: true
    });
  },

  onTap1() {
    this.setData({
      show1: true,
      title: "Popup Title",
      text: "This is a demo!"
    });
  },

  onTap2() {
    let param = {
      title: "Popup Title",
      text: "This is a demo!",
      type: "confirm",
      cancelBtn: null,
      confirmBtn: {
        text: "Confirm",
        onClick: function () {
          this.onConfirm();
        }.bind(this)
      }
    }

    this.setData({
      title: param.title,
      text: param.text,
      type: param.type,
      cancelBtn: param.cancelBtn,
      confirmBtn: param.confirmBtn,
      show: true
    });
  },

  onConfirm() {
    this.setData({
      show: false,
      show1: false
    });
  },

  onCancel() {
    this.setData({
      show: false,
      show1: false
    });
  },

  onMounted(e) {
    this.setData({
      dScrollHeight: e.detail.mainHeight
    });
  }
})