im-ui-mobile 0.1.0 → 0.1.2

package/components/im-modal/im-modal.vue

@@ -0,0 +1,373 @@
+<template>
+  <im-popup
+    v-model:show="visible"
+    ref="popupRef"
+    :position="position"
+    :animation="animation"
+    :duration="duration"
+    :show-overlay="showOverlay"
+    :overlay-color="overlayColor"
+    :overlay-opacity="overlayOpacity"
+    :close-on-click-overlay="closeOnClickOverlay"
+    :lock-scroll="lockScroll"
+    :width="computedWidth"
+    :border-radius="borderRadius"
+    :background-color="backgroundColor"
+    :z-index="zIndex"
+    :show-close="showClose && showHeader"
+    :close-position="closePosition"
+    :safe-area-inset-bottom="safeAreaInsetBottom"
+    :custom-class="customClass"
+    @open="handleOpen"
+    @opened="handleOpened"
+    @close="handleClose"
+    @closed="handleClosed"
+    @click-overlay="handleClickOverlay"
+  >
+    <!-- 头部 -->
+    <view v-if="showHeader" class="im-modal__header">
+      <slot name="header">
+        <view class="im-modal__header-content">
+          <text class="im-modal__title">{{ title }}</text>
+          <view v-if="showSubtitle && subtitle" class="im-modal__subtitle">
+            <text>{{ subtitle }}</text>
+          </view>
+        </view>
+      </slot>
+    </view>
+
+    <!-- 内容 -->
+    <view class="im-modal__body" :style="bodyStyle">
+      <slot>
+        <text class="im-modal__content">{{ content }}</text>
+      </slot>
+    </view>
+
+    <!-- 底部按钮 -->
+    <view v-if="showFooter" class="im-modal__footer">
+      <slot name="footer">
+        <view class="im-modal__footer-buttons">
+          <!-- 取消按钮 -->
+          <im-button
+            v-if="showCancel"
+            class="im-modal__button"
+            :type="cancelType"
+            :size="buttonSize"
+            :plain="cancelPlain"
+            :disabled="cancelDisabled"
+            :loading="cancelLoading"
+            @click="handleCancel"
+          >
+            {{ cancelText }}
+          </im-button>
+
+          <!-- 确认按钮 -->
+          <im-button
+            v-if="showConfirm"
+            class="im-modal__button"
+            :type="confirmType"
+            :size="buttonSize"
+            :plain="confirmPlain"
+            :disabled="confirmDisabled"
+            :loading="confirmLoading"
+            @click="handleConfirm"
+          >
+            {{ confirmText }}
+          </im-button>
+        </view>
+      </slot>
+    </view>
+  </im-popup>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import type { Popup as PopupType } from 'im-ui-mobile'
+
+// 定义 Props
+interface Props {
+  // 显示控制
+  show?: boolean
+  modelValue?: boolean
+  
+  // 标题和内容
+  title?: string
+  subtitle?: string
+  content?: string
+  
+  // 头部配置
+  showHeader?: boolean
+  showSubtitle?: boolean
+  
+  // 内容配置
+  bodyStyle?: Record<string, string>
+  
+  // 底部按钮配置
+  showFooter?: boolean
+  showCancel?: boolean
+  showConfirm?: boolean
+  cancelText?: string
+  confirmText?: string
+  cancelType?: 'default' | 'primary' | 'warning' | 'error'
+  confirmType?: 'default' | 'primary' | 'warning' | 'error'
+  cancelPlain?: boolean
+  confirmPlain?: boolean
+  cancelDisabled?: boolean
+  confirmDisabled?: boolean
+  cancelLoading?: boolean
+  confirmLoading?: boolean
+  buttonSize?: 'small' | 'medium' | 'large'
+  
+  // 弹窗配置（传递给 im-popup）
+  position?: 'center' | 'top' | 'bottom' | 'left' | 'right'
+  animation?: 'fade' | 'slide' | 'zoom' | 'none'
+  duration?: number
+  showOverlay?: boolean
+  overlayColor?: string
+  overlayOpacity?: number
+  closeOnClickOverlay?: boolean
+  lockScroll?: boolean
+  width?: string
+  maxWidth?: string
+  minWidth?: string
+  borderRadius?: string
+  backgroundColor?: string
+  zIndex?: number
+  showClose?: boolean
+  closePosition?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'
+  safeAreaInsetBottom?: boolean
+  customClass?: string
+  
+  // 行为控制
+  closeOnClickAction?: boolean
+  showCloseAfterConfirm?: boolean
+  showCloseAfterCancel?: boolean
+}
+
+// 定义 Emits
+interface Emits {
+  (e: 'update:show', value: boolean): void
+  (e: 'update:modelValue', value: boolean): void
+  (e: 'open'): void
+  (e: 'opened'): void
+  (e: 'close'): void
+  (e: 'closed'): void
+  (e: 'click-overlay'): void
+  (e: 'confirm'): void
+  (e: 'cancel'): void
+  (e: 'before-enter'): void
+  (e: 'after-enter'): void
+  (e: 'before-leave'): void
+  (e: 'after-leave'): void
+}
+
+// 定义 Props 默认值
+const props = withDefaults(defineProps<Props>(), {
+  show: false,
+  modelValue: false,
+  
+  title: '提示',
+  subtitle: '',
+  content: '',
+  
+  showHeader: true,
+  showSubtitle: true,
+  
+  bodyStyle: () => ({}),
+  
+  showFooter: true,
+  showCancel: true,
+  showConfirm: true,
+  cancelText: '取消',
+  confirmText: '确定',
+  cancelType: 'default',
+  confirmType: 'primary',
+  cancelPlain: false,
+  confirmPlain: false,
+  cancelDisabled: false,
+  confirmDisabled: false,
+  cancelLoading: false,
+  confirmLoading: false,
+  buttonSize: 'medium',
+  
+  position: 'center',
+  animation: 'zoom',
+  duration: 300,
+  showOverlay: true,
+  overlayColor: '#000',
+  overlayOpacity: 0.5,
+  closeOnClickOverlay: true,
+  lockScroll: true,
+  width: '640rpx',
+  maxWidth: '90vw',
+  minWidth: '300rpx',
+  borderRadius: '16rpx',
+  backgroundColor: '#fff',
+  zIndex: 1000,
+  showClose: true,
+  closePosition: 'top-right',
+  safeAreaInsetBottom: true,
+  customClass: '',
+  
+  closeOnClickAction: true,
+  showCloseAfterConfirm: true,
+  showCloseAfterCancel: true
+})
+
+const emit = defineEmits<Emits>()
+
+// 组件引用
+const popupRef = ref<InstanceType<typeof PopupType>>()
+
+// 内部显示状态
+const visible = computed({
+  get: () => props.show || props.modelValue,
+  set: (val) => {
+    emit('update:show', val)
+    emit('update:modelValue', val)
+  }
+})
+
+// 计算宽度
+const computedWidth = computed(() => {
+  let width = props.width
+  
+  // 添加最大宽度限制
+  if (props.maxWidth) {
+    width = `min(${props.width}, ${props.maxWidth})`
+  }
+  
+  // 添加最小宽度限制
+  if (props.minWidth) {
+    width = `max(${width}, ${props.minWidth})`
+  }
+  
+  return width
+})
+
+// 处理打开
+const handleOpen = () => {
+  emit('open')
+  emit('before-enter')
+}
+
+const handleOpened = () => {
+  emit('opened')
+  emit('after-enter')
+}
+
+// 处理关闭
+const handleClose = () => {
+  emit('close')
+  emit('before-leave')
+}
+
+const handleClosed = () => {
+  emit('closed')
+  emit('after-leave')
+}
+
+// 处理遮罩点击
+const handleClickOverlay = () => {
+  emit('click-overlay')
+}
+
+// 处理确认
+const handleConfirm = () => {
+  emit('confirm')
+  if (props.closeOnClickAction && props.showCloseAfterConfirm) {
+    popupRef.value.close()
+    // visible.value = false
+  }
+}
+
+// 处理取消
+const handleCancel = () => {
+  emit('cancel')
+  if (props.closeOnClickAction && props.showCloseAfterCancel) {
+    // visible.value = false
+    popupRef.value.close()
+  }
+}
+
+// 打开模态框
+const open = () => {
+    popupRef.value.open()
+}
+
+// 关闭模态框
+const close = () => {
+  popupRef.value.close()
+}
+
+// 切换显示状态
+const toggle = () => {
+  popupRef.value.toggle()
+}
+
+// 暴露方法给父组件
+defineExpose({
+  open,
+  close,
+  toggle
+})
+</script>
+
+<style lang="scss" scoped>
+.im-modal {
+  &__header {
+    padding: 40rpx 40rpx 20rpx;
+    border-bottom: 2rpx solid #f5f5f5;
+    
+    &-content {
+      text-align: center;
+    }
+  }
+  
+  &__title {
+    display: block;
+    font-size: 36rpx;
+    font-weight: bold;
+    color: #333;
+    line-height: 1.4;
+  }
+  
+  &__subtitle {
+    margin-top: 12rpx;
+    
+    text {
+      font-size: 28rpx;
+      color: #999;
+      line-height: 1.4;
+    }
+  }
+  
+  &__body {
+    padding: 40rpx;
+    font-size: 30rpx;
+    color: #666;
+    line-height: 1.6;
+    overflow-y: auto;
+    max-height: 60vh;
+  }
+  
+  &__content {
+    display: block;
+    text-align: center;
+  }
+  
+  &__footer {
+    padding: 20rpx 40rpx 40rpx;
+    
+    &-buttons {
+      display: flex;
+      gap: 20rpx;
+      justify-content: center;
+    }
+  }
+  
+  &__button {
+    flex: 1;
+  }
+}
+</style>