wxc-toast

MinUI 小程序组件 - 提示框

Install

$ min install @minui/wxc-toast

Demos

title传值

属性传参设置文案

<template>
  <wxc-toast
    is-show="{{$toast.show}}"
    text="Hello World"></wxc-toast>
  <button bindtap="showToast">属性传值</button>
</template>
<script>
export default {
  config: {
    usingComponents: {
      'wxc-toast': '@minui/wxc-toast'
    }
  },
  data: {
    $toast: {
      show: false
    }
  },
  /** note: 在 wxp 文件或者页面文件中请去掉 methods 包装 */
  methods: {
    showToast() {
      this.setData({
        $toast: {
          show: true
        }
      })
      setTimeout(() => {
        this.setData({
          $toast: {
            show: false
          }
        })
      }, 1500)
    }
  }
}
</script>
<style>
</style>

自定义 icon 色

设置 icon 颜色 #ff5777

<template>
  <wxc-toast
    is-show="{{$toast.show}}"
    text="分享成功"
    icon="yes"
    icon-color="#ff5777"
    ></wxc-toast>
  <button bindtap="showToast">自定义 icon 颜色的 toast</button>
</template>
<script>
  export default {
    config: {
      usingComponents: {
        'wxc-toast': '@minui/wxc-toast'
      }
    },
    data: {
      $toast: {
        show: false
      }
    },
    /** note: 在 wxp 文件或者页面文件中请去掉 methods 包装 */
    methods: {
      showToast() {
        this.setData({
          $toast: {
            show: true
          }
        })
        setTimeout(() => {
          this.setData({
          $toast: {
            show: false
          }
        })
      }, 1500)
      }
    }
  }
</script>
<style>
</style>

自定义 icon 图

自定义 icon 图片

<template>
  <wxc-toast
    is-show="{{$toast.show}}"
    src="https://s10.mogucdn.com//mlcdn/c45406/171017_885a650c746k7hajhf04aja566h1i_68x68.png"
    text="{{$toast.title}}"></wxc-toast>
  <button bindtap="showToast">自定义 icon 图片的 toast</button>
</template>
<script>
  export default {
    config: {
      usingComponents: {
        'wxc-toast': '@minui/wxc-toast'
      }
    },
    data: {
      $toast: {
        show: false,
        title: ""
      }
    },
    /** note: 在 wxp 文件或者页面文件中请去掉 methods 包装 */
    methods: {
      showToast() {
        this.setData({
          $toast: {
            show: true,
            title: "自定义 icon 图片"
          }
        });
        setTimeout(() => {
         this.setData({
         $toast: {
         show: false,
         title: ''
         }
         })
         }, 1500)
      }
    }
  }
</script>
<style>
</style>

设置 icon

设置 icon 为 yes

<template>
  <wxc-toast
    is-show="{{$toast.show}}"
    icon="yes"
    >分享成功</wxc-toast>
  <button bindtap="showToast">一个带 icon 的 toast</button>
</template>
<script>
  export default {
    config: {
      usingComponents: {
        'wxc-toast': '@minui/wxc-toast'
      }
    },
    data: {
      $toast: {
        show: false
      }
    },
    /** note: 在 wxp 文件或者页面文件中请去掉 methods 包装 */
    methods: {
      showToast() {
        this.setData({
          $toast: {
            show: true
          }
        })
        setTimeout(() => {
          this.setData({
          $toast: {
            show: false
          }
        })
      }, 1500)
      }
    }
  }
</script>
<style>
</style>

子元素传值

子元素设置文案

<template>
  <wxc-toast is-show="{{$toast.show}}">Hello World</wxc-toast>
  <button bindtap="showToast">子元素传值</button>
</template>
<script>
  export default {
    config: {
      usingComponents: {
        'wxc-toast': '@minui/wxc-toast'
      }
    },
    data: {
      $toast: {
        show: false
      }
    },
    /** note: 在 wxp 文件或者页面文件中请去掉 methods 包装 */
    methods: {
      showToast() {
        this.setData({
          $toast: {
            show: true
          }
        })
        setTimeout(() => {
          this.setData({
            $toast: {
              show: false
            }
          })
        }, 1500)
      }
    }
  }
</script>
<style>
</style>

长文案支持

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

<template>
  <wxc-toast
    is-show="{{$toast.show}}"
    text="当文案比较多需要换行的时候那就需要换行"></wxc-toast>
  <button bindtap="showToast">一个长文案 toast</button>
</template>
<script>
  export default {
    config: {
      usingComponents: {
        'wxc-toast': '@minui/wxc-toast'
      }
    },
    data: {
      $toast: {
        show: false
      }
    },
    /** note: 在 wxp 文件或者页面文件中请去掉 methods 包装 */
    methods: {
      showToast() {
        this.setData({
          $toast: {
            show: true
          }
        })
        setTimeout(() => {
          this.setData({
          $toast: {
            show: false
          }
        })
      }, 1500)
      }
    }
  }
</script>
<style>
</style>

调用show方法显示

调用 show(message) 方法显示 toast

<template>
    <wxc-toast
        class="J_toast"
        text="Hello World"></wxc-toast>
    <button bindtap="showToast">调用 show() 方法显示</button>
</template>
<script>
  export default {
    config: {
      usingComponents: {
        'wxc-toast': '@minui/wxc-toast'
      }
    },
    data: {},
    /** note: 在 wxp 文件或者页面文件中请去掉 methods 包装 */
    methods: {
      showToast() {
        let $toast = this.selectComponent(".J_toast")
        $toast && $toast.show('这是show方法传值')
      }
    }
  }
</script>
<style>
</style>

API

Toast【props】

Toast【methods】

Link

Preview

ChangeLog

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）

• 初始版本