crm-mobile/components/uni-popup-dialog/uni-popup-dialog.vue

<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">
      <template v-if="!$slots.default && !$slots.$default">
        <text v-if="mode === 'base'" class="uni-dialog-content-text">
          {{ content }}
        </text>
        <input
          v-else
          v-model="val"
          class="uni-dialog-input"
          type="text"
          placeholder-class="wk-placeholder"
          :placeholder="placeholder"
          :focus="focus"
          @input="inputChange">
				
        <view v-if="requiredError" class="required-error">
          {{ requiredText }}
        </view>
      </template>
			
      <slot v-else />
    </view>
		
    <view class="uni-dialog-button-group">
      <view v-if="!hidenCancel" class="uni-dialog-button" @click="close">
        <text class="uni-dialog-button-text">
          {{ cancelText }}
        </text>
      </view>
      <view :class="{'uni-border-left': !hidenCancel}" class="uni-dialog-button" @click="onOk">
        <text class="uni-dialog-button-text uni-button-color">
          {{ confirmText }}
        </text>
      </view>
    </view>
  </view>
</template>

<script>
	/**
	 * PopUp 弹出层-对话框样式  
	 * Modified By yxk
	 * @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 是否拦截取消事件
	 * @property {Boolean} hidenCancel 是否隐藏取消按钮
	 * 
	 * @property {String} cancelText 取消按钮文本
	 * @property {String} confirmText 确认按钮文本
	 * @property {Boolean} required input模式时是否必填
	 * @property {String} requiredText input模式时必填提示信息
	 * @property {Function} checkFunc input模式时校验方法，必须返回一个Boolean值
	 * 
	 * @event {Function} confirm 点击确认按钮触发
	 * @event {Function} close 点击取消按钮触发
	 */

  export default {
    name: 'UniPopupDialog',
    inject: ['popup'],
    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
      },
      hidenCancel: {
        type: Boolean,
        default: false
      },
      cancelText: {
        type: String,
        default: '取消'
      },
      confirmText: {
        type: String,
        default: '确定'
      },
      required: {
        type: Boolean,
        default: false
      },
      checkFunc: {
        type: Function,
        default: null
      },
      requiredText: {
        type: String,
        default: '内容不能为空'
      }
    },
    data() {
      return {
        dialogType: 'error',
        focus: false,
        val: '',
				
        requiredError: false
      }
    },
    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: {
      inputChange() {
        if (this.val) {
          this.requiredError = false
        }
      },
      /**
       * 点击确认按钮
       */
      onOk() {
        if (
          this.mode === 'input' &&
          this.required &&
          !this.val
        ) {
          this.requiredError = true
          return
        }
        if (this.checkFunc) {
          this.requiredError = !this.checkFunc(this.val)
          if (this.requiredError) return
        }
				
        this.$emit('confirm', () => {
          this.popup.close()
          if (this.mode === 'input') this.val = this.value
        }, this.val)
      },
      /**
       * 点击取消按钮
       */
      close() {
        if (this.beforeClose) {
          this.$emit('close', () => {
            this.popup.close()
          })
          return
        }
        this.popup.close()
      }
    }
  }
</script>

<style 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: column;
		justify-content: center;
		align-items: center;
		padding: 5px 15px 15px 15px;
	}

	.uni-dialog-content-text {
		width: 100%;
		font-size: 14px;
		color: #6e6e6e;
	}
	
	.required-error {
		width: 100%;
		font-size: 12px;
		color: #FF6767;
		padding-top: 8px;
	}

	.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: #007aff;
	}

	.uni-dialog-input {
		width: 100%;
		flex: 1;
		font-size: 14px;
	}

	.uni-popup__success {
		color: #4cd964;
	}

	.uni-popup__warn {
		color: #f0ad4e;
	}

	.uni-popup__error {
		color: #dd524d;
	}

	.uni-popup__info {
		color: #909399;
	}
</style>