<template> <view class="uni-popup-dialog"> <view class="uni-dialog-title"> <text class="uni-dialog-title-text" :class="['uni-popup__'+dialogType]">{{title}}</text> </view> <view class="uni-dialog-content"> <text class="uni-dialog-content-text" v-if="mode === 'base'">{{content}}</text> <input v-else class="uni-dialog-input" v-model="val" type="text" :placeholder="placeholder" :focus="focus" > </view> <view class="uni-dialog-button-group"> <view class="uni-dialog-button" @click="close"> <text class="uni-dialog-button-text">取消</text> </view> <view class="uni-dialog-button uni-border-left" @click="onOk"> <text class="uni-dialog-button-text uni-button-color">确定</text> </view> </view> </view> </template> <script> /** * PopUp 弹出层-对话框样式 * @description 弹出层-对话框样式 * @tutorial https://ext.dcloud.net.cn/plugin?id=329 * @property {String} value input 模式下的默认值 * @property {String} placeholder input 模式下输入提示 * @property {String} type = [success|warning|info|error] 主题样式 * @value success 成功 * @value warning 提示 * @value info 消息 * @value error 错误 * @property {String} mode = [base|input] 模式、 * @value base 基础对话框 * @value input 可输入对话框 * @property {String} content 对话框内容 * @property {Boolean} beforeClose 是否拦截取消事件 * @event {Function} confirm 点击确认按钮触发 * @event {Function} close 点击取消按钮触发 */ export default { name: "uniPopupDialog", props: { value: { type: [String, Number], default: '' }, placeholder: { type: [String, Number], default: '请输入内容' }, /** * 对话框主题 success/warning/info/error 默认 success */ type: { type: String, default: 'error' }, /** * 对话框模式 base/input */ mode: { type: String, default: 'base' }, /** * 对话框标题 */ title: { type: String, default: '提示' }, /** * 对话框内容 */ content: { type: String, default: '' }, /** * 拦截取消事件 ,如果拦截取消事件,必须监听close事件,执行 done() */ beforeClose: { type: Boolean, default: false } }, data() { return { dialogType: 'error', focus: false, val: "" } }, inject: ['popup'], watch: { type(val) { this.dialogType = val }, mode(val) { if (val === 'input') { this.dialogType = 'info' } }, value(val) { this.val = val } }, created() { // 对话框遮罩不可点击 this.popup.mkclick = false if (this.mode === 'input') { this.dialogType = 'info' this.val = this.value } else { this.dialogType = this.type } }, mounted() { this.focus = true }, methods: { /** * 点击确认按钮 */ onOk() { this.$emit('confirm', () => { this.popup.close() if (this.mode === 'input') this.val = this.value }, this.mode === 'input' ? this.val : '') }, /** * 点击取消按钮 */ close() { if (this.beforeClose) { this.$emit('close', () => { this.popup.close() }) return } this.popup.close() } } } </script> <style lang="scss" scoped> .uni-popup-dialog { width: 300px; border-radius: 15px; background-color: #fff; } .uni-dialog-title { /* #ifndef APP-NVUE */ display: flex; /* #endif */ flex-direction: row; justify-content: center; padding-top: 15px; padding-bottom: 5px; } .uni-dialog-title-text { font-size: 16px; font-weight: 500; } .uni-dialog-content { /* #ifndef APP-NVUE */ display: flex; /* #endif */ flex-direction: row; justify-content: center; align-items: center; padding: 5px 15px 15px 15px; } .uni-dialog-content-text { font-size: 14px; color: #6e6e6e; } .uni-dialog-button-group { /* #ifndef APP-NVUE */ display: flex; /* #endif */ flex-direction: row; border-top-color: #f5f5f5; border-top-style: solid; border-top-width: 1px; } .uni-dialog-button { /* #ifndef APP-NVUE */ display: flex; /* #endif */ flex: 1; flex-direction: row; justify-content: center; align-items: center; height: 45px; } .uni-border-left { border-left-color: #f0f0f0; border-left-style: solid; border-left-width: 1px; } .uni-dialog-button-text { font-size: 14px; } .uni-button-color { color: $uni-color-primary; } .uni-dialog-input { flex: 1; font-size: 14px; } .uni-popup__success { color: $uni-color-success; } .uni-popup__warn { color: $uni-color-warning; } .uni-popup__error { color: $uni-color-error; } .uni-popup__info { color: #909399; } </style>