From 8592723b1b445ad9cd222df66ae4aa68ab7b46be Mon Sep 17 00:00:00 2001 From: CaoRu <18846432589@163.com> Date: Thu, 20 Sep 2018 20:19:54 +0800 Subject: [PATCH] =?UTF-8?q?=20=E5=8D=87=E7=BA=A7mip-toast=E7=BB=84?= =?UTF-8?q?=EF=BC=8C=E5=8A=A8=E6=80=81=E4=BC=A0=E6=8F=90=E7=A4=BA=E6=96=87?= =?UTF-8?q?=E5=AD=97=20(#273)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/mip-toast/README.md | 44 +++++- components/mip-toast/example/mip-toast.html | 49 +++--- components/mip-toast/example/mip-toast1.html | 51 ++++--- components/mip-toast/example/mip-toast2.html | 51 ++++--- components/mip-toast/example/mip-toast3.html | 51 ++++--- components/mip-toast/mip-toast.vue | 150 +++++++++++-------- 6 files changed, 225 insertions(+), 171 deletions(-) diff --git a/components/mip-toast/README.md b/components/mip-toast/README.md index 14344a5a..ddbe993c 100644 --- a/components/mip-toast/README.md +++ b/components/mip-toast/README.md @@ -1,16 +1,16 @@ # `mip-toast` + 弹出框（只有文字 文字和图标 位置上 中 下） -标题|内容 -----|---- -类型| -| 支持布局 | responsive, fixed-height, fixed, container | +| 标题 | 内容 | +| -------- | ----------------------------------------------------- | +| 类型 | +| 支持布局 | responsive, fixed-height, fixed, container | | 所需脚本 | https://c.mipcdn.com/static/v2/mip-toast/mip-toast.js | - ## 说明 -提示框组件 自定义内容 可配置确认取消按钮（confirm确认框） 和 只有确认按钮（alert提示框） +提示框组件 自定义内容 ## 示例 @@ -79,7 +79,7 @@ ### station -说明：提示框所在位置，可选 top center bottom +说明：提示框所在位置，可选 top center bottom 必选项：否 @@ -87,6 +87,35 @@ 默认值："center" +### auto-close + +说明：是否自动关闭 + +必选项：否 + +类型 ：`Boolean` + +默认值：true + +### close-time + +说明：关闭事件 + +必选项：否 + +类型 ：`Number` + +默认值：2.5 + +## 向 toast 组件抛出事件 + +抛出事件 show 或 hidden 事件 eg: this.$emit('show') eg: this.$emit('hidden') + +静态传参数：直接在 toast 组件里 info-text 后边加字符串 eg: this.$emit('show') + +动态传参数：抛出 show 事件可以传参数，传的参数就是想要显示的参数 eg: this.$emit('show', showString) + +[详情 demo 请看](https://caoru828.github.io/my_json/mip-test-demo/) ## 接收事件 @@ -96,5 +125,4 @@ 注意，每次其他组件触发抛出事件后，也可以触发`mip-toast`的`hidden`事件，并传当前状态是隐藏 - 组件间通信请看文档 https://www.mipengine.org/doc/3-widget/6-help/3-mip-normal.html diff --git a/components/mip-toast/example/mip-toast.html b/components/mip-toast/example/mip-toast.html index 838ae6fd..c433fb24 100644 --- a/components/mip-toast/example/mip-toast.html +++ b/components/mip-toast/example/mip-toast.html @@ -1,29 +1,28 @@ - - - - MIP page - - - - - -
- - - -
- - - - - + + + + + +
+ + + +
+ + + + + + diff --git a/components/mip-toast/example/mip-toast1.html b/components/mip-toast/example/mip-toast1.html index eaf311a3..4335770f 100644 --- a/components/mip-toast/example/mip-toast1.html +++ b/components/mip-toast/example/mip-toast1.html @@ -1,30 +1,29 @@ - - - - MIP page - - - - - -
- - - -
- - - - - + + + + + +
+ + + +
+ + + + + + diff --git a/components/mip-toast/example/mip-toast2.html b/components/mip-toast/example/mip-toast2.html index b234a650..0e1f3e8b 100644 --- a/components/mip-toast/example/mip-toast2.html +++ b/components/mip-toast/example/mip-toast2.html @@ -1,30 +1,29 @@ - - - - MIP page - - - - - -
- - - -
- - - - - + + + + + +
+ + + +
+ + + + + + diff --git a/components/mip-toast/example/mip-toast3.html b/components/mip-toast/example/mip-toast3.html index 6b201161..c0471f40 100644 --- a/components/mip-toast/example/mip-toast3.html +++ b/components/mip-toast/example/mip-toast3.html @@ -1,30 +1,29 @@ - - - - MIP page - - - - - -
- - - -
- - - - - + + + + + +
+ + + +
+ + + + + + diff --git a/components/mip-toast/mip-toast.vue b/components/mip-toast/mip-toast.vue index 23fa94fc..d69df054 100644 --- a/components/mip-toast/mip-toast.vue +++ b/components/mip-toast/mip-toast.vue @@ -6,18 +6,88 @@ :class="station" type="top" > -
- -

{{ infoText }}

+
+
+ +

{{ showToastText }}

+
+ - -