弹出框

参数

属性	类型	默认值	可选值	说明
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！这是一个demo！这是一个demo！这是一个demo！这是一个demo！这是一个demo！这是一个demo！这是一个demo！这是一个demo！这是一个demo！这是一个demo！这是一个demo！这是一个demo！这是一个demo！这是一个demo！这是一个demo！这是一个demo！这是一个demo！这是一个demo！这是一个demo！这是一个demo！这是一个demo！这是一个demo！这是一个demo！这是一个demo！这是一个demo！这是一个demo！这是一个demo！这是一个demo！这是一个demo！这是一个demo！这是一个demo！这是一个demo！这是一个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
    });
  }
})