|
@@ -10,7 +10,8 @@
|
|
|
</view>
|
|
</view>
|
|
|
<view v-else class="uni-dialog-content">
|
|
<view v-else class="uni-dialog-content">
|
|
|
<slot>
|
|
<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>
|
|
</slot>
|
|
|
</view>
|
|
</view>
|
|
|
<view class="uni-dialog-button-group">
|
|
<view class="uni-dialog-button-group">
|
|
@@ -28,16 +29,19 @@
|
|
|
<script>
|
|
<script>
|
|
|
import popup from '../uni-popup/popup.js'
|
|
import popup from '../uni-popup/popup.js'
|
|
|
import {
|
|
import {
|
|
|
- initVueI18n
|
|
|
|
|
|
|
+ initVueI18n
|
|
|
} from '@dcloudio/uni-i18n'
|
|
} from '@dcloudio/uni-i18n'
|
|
|
import messages from '../uni-popup/i18n/index.js'
|
|
import messages from '../uni-popup/i18n/index.js'
|
|
|
- const { t } = initVueI18n(messages)
|
|
|
|
|
|
|
+ const {
|
|
|
|
|
+ t
|
|
|
|
|
+ } = initVueI18n(messages)
|
|
|
/**
|
|
/**
|
|
|
* PopUp 弹出层-对话框样式
|
|
* PopUp 弹出层-对话框样式
|
|
|
* @description 弹出层-对话框样式
|
|
* @description 弹出层-对话框样式
|
|
|
* @tutorial https://ext.dcloud.net.cn/plugin?id=329
|
|
* @tutorial https://ext.dcloud.net.cn/plugin?id=329
|
|
|
* @property {String} value input 模式下的默认值
|
|
* @property {String} value input 模式下的默认值
|
|
|
* @property {String} placeholder input 模式下输入提示
|
|
* @property {String} placeholder input 模式下输入提示
|
|
|
|
|
+ * @property {Boolean} focus input模式下是否自动聚焦,默认为true
|
|
|
* @property {String} type = [success|warning|info|error] 主题样式
|
|
* @property {String} type = [success|warning|info|error] 主题样式
|
|
|
* @value success 成功
|
|
* @value success 成功
|
|
|
* @value warning 提示
|
|
* @value warning 提示
|
|
@@ -49,6 +53,7 @@
|
|
|
* @showClose {Boolean} 是否显示关闭按钮
|
|
* @showClose {Boolean} 是否显示关闭按钮
|
|
|
* @property {String} content 对话框内容
|
|
* @property {String} content 对话框内容
|
|
|
* @property {Boolean} beforeClose 是否拦截取消事件
|
|
* @property {Boolean} beforeClose 是否拦截取消事件
|
|
|
|
|
+ * @property {Number} maxlength 输入
|
|
|
* @event {Function} confirm 点击确认按钮触发
|
|
* @event {Function} confirm 点击确认按钮触发
|
|
|
* @event {Function} close 点击取消按钮触发
|
|
* @event {Function} close 点击取消按钮触发
|
|
|
*/
|
|
*/
|
|
@@ -56,13 +61,13 @@
|
|
|
export default {
|
|
export default {
|
|
|
name: "uniPopupDialog",
|
|
name: "uniPopupDialog",
|
|
|
mixins: [popup],
|
|
mixins: [popup],
|
|
|
- emits:['confirm','close'],
|
|
|
|
|
|
|
+ emits: ['confirm', 'close'],
|
|
|
props: {
|
|
props: {
|
|
|
- inputType:{
|
|
|
|
|
|
|
+ inputType: {
|
|
|
type: String,
|
|
type: String,
|
|
|
default: 'text'
|
|
default: 'text'
|
|
|
},
|
|
},
|
|
|
- showClose:{
|
|
|
|
|
|
|
+ showClose: {
|
|
|
type: Boolean,
|
|
type: Boolean,
|
|
|
default: true
|
|
default: true
|
|
|
},
|
|
},
|
|
@@ -94,19 +99,26 @@
|
|
|
type: Boolean,
|
|
type: Boolean,
|
|
|
default: false
|
|
default: false
|
|
|
},
|
|
},
|
|
|
- cancelText:{
|
|
|
|
|
|
|
+ cancelText: {
|
|
|
type: String,
|
|
type: String,
|
|
|
default: ''
|
|
default: ''
|
|
|
},
|
|
},
|
|
|
- confirmText:{
|
|
|
|
|
|
|
+ confirmText: {
|
|
|
type: String,
|
|
type: String,
|
|
|
default: ''
|
|
default: ''
|
|
|
|
|
+ },
|
|
|
|
|
+ maxlength: {
|
|
|
|
|
+ type: Number,
|
|
|
|
|
+ default: -1,
|
|
|
|
|
+ },
|
|
|
|
|
+ focus:{
|
|
|
|
|
+ type: Boolean,
|
|
|
|
|
+ default: true,
|
|
|
}
|
|
}
|
|
|
},
|
|
},
|
|
|
data() {
|
|
data() {
|
|
|
return {
|
|
return {
|
|
|
dialogType: 'error',
|
|
dialogType: 'error',
|
|
|
- focus: false,
|
|
|
|
|
val: ""
|
|
val: ""
|
|
|
}
|
|
}
|
|
|
},
|
|
},
|
|
@@ -134,7 +146,11 @@
|
|
|
}
|
|
}
|
|
|
},
|
|
},
|
|
|
value(val) {
|
|
value(val) {
|
|
|
- this.val = val
|
|
|
|
|
|
|
+ if (this.maxlength != -1 && this.mode === 'input') {
|
|
|
|
|
+ this.val = val.slice(0, this.maxlength);
|
|
|
|
|
+ } else {
|
|
|
|
|
+ this.val = val
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
},
|
|
},
|
|
|
created() {
|
|
created() {
|
|
@@ -148,20 +164,18 @@
|
|
|
this.dialogType = this.type
|
|
this.dialogType = this.type
|
|
|
}
|
|
}
|
|
|
},
|
|
},
|
|
|
- mounted() {
|
|
|
|
|
- this.focus = true
|
|
|
|
|
- },
|
|
|
|
|
methods: {
|
|
methods: {
|
|
|
/**
|
|
/**
|
|
|
* 点击确认按钮
|
|
* 点击确认按钮
|
|
|
*/
|
|
*/
|
|
|
onOk() {
|
|
onOk() {
|
|
|
- if (this.mode === 'input'){
|
|
|
|
|
|
|
+ if (this.mode === 'input') {
|
|
|
this.$emit('confirm', this.val)
|
|
this.$emit('confirm', this.val)
|
|
|
- }else{
|
|
|
|
|
|
|
+ } else {
|
|
|
this.$emit('confirm')
|
|
this.$emit('confirm')
|
|
|
}
|
|
}
|
|
|
- if(this.beforeClose) return
|
|
|
|
|
|
|
+ this.$emit("input",this.val);
|
|
|
|
|
+ if (this.beforeClose) return
|
|
|
this.popup.close()
|
|
this.popup.close()
|
|
|
},
|
|
},
|
|
|
/**
|
|
/**
|
|
@@ -169,17 +183,17 @@
|
|
|
*/
|
|
*/
|
|
|
closeDialog() {
|
|
closeDialog() {
|
|
|
this.$emit('close')
|
|
this.$emit('close')
|
|
|
- if(this.beforeClose) return
|
|
|
|
|
|
|
+ if (this.beforeClose) return
|
|
|
this.popup.close()
|
|
this.popup.close()
|
|
|
},
|
|
},
|
|
|
- close(){
|
|
|
|
|
|
|
+ close() {
|
|
|
this.popup.close()
|
|
this.popup.close()
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
</script>
|
|
</script>
|
|
|
|
|
|
|
|
-<style lang="scss" >
|
|
|
|
|
|
|
+<style lang="scss">
|
|
|
.uni-popup-dialog {
|
|
.uni-popup-dialog {
|
|
|
width: 300px;
|
|
width: 300px;
|
|
|
border-radius: 11px;
|
|
border-radius: 11px;
|