Skip to content

Commit

Permalink
add Radio
Browse files Browse the repository at this point in the history
  • Loading branch information
@icarusion
icarusion committed Jun 4, 2018
1 parent 6b9df09 commit 704df69
Show file tree
Hide file tree
Showing 3 changed files with 230 additions and 0 deletions.
73 changes: 73 additions & 0 deletions src/code/radio.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
let code = {};

code.import = `
"usingComponents": {
"i-radio-group": "../../dist/radio-group/index",
"i-radio": "../../dist/radio/index"
}
`;
code.usage = `
<i-panel title="group-水果">
<i-radio-group current="{{current}}" bindchange="handleFruitChange">
<i-radio wx:for="{{fruit}}" position="{{position}}" wx:key="{{item.id}}" value="{{item.name}}">
</i-radio>
</i-radio-group>
</i-panel>
<i-button bindclick="handleClick" type="ghost">切换单选框位置</i-button>
<i-panel title="radio-动物">
<i-radio value="{{animal}}" disabled="{{disabled}}" checked="{{checked}}" bindchange="handleAnimalChange">
</i-radio>
</i-panel>
<i-button bindclick="handleDisabled" type="ghost">切换disabled状态</i-button>
`;

code.js = `
Page({
data: {
fruit: [{
id: 1,
name: '香蕉',
}, {
id: 2,
name: '苹果'
}, {
id: 3,
name: '西瓜'
}, {
id: 4,
name: '葡萄',
}],
current: '苹果',
position: 'left',
animal: '熊猫',
checked: false,
disabled: false,
},
handleFruitChange({ detail = {} }) {
this.setData({
current: detail.value
});
},
handleClick() {
this.setData({
position: this.data.position.indexOf('left') !== -1 ? 'right' : 'left',
});
},
handleDisabled() {
this.setData({
disabled: !this.data.disabled
});
},
handleAnimalChange({ detail = {} }) {
this.setData({
checked: detail.current
});
},
});
`;

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 @@ -198,6 +198,13 @@ const routers = [
},
component: (resolve) => require(['./views/components/input.vue'], resolve)
},
{
path: '/components/radio',
meta: {
title: '单选 Radio'
},
component: (resolve) => require(['./views/components/radio.vue'], resolve)
},
{
path: '*',
redirect: '/'
Expand Down
150 changes: 150 additions & 0 deletions src/views/components/radio.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,150 @@
<template>
<i-article>
<article>
<h1>Radio 单选</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="RadioGroup properties" h3></Anchor>
<table>
<thead>
<tr>
<th>属性</th>
<th>说明</th>
<th>类型</th>
<th>默认值</th>
</tr>
</thead>
<tbody>
<tr>
<td>i-class</td>
<td>自定义 class 类名</td>
<td>String</td>
<td>-</td>
</tr>
<tr>
<td>current</td>
<td>指定当前选中的项目 value</td>
<td>String</td>
<td>-</td>
</tr>
</tbody>
</table>
<Anchor title="RadioGroup events" h3></Anchor>
<table>
<thead>
<tr>
<th>事件名</th>
<th>说明</th>
<th>返回值</th>
</tr>
</thead>
<tbody>
<tr>
<td>bind:change</td>
<td>切换选项时触发</td>
<td>current</td>
</tr>
</tbody>
</table>
<Anchor title="Radio properties" h3></Anchor>
<table>
<thead>
<tr>
<th>属性</th>
<th>说明</th>
<th>类型</th>
<th>默认值</th>
</tr>
</thead>
<tbody>
<tr>
<td>i-class</td>
<td>自定义 class 类名</td>
<td>String</td>
<td>-</td>
</tr>
<tr>
<td>value</td>
<td>当前项的 value</td>
<td>String</td>
<td>-</td>
</tr>
<tr>
<td>checked</td>
<td>当前项是否选中</td>
<td>Boolean</td>
<td>false</td>
</tr>
<tr>
<td>disabled</td>
<td>是否禁用当前项</td>
<td>Boolean</td>
<td>false</td>
</tr>
<tr>
<td>color</td>
<td>主题色</td>
<td>String</td>
<td>-</td>
</tr>
<tr>
<td>position</td>
<td>位置，可选值为 left 或 right</td>
<td>String</td>
<td>left</td>
</tr>
</tbody>
</table>
<Anchor title="Radio events" h3></Anchor>
<table>
<thead>
<tr>
<th>事件名</th>
<th>说明</th>
<th>返回值</th>
</tr>
</thead>
<tbody>
<tr>
<td>bind:change</td>
<td>切换选项时触发</td>
<td>current</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/radio';
import Anchor from '../../components/anchor.vue';
export default {
components: {
iArticle,
iCode,
Demo,
Anchor
},
data () {
return {
code: Code
}
}
}
</script>

0 comments on commit 704df69

Please sign in to comment.