wxc-toast

    title传值

    属性传参设置文案

    2.   <wxc-toast
    3.     is-show="{{$toast.show}}"
    4.     text="Hello World"></wxc-toast>
    5.   <button bindtap="showToast">属性传值</button>
    6. </template>
    8. <script>
    9. export default {
    10.   config: {
    11.     usingComponents: {
    12.       'wxc-toast': '@minui/wxc-toast'
    13.     }
    14.   },
    15.   data: {
    16.     $toast: {
    17.       show: false
    18.     }
    19.   },
    20.   /** note: 在 wxp 文件或者页面文件中请去掉 methods 包装 */
    21.   methods: {
    22.     showToast() {
    23.       this.setData({
    24.         $toast: {
    25.           show: true
    26.         }
    27.       })
    28.       setTimeout(() => {
    29.         this.setData({
    30.           $toast: {
    31.             show: false
    32.           }
    33.         })
    34.       }, 1500)
    35.     }
    36.   }
    37. }
    38. </script>
    40. <style>
    41. </style>

    自定义 icon 色

    设置 icon 颜色 #ff5777

    提示框 toast - 图2

    自定义 icon 图片

    1. <template>
    2.   <wxc-toast
    3.     src="https://s10.mogucdn.com//mlcdn/c45406/171017_885a650c746k7hajhf04aja566h1i_68x68.png"
    4.     text="{{$toast.title}}"></wxc-toast>
    5.   <button bindtap="showToast">自定义 icon 图片的 toast</button>
    6. </template>
    8. <script>
    9.   export default {
    10.     config: {
    11.       usingComponents: {
    12.         'wxc-toast': '@minui/wxc-toast'
    13.       }
    14.     },
    15.     data: {
    16.       $toast: {
    17.         show: false,
    18.         title: ""
    19.       }
    21.     /** note: 在 wxp 文件或者页面文件中请去掉 methods 包装 */
    22.     methods: {
    23.       showToast() {
    24.         this.setData({
    25.           $toast: {
    26.             show: true,
    27.             title: "自定义 icon 图片"
    28.           }
    29.         });
    30.         setTimeout(() => {
    31.          this.setData({
    32.          $toast: {
    33.          show: false,
    34.          title: ''
    35.          }
    36.          })
    37.          }, 1500)
    38.       }
    39.     }
    40.   }
    41. </script>
    43. <style>
    44. </style>

    设置 icon

    设置 icon 为 yes

    提示框 toast - 图4

    子元素传值

    1. <template>
    2.   <wxc-toast is-show="{{$toast.show}}">Hello World</wxc-toast>
    3.   <button bindtap="showToast">子元素传值</button>
    4. </template>
    6. <script>
    7.   export default {
    8.     config: {
    9.       usingComponents: {
    10.         'wxc-toast': '@minui/wxc-toast'
    11.       }
    12.     },
    13.     data: {
    14.       $toast: {
    15.         show: false
    16.     },
    17.     /** note: 在 wxp 文件或者页面文件中请去掉 methods 包装 */
    18.     methods: {
    19.       showToast() {
    20.         this.setData({
    21.           $toast: {
    22.             show: true
    23.           }
    24.         })
    26.         setTimeout(() => {
    27.           this.setData({
    28.             $toast: {
    29.               show: false
    30.             }
    31.           })
    32.         }, 1500)
    33.       }
    34.     }
    35.   }
    38. <style>
    39. </style>

    长文案支持

    长文案提示，文案换行显示

    提示框 toast - 图6

    调用show方法显示

    调用 show(message) 方法显示 toast

    1. <template>
    2.     <wxc-toast
    3.         class="J_toast"
    4.         text="Hello World"></wxc-toast>
    5.     <button bindtap="showToast">调用 show() 方法显示</button>
    6. </template>
    8. <script>
    9.   export default {
    10.     config: {
    11.       usingComponents: {
    12.         'wxc-toast': '@minui/wxc-toast'
    13.       }
    14.     },
    15.     data: {},
    16.     /** note: 在 wxp 文件或者页面文件中请去掉 methods 包装 */
    17.     methods: {
    18.       showToast() {
    19.         let $toast = this.selectComponent(".J_toast")
    20.         $toast && $toast.show('这是show方法传值')
    21.       }
    22.     }
    23.   }
    24. </script>
    26. <style>
    27. </style>

    v1.0.8（2018.03.29)

    • show() 方法增加 message 参数

    v1.0.7（2018.01.16)

    • icon-image 属性更改为 src，1.0.7 及以上版本的 min 支持本地图片路径

    v1.0.6（2018.01.09)

    • z-index 层级规范方案修改

    v1.0.3（2018.01.04）

    • 修复自定义 icon 时，icon 的颜色样式问题，规范 z-index 规范

    v1.0.2（2017.11.02）

    • update .npmignore

    v1.0.1（2017.10.24）

    • 初始版本