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 - 第二個輸入框的限制長度

效果演示