Pop-up box

parameter

Attributes	type	Defaults	optional value	illustrate
mask	Boolean	true	-	whether to add a mask layer
show	Boolean	false	-	Control popup show/hide
title	String	""	-	Popup title
text	String	""	-	popup content
type	String	confirm	prompt/confirm/primary	Popup type
placeholder	String	Please enter content	--	Default placeholder value
value	String	""	--	Defaults
cancelBtn	Object	null	--	Cancel button bit content
confirmBtn	Object	null	--	Confirm button bit content
maxHeight	Number	254	--	The maximum height of the content area
maxLength	Number	140	--	Maximum length of content area text
inputMaxHeight	Number	132	--	input content maximum height

callback

Attributes	type	illustrate
onClick	Function	Return after button executes click event

sample code

<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
    });
  }
})