74 lines
2.1 KiB
Vue
74 lines
2.1 KiB
Vue
<template>
|
||
<view
|
||
v-if="show"
|
||
class="confirm-dialog"
|
||
@touchmove.stop.prevent="noop"
|
||
>
|
||
<view class="confirm-dialog__mask" @click="onCancel" />
|
||
<view class="confirm-dialog__panel">
|
||
<view class="confirm-dialog__body">
|
||
<view class="confirm-dialog__title">{{ title }}</view>
|
||
<view class="confirm-dialog__content">
|
||
<slot>{{ content }}</slot>
|
||
</view>
|
||
</view>
|
||
<view class="confirm-dialog__actions">
|
||
<view
|
||
class="confirm-dialog__btn confirm-dialog__btn--cancel"
|
||
@click="onCancel"
|
||
>
|
||
{{ cancelText }}
|
||
</view>
|
||
<!-- 微信 getPhoneNumber 必须由用户点击 button 触发，不可编程唤起 -->
|
||
<button
|
||
v-if="confirmOpenType"
|
||
class="confirm-dialog__btn confirm-dialog__btn--confirm confirm-dialog__btn--native"
|
||
hover-class="none"
|
||
:open-type="confirmOpenType"
|
||
@getphonenumber="onConfirmPhone"
|
||
>
|
||
{{ confirmText }}
|
||
</button>
|
||
<view
|
||
v-else
|
||
class="confirm-dialog__btn confirm-dialog__btn--confirm"
|
||
@click="onConfirm"
|
||
>
|
||
{{ confirmText }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: 'ConfirmDialog',
|
||
props: {
|
||
show: { type: Boolean, default: false },
|
||
title: { type: String, default: '请先同意协议' },
|
||
content: { type: String, default: '' },
|
||
cancelText: { type: String, default: '取消' },
|
||
confirmText: { type: String, default: '同意并登录' },
|
||
/** 如 getPhoneNumber：确认键渲染为原生 button，同一次点击可拉起微信授权 */
|
||
confirmOpenType: { type: String, default: '' }
|
||
},
|
||
methods: {
|
||
noop() {},
|
||
onCancel() {
|
||
this.$emit('update:show', false)
|
||
this.$emit('cancel')
|
||
},
|
||
onConfirm() {
|
||
this.$emit('update:show', false)
|
||
this.$emit('confirm')
|
||
},
|
||
onConfirmPhone(e) {
|
||
this.$emit('update:show', false)
|
||
this.$emit('confirm')
|
||
this.$emit('getphonenumber', e)
|
||
}
|
||
}
|
||
}
|
||
</script>
|