用于展示确认、提示与输入类弹窗。

参数

属性	类型	默认值	可选值	说明
mask	Boolean	true	--	是否添加遮罩层
show	Boolean	false	--	控制弹窗显示/隐藏
title	String	--	--	弹窗标题
text	String	--	--	弹窗内容
type	String	confirm	prompt/confirm/primary	弹窗类型
placeholder	String	请输入内容	--	默认值占位值
value	String	--	--	默认值
cancelBtn	Object	null	--	取消按钮位内容
confirmBtn	Object	null	--	确认按钮位内容
maxHeight	Number	254	--	内容区域的最大高度
maxLength	Number	140	--	内容区域文本的最大长度
inputMaxHeight	Number	132	--	input 内容最大高

回调

属性	类型	说明
onClick	Function	按钮执行点击事件后返回

示例代码

<view>
	<fs-page title="confirm" bindonMounted="onMounted">
		<view class="page">
			<fs-scroll height="{{dScrollHeight}}" class="scroll">
				<fs-divider tip="基本形态"></fs-divider>
				<fs-button
					class="button"
					text="点我demo"
					plain="{{true}}"
					type="primary"
					bindtap="onTap2"
				></fs-button>

				<fs-divider tip="多行形态"></fs-divider>
				<fs-button
					class="button"
					text="点我demo"
					plain="{{true}}"
					type="primary"
					bindtap="onTap"
					data-type="1"
				>
				</fs-button>

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

				<fs-divider tip="自定义按钮"></fs-divider>
				<fs-button
					class="button"
					text="定义取消按钮"
					plain="{{true}}"
					type="primary"
					bindtap="onTap"
					data-type="3"
				>
				</fs-button>
				<fs-button
					class="button"
					text="定义确认按钮"
					plain="{{true}}"
					type="primary"
					bindtap="onTap"
					data-type="4"
				>
				</fs-button>

				<fs-divider tip="内容区域自定义"></fs-divider>
				<fs-button
					class="button"
					text="点我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="我是自定义出来的"
				plain="{{true}}"
				type="primary"
				slot="body"
				bindonClose="onCancel"
			></fs-button>
		</fs-confirm>
	</fs-page>
</view>

// pages/testComfirm/testConfirm.js
const paramConfig = {
    1: {
        title: "弹窗标题,弹窗标题,弹窗标题,弹窗标题,弹窗标题",
        text: "这是一个demo！这是一个demo！这是一个demo！这是一个demo！",
    },
    2: {
        title: "弹窗标题",
        type: "prompt",
    },
    3: {
        cancelBtn: {
            text: "取消喽！",
            onClick(type) {
                console.log(2);
            },
        },
    },
    4: {
        confirmBtn: {
            text: "确定喽！",
            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: "弹窗标题",
            text: "这是一个demo！",
            type: "confirm",
            cancelBtn: {
                text: "取消",
                onClick: function () {
                    this.onCancel();
                }.bind(this),
            },
            confirmBtn: {
                text: "确认",
                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: "弹窗标题",
            text: "这是一个demo！",
        });
    },

    onTap2() {
        let param = {
            title: "弹窗标题",
            text: "这是一个demo！",
            type: "confirm",
            cancelBtn: null,
            confirmBtn: {
                text: "确认",
                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,
        });
    },
});