Weex组件库-Dialog

1.AlertDialog

<template>
  <div class="wrapper">
    <alert-dialog
            :show="show"
            @onConfirm="confirm()"
            @onDismiss="dismiss()"
            :outTouchCancel="true"
            title="对话框"
            :isConfirmType="true"
            :negativeBtnColor="negativeBtnTextColor"
            :positiveBtnColor="positiveBtnTextColor"
            content="时刻克服困难时刻难分难舍你发你是否你说你发送方式开发哪款是你发顺丰孙女士健身房你说可能发生可能发生你开房">
    </alert-dialog>
  </div>
</template>
复制代码

• show-true展示，false隐藏
• onConfirm()-确认点击事件
• onDismiss()-取消点击事件
• outTouchCancel-是否允许外部触摸取消，默认为false
• title-标题栏
• content-内容
• negativeText - 取消文本
• positiveText - 确认文本
• negativeBtnColor - 取消文本颜色
• positiveBtnColor - 确认文本颜色
• isConfirmType - 为true只会显示一个确认button，默认false
• dim - 蒙版层模糊度，值为0-1

效果演示

1.确认框模式

2.对话框模式

2.HintDialog

 <hint-dialog @closeDialog="close"
             :hintText="hint"
             v-if="show"
             :imageUrl="url">
</hint-dialog>

 <hint-dialog :isList="true"
             :listData="hintList"
             @closeDialog="close"
             v-if="show"
            @selectItem="selectItem">
</hint-dialog>

复制代码

• hintText - 提示文字
• hintSize - 文字大小
• hintColor -文字颜色
• radius - 圆角大小
• imageUrl - 如果有图片展示可设置
• borderColor - 图片框的颜色
• isList - 是否为列表模式
• listData - 列表数据
• selectItem - item点击回调

效果演示

1.有图片类型

2.无图片类型

3.列表类型

3.PupDialog

<template>
    <div class="wrapper">
        <PupDialig :leftList="province"
           @onSelected="onChoice"
           :isSingleChoice="false"
           @onConfirm="myConfirm"
           rightBtnText="Confirm"
           leftBtnText="Cancel"
           middleTitle="城市选择"
           :show="show"
           @onCancel="myCancel">
        </PupDialig>
    </div>
</template>
复制代码

• isOutTouchCancel - 是否允许点击外部区域消失，默认true
• radius - 弹框圆角大小
• show - 是否显示
• pos - 弹出方向
• leftBtnText - 头部左边文本
• leftBtnColor - 头部左边文本颜色
• rightBtnText - 头部右边文本
• rightBtnColor - 头部右边文本颜色
• middleTitle - 中间标题
• middleTitleColor - 中间标题颜色
• leftList - 数组数据
• bottomText - 底部btn文本
• selectedColor - 选中的颜色
• isSingleChoice 是否是单选，默认是true，否则则为多选
• onSelected -点击事件
• onConfirm - 确认事件
• onCancel - 取消事件
• onShow - 弹出事件
• onOverlayClicked - 外部区域点击事件

效果演示

1.单选

2.多选

4.SearchDialog

 <SearchDialog :data="list"
              :show="show"
              @onConfirm="myConfirm"
              @onCancel="myCancel"
              @onSearch="onsearch"
              @onOverlayClicked="onOverlayClicked"
              @onFocus="onFocus"
              :catalogs="titles">
</SearchDialog>
复制代码

• outTouchCancel - 是否允许外部点击隐藏
• show - 是否弹出搜索框
• closeIcon - 关闭Icon的路径，非必要
• closeText - 关闭弹窗的文本，如果没有设置Icon，默认显示文本
• closeTextColor - 关闭文本颜色
• title - 中间标题
• catalogs - 目录
• placeHolderText - 搜索占位文本
• data - 显示搜索的数据
• searchIcon - 搜索Icon
• onConfirm - 确定点击事件回调
• onCancel - 取消点击事件回调
• onInput - 输入监听回调
• onFocus -搜索框焦点监听
• onBlur - 失去焦点监听
• onCancelClick - 取消搜索点击回调
• onSelected - item选择回调
• onSearch - 搜索回调
• onOverlayClicked - 蒙版层点击事件回调

效果演示

5.InputDialog

<InputDialog :show="show"
             @onConfirm="myConfirm"
             @onOverlayClicked="myOverlayClick">
</InputDialog>
复制代码

• show - 是否显示
• firstIcon - 第一个输入框的Icon
• secondIcon -第二个输入框的Icon
• title - 标题
• firstInputText -第一个输入框的占位文本
• secondInputText - 第二个输入框的占位文本
• firstMaxLength - 第一个输入框的限制长度
• secondMaxLength - 第二个输入框的限制长度

效果演示