modal 浮窗

更新时间：2023-06-15

弹窗选择

属性说明：

属性名	类型	默认值	必填	说明
data	Array	无	否	弹窗内容
title	String	无	否	弹窗 title
cancelText	String	取消	否	取消按钮文字
okText	String	确认	否	确认按钮文字
okType	String	real	否	确认按钮的样式type,参考button可传type
centerText	String	重置	否	中间按钮文字
centerBtn	Boolean	true	否	是否显示中间按钮
multiple	Boolean	true	否	是否多选
no-scroll-content	Boolean	false	否	是否使用自适应高度的 slot
voiceType	String	scroll-vertical	否
voiceTag	String	弹窗	否
bindchange	Function	无	否	确认回调
bindcancel	Function	无	否	取消回调
bindreset	Function	无	否	重置回调
class-name-content	String	无	否	设置弹窗的类名，自定义弹窗样式
hidden-cancel	Boolean	false	否	隐藏取消
hidden-confirm	Boolean	false	否	隐藏确定
hiddenFooter	Boolean	false	否	底部按钮
modalIndex	Any	0	否	用于区分 modal 引导语配置
clickConfirmClose	Boolean	true	否	区分点击 Confirm 按钮是否关闭 modal

slot：

名称	说明
scroll	高度固定超出滚动
noscroll	高度自适应（最大高度 90vh）
title	标题的插槽可自定义样式

二、示例：

json:

{
    "navigationBarTitleText": "弹窗-model",
    "usingComponents": {
        "iov-button": "iov-ui/lib/button",
        "iov-modal": "iov-ui/lib/modal"
    }
}

swan:

<view>
    <view class="row">
        <iov-button bindtap="handleModal" data-index="1">两按钮</iov-button>
        <iov-button bindtap="handleModal" data-index="2">三按钮</iov-button>
        <iov-button bindtap="handleModal" data-index="3">scroll slot</iov-button>
        <iov-button bindtap="handleModal" data-index="4">no scroll slot</iov-button>
    </view>

    <iov-modal
        data-index="1"
        data="{{ brandList }}"
        s-if="{{ modalVisible1 }}"
        bindchange="modalChange"
        bindcancel="modalCancel"
        bindreset="modalReset"
        title="品牌"
        cancelText="cancel"
        okText="ok"
        okType="real2"
        centerText="reset"
        centerBtn="{{ false }}"
        multiple="{{ false }}"
    >
    
    </iov-modal>
    <iov-modal
        data-index="2"
        data="{{ brandList }}"
        s-if="{{ modalVisible2 }}"
        bindchange="modalChange"
        bindcancel="modalCancel"
        bindreset="modalReset"
        title="demo"
    >
    </iov-modal>
    <iov-modal
        data-index="3"
        s-if="{{ modalVisible3 }}"
        bindchange="modalChange"
        bindcancel="modalCancel"
        bindreset="modalReset"
    >
        <view class="row" slot="scroll">
            <view>scroll</view>
            <view>scroll</view>
            <view>scroll</view>
            <view>scroll</view>
            <view>scroll</view>
            <view>scroll</view>
            <view>scroll</view>
            <view>scroll</view>
            <view>scroll</view>
            <view>scroll</view>
            <view>scroll</view>
        </view>
    </iov-modal>
    <iov-modal
        data-index="4"
        s-if="{{ modalVisible4 }}"
        bindchange="modalChange"
        bindcancel="modalCancel"
        bindreset="modalReset"
        no-scroll-content
    >
        <view class="row" slot="noscroll">
            <iov-button>slot</iov-button>
            <iov-button>2</iov-button>
            <iov-button>slot</iov-button>
            <iov-button>2</iov-button>
            <iov-button>slot</iov-button>
            <iov-button>2</iov-button>
            <iov-button>slot</iov-button>
            <iov-button>slot</iov-button>
            <iov-button>2</iov-button>
        </view>
    </iov-modal>
</view>

js:

Page({
    data: {
        modalVisible1: true,
        modalVisible2: false,
        brandList: [
            {
                id: 2,
                name: '按钮一'
            },
            {
                id: 3,
                name: '按钮二'
            },
            {
                id: 4,
                name: '按钮二'
            }
        ]
    },
    handleModal: function (e) {
        const {index} = e.currentTarget.dataset;
        console.log('> index', index, this.data[`modalVisible${index}`]);
        this.setData({
            [`modalVisible${index}`]: !this.data[`modalVisible${index}`]
        });
    },
    modalChange: function (e) {
        console.log('modalChange> e', e.value);
        this.handleModal(e);
    },
    modalCancel: function (e) {
        console.log(' modalCancel> 点击了取消');
        this.handleModal(e);
    },
    modalReset: function (e) {
        console.log('modalReset> 点击了重置');
    }
});

loading 加载 popup-calendar 日历弹窗

modal 浮窗

modal 弹窗

属性说明：

二、示例：