Merge pull request #216 from Dengzygx/fix/update_message_api

Fix/update message api

src/message/message.md

@@ -9,22 +9,23 @@ align | String | left | 文本对齐方式。可选项：left/center。TS 类型
 closeBtn | String / Boolean / Slot / Function | undefined | 关闭按钮，可以自定义。值为 true 显示默认关闭按钮，值为 false 不显示关闭按钮。值类型为 string 则直接显示值，如：“关闭”。也可以完全自定义按钮。TS 类型：`string | boolean | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 content | String / Slot / Function | - | 用于自定义消息弹出内容。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 duration | Number | 3000 | 消息内置计时器，计时到达时会触发 duration-end 事件。单位：毫秒。值为 0 则表示没有计时器。 | N
-marquee | Boolean / Object | false | 【开发中】跑马灯效果。speed 指速度控制；loop 指循环播放次数，值为 -1 表示循环播放，值为 0 表示不循环播放；delay 表示延迟多久开始播放。TS 类型：`boolean | DrawMarquee` `interface DrawMarquee { speed?: number; loop?: number; delay?: number }`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/message/type.ts) | N
+marquee | Boolean / Object | false | 跑马灯效果。speed 指速度控制；loop 指循环播放次数，值为 -1 表示循环播放，值为 0 表示不循环播放；delay 表示延迟多久开始播放。TS 类型：`boolean | DrawMarquee` `interface DrawMarquee { speed?: number; loop?: number; delay?: number }`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/message/type.ts) | N
 theme | String | info | 消息组件风格。可选项：info/success/warning/error。TS 类型：`MessageThemeList` `type MessageThemeList = 'info' | 'success' | 'warning' | 'error'`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/message/type.ts) | N
-visible | Boolean | false | 是否显示，隐藏时默认销毁组件 | N
+visible | Boolean | false | 是否显示，隐藏时默认销毁组件。支持语法糖 `v-model` 或 `v-model:visible` | N
+defaultVisible | Boolean | false | 是否显示，隐藏时默认销毁组件。非受控属性 | N
 zIndex | Number | - | 元素层级，样式默认为 5000 | N
+onChange | Function |  | TS 类型：`(visible: boolean) => void`<br/>可见性变化时触发 | N
 onClose | Function |  | TS 类型：`() => void`<br/>关闭Message时触发 | N
 onClosed | Function |  | TS 类型：`() => void`<br/>关闭Message时并且动画结束后触发 | N
 onOpen | Function |  | TS 类型：`() => void`<br/>展示Message时触发 | N
 onOpened | Function |  | TS 类型：`() => void`<br/>展示Message时并且动画结束后触发 | N
-onVisibleChange | Function |  | TS 类型：`(visible: boolean) => void`<br/>可见性变化时触发 | N
 
 ### Message Events
 
 名称 | 参数 | 描述
 -- | -- | --
+change | `(visible: boolean)` | 可见性变化时触发
 close | \- | 关闭Message时触发
 closed | \- | 关闭Message时并且动画结束后触发
 open | \- | 展示Message时触发
 opened | \- | 展示Message时并且动画结束后触发
-visible-change | `(visible: boolean)` | 可见性变化时触发

src/message/message.vue

@@ -15,12 +15,11 @@
 </template>
 
 <script lang="ts">
-import { ref, computed, watch, defineComponent, getCurrentInstance, PropType, SetupContext } from 'vue';
+import { ref, computed, watch, defineComponent, getCurrentInstance, SetupContext, toRefs } from 'vue';
 import { CheckCircleFilledIcon, ErrorCircleFilledIcon, CloseIcon } from 'tdesign-icons-vue-next';
 import messageProps from './props';
 import config from '../config';
-import { renderTNode, TNode, useDefault, useEmitEvent } from '../shared';
-import { TdMessageProps } from './type';
+import { renderTNode, TNode, useEmitEvent, useVModel } from '../shared';
 
 const { prefix } = config;
 const name = `${prefix}-message`;
@@ -30,17 +29,13 @@ export default defineComponent({
   components: { CheckCircleFilledIcon, ErrorCircleFilledIcon, CloseIcon, TNode },
   props: messageProps,
   emits: ['visible-change', 'open', 'opened', 'close', 'closed'],
-  setup(props, context: SetupContext) {
+  setup(props: any, context: SetupContext) {
     const emitEvent = useEmitEvent(props, context.emit);
     const root = ref(null);
     const internalInstance = getCurrentInstance();
     const closeBtnContent = computed(() => renderTNode(internalInstance, 'closeBtn'));
-    const [currentVisible] = useDefault<TdMessageProps['visible'], TdMessageProps>(
-      props,
-      context.emit,
-      'visible',
-      'visible-change',
-    );
+    const { visible, modelValue } = toRefs(props);
+    const [currentVisible, setVisible] = useVModel(visible, modelValue, props.defaultValue, props.onChange);
     const rootClasses = computed(() => ({
       [name]: true,
       [`${name}--${props.theme}`]: true,
@@ -52,7 +47,7 @@ export default defineComponent({
 
     const onClose = () => {
       emitEvent('close');
-      currentVisible.value = false;
+      setVisible(false);
     };
 
     watch(
@@ -61,7 +56,7 @@ export default defineComponent({
         if (val === false) return;
 
         emitEvent('open');
-        currentVisible.value = true;
+        setVisible(true);
 
         if (props.duration > 0) {
           setTimeout(onClose, props.duration);

src/message/props.ts

@@ -46,11 +46,22 @@ export default {
     },
   },
   /** 是否显示，隐藏时默认销毁组件 */
-  visible: Boolean,
+  visible: {
+    type: Boolean,
+    default: undefined,
+  },
+  modelValue: {
+    type: Boolean,
+    default: undefined,
+  },
+  /** 是否显示，隐藏时默认销毁组件，非受控属性 */
+  defaultVisible: Boolean,
   /** 元素层级，样式默认为 5000 */
   zIndex: {
     type: Number,
   },
+  /** 可见性变化时触发 */
+  onChange: Function as PropType<TdMessageProps['onChange']>,
   /** 关闭Message时触发 */
   onClose: Function as PropType<TdMessageProps['onClose']>,
   /** 关闭Message时并且动画结束后触发 */
@@ -59,6 +70,4 @@ export default {
   onOpen: Function as PropType<TdMessageProps['onOpen']>,
   /** 展示Message时并且动画结束后触发 */
   onOpened: Function as PropType<TdMessageProps['onOpened']>,
-  /** 可见性变化时触发 */
-  onVisibleChange: Function as PropType<TdMessageProps['onVisibleChange']>,
 };

src/message/type.ts

@@ -40,6 +40,16 @@ export interface TdMessageProps {
    * @default false
    */
   visible?: boolean;
+  /**
+   * 是否显示，隐藏时默认销毁组件，非受控属性
+   * @default false
+   */
+  defaultVisible?: boolean;
+  /**
+   * 是否显示，隐藏时默认销毁组件
+   * @default false
+   */
+  modelValue?: boolean;
   /**
    * 元素层级，样式默认为 5000
    */
@@ -63,7 +73,7 @@ export interface TdMessageProps {
   /**
    * 可见性变化时触发
    */
-  onVisibleChange?: (visible: boolean) => void;
+  onChange?: (visible: boolean) => void;
 }
 
 export type MessageAlignType = 'left' | 'center';