Skip to content

Commit

Permalink
add Modal
Browse files Browse the repository at this point in the history
  • Loading branch information
@icarusion
icarusion committed Jun 4, 2018
1 parent 1b3bed1 commit 2357da9
Show file tree
Hide file tree
Showing 4 changed files with 373 additions and 0 deletions.
193 changes: 193 additions & 0 deletions src/code/modal.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,193 @@
let code = {};

code.import = `
"usingComponents": {
"i-modal": "../../dist/modal/index"
}
`;
code.usage = `
<view style="margin-top: 100px;">
<i-button bind:click="handleOpen1">普通对话框</i-button>
<i-button bind:click="handleOpen2">无标题对话框</i-button>
<i-button bind:click="handleOpen3">自定义按钮对话框</i-button>
<i-button bind:click="handleOpen4">纵向按钮，自定义颜色及图标</i-button>
<i-button bind:click="handleOpen5">异步操作</i-button>
</view>
<i-modal title="标题" visible="{{ visible1 }}" bind:ok="handleClose1" bind:cancel="handleClose1">
<view>一些文本</view>
<view>一些文本</view>
<view>一些文本</view>
<view>一些文本</view>
<view>一些文本</view>
<view>一些文本</view>
<view>一些文本</view>
<view>一些文本</view>
<view>一些文本</view>
</i-modal>
<i-modal visible="{{ visible2 }}" bind:ok="handleClose2" bind:cancel="handleClose2">
<view>这是一个无标题的对话框</view>
</i-modal>
<i-modal title="支付" visible="{{ visible3 }}" actions="{{ actions3 }}" bind:click="handleClick3">
<view>请选择支付方式</view>
</i-modal>
<i-modal title="纵向排列的按钮" visible="{{ visible4 }}" actions="{{ actions4 }}" action-mode="{{ vertical }}" bind:click="handleClick4">
</i-modal>
<i-modal title="删除确认" visible="{{ visible5 }}" actions="{{ actions5 }}" bind:click="handleClick5">
<view>删除后无法恢复哦</view>
</i-modal>
<i-message id="message" />
`;

code.js = `
// 关于本示例的 $Message ，可以查看 Message 组件的介绍
const { $Message } = require('../../dist/base/index');
Page({
data: {
visible1: false,
visible2: false,
visible3: false,
visible4: false,
visible5: false,
actions3: [
{
name: '现金支付',
color: '#2d8cf0',
},
{
name: '微信支付',
color: '#19be6b'
},
{
name: '取消'
}
],
actions4: [
{
name: '按钮1'
},
{
name: '按钮2',
color: '#ff9900'
},
{
name: '按钮3',
icon: 'search'
}
],
actions5: [
{
name: '取消'
},
{
name: '删除',
color: '#ed3f14',
loading: false
}
]
},
handleOpen1 () {
this.setData({
visible1: true
});
},
handleClose1 () {
this.setData({
visible1: false
});
},
handleOpen2 () {
this.setData({
visible2: true
});
},
handleClose2 () {
this.setData({
visible2: false
});
},
handleOpen3 () {
this.setData({
visible3: true
});
},
handleClick3 ({ detail }) {
const index = detail.index;
if (index === 0) {
$Message({
content: '点击了现金支付'
});
} else if (index === 1) {
$Message({
content: '点击了微信支付'
});
}
this.setData({
visible3: false
});
},
handleOpen4 () {
this.setData({
visible4: true
});
},
handleClick4 () {
this.setData({
visible4: false
});
},
handleOpen5 () {
this.setData({
visible5: true
});
},
handleClick5 ({ detail }) {
if (detail.index === 0) {
this.setData({
visible5: false
});
} else {
const action = [...this.data.actions5];
action[1].loading = true;
this.setData({
actions5: action
});
setTimeout(() => {
action[1].loading = false;
this.setData({
visible5: false,
actions5: action
});
$Message({
content: '删除成功！',
type: 'success'
});
}, 2000);
}
}
});
`;

export default code;
7 changes: 7 additions & 0 deletions src/router.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -135,6 +135,13 @@ const routers = [
},
component: (resolve) => require(['./views/components/toast.vue'], resolve)
},
{
path: '/components/modal',
meta: {
title: '对话框 Modal'
},
component: (resolve) => require(['./views/components/modal.vue'], resolve)
},
{
path: '*',
redirect: '/'
Expand Down
6 changes: 6 additions & 0 deletions src/views/components/action-sheet.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -136,6 +136,12 @@
<td>String</td>
<td>-</td>
</tr>
<tr>
<td>color</td>
<td>按钮文字的颜色</td>
<td>String</td>
<td>-</td>
</tr>
<tr>
<td>loading</td>
<td>按钮是否显示为加载中</td>
Expand Down
167 changes: 167 additions & 0 deletions src/views/components/modal.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,167 @@
<template>
<i-article>
<article>
<h1>Modal 对话框</h1>
<Anchor title="概述" h2></Anchor>
<p>模态对话框，在浮层中显示，引导用户进行相关操作。</p>
<Anchor title="使用指南" h2></Anchor>
<p>在 .json 中引入组件</p>
<i-code bg lang="json">{{ code.import }}</i-code>
<Anchor title="示例" h2></Anchor>
<i-code bg lang="html">{{ code.usage }}</i-code>
<br><br>
<i-code bg lang="js">{{ code.js }}</i-code>
<ad></ad>

<div class="api">
<Anchor title="API" h2></Anchor>
<Anchor title="Modal properties" h3></Anchor>
<table>
<thead>
<tr>
<th>属性</th>
<th>说明</th>
<th>类型</th>
<th>默认值</th>
</tr>
</thead>
<tbody>
<tr>
<td>visible</td>
<td>是否显示组件</td>
<td>Boolean</td>
<td>false</td>
</tr>
<tr>
<td>title</td>
<td>标题</td>
<td>String</td>
<td>-</td>
</tr>
<tr>
<td>show-ok</td>
<td>是否显示确定按钮</td>
<td>Boolean</td>
<td>true</td>
</tr>
<tr>
<td>show-cancel</td>
<td>是否显示取消按钮</td>
<td>Boolean</td>
<td>true</td>
</tr>
<tr>
<td>ok-text</td>
<td>确定按钮的文案</td>
<td>String</td>
<td>确定</td>
</tr>
<tr>
<td>cancel-text</td>
<td>取消按钮的文案</td>
<td>String</td>
<td>取消</td>
</tr>
<tr>
<td>actions</td>
<td>按钮组，具体项参照后面的表格，设置此值后，则默认的确定和取消按钮不予显示</td>
<td>Array</td>
<td>[]</td>
</tr>
<tr>
<td>action-mode</td>
<td>按钮的排列方向，可选值为 horizontal 或 vertical</td>
<td>String</td>
<td>horizontal</td>
</tr>
</tbody>
</table>
<Anchor title="Modal events" h3></Anchor>
<table>
<thead>
<tr>
<th>事件名</th>
<th>说明</th>
<th>返回值</th>
</tr>
</thead>
<tbody>
<tr>
<td>bind:click</td>
<td>点击某个按钮时触发，返回按钮所在 actions 中的索引</td>
<td>{ index }</td>
</tr>
<tr>
<td>bind:ok</td>
<td>点击确定按钮时触发</td>
<td>-</td>
</tr>
<tr>
<td>bind:cancel</td>
<td>点击取消按钮时触发</td>
<td>-</td>
</tr>
</tbody>
</table>
<Anchor title="Modal actions" h3></Anchor>
<table>
<thead>
<tr>
<th>属性</th>
<th>说明</th>
<th>类型</th>
<th>默认值</th>
</tr>
</thead>
<tbody>
<tr>
<td>name</td>
<td>按钮文案</td>
<td>String</td>
<td>-</td>
</tr>
<tr>
<td>icon</td>
<td>按钮图标</td>
<td>String</td>
<td>-</td>
</tr>
<tr>
<td>color</td>
<td>按钮文字的颜色</td>
<td>String</td>
<td>-</td>
</tr>
<tr>
<td>loading</td>
<td>按钮是否显示为加载中</td>
<td>Boolean</td>
<td>false</td>
</tr>
</tbody>
</table>
</div>
</article>
</i-article>
</template>
<script>
import iArticle from '../../components/article.vue';
import iCode from 'iCode';
import Demo from '../../components/demo.vue';
import Code from '../../code/modal';
import Anchor from '../../components/anchor.vue';
export default {
components: {
iArticle,
iCode,
Demo,
Anchor
},
data () {
return {
code: Code
}
}
}
</script>

0 comments on commit 2357da9

Please sign in to comment.