小程序 自定義alert彈窗 帶動畫

小程序官方提供的alert彈窗 沒法自定義，如果需要在上面修改，添加一個input 或者 textarea就沒辦法做到，因此出於此目的，封裝了一套自己的彈窗控件，並且通過定義多個slot插槽來提供自定義
能實現功能

1. 點擊彈出有spring動畫
2. title和content都可以自定義
3. 提供插槽自定義額外內容
4. 事件按鈕支持button功能，可以有獲取用戶信息功能 (open-type)
5. 按鈕可以支持style修改
   上圖

需要注意的是 如果想要使用按鈕功能，需要對按鈕的樣式進行修改，需要到app.json中移除

"style": "v2",

使用代碼

<view class="container">
    <view class="action-container" bind:tap="normalAction">普通彈窗</view>
    <view class="action-container" bind:tap="loginAction">登錄彈窗</view>
    <view class="action-container" bind:tap="closeAction">關閉運單彈窗</view>
    <view class="action-container" bind:tap="mobileAction">輸入手機號彈窗</view>
</view>

<!-- 普通彈窗 -->
<kz-dialog wx:if="{{showDialog}}" bind:onTap="onDialogTap" title="我是彈窗標題" content="我是彈窗內容我是彈彈窗內容我是彈窗內容我是彈窗內容我是彈窗內容我是彈窗內容我是彈窗內容我是彈窗內容我是彈窗內容" actions="{{['取消','確定']}}" mark:key="normal"></kz-dialog>
<!-- <kz-dialog wx:if="{{showDialog}}" bind:onTap="onDialogTap" content="我是彈窗內容我是彈彈窗內容我是彈窗內容我是彈窗內容我是彈窗內容我是彈窗內容我是彈窗內容我是彈窗內容我是彈窗內容" actions="{{['取消','確定']}}" mark:key="normal"></kz-dialog> -->
<!-- <kz-dialog wx:if="{{showDialog}}" bind:onTap="onDialogTap" title="我是彈窗標題" actions="{{['取消']}}" mark:key="normal"></kz-dialog> -->
<!-- <kz-dialog wx:if="{{showDialog}}" bind:onTap="onDialogTap" title="我是彈窗標題"  destructive="{{0}}" actions="{{['確定']}}" mark:key="normal"></kz-dialog> -->


<!-- 登錄授權彈窗 -->
<kz-dialog wx:if="{{loginDialog}}" bind:onTap="onDialogTap" isAuth="{{true}}" bind:onAuth="onAuth" actions="{{['放棄授權','同意授權']}}" title="微信授權登錄" content="您暫未授權獲取您的信息，為了能正常使用小程序的功能，請允許我們獲取您的信息。" mark:key="login"></kz-dialog>

<!-- 關閉運單彈窗 -->
<kz-dialog wx:if="{{showWaybill}}" bind:onTap="onDialogTap" actions="{{['取消','確認關閉']}}" title="關閉運單" content="關閉運單后，未送達的貨物后被認定為丟失。您還要繼續確認嗎？" mark:key="bill">
	<view slot="content" class="input-container">
		<textarea name="textarea" bindinput="inputchange" placeholder="請說明關單原因" placeholder-style="color:red" auto-focus="{{true}}"></textarea>
	</view>
</kz-dialog>

<!-- 輸入手機號彈窗 -->
<kz-dialog wx:if="{{showMobile}}" bind:onTap="onDialogTap" title="請輸入手機號" mark:key="mobile">
	<view class="mobile-container">
		<input bindinput="inputMobilechange" placeholder="請輸入手機號" auto-focus="{{true}}" maxlength="11" type="number"></input>
	</view>
</kz-dialog>

這里提供的集中dialog都是項目中用到的，如果你的項目中有其他樣式需求，可以自行修改源代碼
下載地址請前往本人github https://github.com/qqcc1388/wx-dialog

轉載請標注來源：https://www.cnblogs.com/qqcc1388/p/13213686.html