|
@@ -1,243 +1,261 @@
|
|
-<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;
|
|
|
|
- }
|
|
|
|
|
|
+<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-picker">
|
|
|
|
+ <picker @change="bindPickerChange" :value="index" :range="array">
|
|
|
|
+ <view class="uni-input">{{array[index]}}</view>
|
|
|
|
+ </picker>
|
|
|
|
+ </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
|
|
|
|
+ },
|
|
|
|
+ code: {
|
|
|
|
+ type: String,
|
|
|
|
+ default: ''
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ data() {
|
|
|
|
+ return {
|
|
|
|
+ dialogType: 'error',
|
|
|
|
+ focus: false,
|
|
|
|
+ val: "",
|
|
|
|
+ isSkm: false,
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ inject: ['popup'],
|
|
|
|
+ watch: {
|
|
|
|
+ type(val) {
|
|
|
|
+ this.dialogType = val
|
|
|
|
+ },
|
|
|
|
+ mode(val) {
|
|
|
|
+ if (val === 'input') {
|
|
|
|
+ this.dialogType = 'info'
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ value(val) {
|
|
|
|
+ this.val = val
|
|
|
|
+ },
|
|
|
|
+ code(val) {
|
|
|
|
+ let isnum = /^\d+$/.test(val);
|
|
|
|
+ this.isSkm = isnum
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ 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()
|
|
|
|
+ },
|
|
|
|
+ // 改变支付方式
|
|
|
|
+ bindPickerChange() {
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+</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>
|
|
</style>
|