dpzvc3-ui 3.0.0

package/src/components/message/message.vue

@@ -0,0 +1,137 @@
+<template>
+  <transition name="dpzvc3-ani-scale">
+    <div :class="classes">
+      <div
+        v-if="showLeft"
+        :class="leftClasses"
+      >
+        <slot name="message-left">
+          <Spinner
+            size="65"
+            type="blade"
+            color="#ffffff"
+          />
+        </slot>
+      </div>
+
+      <p :class="wrapperClasses">
+        {{ text }}
+      </p>
+
+      <div
+        v-if="!rightHide"
+        :class="rightClasses"
+      >
+        <slot name="message-right" />
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script>
+import { defineComponent, computed, onMounted, onBeforeUnmount, inject } from 'vue'
+import Spinner from '../spinner'
+
+const prefixCls = 'dpzvc3-message'
+
+export default defineComponent({
+  name: 'DpzMessage',
+  components: { Spinner },
+
+  props: {
+    name: {
+      type: [String, Number],
+      required: true
+    },
+    text: {
+      type: [String, Number],
+      default: ''
+    },
+    duration: {
+      type: Number,
+      default: 1.5
+    },
+    showLeft: {
+      type: Boolean,
+      default: false
+    },
+    rightHide: {
+      type: Boolean,
+      default: true
+    },
+    type: {
+      type: String,
+      default: 'normal',
+      validator: val =>
+        ['success', 'loading', 'error', 'normal', 'warning', 'danger'].includes(val)
+    },
+    onClose: {
+      type: Function,
+      default: () => {}
+    },
+    position: {
+      type: String,
+      default: 'top'
+    }
+  },
+
+  setup (props) {
+    /** 🔑 从 messageGroup 注入 remove 方法 */
+    const remove = inject('removeMessage')
+
+    let timer = null
+
+    const classes = computed(() => [
+      prefixCls,
+      `${prefixCls}-position-${props.position}`
+    ])
+
+    const wrapperClasses = computed(() => [
+      `${prefixCls}-text`
+    ])
+
+    const leftClasses = computed(() => [
+      `${prefixCls}-left`
+    ])
+
+    const rightClasses = computed(() => [
+      `${prefixCls}-right`
+    ])
+
+    const closeTimer = () => {
+      if (timer) {
+        clearTimeout(timer)
+        timer = null
+      }
+    }
+
+    const close = () => {
+      closeTimer()
+      remove && remove(props.name)
+      props.onClose()
+    }
+
+    onMounted(() => {
+      closeTimer()
+
+      if (props.duration !== 0) {
+        timer = setTimeout(() => {
+          close()
+        }, props.duration * 1000)
+      }
+    })
+
+    onBeforeUnmount(() => {
+      closeTimer()
+    })
+
+    return {
+      classes,
+      wrapperClasses,
+      leftClasses,
+      rightClasses,
+      close
+    }
+  }
+})
+</script>

package/src/components/message/messageGroup.vue

@@ -0,0 +1,82 @@
+<template>
+  <div
+    class="dpzvc3-message-group"
+    :style="styles"
+  >
+    <Message
+      v-for="message in messages"
+      :key="message.name"
+      :name="message.name"
+      :text="message.text"
+      :duration="message.duration"
+      :show-left="message.showLeft"
+      :right-hide="message.rightHide"
+      :type="message.type"
+      :position="message.position"
+      :on-close="message.onClose"
+    />
+  </div>
+</template>
+
+<script>
+import { defineComponent, ref, provide } from 'vue'
+import Message from './message.vue'
+
+export default defineComponent({
+  name: 'MessageGroup',
+  components: {
+    Message
+  },
+  props: {
+    styles: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+
+  setup () {
+    const messages = ref([])
+
+    /** 添加 message */
+    const add = (props = {}) => {
+      const message = Object.assign(
+        {
+          name: '',
+          text: '',
+          duration: 1.5,
+          showLeft: false,
+          rightHide: true,
+          type: 'normal',
+          position: 'top',
+          onClose: () => {}
+        },
+        props
+      )
+
+      messages.value.push(message)
+    }
+
+    /** 移除 message（供 message.vue 注入使用） */
+    const remove = (name) => {
+      messages.value = messages.value.filter(
+        item => item.name !== name
+      )
+    }
+
+    /** 关闭所有 */
+    const closeAll = () => {
+      messages.value = []
+    }
+
+    /** 🔑 向子组件注入 remove 方法 */
+    provide('removeMessage', remove)
+
+    return {
+      messages,
+      add,
+      remove,
+      closeAll
+    }
+  }
+})
+</script>

package/src/components/modal/confirm.js

@@ -0,0 +1,122 @@
+/**
+ * confirm.js - Vue 3 版本（修复 enter 过渡）
+ */
+import { h, createVNode, render } from 'vue'
+import Modal from './modal.vue'
+import VButton from '../button'
+
+const prefixCls = 'dpzvc3-modal'
+
+function createModalInstance (properties = {}) {
+  const container = document.createElement('div')
+  document.body.appendChild(container)
+
+  let vnode = null
+
+  const defaultProps = {
+    visible: false,
+    modelValue: false,
+    width: '70%',
+    body: '',
+    title: '',
+    okText: '确定',
+    cancleText: '取消',
+    loading: false,
+    buttonLoading: false,
+    showCancle: true,
+    showHead: true,
+    onOk: () => {},
+    onCancle: () => {},
+    onRemove: () => {}
+  }
+
+  const props = { ...defaultProps, ...properties }
+
+  const updateVNode = () => {
+    const footer = [
+      props.showCancle
+        ? h(VButton, { type: 'primary', radius: false, onClick: cancle }, () => props.cancleText)
+        : null,
+      h(
+        VButton,
+        { type: 'normal', radius: false, loading: props.buttonLoading, onClick: ok },
+        () => props.okText
+      )
+    ]
+
+    vnode = createVNode(
+      Modal,
+      {
+        modelValue: props.modelValue,
+        width: props.width,
+        showHead: props.showHead,
+        footerHide: false,
+        onOk: ok,
+        onCancle: cancle
+      },
+      {
+        header: () =>
+          h('div', {
+            class: `${prefixCls}-header-inner ellipse-fir`,
+            innerHTML: props.title
+          }),
+        body: () =>
+          h('div', {
+            class: `${prefixCls}-body-inner`,
+            innerHTML: props.body
+          }),
+        footer: () => footer
+      }
+    )
+
+    render(vnode, container)
+  }
+
+  const remove = () => {
+    props.modelValue = false
+    updateVNode()
+    setTimeout(destroy, 300)
+  }
+
+  const destroy = () => {
+    render(null, container)
+    container.parentNode && container.parentNode.removeChild(container)
+    props.onRemove()
+  }
+
+  const ok = () => {
+    if (props.loading) {
+      props.buttonLoading = true
+    } else {
+      remove()
+    }
+    props.onOk()
+  }
+
+  const cancle = () => {
+    remove()
+    props.onCancle()
+  }
+
+  return {
+    show (newProps = {}) {
+      Object.assign(props, newProps)
+
+      // 👇 关键：先 render hidden
+      props.modelValue = false
+      updateVNode()
+
+      // 👇 下一帧再显示，触发 enter
+      requestAnimationFrame(() => {
+        props.modelValue = true
+        updateVNode()
+      })
+    },
+    remove,
+    component: props
+  }
+}
+
+export default {
+  newInstance: createModalInstance
+}

package/src/components/modal/index.js

@@ -0,0 +1,52 @@
+/**
+ * index.js - Vue 3 版本
+ */
+import Modal from './confirm'
+
+let modalInstance = null
+
+function getModalInstance () {
+  if (!modalInstance) {
+    modalInstance = Modal.newInstance({
+      showHead: true,
+      closable: true,
+      maskClosable: false,
+      footerHide: false
+    })
+  }
+  return modalInstance
+}
+
+function confirm (options = {}) {
+  const instance = getModalInstance()
+
+  options.onRemove = () => {
+    modalInstance = null
+  }
+
+  instance.show(options)
+  return instance
+}
+
+// info 模态框，显示取消按钮
+Modal.info = function (props = {}) {
+  props.showCancle = true
+  props.showHead = false
+  return confirm(props)
+}
+
+// confirm 模态框，不显示取消按钮
+Modal.confirm = function (props = {}) {
+  props.showCancle = false
+  props.showHead = false
+  return confirm(props)
+}
+
+// 移除当前 modal
+Modal.remove = function () {
+  if (!modalInstance) return false
+  const instance = getModalInstance()
+  instance.remove()
+}
+
+export default Modal

package/src/components/modal/modal.vue

@@ -0,0 +1,138 @@
+<template>
+  <div>
+    <!-- 遮罩层 -->
+    <transition name="dpzvc3-ani-fade">
+      <div
+        v-if="visible"
+        class="dpzvc3-modal-mask"
+        @click="mask"
+        @touchstart.prevent
+        @touchmove.prevent
+        @touchend.prevent
+      />
+    </transition>
+
+    <!-- 弹窗内容 -->
+    <transition name="dpzvc3-ani-scale">
+      <div
+        v-if="visible"
+        class="dpzvc3-modal"
+        :style="getWrapperStyle"
+      >
+        <!-- 头部 -->
+        <div
+          v-if="isHead"
+          class="dpzvc3-modal-header"
+        >
+          <slot name="header">
+            <div class="dpzvc3-modal-header-inner ellipse-fir">
+              {{ title }}
+            </div>
+          </slot>
+        </div>
+
+        <!-- 内容 -->
+        <div class="dpzvc3-modal-body">
+          <slot name="body">
+            {{ body }}
+          </slot>
+        </div>
+
+        <!-- 底部 -->
+        <div
+          v-if="!footerHide"
+          class="dpzvc3-modal-footer"
+        >
+          <slot name="footer">
+            <VButton
+              v-if="cancleText"
+              type="primary"
+              @click="close"
+            >
+              {{ cancleText }}
+            </VButton>
+            <VButton
+              type="normal"
+              :loading="buttonLoading"
+              @click="ok"
+            >
+              {{ okText }}
+            </VButton>
+          </slot>
+        </div>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<script>
+import { ref, computed, watch } from 'vue'
+import VButton from '../button'
+
+export default {
+  name: 'Dpzvc3Modal',
+  components: { VButton },
+  props: {
+    modelValue: { type: Boolean, default: false },
+    maskClosable: { type: Boolean, default: true },
+    title: String,
+    width: { type: String, default: '70%' },
+    okText: { type: String, default: '确定' },
+    cancleText: { type: String, default: '取消' },
+    loading: { type: Boolean, default: false },
+    styles: Object,
+    showHead: { type: Boolean, default: true },
+    footerHide: { type: Boolean, default: false },
+    body: String
+  },
+  setup (props, { emit }) {
+    const visible = ref(props.modelValue)
+    const isHead = ref(props.showHead)
+    const buttonLoading = ref(false)
+
+    const getWrapperStyle = computed(() => {
+      return Object.assign(
+        { width: props.width },
+        props.styles || {}
+      )
+    })
+
+    // watch props changes
+    watch(() => props.modelValue, (val) => { visible.value = val })
+    watch(() => props.showHead, (val) => { isHead.value = val })
+
+    // methods
+    const close = () => {
+      // visible.value = false
+      emit('update:modelValue', false)
+      emit('on-cancle')
+    }
+
+    const mask = () => {
+      if (props.maskClosable && !buttonLoading.value) {
+        close()
+      }
+    }
+
+    const ok = () => {
+      if (props.loading) {
+        buttonLoading.value = true
+      } else {
+        // visible.value = false
+        emit('update:modelValue', false)
+      }
+      emit('on-ok')
+    }
+
+    return {
+      visible,
+      isHead,
+      buttonLoading,
+      getWrapperStyle,
+      close,
+      mask,
+      ok
+    }
+  }
+}
+</script>