android-uniapp/plugins/ly-modal.vue

<template>
  <view class="modal-box">
    <uv-modal
      ref="modelBox"
      :align="pd.align"
      :asyncClose="pd.asyncClose"
      :buttonReverse="pd.buttonReverse"
      :cancelColor="pd.cancelColor"
      :cancelText="pd.cancelText"
      :closeOnClickOverlay="pd.closeOnClickOverlay"
      :confirmColor="pd.confirmColor"
      :confirmText="pd.confirmText"
      :content="pd.content"
      :negativeTop="pd.negativeTop"
      :showCancelButton="pd.showCancelButton"
      :showConfirmButton="pd.showConfirmButton"
      :textStyle="pd.textStyle"
      :title="pd.title"
      :width="pd.width"
      :zIndex="pd.zIndex"
      :zoom="pd.zoom"
      @cancel="cancel"
      @close="closeHandle"
      @confirm="confirm">
      <view v-if='pd.slotData && pd.slotData.open == true'>
        <uv-input v-if="pd.slotData.type == 'input'"
                  v-model="commitData.input"
                  :customStyle="{height:pd.slotData.height || '40rpx',width:pd.slotData.width || '200rpx'}"
                  :inputAlign="pd.slotData.textAlign || 'left'"
                  :type="pd.slotData.inputType || 'text'"
        >
          <template v-if="pd.slotData.openend" slot="suffix">
            <text>{{ pd.slotData.endTxt }}</text>
          </template>
        </uv-input>
        <view v-if="pd.slotData.type == 'text'">{{ pd.content }}</view>
        <slot v-if="pd.slotData.type == 'slot'"></slot>
      </view>
      <slot/>
    </uv-modal>
  </view>
</template>

<script setup>
import {reactive, ref} from "vue";
import {sleep} from "@/utils/util";

const defaultData = {
  title: '',
  content: '',
  confirmText: '确认',
  cancelText: '取消',
  showConfirmButton: true,
  showCancelButton: false,
  confirmColor: '#2979ff',
  cancelColor: '#606266',
  buttonReverse: false,
  zoom: true,
  asyncClose: false,
  closeOnClickOverlay: true,
  negativeTop: 0,
  width: '650rpx',
  zIndex: 10075,
  align: 'left',
  textStyle: {},
  cancel: null,
  close: null,
  confirm: null,
  /**
   * slotData:{
   *   open Boolean 是否打开插槽
   *   type String 插槽属性 { input , text , slot}
   *   type:input {
   *      openend Boolean 打开input的后插槽
   *      endTxt String 后插槽文字
   *      width String input宽度
   *      height String input高度
   *      textAlign String 输入框文字排版 center left right
   *    }
   * }
   * **/
  slotData: {},
}
const show = ref(false)
const modelBox = ref()
let pd = reactive({...defaultData})

const open = async (row) => {
  if (show.value) {
    close()
    await sleep(100)
  }
  for (const key in pd) {
    if (defaultData.hasOwnProperty(key)) {
      pd[key] = defaultData[key];
    } else {
      delete pd[key];
    }
  }
  // 应用新的row值到pd
  for (const key in row) {
    pd[key] = row[key];
  }
  modelBox.value.open()
  show.value = true
}
const closeHandle = () => {
  console.log('closeHandle')
}

const close = () => {
  console.log('close')
  // modelBox.value.close()
  show.value = false
}
const cancel = () => {
  console.log('cancel')
  if (pd.cancel) pd.cancel()
}
const confirm = () => {
  console.log('confirm')
  if (pd.confirm) pd.confirm()
}

defineExpose({
  open,
  close,
  cancel,
  confirm,
})
</script>

<style lang="less" scoped>

</style>