drip-public/iview
5
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

merge upstream/master

Browse source
This commit is contained in:
jingsam 2016-11-09 18:37:24 +08:00
commit f36b29707c
47 changed files with 1159 additions and 347 deletions
Download patch file Download diff file Expand all files Collapse all files

2
test/app.vue
View file

@ -31,6 +31,7 @@ li + li {
<li><a v-link="'/more'">More</a></li>
<li><a v-link="'/page'">Page</a></li>
<li><a v-link="'/poptip'">Poptip</a></li>
<li><a v-link="'/tooltip'">Tooltip</a></li>
<li><a v-link="'/radio'">Radio</a></li>
<li><a v-link="'/select'">Select</a></li>
<li><a v-link="'/slider'">Slider</a></li>
@ -38,6 +39,7 @@ li + li {
<li><a v-link="'/switch'">Switch</a></li>
<li><a v-link="'/alert'">Alert</a></li>
<li><a v-link="'/tag'">Tag</a></li>
<li><a v-link="'/input'">Input</a></li>
</ul>
</nav>
<router-view></router-view>

10
test/main.js
View file

@ -80,6 +80,16 @@ router.map({
component: function (resolve) {
require(['./routers/tag.vue'], resolve);
}
},
'/input': {
component: function (resolve) {
require(['./routers/input.vue'], resolve);
}
},
'/tooltip': {
component: function (resolve) {
require(['./routers/tooltip.vue'], resolve);
}
}
});

121
test/routers/input.vue Normal file
View file

@ -0,0 +1,121 @@
<template>
<i-input icon="ios-clock-outline" style="width:200px;" :value.sync="v" @on-enter="enter" @on-click="iconclick" size="large" placeholder="请输入"></i-input>
<i-input icon="ios-clock-outline" style="width:200px;" :value.sync="v" @on-enter="enter" placeholder="请输入"></i-input>
<i-input icon="ios-clock-outline" style="width:200px;" :value.sync="v" @on-enter="enter" size="small" placeholder="请输入"></i-input>
<br>
<br>
<i-input style="width:200px;" :value.sync="v" @on-enter="enter" size="large" placeholder="请输入"></i-input>
<i-input style="width:200px;" :value.sync="v" @on-enter="enter" placeholder="请输入"></i-input>
<i-input style="width:200px;" :value.sync="v" @on-enter="enter" @on-change="change" size="small" placeholder="请输入"></i-input>
{{ v }}
<br>
<br>
<i-input placeholder="this is something" style="width:200px;" :value.sync="t" type="textarea" :autosize="autosize"></i-input>
{{ t }}
<br>
<br>
<div style="width: 400px">
<i-input :value.sync="v">
<span slot="prepend">http://</span>
<span slot="append">
<i-button icon="ios-search"></i-button>
</span>
</i-input>
<br>
<i-input :value.sync="v">
<span slot="prepend">http://</span>
<span slot="append"><Icon type="ios-search"></Icon></span>
</i-input>
<br>
<i-input :value.sync="v" size="small">
<span slot="prepend">http://</span>
<span slot="append"><Icon type="ios-search"></Icon></span>
</i-input>
<br>
<i-input :value.sync="v" size="large">
<i-select :model.sync="select1" slot="prepend" style="width: 80px">
<i-option value="http">http://</i-option>
<i-option value="https">https://</i-option>
</i-select>
<i-select :model.sync="select2" slot="append" style="width: 70px">
<i-option value="com">.com</i-option>
<i-option value="cn">.cn</i-option>
<i-option value="net">.net</i-option>
<i-option value="io">.io</i-option>
</i-select>
</i-input>
<br>
<i-input :value.sync="v">
<i-select :model.sync="select1" slot="prepend" style="width: 80px">
<i-option value="http">http://</i-option>
<i-option value="https">https://</i-option>
</i-select>
<i-select :model.sync="select2" slot="append" style="width: 70px">
<i-option value="com">.com</i-option>
<i-option value="cn">.cn</i-option>
<i-option value="net">.net</i-option>
<i-option value="io">.io</i-option>
</i-select>
</i-input>
<br>
<i-input :value.sync="v" size="small">
<i-select :model.sync="select1" slot="prepend" style="width: 80px">
<i-option value="http">http://</i-option>
<i-option value="https">https://</i-option>
</i-select>
<i-select :model.sync="select2" slot="append" style="width: 70px">
<i-option value="com">.com</i-option>
<i-option value="cn">.cn</i-option>
<i-option value="net">.net</i-option>
<i-option value="io">.io</i-option>
</i-select>
</i-input>
<Input-number :value="2" size="small"></Input-number>
<Input-number :value="2"></Input-number>
<Input-number :value="2" size="large"></Input-number>
</div>
</template>
<script>
import { iInput, Icon, iButton, iSelect, iOption, InputNumber } from 'iview';
export default {
components: {
iInput,
Icon,
iButton,
iSelect,
iOption,
InputNumber
},
props: {
},
data () {
return {
v: 'hello',
t: '',
autosize: {
minRows: 2,
maxRows: 5
},
select1: 'http',
select2: 'com'
}
},
computed: {
},
methods: {
enter () {
console.log(123)
},
iconclick () {
console.log('iconclicked')
},
change (val) {
console.log(val)
}
}
}
</script>

118
test/routers/message.vue
View file

@ -1,65 +1,117 @@
<template>
<i-button @click="info">info</i-button>
<i-button @click="success">success</i-button>
<i-button @click="error">error</i-button>
<i-button @click="warning">warning</i-button>
<i-button @click="loading">手动消失</i-button>
<i-button @click="destroy">destroy</i-button>
<Alert closable>消息提示文案</Alert>
<Alert type="success" show-icon closable>
成功提示文案
<span slot="desc">成功的提示描述文案成功的提示描述文案成功的提示描述文案成功的提示描述文案成功的提示描述文案</span>
</Alert>
<Card :bordered="false">
<p slot="title">无边框标题</p>
<p>无边框内容填充无边框内容填充无边框内容填充无边框内容填充无边框内容填充无边框内容填充无边框内容填充无边框内容填充无边框内容填充无边框内容填充无边框内容填充。</p>
</Card>
<i-button @click="mInfo">m信息</i-button>
<i-button @click="open">打开</i-button>
<i-button @click="info2">消息2</i-button>
<i-button @click="info">消息</i-button>
<i-button @click="success">成功</i-button>
<i-button @click="warning">警告</i-button>
<i-button @click="error">错误</i-button>
<i-button @click="modal1 = true"></i-button>
<Modal
:visible.sync="modal1"
title="普通的Modal对话框标题">
<p>对话框内容</p>
<p>对话框内容</p>
<p>对话框内容</p>
</Modal>
</template>
<script>
import { Message, iButton, Alert, Card } from 'iview';
import { Message, Button, Alert, Card, Notice, iButton, Modal } from 'iview';
export default {
components: {
Message,
iButton,
Alert,
Card
Card,
Notice,
iButton,
Modal
},
props: {
},
data () {
return {
modal1: true
}
},
computed: {
},
methods: {
open () {
Notice.open({
duration: 1000,
title: '这是通知标题',
desc: '这里是通知描述这里,是通知描述这里是通知描述这里,是通知描述这里,是通知描述这里是通知描述这里是通知描述'
})
},
info () {
Message.info('欢迎来到iView', 1000, () => {
console.log('close info');
Notice.info({
duration: 1000,
title: '这是通知标题',
// desc: '这里是通知描述这里,是通知描述这里是通知描述这里,是通知描述这里,是通知描述这里是通知描述这里是通知描述'
});
},
info2 () {
Notice.open({
duration: 1000,
title: '这是通知标题这是通知标题这是通知标题这是通知标题这是通知标题这是通知标题'
});
Notice.info({
duration: 1000,
title: '这是通知标题这是通知标题这是通知标题这是通知标题这是通知标题这是通知标题'
});
Notice.open({
duration: 1000,
title: '这是通知标题这是通知标题这是通知标题这是通知标题这是通知标题这是通知标题',
desc: '这里是通知描述这里,是通知描述这里是通知描述这里,是通知描述这里,是通知描述这里是通知描'
});
Notice.info({
duration: 1000,
title: '这是通知标题这是通知标题这是通知标题这是通知标题这是通知标题这是通知标题',
desc: '这里是通知描述这里,是通知描述这里是通知描述这里,是通知描述这里,是通知描述这里是通知描'
});
Notice.success({
duration: 1000,
title: '这是通知标题',
desc: '这里是通知描述这里,是通知描述这里是通知描述这里,是通知描述这里,是通知描述这里是通知描'
});
Notice.warning({
duration: 1000,
title: '这是通知标题',
desc: '这里是通知描述这里,是通知描述这里是通知描述这里,是通知描述这里,是通知描述这里是通知描'
});
Notice.error({
duration: 1000,
title: '这是通知标题',
desc: '这里是通知描述这里,是通知描述这里是通知描述这里,是通知描述这里,是通知描述这里是通知描'
});
},
success () {
Message.success('成功啦', 5, () => {
console.log('close successs');
Notice.success({
duration: 1000,
title: '这是通知标题',
desc: '这里是通知描述这里,是通知描述这里是通知描述这里,是通知描述这里,是通知描述这里是通知描'
});
},
warning () {
Notice.warning({
duration: 1000,
title: '这是通知标题',
desc: '这里是通知描述这里,是通知描述这里是通知描述这里,是通知描述这里,是通知描述这里是通知描'
});
},
error () {
Message.error('错误啦');
Notice.error({
duration: 1000,
title: '这是通知标题',
desc: '这里是通知描述这里,是通知描述这里是通知描述这里,是通知描述这里,是通知描述这里是通知描'
});
},
warning () {
Message.warning('来个警告');
},
loading () {
const hide = Message.loading('我是loading', 0);
setTimeout(hide, 5000);
},
destroy () {
Message.destroy();
mInfo () {
Message.info('飞机飞士大夫', 1000);
}
},
ready () {

60
test/routers/page.vue
View file

@ -1,59 +1,13 @@
<style>
</style>
<template>
<Page :total="40" size="small"></Page>
<Page :total="40" size="small" show-elevator show-sizer></Page>
<Page :total="40" size="small" show-total></Page>
<Page :total="100" show-sizer :page-size="5" :page-size-opts="[5,10,15,20]"></Page>
<Page :total="1000" show-sizer show-elevator show-total></Page>
<br><br>
<Page :total="1000" show-sizer show-elevator show-total size="small"></Page>
<br><br>
<Page :current="2" :total="50" simple></Page>
</template>
<script>
import { Modal, Button, Message, Page } from 'iview';
import { Page } from 'iview';
export default {
components: { Modal, Button, Page },
props: {
},
data () {
return {
}
},
methods: {
info () {
Modal.info({
title: '这是对话框标题',
content: `<p>这是对话框内容</p><p>这是对话框内容这是对话框内容这是对话框内容这是对话框内容这是对话框内容这是对话框内容这是对话框内容这是对话框内容这是对话框内容这是对话框内容</p>`
});
},
success () {
Modal.success();
},
warning () {
Modal.warning();
},
error () {
Modal.error();
},
confirm () {
Modal.confirm({
// okText: 'OK',
// cancelText: 'Cancel',
title: '删除提示',
content: '删除后将不可找回，您确定要删除吗？',
onCancel () {
Message.info('cancel it');
},
onOk () {
setTimeout(() => {
Modal.remove();
Message.success('OK!');
}, 2000);
},
loading: true
});
}
}
components: { Page }
}
</script>

160
test/routers/poptip.vue
View file

@ -27,57 +27,105 @@
padding: 8px 16px;
text-align: left;
}
.tip{
width: 24px;
position: fixed;
top: 10px;
right: 10px;
}
.tip-inner{
width: 24px;
height: 24px;
line-height: 22px;
text-align: center;
background: #fff;
border: 1px solid #3399ff;
color: #3399ff;
border-radius: 50%;
cursor: pointer;
}
.tip-content{
width: 200px;
height: 100px;
white-space: normal;
}
</style>
<template>
<Tooltip content="这里是提示文字">
当鼠标经过这段文字时，会显示一个气泡框
</Tooltip>
<div class="tooltip_out">
<Poptip>
<a>click 激活</a>
<div slot="title"><i>自定义标题</i></div>
<div slot="content">
<a>关闭提示框</a>
</div>
</Poptip>
<Poptip placement="right" width="300">
<i-button type="ghost">click 激活</i-button>
<div class="api" slot="content">
<table>
<thead>
<tr>
<th>属性</th>
<th>说明</th>
<th>类型</th>
<th>默认值</th>
</tr>
</thead>
<tbody>
<tr>
<td>content</td>
<td>显示的内容</td>
<td>String | Number</td>
<td>空</td>
</tr>
<tr>
<td>placement</td>
<td>提示框出现的位置，可选值为<code>top</code><code>top-start</code><code>top-end</code><code>bottom</code><code>bottom-start</code><code>bottom-end</code><code>left</code><code>left-start</code><code>left-end</code><code>right</code><code>right-start</code><code>right-end</code></td>
<td>String</td>
<td>bottom</td>
</tr>
<tr>
<td>disabled</td>
<td>是否禁用提示框</td>
<td>Boolean</td>
<td>false</td>
</tr>
<tr>
<td>delay</td>
<td>延迟显示，单位毫秒</td>
<td>Number</td>
<td>0</td>
</tr>
</tbody>
</table>
</div>
</Poptip>
<!--<Tooltip placement="top" content="Tooltip 文字提示">-->
<!--<strong>-->
<!--<a>Link</a>-->
<!--</strong>-->
<!--</Tooltip>-->
<!--<Poptip trigger="hover" title="提示标题" content="提示内容">-->
<!--<i-button>hover 激活</i-button>-->
<!--</Poptip>-->
<!--<Poptip content="提示内容" title="tip">-->
<!--<i-button>click 激活</i-button>-->
<!--</Poptip>-->
<!--<Poptip content="提示内容">-->
<!--<div slot="title"><i>自定义标题</i></div>-->
<!--<i-button>click 激活</i-button>-->
<!--</Poptip>-->
<!--<Tooltip class="tip" placement="left-start" trigger="hover">-->
<!--<div class="tip-inner">-->
<!--<Icon type="information"></Icon>-->
<!--</div>-->
<!--<div class="tip-content" slot="content">-->
<!--<p>iView 最新版本为 0.9.7，该版本对很多组件 UI 进行了调整</p>-->
<!--</div>-->
<!--</Tooltip>-->
<!--<Poptip>-->
<!--<a>click 激活</a>-->
<!--<div slot="title"><i>自定义标题</i></div>-->
<!--<div slot="content">-->
<!--<a>关闭提示框</a>-->
<!--</div>-->
<!--</Poptip>-->
<!--<Poptip placement="right" width="300">-->
<!--<i-button type="ghost">click 激活</i-button>-->
<!--<div class="api" slot="content">-->
<!--<table>-->
<!--<thead>-->
<!--<tr>-->
<!--<th>属性</th>-->
<!--<th>说明</th>-->
<!--<th>类型</th>-->
<!--<th>默认值</th>-->
<!--</tr>-->
<!--</thead>-->
<!--<tbody>-->
<!--<tr>-->
<!--<td>content</td>-->
<!--<td>显示的内容</td>-->
<!--<td>String | Number</td>-->
<!--<td>空</td>-->
<!--</tr>-->
<!--<tr>-->
<!--<td>placement</td>-->
<!--<td>提示框出现的位置，可选值为<code>top</code><code>top-start</code><code>top-end</code><code>bottom</code><code>bottom-start</code><code>bottom-end</code><code>left</code><code>left-start</code><code>left-end</code><code>right</code><code>right-start</code><code>right-end</code></td>-->
<!--<td>String</td>-->
<!--<td>bottom</td>-->
<!--</tr>-->
<!--<tr>-->
<!--<td>disabled</td>-->
<!--<td>是否禁用提示框</td>-->
<!--<td>Boolean</td>-->
<!--<td>false</td>-->
<!--</tr>-->
<!--<tr>-->
<!--<td>delay</td>-->
<!--<td>延迟显示，单位毫秒</td>-->
<!--<td>Number</td>-->
<!--<td>0</td>-->
<!--</tr>-->
<!--</tbody>-->
<!--</table>-->
<!--</div>-->
<!--</Poptip>-->
<!--<Poptip title="标题" content="内容">-->
<!--<Button>click 触发</Button>-->
<!--</Poptip>-->
@ -96,19 +144,19 @@
<!--<Tooltip content="这里是提示文字">-->
<!--当鼠标经过这段文字时，会显示一个气泡框-->
<!--</Tooltip>-->
<Poptip>
<a>click 激活</a>
<div slot="content">
<a>关闭提示框</a>
</div>
</Poptip>
<!--<Poptip>-->
<!--<a>click 激活</a>-->
<!--<div slot="content">-->
<!--<a>关闭提示框</a>-->
<!--</div>-->
<!--</Poptip>-->
</div>
</template>
<script>
import { Tooltip, iButton, Row, iCol, Poptip, iSelect, iOption, Message } from 'iview';
import { Tooltip, iButton, Row, iCol, Poptip, iSelect, iOption, Message, Icon } from 'iview';
export default {
components: { Tooltip, iButton, Row, iCol, Poptip, iSelect, iOption, Message },
components: { Tooltip, iButton, Row, iCol, Poptip, iSelect, iOption, Message, Icon },
props: {
},

3
test/routers/radio.vue
View file

@ -141,6 +141,8 @@
<Breadcrumb-item href="/components/breadcrumb">Components</Breadcrumb-item>
<Breadcrumb-item>Breadcrumb</Breadcrumb-item>
</Breadcrumb>
<br><br>
<Checkbox :checked.sync="single"></Checkbox>
</template>
<script>
import { Radio, Alert, Icon, Collapse, iButton, Checkbox, Switch, InputNumber, Breadcrumb, LoadingBar } from 'iview';
@ -172,6 +174,7 @@
},
data () {
return {
single: false,
radio: false,
radioGroup: '段模',
activeKey: [1,2],

76
test/routers/select.vue
View file

@ -1,26 +1,44 @@
<template>
<!--<i-select :model.sync="model1" style="width:200px">-->
<!--<i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option>-->
<!--</i-select>-->
<!--{{ model1 | json }}-->
<i-select :model.sync="model1" style="width:200px" clearable>
<i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option>
</i-select>
{{ model1 | json }}
<i-button @click="change">修改数据</i-button>
<!--<i-select :model.sync="model10" multiple style="width:240px" @on-change="datachange">-->
<!--<i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option>-->
<!--</i-select>-->
<!--{{ model10 | json }}-->
<!--<i-select :model.sync="model11" filterable style="width:200px" @on-change="datachange">-->
<!--<i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option>-->
<!--</i-select>-->
<!--{{ model11 | json }}-->
<i-select :model.sync="model10" multiple style="width:240px" @on-change="datachange">
<i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option>
</i-select>
{{ model10 | json }}
<i-select :model.sync="model11" filterable style="width:200px" @on-change="datachange">
<i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option>
</i-select>
{{ model11 | json }}
<i-select :model.sync="model12" filterable multiple style="width:240px" @on-change="datachange">
<i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option>
</i-select>
{{ model12 | json }}
<br><br>
<i-select :model.sync="model2" size="small" style="width:100px">
<i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option>
</i-select>
<i-select :model.sync="model3" style="width:100px">
<i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option>
</i-select>
<i-select :model.sync="model4" size="large" style="width:100px">
<i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option>
</i-select>
<i-select :model.sync="model7" style="width:200px">
<i-option-group label="热门城市">
<i-option v-for="item in cityList | limitBy 3" :value="item.value">{{ item.label }}</i-option>
</i-option-group>
<i-option-group label="其它城市">
<i-option v-for="item in cityList | limitBy 3 3" :value="item.value">{{ item.label }}</i-option>
</i-option-group>
</i-select>
</template>
<script>
import { iSelect, iOption, iButton } from 'iview';
import { iSelect, iOption, iButton, iOptionGroup } from 'iview';
export default {
components: { iSelect, iOption, iButton },
components: { iSelect, iOption, iButton, iOptionGroup },
data () {
return {
cityList: [
@ -36,23 +54,27 @@
value: 'shenzhen',
label: '深圳市'
},
{
value: 'hangzhou',
label: '杭州市'
},
{
value: 'nanjing',
label: '南京市'
},
{
value: 'chongqing',
label: '重庆市'
}
// {
// value: 'hangzhou',
// label: '杭州市'
// },
// {
// value: 'nanjing',
// label: '南京市'
// },
// {
// value: 'chongqing',
// label: '重庆市'
// }
],
model1: '',
model10: [],
model11: '',
model12: []
model12: [],
model2: '',
model3: '',
model4: '',
model7: ''
}
},
methods: {

14
test/routers/tag.vue
View file

@ -31,10 +31,14 @@
<i-button type="primary" @click="modal1 = true">显示对话框</i-button>
<Modal
:visible.sync="modal1"
title="普通的Modal对话框标题">
title="普通的Modal对话框标题"
:loading="loading" @on-ok="ok">
<p>对话框内容</p>
<p>对话框内容</p>
<p>对话框内容</p>
{{ loading }}
<i-button @click="loading = true">true</i-button>
<i-button @click="loading = false">false</i-button>
</Modal>
</template>
<script>
@ -43,7 +47,13 @@
components: { Tag, Modal, iButton },
data () {
return {
modal1: false
modal1: false,
loading: true
}
},
methods: {
ok () {
}
}
}

70
test/routers/tooltip.vue Normal file
View file

@ -0,0 +1,70 @@
<style scoped>
.top,.bottom{
text-align: center;
}
.center{
width: 300px;
margin: 10px auto;
overflow: hidden;
}
.center-left{
float: left;
}
.center-right{
float: right;
}
</style>
<template>
<div class="top">
<Tooltip content="Top Left 文字提示" placement="top-start">
<i-button>上左</i-button>
</Tooltip>
<Tooltip content="Top Center 文字提示" placement="top">
<i-button>上边</i-button>
</Tooltip>
<Tooltip content="Top Right 文字提示" placement="top-end">
<i-button>上右</i-button>
</Tooltip>
</div>
<div class="center">
<div class="center-left">
<Tooltip content="Left Top 文字提示" placement="left-start">
<i-button>左上</i-button>
</Tooltip><br><br>
<Tooltip content="Left Center 文字提示" placement="left">
<i-button>左边</i-button>
</Tooltip><br><br>
<Tooltip content="Left Bottom 文字提示" placement="left-end">
<i-button>左下</i-button>
</Tooltip>
</div>
<div class="center-right">
<Tooltip content="Right Top 文字提示" placement="right-start">
<i-button>右上</i-button>
</Tooltip><br><br>
<Tooltip content="Right Center 文字提示" placement="right">
<i-button>右边</i-button>
</Tooltip><br><br>
<Tooltip content="Right Bottom 文字提示" placement="right-end">
<i-button>右下</i-button>
</Tooltip>
</div>
</div>
<div class="bottom">
<Tooltip content="Bottom Left 文字提示" placement="bottom-start">
<i-button>下左</i-button>
</Tooltip>
<Tooltip content="Bottom Center 文字提示" placement="bottom">
<i-button>下边</i-button>
</Tooltip>
<Tooltip content="Bottom Right 文字提示" placement="bottom-end">
<i-button>下右</i-button>
</Tooltip>
</div>
</template>
<script>
import { Tooltip, iButton } from 'iview';
export default {
components: { Tooltip, iButton }
}
</script>