popup

parameter

parameter	illustrate	type	optional value	Defaults
mask	Whether there is a mask layer	Boolean	--	true
show	whether to show	Boolean	false	default
position	Location	String	—	false
slide	whether to slide	boolean	—	false
reference
contentHeight	high content	Number	—	-
contentWidth	Content wide	Number	—	-
isOptimize			—
styleZindex	Hierarchy	Number	—	10000

Example

<view>
   <fs-page title="popup" bindonMounted="onMounted">
   	<view class="page">
   		<fs-scroll height="{{dScrollHeight}}" class="scroll">
   			<fs-divider tip="静态popup"></fs-divider>
   			<fs-button text="default" bindtap="onPopup" data-type="1" class="button"></fs-button>
   			<fs-button text="left" bindtap="onPopup" data-type="2" class="button"></fs-button>
   			<fs-button text="right" bindtap="onPopup" data-type="3" class="button"></fs-button>
   			<fs-button text="top" bindtap="onPopup" data-type="4" class="button"></fs-button>
   			<fs-button text="bottom" bindtap="onPopup" data-type="5" class="button"></fs-button>

   			<fs-divider tip="动态popup"></fs-divider>
   			<fs-button text="default" bindtap="onPopup" data-type="6" class="button"></fs-button>
   			<fs-button text="left" bindtap="onPopup" data-type="7" class="button"></fs-button>
   			<fs-button text="right" bindtap="onPopup" data-type="8" class="button"></fs-button>
   			<fs-button text="top" bindtap="onPopup" data-type="9" class="button"></fs-button>
   			<fs-button text="bottom" bindtap="onPopup" data-type="10" class="button"></fs-button>

   			<fs-divider tip="不加遮罩popup"></fs-divider>
   			<fs-button text="default" bindtap="onPopup" data-type="11" class="button"></fs-button>

   			<fs-divider tip="定位到目标元素附近"></fs-divider>
   			<view id="target" class="target"></view>
   			<fs-button text="出现在上方" bindtap="onPopup" data-type="12" class="button"></fs-button>
   			<fs-button text="出现在下方" bindtap="onPopup" data-type="13" class="button"></fs-button>
   			<fs-button text="出现在左方" bindtap="onPopup" data-type="14" class="button"></fs-button>
   			<fs-button text="出现在右方" bindtap="onPopup" data-type="15" class="button"></fs-button>

   			<view style="height:250rpx;"></view>
   		</fs-scroll>
   	</view>
   	<fs-popup show="{{show}}" bindonMaskClose="onClose" bindonBackClose="onClose" position="{{position}}" slide="{{slide}}" mask="{{mask}}"
   		reference="{{reference}}" contentHeight="{{400}}" contentWidth="{{400}}" isOptimize="{{isOptimize}}">
   		<text slot="content" class="content" bindtap="tapHandler">测试{{position}}</text>
   	</fs-popup>
   </fs-page>
</view>

// pages/testPopup/testPopup.js
const paramConfig = {
  1: {
    position: "center"
  },
  2: {
    position: "left"
  },
  3: {
    position: "right"
  },
  4: {
    position: "top"
  },
  5: {
    position: "bottom"
  },
  6: {
    position: "center",
    slide: true
  },
  7: {
    position: "left",
    slide: true
  },
  8: {
    position: "right",
    slide: true
  },
  9: {
    position: "top",
    slide: true
  },
  10: {
    position: "bottom",
    slide: true
  },
  11: {
    slide: true,
    mask: false
  },
  12: {
    position: "top",
  },
  13: {
    position: "bottom",
  },
  14: {
    position: "left"
  },
  15: {
    position: "right"
  }
}

Page({

  /**
   * 页面的初始数据
   */
  data: {
    show: false,
    position: "",
    slide: false,
    mask: true,
    dScrollHeight: 2000,
    reference: null,
    isOptimize: false
  },

  onPopup(event) {
    const type = event.target.dataset.type;
    let param = {
      position: "center",
      slide: false,
      mask: true,
      isOptimize: false,
      reference: type > 11 || type < 16 ? { id: "target", getContext: () => this } : null
    }

    param = Object.assign(param, paramConfig[type] || {});
    this.setData({
      position: param.position,
      slide: param.slide,
      mask: param.mask,
      isOptimize: param.isOptimize,
      reference: param.reference,
      show: true
    });
  },
  onMounted(e) {
    this.setData({
      dScrollHeight: e.detail.mainHeight
    });
  },
  onClose() {
    this.setData({
      show: false
    });
  },
  tapHandler() {
    cml.alert({
      message: "测试"
    });
  }
})