Used to display confirmation, prompt, and input dialogs.

Parameters

Property	Type	Default	Optional Values	Description
mask	Boolean	true	--	Whether to add a mask layer
show	Boolean	false	--	Controls show/hide state
title	String	--	--	Popup title
text	String	--	--	Popup content
type	String	confirm	prompt/confirm/primary	Popup type
placeholder	String	Please enter content	--	Placeholder text
value	String	--	--	Default value
cancelBtn	Object	null	--	Cancel button content
confirmBtn	Object	null	--	Confirm button content
maxHeight	Number	254	--	Maximum height of the content area
maxLength	Number	140	--	Maximum text length in the content area
inputMaxHeight	Number	132	--	Maximum height of the input content

Callback

Property	Type	Description
onClick	Function	Returned after the 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 Demo"
					plain="{{true}}"
					type="primary"
					bindtap="onTap2"
				></fs-button>

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

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

				<fs-divider tip="Custom Buttons"></fs-divider>
				<fs-button
					class="button"
					text="Define Cancel Button"
					plain="{{true}}"
					type="primary"
					bindtap="onTap"
					data-type="3"
				>
				</fs-button>
				<fs-button
					class="button"
					text="Define Confirm Button"
					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 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 am 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!",
    },
    2: {
        title: "Popup Title",
        type: "prompt",
    },
    3: {
        cancelBtn: {
            text: "Cancel!",
            onClick(type) {
                console.log(2);
            },
        },
    },
    4: {
        confirmBtn: {
            text: "Confirm!",
            onClick(type) {
                console.log(1);
            },
        },
    },
};

Page({
    /**
     * Initial page data
     */
    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,
        });
    },
});