Skip to content

Commit

Permalink
升级mip-toast组，动态传提示文字 (#273)
Browse files Browse the repository at this point in the history
  • Loading branch information
@caoru828
caoru828 authored Sep 20, 2018
1 parent ba5c4e6 commit 8592723
Show file tree
Hide file tree
Showing 6 changed files with 225 additions and 171 deletions.
44 changes: 36 additions & 8 deletions components/mip-toast/README.md
View file
Original file line number Diff line number Diff line change
@@ -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提示框）
提示框组件 自定义内容

## 示例

Expand Down Expand Up @@ -79,14 +79,43 @@

### station

说明：提示框所在位置，可选 top center bottom
说明：提示框所在位置，可选 top center bottom

必选项：否

类型 ：`String`

默认值："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/)

## 接收事件

Expand All @@ -96,5 +125,4 @@

注意，每次其他组件触发抛出事件后，也可以触发`mip-toast`的`hidden`事件，并传当前状态是隐藏


组件间通信请看文档 https://www.mipengine.org/doc/3-widget/6-help/3-mip-normal.html
49 changes: 24 additions & 25 deletions components/mip-toast/example/mip-toast.html
View file
Original file line number Diff line number Diff line change
@@ -1,29 +1,28 @@
<!DOCTYPE html>
<html mip>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<title>MIP page</title>
<link rel="canonical" href="对应的原页面地址">
<link rel="stylesheet" href="https://c.mipcdn.com/static/v2/mip.css">
<style mip-custom>

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<title>toast 组件</title>
<link rel="canonical" href="对应的原页面地址">
<link rel="stylesheet" href="https://c.mipcdn.com/static/v2/mip.css">
<style mip-custom>
/* 自定义样式 */
</style>
</head>
<body>
<div>
<mip-test on="show:demo.show"></mip-test>
<mip-toast
id= "demo"
info-text="最多七个中文字"
station = "center"
auto-close = "true"
>
</mip-toast>
</div>
<script src="https://c.mipcdn.com/static/v2/mip.js"></script>
<script src="/mip-toast/mip-toast.js"></script>
<!-- <script src="/mip-test/mip-test.js"></script> -->
<script src="https://caoru828.github.io/my_json/mip-test/mip-test.js"></script>
</body>

</style>
</head>

<body>
<div>
<mip-test on="show:demo.show"></mip-test>
<mip-toast id="demo" info-text="默认提示框" station="center" auto-close="true" close-time="2">
</mip-toast>
</div>
<script src="https://c.mipcdn.com/static/v2/mip.js"></script>
<script src="/mip-toast/mip-toast.js"></script>
<!-- 测试组件，模拟抛出事件 -->
<script src="https://caoru828.github.io/my_json/mip-test/mip-test.js"></script>
</body>

</html>
51 changes: 25 additions & 26 deletions components/mip-toast/example/mip-toast1.html
View file
Original file line number Diff line number Diff line change
@@ -1,30 +1,29 @@
<!DOCTYPE html>
<html mip>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<title>MIP page</title>
<link rel="canonical" href="对应的原页面地址">
<link rel="stylesheet" href="https://c.mipcdn.com/static/v2/mip.css">
<style mip-custom>

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<title>MIP page</title>
<link rel="canonical" href="对应的原页面地址">
<link rel="stylesheet" href="https://c.mipcdn.com/static/v2/mip.css">
<style mip-custom>
/* 自定义样式 */
</style>
</head>
<body>
<div>
<mip-test on="show:demo.show"></mip-test>
<mip-toast
id= "demo"
info-icon-src="https://www.mipengine.org/static/img/sample_mip_logo.png"
info-text="最多七个中文字"
station = "top"
auto-close = "true"
>
</mip-toast>
</div>
<script src="https://c.mipcdn.com/static/v2/mip.js"></script>
<script src="/mip-toast/mip-toast.js"></script>
<!-- <script src="/mip-test/mip-test.js"></script> -->
<script src="https://caoru828.github.io/my_json/mip-test/mip-test.js"></script>
</body>

</style>
</head>

<body>
<div>
<mip-test on="show:demo.show"></mip-test>
<mip-toast id="demo" info-icon-src="https://www.mipengine.org/static/img/sample_mip_logo.png" info-text="默认提示框文字Top+图片"
station="top" auto-close="true" close-time="2">
</mip-toast>
</div>
<script src="https://c.mipcdn.com/static/v2/mip.js"></script>
<script src="/mip-toast/mip-toast.js"></script>
<!-- 测试组件，模拟抛出事件 -->
<script src="https://caoru828.github.io/my_json/mip-test/mip-test.js"></script>
</body>

</html>
51 changes: 25 additions & 26 deletions components/mip-toast/example/mip-toast2.html
View file
Original file line number Diff line number Diff line change
@@ -1,30 +1,29 @@
<!DOCTYPE html>
<html mip>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<title>MIP page</title>
<link rel="canonical" href="对应的原页面地址">
<link rel="stylesheet" href="https://c.mipcdn.com/static/v2/mip.css">
<style mip-custom>

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<title>MIP page</title>
<link rel="canonical" href="对应的原页面地址">
<link rel="stylesheet" href="https://c.mipcdn.com/static/v2/mip.css">
<style mip-custom>
/* 自定义样式 */
</style>
</head>
<body>
<div>
<mip-test on="show:demo.show"></mip-test>
<mip-toast
id= "demo"
info-icon-src="https://www.mipengine.org/static/img/sample_mip_logo.png"
info-text="最多七个中文字"
station = "center"
auto-close = "true"
>
</mip-toast>
</div>
<script src="https://c.mipcdn.com/static/v2/mip.js"></script>
<script src="/mip-toast/mip-toast.js"></script>
<!-- <script src="/mip-test/mip-test.js"></script> -->
<script src="https://caoru828.github.io/my_json/mip-test/mip-test.js"></script>
</body>

</style>
</head>

<body>
<div>
<mip-test on="show:demo.show"></mip-test>
<mip-toast id="demo" info-icon-src="https://www.mipengine.org/static/img/sample_mip_logo.png" info-text="默认提示框文字Center+图片"
station="center" auto-close="true" close-time="2">
</mip-toast>
</div>
<script src="https://c.mipcdn.com/static/v2/mip.js"></script>
<script src="/mip-toast/mip-toast.js"></script>
<!-- 测试组件，模拟抛出事件 -->
<script src="https://caoru828.github.io/my_json/mip-test/mip-test.js"></script>
</body>

</html>
51 changes: 25 additions & 26 deletions components/mip-toast/example/mip-toast3.html
View file
Original file line number Diff line number Diff line change
@@ -1,30 +1,29 @@
<!DOCTYPE html>
<html mip>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<title>MIP page</title>
<link rel="canonical" href="对应的原页面地址">
<link rel="stylesheet" href="https://c.mipcdn.com/static/v2/mip.css">
<style mip-custom>

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<title>MIP page</title>
<link rel="canonical" href="对应的原页面地址">
<link rel="stylesheet" href="https://c.mipcdn.com/static/v2/mip.css">
<style mip-custom>
/* 自定义样式 */
</style>
</head>
<body>
<div>
<mip-test on="show:demo.show"></mip-test>
<mip-toast
id= "demo"
info-icon-src="https://www.mipengine.org/static/img/sample_mip_logo.png"
info-text="最多七个中文字"
station = "bottom"
auto-close = "true"
>
</mip-toast>
</div>
<script src="https://c.mipcdn.com/static/v2/mip.js"></script>
<script src="/mip-toast/mip-toast.js"></script>
<!-- <script src="/mip-test/mip-test.js"></script> -->
<script src="https://caoru828.github.io/my_json/mip-test/mip-test.js"></script>
</body>

</style>
</head>

<body>
<div>
<mip-test on="show:demo.show"></mip-test>
<mip-toast id="demo" info-icon-src="https://www.mipengine.org/static/img/sample_mip_logo.png" info-text="默认提示框文字Bottom+图片"
station="bottom" auto-close="true" close-time="2">
</mip-toast>
</div>
<script src="https://c.mipcdn.com/static/v2/mip.js"></script>
<script src="/mip-toast/mip-toast.js"></script>
<!-- 测试组件，模拟抛出事件 -->
<script src="https://caoru828.github.io/my_json/mip-test/mip-test.js"></script>
</body>

</html>
Loading

0 comments on commit 8592723

Please sign in to comment.