https://github.com/fudiwei/wepy2-com-toast

A component for displaying a toast based on wepy.js 2.x. 基于 WePY2 的提示框组件。
https://github.com/fudiwei/wepy2-com-toast

wechat-miniprogram wepy wepy-com wepy2

Last synced: 3 months ago
JSON representation

A component for displaying a toast based on wepy.js 2.x. 基于 WePY2 的提示框组件。

• Host: GitHub
• URL: https://github.com/fudiwei/wepy2-com-toast
• Owner: fudiwei
• License: mit
• Archived: true
• Created: 2019-11-02T13:27:10.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2021-07-30T03:24:12.000Z (over 3 years ago)
• Last Synced: 2024-07-27T14:34:07.242Z (3 months ago)
• Topics: wechat-miniprogram, wepy, wepy-com, wepy2
• Homepage:
• Size: 5.86 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-wepy - wepy2-com-toast：基于wepy2的Toast组件

README

        
# wepy2-com-toast

一个 toast 消息框组件。

此组件依赖 [wepy](https://github.com/Tencent/wepy) 2.0.0+。

如果你正在使用 wepy 1.x，请移步 [wepy-com-toast](https://github.com/fudiwei/wepy-com-toast)。

---

## 用法

安装：

``` shell

npm install @skit/wepy2-com-toast --save

```

导入：

``` html

    

{

    usingComponents: {

        'ui-toast': 'module:@skit/wepy2-com-toast'

    }

}

    import Wepy from 'wepy';

    Wepy.page({

        onShow() {

            this.$refs['ui-toast'].show('hello world');

        }

    });

```

> 注意：当前版本的 wepy-cli 存在 Bug，无法打包通过 `node_modules` 引入的 wpy 组件，解决方案请参考 [Issue#2554](https://github.com/Tencent/wepy/issues/2554)。

### 可配置项

#### 属性：

*无*

#### 方法：

``` javascript

/**

 * 显示消息对话框。

 * @param {Object} options 配置项。

 * @param {String} options.content 提示文本。

 * @param {String} options.position 对话框出现在屏幕的位置，支持“top”、“center”、“bottom”，默认值为“bottom”。

 * @param {String} options.duration 指定对话框若干毫秒后自动消失，默认值为“2000”。

 */

this.$refs['ui-toast'].show({

    content: '这是一条消息',

    position: 'center',

    duration: 3000

});

/**

 * 显示消息对话框。

 * @param {String} content 消息文本。

 */

this.$refs['ui-toast'].show('这是一条消息');

/**

 * 隐藏消息对话框。

 */

this.$refs['ui-toast'].hide();

```