| | |
| | | </view> |
| | | <view v-else class="uni-dialog-content"> |
| | | <slot> |
| | | <input class="uni-dialog-input" v-model="val" :type="inputType" :placeholder="placeholderText" :focus="focus" > |
| | | <input class="uni-dialog-input" :maxlength="maxlength" v-model="val" :type="inputType" |
| | | :placeholder="placeholderText" :focus="focus"> |
| | | </slot> |
| | | </view> |
| | | <view class="uni-dialog-button-group"> |
| | | <view class="uni-dialog-button" @click="closeDialog"> |
| | | <view class="uni-dialog-button" v-if="showClose" @click="closeDialog"> |
| | | <text class="uni-dialog-button-text">{{closeText}}</text> |
| | | </view> |
| | | <view class="uni-dialog-button uni-border-left" @click="onOk"> |
| | | <view class="uni-dialog-button" :class="showClose?'uni-border-left':''" @click="onOk"> |
| | | <text class="uni-dialog-button-text uni-button-color">{{okText}}</text> |
| | | </view> |
| | | </view> |
| | |
| | | initVueI18n |
| | | } from '@dcloudio/uni-i18n' |
| | | import messages from '../uni-popup/i18n/index.js' |
| | | const { t } = initVueI18n(messages) |
| | | const { |
| | | t |
| | | } = initVueI18n(messages) |
| | | /** |
| | | * PopUp 弹出层-对话框样式 |
| | | * @description 弹出层-对话框样式 |
| | | * @tutorial https://ext.dcloud.net.cn/plugin?id=329 |
| | | * @property {String} value input 模式下的默认值 |
| | | * @property {String} placeholder input 模式下输入提示 |
| | | * @property {Boolean} focus input模式下是否自动聚焦,默认为true |
| | | * @property {String} type = [success|warning|info|error] 主题样式 |
| | | * @value success 成功 |
| | | * @value warning 提示 |
| | |
| | | * @property {String} mode = [base|input] 模式、 |
| | | * @value base 基础对话框 |
| | | * @value input 可输入对话框 |
| | | * @showClose {Boolean} 是否显示关闭按钮 |
| | | * @property {String} content 对话框内容 |
| | | * @property {Boolean} beforeClose 是否拦截取消事件 |
| | | * @property {Number} maxlength 输入 |
| | | * @event {Function} confirm 点击确认按钮触发 |
| | | * @event {Function} close 点击取消按钮触发 |
| | | */ |
| | |
| | | export default { |
| | | name: "uniPopupDialog", |
| | | mixins: [popup], |
| | | emits:['confirm','close'], |
| | | emits: ['confirm', 'close', 'update:modelValue', 'input'], |
| | | props: { |
| | | inputType:{ |
| | | type: String, |
| | | default: 'text' |
| | | }, |
| | | showClose: { |
| | | type: Boolean, |
| | | default: true |
| | | }, |
| | | // #ifdef VUE2 |
| | | value: { |
| | | type: [String, Number], |
| | | default: '' |
| | | }, |
| | | // #endif |
| | | // #ifdef VUE3 |
| | | modelValue: { |
| | | type: [Number, String], |
| | | default: '' |
| | | }, |
| | | // #endif |
| | | |
| | | |
| | | placeholder: { |
| | | type: [String, Number], |
| | | default: '' |
| | |
| | | confirmText:{ |
| | | type: String, |
| | | default: '' |
| | | }, |
| | | maxlength: { |
| | | type: Number, |
| | | default: -1, |
| | | }, |
| | | focus: { |
| | | type: Boolean, |
| | | default: true, |
| | | } |
| | | }, |
| | | data() { |
| | | return { |
| | | dialogType: 'error', |
| | | focus: false, |
| | | val: "" |
| | | } |
| | | }, |
| | |
| | | } |
| | | }, |
| | | value(val) { |
| | | this.val = val |
| | | this.setVal(val) |
| | | }, |
| | | // #ifdef VUE3 |
| | | modelValue(val) { |
| | | this.setVal(val) |
| | | }, |
| | | // #endif |
| | | val(val) { |
| | | // #ifdef VUE2 |
| | | // TODO 兼容 vue2 |
| | | this.$emit('input', val); |
| | | // #endif |
| | | // #ifdef VUE3 |
| | | // TODO 兼容 vue3 |
| | | this.$emit('update:modelValue', val); |
| | | // #endif |
| | | } |
| | | }, |
| | | created() { |
| | |
| | | // this.popup.closeMask() |
| | | if (this.mode === 'input') { |
| | | this.dialogType = 'info' |
| | | this.val = this.value |
| | | this.val = this.value; |
| | | // #ifdef VUE3 |
| | | this.val = this.modelValue; |
| | | // #endif |
| | | } else { |
| | | this.dialogType = this.type |
| | | } |
| | | }, |
| | | mounted() { |
| | | this.focus = true |
| | | }, |
| | | methods: { |
| | | /** |
| | | * 给val属性赋值 |
| | | */ |
| | | setVal(val) { |
| | | if (this.maxlength != -1 && this.mode === 'input') { |
| | | this.val = val.slice(0, this.maxlength); |
| | | } else { |
| | | this.val = val |
| | | } |
| | | }, |
| | | /** |
| | | * 点击确认按钮 |
| | | */ |
| | | onOk() { |