@deot/vc-components 1.0.5 → 1.0.6

package/dist/index.cjs

@@ -2295,6 +2295,7 @@ const props$Q = {
     type: Boolean,
     default: true
   },
+  // 单位ms
   duration: {
     type: Number,
     default: 3e3
@@ -2326,7 +2327,11 @@ const MToastView = /* @__PURE__ */ vue.defineComponent({
     emit,
     expose
   }) {
-    const isVisible = vue.ref(false);
+    const isActive = vue.ref(false);
+    const currentContent = vue.ref();
+    const setContent = v => {
+      currentContent.value = v;
+    };
 
     // 兼容Portal设计
     const handleRemove = () => {
@@ -2335,17 +2340,17 @@ const MToastView = /* @__PURE__ */ vue.defineComponent({
     };
     const handleClose = () => {
       if (props.maskClosable) {
-        isVisible.value = false;
+        isActive.value = false;
       }
     };
+    vue.watch(() => props.content, setContent, {
+      immediate: true
+    });
     let timer;
     vue.onMounted(() => {
-      isVisible.value = true;
+      isActive.value = true;
       if (props.duration !== 0) {
-        timer = setTimeout(() => {
-          // 主线程
-          isVisible.value = false;
-        }, props.duration - 300); // 动画时间
+        timer = setTimeout(() => isActive.value = false, props.duration);
       }
     });
     vue.onUnmounted(() => {
@@ -2374,12 +2379,12 @@ const MToastView = /* @__PURE__ */ vue.defineComponent({
           "class": "vcm-toast__wrapper"
         }, [props.mode === 'loading' && vue.createVNode(MSpin, {
           "class": "vcm-toast__loading"
-        }, null), typeof props.content === 'string' ? vue.createVNode("div", {
+        }, null), typeof currentContent.value === 'string' ? vue.createVNode("div", {
           "class": "vcm-toast__content",
-          "innerHTML": props.content
-        }, null) : typeof props.content === 'function' ? vue.createVNode(MCustomer, {
-          "render": props.content
-        }, null) : null]), [[vue.vShow, isVisible.value]])]
+          "innerHTML": currentContent.value
+        }, null) : typeof currentContent.value === 'function' ? vue.createVNode(MCustomer, {
+          "render": currentContent.value
+        }, null) : null]), [[vue.vShow, isActive.value]])]
       })]);
     };
   }
@@ -4338,6 +4343,7 @@ const props$C = {
     type: Boolean,
     default: true
   },
+  // 单位ms
   duration: {
     type: Number,
     default: 1500
@@ -4372,6 +4378,10 @@ const MessageView = /* @__PURE__ */ vue.defineComponent({
   }) {
     const instance = vue.getCurrentInstance();
     const isActive = vue.ref(false);
+    const currentContent = vue.ref();
+    const setContent = v => {
+      currentContent.value = v;
+    };
 
     // 兼容Portal设计
     const handleRemove = () => {
@@ -4391,14 +4401,14 @@ const MessageView = /* @__PURE__ */ vue.defineComponent({
         isActive.value = false;
       }
     };
+    vue.watch(() => props.content, setContent, {
+      immediate: true
+    });
     let timer;
     vue.onMounted(() => {
       isActive.value = true;
       if (props.duration !== 0) {
-        timer = setTimeout(() => {
-          // 主线程
-          isActive.value = false;
-        }, props.duration * 1000 - 300); // 动画时间
+        timer = setTimeout(() => isActive.value = false, props.duration);
       }
     });
     vue.onUnmounted(() => {
@@ -4407,7 +4417,9 @@ const MessageView = /* @__PURE__ */ vue.defineComponent({
     const exposes = ['destroy', 'remove', 'close', 'hide'].reduce((pre, key) => {
       pre[key] = handleRemove;
       return pre;
-    }, {});
+    }, {
+      setContent
+    });
     expose(exposes);
     return () => {
       return vue.createVNode("div", {
@@ -4434,11 +4446,11 @@ const MessageView = /* @__PURE__ */ vue.defineComponent({
         }, null) : vue.createVNode(Icon, {
           "type": props.mode,
           "class": [`is-${props.mode}`, 'vc-message__icon']
-        }, null), typeof props.content === 'string' ? vue.createVNode("div", {
+        }, null), typeof currentContent.value === 'string' ? vue.createVNode("div", {
           "class": "vc-message__content",
-          "innerHTML": props.content
-        }, null) : typeof props.content === 'function' ? vue.createVNode(Customer, {
-          "render": props.content
+          "innerHTML": currentContent.value
+        }, null) : typeof currentContent.value === 'function' ? vue.createVNode(Customer, {
+          "render": currentContent.value
         }, null) : null, props.closable && vue.createVNode(Icon, {
           "type": "close",
           "class": "vc-message__close",
@@ -5158,9 +5170,10 @@ const modal = /*#__PURE__*/Object.freeze(/*#__PURE__*/Object.defineProperty({
 const props$z = {
   title: [String, Function],
   content: [String, Function],
+  // 单位ms
   duration: {
     type: Number,
-    default: 450
+    default: 4500
   },
   closable: {
     type: Boolean,
@@ -5194,14 +5207,25 @@ const NoticeView = /* @__PURE__ */ vue.defineComponent({
   }) {
     const instance = vue.getCurrentInstance();
     const isActive = vue.ref(false);
+    const currentTitle = vue.ref();
+    const currentContent = vue.ref();
+    const setTitle = v => {
+      currentTitle.value = v;
+    };
+    const setContent = v => {
+      currentContent.value = v;
+    };
+    vue.watch(() => props.title, setTitle, {
+      immediate: true
+    });
+    vue.watch(() => props.content, setContent, {
+      immediate: true
+    });
     let timer;
     vue.onMounted(() => {
       isActive.value = true;
       if (props.duration !== 0) {
-        timer = setTimeout(() => {
-          // 主线程
-          isActive.value = false;
-        }, props.duration * 1000 - 300); // 动画时间
+        timer = setTimeout(() => isActive.value = false, props.duration);
       }
     });
     vue.onUnmounted(() => {
@@ -5245,21 +5269,21 @@ const NoticeView = /* @__PURE__ */ vue.defineComponent({
         }, [props.mode && vue.createVNode(Icon, {
           "type": `o-${props.mode}`,
           "class": [`is-${props.mode}`, 'vc-notice__icon']
-        }, null), vue.createVNode("div", null, [props.title && vue.createVNode("div", {
+        }, null), vue.createVNode("div", null, [currentTitle.value && vue.createVNode("div", {
           "style": [{
-            marginBottom: props.content ? '8px' : ''
+            marginBottom: currentContent.value ? '8px' : ''
           }],
           "class": "vc-notice__title"
-        }, [typeof props.title === 'string' ? vue.createVNode("div", {
-          "innerHTML": props.title
-        }, null) : typeof props.title === 'function' ? vue.createVNode(Customer, {
-          "render": props.title
-        }, null) : null]), props.content && vue.createVNode("div", {
+        }, [typeof currentTitle.value === 'string' ? vue.createVNode("div", {
+          "innerHTML": currentTitle.value
+        }, null) : typeof currentTitle.value === 'function' ? vue.createVNode(Customer, {
+          "render": currentTitle.value
+        }, null) : null]), currentContent.value && vue.createVNode("div", {
           "class": "vc-notice__content"
-        }, [typeof props.content === 'string' ? vue.createVNode("div", {
-          "innerHTML": props.content
-        }, null) : typeof props.content === 'function' ? vue.createVNode(Customer, {
-          "render": props.content
+        }, [typeof currentContent.value === 'string' ? vue.createVNode("div", {
+          "innerHTML": currentContent.value
+        }, null) : typeof currentContent.value === 'function' ? vue.createVNode(Customer, {
+          "render": currentContent.value
         }, null) : null])]), props.closable && vue.createVNode(Icon, {
           "type": "close",
           "style": "font-size: 12px",

package/dist/index.iife.js

@@ -5975,6 +5975,7 @@ var VcComponents = (function (exports, vue) {
 	    type: Boolean,
 	    default: true
 	  },
+	  // 单位ms
 	  duration: {
 	    type: Number,
 	    default: 3e3
@@ -6006,7 +6007,11 @@ var VcComponents = (function (exports, vue) {
 	    emit,
 	    expose
 	  }) {
-	    const isVisible = vue.ref(false);
+	    const isActive = vue.ref(false);
+	    const currentContent = vue.ref();
+	    const setContent = v => {
+	      currentContent.value = v;
+	    };
 
 	    // 兼容Portal设计
 	    const handleRemove = () => {
@@ -6015,17 +6020,17 @@ var VcComponents = (function (exports, vue) {
 	    };
 	    const handleClose = () => {
 	      if (props.maskClosable) {
-	        isVisible.value = false;
+	        isActive.value = false;
 	      }
 	    };
+	    vue.watch(() => props.content, setContent, {
+	      immediate: true
+	    });
 	    let timer;
 	    vue.onMounted(() => {
-	      isVisible.value = true;
+	      isActive.value = true;
 	      if (props.duration !== 0) {
-	        timer = setTimeout(() => {
-	          // 主线程
-	          isVisible.value = false;
-	        }, props.duration - 300); // 动画时间
+	        timer = setTimeout(() => isActive.value = false, props.duration);
 	      }
 	    });
 	    vue.onUnmounted(() => {
@@ -6054,12 +6059,12 @@ var VcComponents = (function (exports, vue) {
 	          "class": "vcm-toast__wrapper"
 	        }, [props.mode === 'loading' && vue.createVNode(MSpin, {
 	          "class": "vcm-toast__loading"
-	        }, null), typeof props.content === 'string' ? vue.createVNode("div", {
+	        }, null), typeof currentContent.value === 'string' ? vue.createVNode("div", {
 	          "class": "vcm-toast__content",
-	          "innerHTML": props.content
-	        }, null) : typeof props.content === 'function' ? vue.createVNode(MCustomer, {
-	          "render": props.content
-	        }, null) : null]), [[vue.vShow, isVisible.value]])]
+	          "innerHTML": currentContent.value
+	        }, null) : typeof currentContent.value === 'function' ? vue.createVNode(MCustomer, {
+	          "render": currentContent.value
+	        }, null) : null]), [[vue.vShow, isActive.value]])]
 	      })]);
 	    };
 	  }
@@ -8649,6 +8654,7 @@ var VcComponents = (function (exports, vue) {
 	    type: Boolean,
 	    default: true
 	  },
+	  // 单位ms
 	  duration: {
 	    type: Number,
 	    default: 1500
@@ -8683,6 +8689,10 @@ var VcComponents = (function (exports, vue) {
 	  }) {
 	    const instance = vue.getCurrentInstance();
 	    const isActive = vue.ref(false);
+	    const currentContent = vue.ref();
+	    const setContent = v => {
+	      currentContent.value = v;
+	    };
 
 	    // 兼容Portal设计
 	    const handleRemove = () => {
@@ -8702,14 +8712,14 @@ var VcComponents = (function (exports, vue) {
 	        isActive.value = false;
 	      }
 	    };
+	    vue.watch(() => props.content, setContent, {
+	      immediate: true
+	    });
 	    let timer;
 	    vue.onMounted(() => {
 	      isActive.value = true;
 	      if (props.duration !== 0) {
-	        timer = setTimeout(() => {
-	          // 主线程
-	          isActive.value = false;
-	        }, props.duration * 1000 - 300); // 动画时间
+	        timer = setTimeout(() => isActive.value = false, props.duration);
 	      }
 	    });
 	    vue.onUnmounted(() => {
@@ -8718,7 +8728,9 @@ var VcComponents = (function (exports, vue) {
 	    const exposes = ['destroy', 'remove', 'close', 'hide'].reduce((pre, key) => {
 	      pre[key] = handleRemove;
 	      return pre;
-	    }, {});
+	    }, {
+	      setContent
+	    });
 	    expose(exposes);
 	    return () => {
 	      return vue.createVNode("div", {
@@ -8745,11 +8757,11 @@ var VcComponents = (function (exports, vue) {
 	        }, null) : vue.createVNode(Icon, {
 	          "type": props.mode,
 	          "class": [`is-${props.mode}`, 'vc-message__icon']
-	        }, null), typeof props.content === 'string' ? vue.createVNode("div", {
+	        }, null), typeof currentContent.value === 'string' ? vue.createVNode("div", {
 	          "class": "vc-message__content",
-	          "innerHTML": props.content
-	        }, null) : typeof props.content === 'function' ? vue.createVNode(Customer, {
-	          "render": props.content
+	          "innerHTML": currentContent.value
+	        }, null) : typeof currentContent.value === 'function' ? vue.createVNode(Customer, {
+	          "render": currentContent.value
 	        }, null) : null, props.closable && vue.createVNode(Icon, {
 	          "type": "close",
 	          "class": "vc-message__close",
@@ -9469,9 +9481,10 @@ var VcComponents = (function (exports, vue) {
 	const props$z = {
 	  title: [String, Function],
 	  content: [String, Function],
+	  // 单位ms
 	  duration: {
 	    type: Number,
-	    default: 450
+	    default: 4500
 	  },
 	  closable: {
 	    type: Boolean,
@@ -9505,14 +9518,25 @@ var VcComponents = (function (exports, vue) {
 	  }) {
 	    const instance = vue.getCurrentInstance();
 	    const isActive = vue.ref(false);
+	    const currentTitle = vue.ref();
+	    const currentContent = vue.ref();
+	    const setTitle = v => {
+	      currentTitle.value = v;
+	    };
+	    const setContent = v => {
+	      currentContent.value = v;
+	    };
+	    vue.watch(() => props.title, setTitle, {
+	      immediate: true
+	    });
+	    vue.watch(() => props.content, setContent, {
+	      immediate: true
+	    });
 	    let timer;
 	    vue.onMounted(() => {
 	      isActive.value = true;
 	      if (props.duration !== 0) {
-	        timer = setTimeout(() => {
-	          // 主线程
-	          isActive.value = false;
-	        }, props.duration * 1000 - 300); // 动画时间
+	        timer = setTimeout(() => isActive.value = false, props.duration);
 	      }
 	    });
 	    vue.onUnmounted(() => {
@@ -9556,21 +9580,21 @@ var VcComponents = (function (exports, vue) {
 	        }, [props.mode && vue.createVNode(Icon, {
 	          "type": `o-${props.mode}`,
 	          "class": [`is-${props.mode}`, 'vc-notice__icon']
-	        }, null), vue.createVNode("div", null, [props.title && vue.createVNode("div", {
+	        }, null), vue.createVNode("div", null, [currentTitle.value && vue.createVNode("div", {
 	          "style": [{
-	            marginBottom: props.content ? '8px' : ''
+	            marginBottom: currentContent.value ? '8px' : ''
 	          }],
 	          "class": "vc-notice__title"
-	        }, [typeof props.title === 'string' ? vue.createVNode("div", {
-	          "innerHTML": props.title
-	        }, null) : typeof props.title === 'function' ? vue.createVNode(Customer, {
-	          "render": props.title
-	        }, null) : null]), props.content && vue.createVNode("div", {
+	        }, [typeof currentTitle.value === 'string' ? vue.createVNode("div", {
+	          "innerHTML": currentTitle.value
+	        }, null) : typeof currentTitle.value === 'function' ? vue.createVNode(Customer, {
+	          "render": currentTitle.value
+	        }, null) : null]), currentContent.value && vue.createVNode("div", {
 	          "class": "vc-notice__content"
-	        }, [typeof props.content === 'string' ? vue.createVNode("div", {
-	          "innerHTML": props.content
-	        }, null) : typeof props.content === 'function' ? vue.createVNode(Customer, {
-	          "render": props.content
+	        }, [typeof currentContent.value === 'string' ? vue.createVNode("div", {
+	          "innerHTML": currentContent.value
+	        }, null) : typeof currentContent.value === 'function' ? vue.createVNode(Customer, {
+	          "render": currentContent.value
 	        }, null) : null])]), props.closable && vue.createVNode(Icon, {
 	          "type": "close",
 	          "style": "font-size: 12px",

package/dist/index.js

@@ -2272,6 +2272,7 @@ const props$Q = {
     type: Boolean,
     default: true
   },
+  // 单位ms
   duration: {
     type: Number,
     default: 3e3
@@ -2303,7 +2304,11 @@ const MToastView = /* @__PURE__ */ defineComponent({
     emit,
     expose
   }) {
-    const isVisible = ref(false);
+    const isActive = ref(false);
+    const currentContent = ref();
+    const setContent = v => {
+      currentContent.value = v;
+    };
 
     // 兼容Portal设计
     const handleRemove = () => {
@@ -2312,17 +2317,17 @@ const MToastView = /* @__PURE__ */ defineComponent({
     };
     const handleClose = () => {
       if (props.maskClosable) {
-        isVisible.value = false;
+        isActive.value = false;
       }
     };
+    watch(() => props.content, setContent, {
+      immediate: true
+    });
     let timer;
     onMounted(() => {
-      isVisible.value = true;
+      isActive.value = true;
       if (props.duration !== 0) {
-        timer = setTimeout(() => {
-          // 主线程
-          isVisible.value = false;
-        }, props.duration - 300); // 动画时间
+        timer = setTimeout(() => isActive.value = false, props.duration);
       }
     });
     onUnmounted(() => {
@@ -2351,12 +2356,12 @@ const MToastView = /* @__PURE__ */ defineComponent({
           "class": "vcm-toast__wrapper"
         }, [props.mode === 'loading' && createVNode(MSpin, {
           "class": "vcm-toast__loading"
-        }, null), typeof props.content === 'string' ? createVNode("div", {
+        }, null), typeof currentContent.value === 'string' ? createVNode("div", {
           "class": "vcm-toast__content",
-          "innerHTML": props.content
-        }, null) : typeof props.content === 'function' ? createVNode(MCustomer, {
-          "render": props.content
-        }, null) : null]), [[vShow, isVisible.value]])]
+          "innerHTML": currentContent.value
+        }, null) : typeof currentContent.value === 'function' ? createVNode(MCustomer, {
+          "render": currentContent.value
+        }, null) : null]), [[vShow, isActive.value]])]
       })]);
     };
   }
@@ -4315,6 +4320,7 @@ const props$C = {
     type: Boolean,
     default: true
   },
+  // 单位ms
   duration: {
     type: Number,
     default: 1500
@@ -4349,6 +4355,10 @@ const MessageView = /* @__PURE__ */ defineComponent({
   }) {
     const instance = getCurrentInstance();
     const isActive = ref(false);
+    const currentContent = ref();
+    const setContent = v => {
+      currentContent.value = v;
+    };
 
     // 兼容Portal设计
     const handleRemove = () => {
@@ -4368,14 +4378,14 @@ const MessageView = /* @__PURE__ */ defineComponent({
         isActive.value = false;
       }
     };
+    watch(() => props.content, setContent, {
+      immediate: true
+    });
     let timer;
     onMounted(() => {
       isActive.value = true;
       if (props.duration !== 0) {
-        timer = setTimeout(() => {
-          // 主线程
-          isActive.value = false;
-        }, props.duration * 1000 - 300); // 动画时间
+        timer = setTimeout(() => isActive.value = false, props.duration);
       }
     });
     onUnmounted(() => {
@@ -4384,7 +4394,9 @@ const MessageView = /* @__PURE__ */ defineComponent({
     const exposes = ['destroy', 'remove', 'close', 'hide'].reduce((pre, key) => {
       pre[key] = handleRemove;
       return pre;
-    }, {});
+    }, {
+      setContent
+    });
     expose(exposes);
     return () => {
       return createVNode("div", {
@@ -4411,11 +4423,11 @@ const MessageView = /* @__PURE__ */ defineComponent({
         }, null) : createVNode(Icon, {
           "type": props.mode,
           "class": [`is-${props.mode}`, 'vc-message__icon']
-        }, null), typeof props.content === 'string' ? createVNode("div", {
+        }, null), typeof currentContent.value === 'string' ? createVNode("div", {
           "class": "vc-message__content",
-          "innerHTML": props.content
-        }, null) : typeof props.content === 'function' ? createVNode(Customer, {
-          "render": props.content
+          "innerHTML": currentContent.value
+        }, null) : typeof currentContent.value === 'function' ? createVNode(Customer, {
+          "render": currentContent.value
         }, null) : null, props.closable && createVNode(Icon, {
           "type": "close",
           "class": "vc-message__close",
@@ -5135,9 +5147,10 @@ const modal = /*#__PURE__*/Object.freeze(/*#__PURE__*/Object.defineProperty({
 const props$z = {
   title: [String, Function],
   content: [String, Function],
+  // 单位ms
   duration: {
     type: Number,
-    default: 450
+    default: 4500
   },
   closable: {
     type: Boolean,
@@ -5171,14 +5184,25 @@ const NoticeView = /* @__PURE__ */ defineComponent({
   }) {
     const instance = getCurrentInstance();
     const isActive = ref(false);
+    const currentTitle = ref();
+    const currentContent = ref();
+    const setTitle = v => {
+      currentTitle.value = v;
+    };
+    const setContent = v => {
+      currentContent.value = v;
+    };
+    watch(() => props.title, setTitle, {
+      immediate: true
+    });
+    watch(() => props.content, setContent, {
+      immediate: true
+    });
     let timer;
     onMounted(() => {
       isActive.value = true;
       if (props.duration !== 0) {
-        timer = setTimeout(() => {
-          // 主线程
-          isActive.value = false;
-        }, props.duration * 1000 - 300); // 动画时间
+        timer = setTimeout(() => isActive.value = false, props.duration);
       }
     });
     onUnmounted(() => {
@@ -5222,21 +5246,21 @@ const NoticeView = /* @__PURE__ */ defineComponent({
         }, [props.mode && createVNode(Icon, {
           "type": `o-${props.mode}`,
           "class": [`is-${props.mode}`, 'vc-notice__icon']
-        }, null), createVNode("div", null, [props.title && createVNode("div", {
+        }, null), createVNode("div", null, [currentTitle.value && createVNode("div", {
           "style": [{
-            marginBottom: props.content ? '8px' : ''
+            marginBottom: currentContent.value ? '8px' : ''
           }],
           "class": "vc-notice__title"
-        }, [typeof props.title === 'string' ? createVNode("div", {
-          "innerHTML": props.title
-        }, null) : typeof props.title === 'function' ? createVNode(Customer, {
-          "render": props.title
-        }, null) : null]), props.content && createVNode("div", {
+        }, [typeof currentTitle.value === 'string' ? createVNode("div", {
+          "innerHTML": currentTitle.value
+        }, null) : typeof currentTitle.value === 'function' ? createVNode(Customer, {
+          "render": currentTitle.value
+        }, null) : null]), currentContent.value && createVNode("div", {
           "class": "vc-notice__content"
-        }, [typeof props.content === 'string' ? createVNode("div", {
-          "innerHTML": props.content
-        }, null) : typeof props.content === 'function' ? createVNode(Customer, {
-          "render": props.content
+        }, [typeof currentContent.value === 'string' ? createVNode("div", {
+          "innerHTML": currentContent.value
+        }, null) : typeof currentContent.value === 'function' ? createVNode(Customer, {
+          "render": currentContent.value
         }, null) : null])]), props.closable && createVNode(Icon, {
           "type": "close",
           "style": "font-size: 12px",

package/dist/index.umd.cjs

@@ -5978,6 +5978,7 @@
 	    type: Boolean,
 	    default: true
 	  },
+	  // 单位ms
 	  duration: {
 	    type: Number,
 	    default: 3e3
@@ -6009,7 +6010,11 @@
 	    emit,
 	    expose
 	  }) {
-	    const isVisible = vue.ref(false);
+	    const isActive = vue.ref(false);
+	    const currentContent = vue.ref();
+	    const setContent = v => {
+	      currentContent.value = v;
+	    };
 
 	    // 兼容Portal设计
 	    const handleRemove = () => {
@@ -6018,17 +6023,17 @@
 	    };
 	    const handleClose = () => {
 	      if (props.maskClosable) {
-	        isVisible.value = false;
+	        isActive.value = false;
 	      }
 	    };
+	    vue.watch(() => props.content, setContent, {
+	      immediate: true
+	    });
 	    let timer;
 	    vue.onMounted(() => {
-	      isVisible.value = true;
+	      isActive.value = true;
 	      if (props.duration !== 0) {
-	        timer = setTimeout(() => {
-	          // 主线程
-	          isVisible.value = false;
-	        }, props.duration - 300); // 动画时间
+	        timer = setTimeout(() => isActive.value = false, props.duration);
 	      }
 	    });
 	    vue.onUnmounted(() => {
@@ -6057,12 +6062,12 @@
 	          "class": "vcm-toast__wrapper"
 	        }, [props.mode === 'loading' && vue.createVNode(MSpin, {
 	          "class": "vcm-toast__loading"
-	        }, null), typeof props.content === 'string' ? vue.createVNode("div", {
+	        }, null), typeof currentContent.value === 'string' ? vue.createVNode("div", {
 	          "class": "vcm-toast__content",
-	          "innerHTML": props.content
-	        }, null) : typeof props.content === 'function' ? vue.createVNode(MCustomer, {
-	          "render": props.content
-	        }, null) : null]), [[vue.vShow, isVisible.value]])]
+	          "innerHTML": currentContent.value
+	        }, null) : typeof currentContent.value === 'function' ? vue.createVNode(MCustomer, {
+	          "render": currentContent.value
+	        }, null) : null]), [[vue.vShow, isActive.value]])]
 	      })]);
 	    };
 	  }
@@ -8652,6 +8657,7 @@
 	    type: Boolean,
 	    default: true
 	  },
+	  // 单位ms
 	  duration: {
 	    type: Number,
 	    default: 1500
@@ -8686,6 +8692,10 @@
 	  }) {
 	    const instance = vue.getCurrentInstance();
 	    const isActive = vue.ref(false);
+	    const currentContent = vue.ref();
+	    const setContent = v => {
+	      currentContent.value = v;
+	    };
 
 	    // 兼容Portal设计
 	    const handleRemove = () => {
@@ -8705,14 +8715,14 @@
 	        isActive.value = false;
 	      }
 	    };
+	    vue.watch(() => props.content, setContent, {
+	      immediate: true
+	    });
 	    let timer;
 	    vue.onMounted(() => {
 	      isActive.value = true;
 	      if (props.duration !== 0) {
-	        timer = setTimeout(() => {
-	          // 主线程
-	          isActive.value = false;
-	        }, props.duration * 1000 - 300); // 动画时间
+	        timer = setTimeout(() => isActive.value = false, props.duration);
 	      }
 	    });
 	    vue.onUnmounted(() => {
@@ -8721,7 +8731,9 @@
 	    const exposes = ['destroy', 'remove', 'close', 'hide'].reduce((pre, key) => {
 	      pre[key] = handleRemove;
 	      return pre;
-	    }, {});
+	    }, {
+	      setContent
+	    });
 	    expose(exposes);
 	    return () => {
 	      return vue.createVNode("div", {
@@ -8748,11 +8760,11 @@
 	        }, null) : vue.createVNode(Icon, {
 	          "type": props.mode,
 	          "class": [`is-${props.mode}`, 'vc-message__icon']
-	        }, null), typeof props.content === 'string' ? vue.createVNode("div", {
+	        }, null), typeof currentContent.value === 'string' ? vue.createVNode("div", {
 	          "class": "vc-message__content",
-	          "innerHTML": props.content
-	        }, null) : typeof props.content === 'function' ? vue.createVNode(Customer, {
-	          "render": props.content
+	          "innerHTML": currentContent.value
+	        }, null) : typeof currentContent.value === 'function' ? vue.createVNode(Customer, {
+	          "render": currentContent.value
 	        }, null) : null, props.closable && vue.createVNode(Icon, {
 	          "type": "close",
 	          "class": "vc-message__close",
@@ -9472,9 +9484,10 @@
 	const props$z = {
 	  title: [String, Function],
 	  content: [String, Function],
+	  // 单位ms
 	  duration: {
 	    type: Number,
-	    default: 450
+	    default: 4500
 	  },
 	  closable: {
 	    type: Boolean,
@@ -9508,14 +9521,25 @@
 	  }) {
 	    const instance = vue.getCurrentInstance();
 	    const isActive = vue.ref(false);
+	    const currentTitle = vue.ref();
+	    const currentContent = vue.ref();
+	    const setTitle = v => {
+	      currentTitle.value = v;
+	    };
+	    const setContent = v => {
+	      currentContent.value = v;
+	    };
+	    vue.watch(() => props.title, setTitle, {
+	      immediate: true
+	    });
+	    vue.watch(() => props.content, setContent, {
+	      immediate: true
+	    });
 	    let timer;
 	    vue.onMounted(() => {
 	      isActive.value = true;
 	      if (props.duration !== 0) {
-	        timer = setTimeout(() => {
-	          // 主线程
-	          isActive.value = false;
-	        }, props.duration * 1000 - 300); // 动画时间
+	        timer = setTimeout(() => isActive.value = false, props.duration);
 	      }
 	    });
 	    vue.onUnmounted(() => {
@@ -9559,21 +9583,21 @@
 	        }, [props.mode && vue.createVNode(Icon, {
 	          "type": `o-${props.mode}`,
 	          "class": [`is-${props.mode}`, 'vc-notice__icon']
-	        }, null), vue.createVNode("div", null, [props.title && vue.createVNode("div", {
+	        }, null), vue.createVNode("div", null, [currentTitle.value && vue.createVNode("div", {
 	          "style": [{
-	            marginBottom: props.content ? '8px' : ''
+	            marginBottom: currentContent.value ? '8px' : ''
 	          }],
 	          "class": "vc-notice__title"
-	        }, [typeof props.title === 'string' ? vue.createVNode("div", {
-	          "innerHTML": props.title
-	        }, null) : typeof props.title === 'function' ? vue.createVNode(Customer, {
-	          "render": props.title
-	        }, null) : null]), props.content && vue.createVNode("div", {
+	        }, [typeof currentTitle.value === 'string' ? vue.createVNode("div", {
+	          "innerHTML": currentTitle.value
+	        }, null) : typeof currentTitle.value === 'function' ? vue.createVNode(Customer, {
+	          "render": currentTitle.value
+	        }, null) : null]), currentContent.value && vue.createVNode("div", {
 	          "class": "vc-notice__content"
-	        }, [typeof props.content === 'string' ? vue.createVNode("div", {
-	          "innerHTML": props.content
-	        }, null) : typeof props.content === 'function' ? vue.createVNode(Customer, {
-	          "render": props.content
+	        }, [typeof currentContent.value === 'string' ? vue.createVNode("div", {
+	          "innerHTML": currentContent.value
+	        }, null) : typeof currentContent.value === 'function' ? vue.createVNode(Customer, {
+	          "render": currentContent.value
 	        }, null) : null])]), props.closable && vue.createVNode(Icon, {
 	          "type": "close",
 	          "style": "font-size: 12px",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deot/vc-components",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",