feat(toast): 增加标题属性，调整自定义位置

src/packages/__VUE/toast/demo.vue

@@ -1,43 +1,18 @@
 <template>
   <div class="demo">
     <h2>基本用法</h2>
-    <nut-cell
-      title="Text 文字提示"
-      is-link
-      @click="textToast('网络失败，请稍后再试~')"
-    ></nut-cell>
-    <nut-cell
-      title="Success 成功提示"
-      is-link
-      @click="successToast('成功提示')"
-    ></nut-cell>
-    <nut-cell
-      title="Error 失败提示"
-      is-link
-      @click="errorToast('失败提示')"
-    ></nut-cell>
-    <nut-cell
-      title="Warning 警告提示"
-      is-link
-      @click="warningToast('警告提示')"
-    ></nut-cell>
-    <nut-cell
-      title="Loading 加载提示"
-      is-link
-      @click="loadingToast('加载中')"
-    ></nut-cell>
+    <nut-cell title="Text 文字提示" is-link @click="textToast('网络失败，请稍后再试~')"></nut-cell>
+    <nut-cell title="Title 标题展示" is-link @click="titleToast('网络失败，请稍后再试~')"></nut-cell>
+    <nut-cell title="Success 成功提示" is-link @click="successToast('成功提示')"></nut-cell>
+    <nut-cell title="Error 失败提示" is-link @click="errorToast('失败提示')"></nut-cell>
+    <nut-cell title="Warning 警告提示" is-link @click="warningToast('警告提示')"></nut-cell>
+    <nut-cell title="Loading 加载提示" is-link @click="loadingToast('加载中')"></nut-cell>
     <h2>Toast不消失</h2>
-    <nut-cell
-      title="Toast 文字提示不消失"
-      is-link
-      @click="NoToast('Toast不消失~')"
-    ></nut-cell>
+    <nut-cell title="Toast 文字提示不消失" is-link @click="NoToast('Toast不消失~')"></nut-cell>
+    <h2>Toast自定义距离底部高度</h2>
+    <nut-cell title="Toast 自定义底部高度" is-link @click="BottomToast('自定义距离~')"></nut-cell>
     <h2>Loading带透明遮罩</h2>
-    <nut-cell
-      title="带文案+带透明遮罩+自动消失"
-      is-link
-      @click="NoLoading('加载中~')"
-    ></nut-cell>
+    <nut-cell title="带文案+带透明遮罩+自动消失" is-link @click="NoLoading('加载中~')"></nut-cell>
   </div>
 </template>
 
@@ -50,6 +25,11 @@ export default createDemo({
     const textToast = (msg) => {
       Toast.text(msg);
     };
+    const titleToast = (msg) => {
+      Toast.text(msg, {
+        title: '标题文字'
+      });
+    };
     const successToast = (msg) => {
       Toast.success(msg);
     };
@@ -67,6 +47,12 @@ export default createDemo({
         duration: 0
       });
     };
+    const BottomToast = (msg) => {
+      Toast.text(msg, {
+        center: false,
+        bottom: '10%'
+      });
+    };
     const NoLoading = (msg) => {
       Toast.loading(msg, {
         cover: true
@@ -74,12 +60,14 @@ export default createDemo({
     };
     return {
       textToast,
+      titleToast,
       successToast,
       errorToast,
       warningToast,
       loadingToast,
       NoToast,
-      NoLoading
+      NoLoading,
+      BottomToast
     };
   }
 });

src/packages/__VUE/toast/doc.md

@@ -36,6 +36,9 @@ import { Toast } from '@nutui/nutui';
 export default {
   setup() {
     Toast.text('网络失败，请稍后再试~');
+    Toast.text(msg,{
+        title:'标题文字'
+        });
     return {};
   },
 };
@@ -107,8 +110,9 @@ toast.hide();
 | ------------------- | ----------------------------------------------------------------------------- | ------------- | ----------------------------- |
 | id                  | 标识符，相同者共用一个实例<br>loading类型默认使用一个实例，其他类型默认不共用 | String/Number | -                             |
 | duration            | 展示时长（毫秒）<br>值为 0 时，toast 不会自动消失      | Number        | 2000                          |
+| title            | 标题     | String        | ''                          |
 | center              | 是否展示在页面中部（为false时展示在底部）                                     | Boolean       | true                          |
-| bottom              | 距页面底部的距离（像素），option.center为false时生效                          | Number       | 30                          |
+| bottom              | 距页面底部的距离（像素或者百分比），option.center为false时生效                          | String       | "30px"                     |
 | textAlignCenter     | 多行文案是否居中                                                              | Boolean       | true                          |
 | bgColor             | 背景颜色（透明度）                                                            | String        | "rgba(0, 0, 0, 0.8)"       |
 | customClass         | 自定义类名                                                                    | String        | ""                            |

src/packages/__VUE/toast/doc.taro.md

@@ -18,6 +18,8 @@ app.use(Toast);
 ``` html
 <nut-toast :msg="page.state.msg" v-model:visible="page.state.show" :type="page.state.type" @closed="page.methods.onClosed" :cover="page.state.cover" />
 <nut-cell title="Text 文字提示" is-link @click="page.methods.openToast('text','网络失败，请稍后再试~')"></nut-cell>
+<nut-cell title="Title 标题文字" is-link @click="page.methods.openToast('text', '网络失败，请稍后再试~',false,'标题文字')" ></nut-cell>
+<nut-cell title="Text 自定义位置" is-link @click="page.methods.openToast('text', '自定义位置',false,'','20%',false)"></nut-cell>
 <nut-cell title="Success 成功提示" is-link @click="page.methods.openToast('success','成功提示')"></nut-cell>
 <nut-cell title="Error 失败提示" is-link @click="page.methods.openToast('fail','失败提示')"></nut-cell>
 <nut-cell title="Warning 警告提示" is-link @click="page.methods.openToast('warn','警告提示')"></nut-cell>
@@ -33,7 +35,10 @@ export default {
         msg: 'toast',
         type: 'text',
         show: false,
-        cover: false
+        cover: false,
+        title:'',
+        bottom:'',
+        center:true,
       }),
       methods: {
         openToast: (type: string, msg: string, cover: boolean = false) => {
@@ -41,6 +46,9 @@ export default {
           page.state.msg = msg;
           page.state.type = type;
           page.state.cover = cover;
+          page.state.title = title;
+          page.state.bottom = bottom;
+          page.state.center = center
         },
         onClosed: () => console.log('closed')
       }
@@ -70,8 +78,9 @@ export default {
 |------------------------|-------------------------------------------------------------------------------|---------------|-------------------------------|
 | msg                    | 消息文本内容,支持传入HTML                                                     | String/VNode  | ""                            |
 | duration               | 展示时长（毫秒）<br>值为 0 时，toast 不会自动消失（loading类型默认为0）       | Number        | 2000                          |
-| center                 | 是否展示在页面中部（为false时展示在底部）                                     | Boolean       | true                          |
-| bottom                 | 距页面底部的距离（像素），center为false时生效                                 | Number        | 30                            |
+| title            | 标题     | String        | ''                          |
+| center              | 是否展示在页面中部（为false时展示在底部）                                     | Boolean       | true                          |
+| bottom              | 距页面底部的距离（像素或者百分比），option.center为false时生效                          | String       | "30px"                     |                | 距页面底部的距离（像素），center为false时生效                                 | Number        | 30                            |
 | text-align-center      | 多行文案是否居中                                                              | Boolean       | true                          |
 | bg-color               | 背景颜色（透明度）                                                            | String        | "rgba(0, 0, 0, 0.8)"          |
 | custom-class           | 自定义类名                                                                    | String        | ""                            |

src/packages/__VUE/toast/index.scss

@@ -51,6 +51,12 @@
       margin-bottom: -8px;
     }
   }
+  &-title {
+    font-size: 16px;
+    &:empty {
+      margin-bottom: -8px;
+    }
+  }
   &-has-icon {
     .nut-toast-icon-wrapper {
       width: 100%;

src/packages/__VUE/toast/index.taro.vue

@@ -4,7 +4,7 @@
       :class="toastBodyClass"
       v-show="visible"
       :style="{
-        bottom: center ? 'auto' : bottom + 'px',
+        bottom: center ? 'auto' : bottom,
         'background-color': coverColor
       }"
       @click="clickCover"
@@ -23,6 +23,9 @@
           <view v-if="hasIcon" class="nut-toast-icon-wrapper">
             <nut-icon size="20" color="#ffffff" :name="iconName"></nut-icon>
           </view>
+          <div v-if="title" class="nut-toast-title">
+            {{ title }}
+          </div>
           <view class="nut-toast-text" v-html="msg"></view>
         </view>
       </template>
@@ -55,8 +58,8 @@ export default create({
     },
     customClass: String,
     bottom: {
-      type: Number,
-      default: 30
+      type: String,
+      default: '30px'
     },
     size: {
       type: [String, Number],
@@ -86,6 +89,10 @@ export default create({
       type: String,
       default: 'rgba(0, 0, 0, 0)'
     },
+    title: {
+      type: String,
+      default: ''
+    },
     closeOnClickOverlay: {
       type: Boolean,
       default: false

src/packages/__VUE/toast/index.ts

@@ -6,8 +6,9 @@ const defaultOptions = {
   duration: 2000, //显示时间(毫秒)
   center: true, // 未实现
   type: 'text',
+  title: '',
   customClass: '', // 未实现
-  bottom: 30, // 未实现
+  bottom: '30px', // 未实现
   size: 'base', // 未实现
   icon: null, // 未实现
   textAlignCenter: true, // 未实现

src/packages/__VUE/toast/index.vue

@@ -4,7 +4,7 @@
       :class="toastBodyClass"
       v-show="state.mounted"
       :style="{
-        bottom: center ? 'auto' : bottom + 'px',
+        bottom: center ? 'auto' : bottom,
         'background-color': coverColor
       }"
       @click="clickCover"
@@ -19,6 +19,9 @@
         <view v-if="hasIcon" class="nut-toast-icon-wrapper">
           <nut-icon size="20" color="#ffffff" :name="icon"></nut-icon>
         </view>
+        <div v-if="title" class="nut-toast-title">
+          {{ title }}
+        </div>
         <view class="nut-toast-text" v-html="msg"></view>
       </view>
     </view>
@@ -47,8 +50,8 @@ export default create({
     type: String,
     customClass: String,
     bottom: {
-      type: Number,
-      default: 30
+      type: String,
+      default: '30px'
     },
     size: {
       type: [String, Number],
@@ -67,7 +70,6 @@ export default create({
       type: String,
       default: 'rgba(0, 0, 0, .8)'
     },
-
     onClose: Function,
     unmount: Function,
     cover: {
@@ -78,6 +80,10 @@ export default create({
       type: String,
       default: 'rgba(0, 0, 0, 0)'
     },
+    title: {
+      type: String,
+      default: ''
+    },
     closeOnClickOverlay: {
       type: Boolean,
       default: false

src/sites/mobile-taro/vue/src/feedback/pages/toast/index.vue

@@ -7,32 +7,25 @@
       :type="page.state.type"
       @closed="page.methods.onClosed"
       :cover="page.state.cover"
+      :title="page.state.title"
+      :bottom="page.state.bottom"
+      :center="page.state.center"
     />
+    <nut-cell title="Text 文字提示" is-link @click="page.methods.openToast('text', '网络失败，请稍后再试~')"></nut-cell>
     <nut-cell
-      title="Text 文字提示"
+      title="Title 标题文字"
       is-link
-      @click="page.methods.openToast('text', '网络失败，请稍后再试~')"
+      @click="page.methods.openToast('text', '网络失败，请稍后再试~', false, '标题文字')"
     ></nut-cell>
     <nut-cell
-      title="Success 成功提示"
+      title="Text 自定义位置"
       is-link
-      @click="page.methods.openToast('success', '成功提示')"
-    ></nut-cell>
-    <nut-cell
-      title="Error 失败提示"
-      is-link
-      @click="page.methods.openToast('fail', '失败提示')"
-    ></nut-cell>
-    <nut-cell
-      title="Warning 警告提示"
-      is-link
-      @click="page.methods.openToast('warn', '警告提示')"
-    ></nut-cell>
-    <nut-cell
-      title="Loading 加载提示"
-      is-link
-      @click="page.methods.openToast('loading', '加载中')"
+      @click="page.methods.openToast('text', '自定义位置', false, '', '20%', false)"
     ></nut-cell>
+    <nut-cell title="Success 成功提示" is-link @click="page.methods.openToast('success', '成功提示')"></nut-cell>
+    <nut-cell title="Error 失败提示" is-link @click="page.methods.openToast('fail', '失败提示')"></nut-cell>
+    <nut-cell title="Warning 警告提示" is-link @click="page.methods.openToast('warn', '警告提示')"></nut-cell>
+    <nut-cell title="Loading 加载提示" is-link @click="page.methods.openToast('loading', '加载中')"></nut-cell>
     <nut-cell
       title="Loading 带白色背景遮罩"
       is-link
@@ -50,14 +43,28 @@ export default {
         msg: 'toast',
         type: 'text',
         show: false,
-        cover: false
+        cover: false,
+        title: '',
+        bottom: '',
+        center: true
       }),
+
       methods: {
-        openToast: (type: string, msg: string, cover: boolean = false) => {
+        openToast: (
+          type: string,
+          msg: string,
+          cover: boolean = false,
+          title: string,
+          bottom: string,
+          center: boolean = true
+        ) => {
           page.state.show = true;
           page.state.msg = msg;
           page.state.type = type;
           page.state.cover = cover;
+          page.state.title = title;
+          page.state.bottom = bottom;
+          page.state.center = center;
         },
         onClosed: () => console.log('closed')
       }