yueche_app/uni_modules/wot-design-uni/components/wd-message-box/wd-message-box.vue

<template>
  <view>
    <wd-popup
      transition="zoom-in"
      v-model="messageState.show"
      :close-on-click-modal="messageState.closeOnClickModal"
      :lazy-render="messageState.lazyRender"
      custom-class="wd-message-box"
      @click-modal="toggleModal('modal')"
      :z-index="messageState.zIndex"
      :duration="200"
      :root-portal="rootPortal"
    >
      <view :class="rootClass">
        <view :class="bodyClass">
          <view v-if="messageState.title" class="wd-message-box__title">
            {{ messageState.title }}
          </view>
          <view class="wd-message-box__content">
            <block v-if="messageState.type === 'prompt'">
              <wd-input
                v-model="messageState.inputValue"
                :type="messageState.inputType"
                :size="messageState.inputSize"
                :placeholder="messageState.inputPlaceholder"
                @input="inputValChange"
              />
              <view v-if="messageState.showErr" class="wd-message-box__input-error">
                {{ messageState.inputError || translate('inputNoValidate') }}
              </view>
            </block>
            <slot>{{ messageState.msg }}</slot>
          </view>
        </view>
        <view :class="`wd-message-box__actions ${messageState.showCancelButton ? 'wd-message-box__flex' : 'wd-message-box__block'}`">
          <wd-button v-bind="customCancelProps" v-if="messageState.showCancelButton" @click="toggleModal('cancel')">
            {{ messageState.cancelButtonText || translate('cancel') }}
          </wd-button>
          <wd-button v-bind="customConfirmProps" @click="toggleModal('confirm')">
            {{ messageState.confirmButtonText || translate('confirm') }}
          </wd-button>
        </view>
      </view>
    </wd-popup>
  </view>
</template>
<script lang="ts">
export default {
  name: 'wd-message-box',
  options: {
    virtualHost: true,
    addGlobalClass: true,
    styleIsolation: 'shared'
  }
}
</script>

<script lang="ts" setup>
import wdPopup from '../wd-popup/wd-popup.vue'
import wdButton from '../wd-button/wd-button.vue'
import wdInput from '../wd-input/wd-input.vue'
import { computed, inject, reactive, ref, watch } from 'vue'
import { messageBoxProps, type MessageOptionsWithCallBack, type MessageResult } from './types'
import { defaultOptions, getMessageDefaultOptionKey } from '.'
import { deepAssign, isDef, isFunction, isUndefined, omitBy } from '../common/util'
import { useTranslate } from '../composables/useTranslate'
import type { ButtonProps } from '../wd-button/types'

const props = defineProps(messageBoxProps)

const { translate } = useTranslate('message-box')

const rootClass = computed(() => {
  return `wd-message-box__container ${props.customClass}`
})

const bodyClass = computed(() => {
  return `wd-message-box__body ${!messageState.title ? 'is-no-title' : ''} ${messageState.type === 'prompt' ? 'is-prompt' : ''}`
})

const messageOptionKey = getMessageDefaultOptionKey(props.selector)
const messageOption = inject(messageOptionKey, ref<MessageOptionsWithCallBack>(defaultOptions)) // message选项

const messageState = reactive<MessageOptionsWithCallBack>({
  msg: '', // 消息内容
  show: false, // 是否显示弹框
  title: '', // 标题
  showCancelButton: false, // 是否展示取消按钮
  closeOnClickModal: true, // 是否支持点击蒙层关闭
  confirmButtonText: '', // 确定按钮文案
  cancelButtonText: '', // 取消按钮文案
  type: 'alert', // 弹框类型
  inputType: 'text', // 输入框类型
  inputValue: '', // 输入框初始值
  inputPlaceholder: '', // 输入框placeholder
  inputError: '', // 输入框错误提示文案
  showErr: false, // 是否显示错误提示
  zIndex: 99, // 弹窗层级
  lazyRender: true // 弹层内容懒渲染
})

/**
 * 确认按钮属性
 */
const customConfirmProps = computed(() => {
  const buttonProps: Partial<ButtonProps> = deepAssign(
    {
      block: true
    },
    isDef(messageState.confirmButtonProps) ? omitBy(messageState.confirmButtonProps, isUndefined) : {}
  )
  buttonProps.customClass = `${buttonProps.customClass || ''} wd-message-box__actions-btn`
  return buttonProps
})

/**
 * 取消按钮属性
 */
const customCancelProps = computed(() => {
  const buttonProps: Partial<ButtonProps> = deepAssign(
    {
      block: true,
      type: 'info'
    },
    isDef(messageState.cancelButtonProps) ? omitBy(messageState.cancelButtonProps, isUndefined) : {}
  )
  buttonProps.customClass = `${buttonProps.customClass || ''} wd-message-box__actions-btn`
  return buttonProps
})

// 监听options变化展示
watch(
  () => messageOption.value,
  (newVal: MessageOptionsWithCallBack) => {
    reset(newVal)
  },
  {
    deep: true,
    immediate: true
  }
)

watch(
  () => messageState.show,
  (newValue) => {
    resetErr(!!newValue)
  },
  {
    deep: true,
    immediate: true
  }
)

/**
 * 点击操作
 * @param action
 */
function toggleModal(action: 'confirm' | 'cancel' | 'modal') {
  if (action === 'modal' && !messageState.closeOnClickModal) {
    return
  }
  if (messageState.type === 'prompt' && action === 'confirm' && !validate()) {
    return
  }
  switch (action) {
    case 'confirm':
      if (messageState.beforeConfirm) {
        messageState.beforeConfirm({
          resolve: (isPass) => {
            if (isPass) {
              handleConfirm({
                action: action,
                value: messageState.inputValue
              })
            }
          }
        })
      } else {
        handleConfirm({
          action: action,
          value: messageState.inputValue
        })
      }
      break
    case 'cancel':
      handleCancel({
        action: action
      })
      break
    default:
      handleCancel({
        action: 'modal'
      })
      break
  }
}

/**
 * 确认回调
 * @param result
 */
function handleConfirm(result: MessageResult) {
  messageState.show = false
  if (isFunction(messageState.success)) {
    messageState.success(result)
  }
}

/**
 * 取消回调
 * @param result
 */
function handleCancel(result: MessageResult) {
  messageState.show = false
  if (isFunction(messageState.fail)) {
    messageState.fail(result)
  }
}

/**
 * 如果存在校验规则行为，则进行判断校验是否通过规则。默认不存在校验直接铜鼓。
 */
function validate() {
  if (messageState.inputPattern && !messageState.inputPattern.test(String(messageState.inputValue))) {
    messageState.showErr = true
    return false
  }
  if (typeof messageState.inputValidate === 'function') {
    const validateResult = messageState.inputValidate(messageState.inputValue!)
    if (!validateResult) {
      messageState.showErr = true
      return false
    }
  }
  messageState.showErr = false
  return true
}

/**
 * @description show关闭时，销毁错误提示
 * @param val
 */
function resetErr(val: boolean) {
  if (val === false) {
    messageState.showErr = false
  }
}
function inputValChange({ value }: { value: string | number }) {
  if (value === '') {
    messageState.showErr = false
    return
  }
  messageState.inputValue = value
}

/**
 * 重置message选项值
 * @param option message选项值
 */
function reset(option: MessageOptionsWithCallBack) {
  if (option) {
    messageState.title = isDef(option.title) ? option.title : ''
    messageState.showCancelButton = isDef(option.showCancelButton) ? option.showCancelButton : false
    messageState.show = option.show
    messageState.closeOnClickModal = option.closeOnClickModal
    messageState.confirmButtonText = option.confirmButtonText
    messageState.cancelButtonText = option.cancelButtonText
    messageState.msg = option.msg
    messageState.type = option.type
    messageState.inputType = option.inputType
    messageState.inputSize = option.inputSize
    messageState.inputValue = option.inputValue
    messageState.inputPlaceholder = option.inputPlaceholder
    messageState.inputPattern = option.inputPattern!
    messageState.inputValidate = option.inputValidate
    messageState.success = option.success
    messageState.fail = option.fail
    messageState.beforeConfirm = option.beforeConfirm
    messageState.inputError = option.inputError
    messageState.showErr = option.showErr
    messageState.zIndex = option.zIndex
    messageState.lazyRender = option.lazyRender
    messageState.confirmButtonProps = option.confirmButtonProps
    messageState.cancelButtonProps = option.cancelButtonProps
  }
}
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>