Merge branch '2.0' of https://github.com/iview/iview into anchor
This commit is contained in:
zhigang.li
commit
b23702cb13
150 changed files with 8558 additions and 6961 deletions
|
|
@ -16,6 +16,7 @@ nav {
|
|||
<div class="container">
|
||||
<nav>
|
||||
<ul>
|
||||
<li><router-link to="/split">Split</router-link></li>
|
||||
<li><router-link to="/layout">Layout</router-link></li>
|
||||
<li><router-link to="/affix">Affix</router-link></li>
|
||||
<li><router-link to="/anchor">Anchor</router-link></li>
|
||||
|
|
@ -63,7 +64,9 @@ nav {
|
|||
<li><router-link to="/color-picker">ColorPicker</router-link></li>
|
||||
<li><router-link to="/auto-complete">AutoComplete</router-link></li>
|
||||
<li><router-link to="/scroll">Scroll</router-link></li>
|
||||
<li><router-link to="/divider">Divider</router-link></li>
|
||||
<li><router-link to="/time">Time</router-link></li>
|
||||
<li><router-link to="/cell">Cell</router-link></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<router-view></router-view>
|
||||
|
|
|
|||
|
|
@ -6,11 +6,13 @@ import Vue from 'vue';
|
|||
import VueRouter from 'vue-router';
|
||||
import App from './app.vue';
|
||||
import iView from '../src/index';
|
||||
import locale from '../src/locale/lang/en-US';
|
||||
// import locale from '../src/locale/lang/zh-CN';
|
||||
// import locale from '../src/locale/lang/en-US';
|
||||
import locale from '../src/locale/lang/zh-CN';
|
||||
|
||||
Vue.use(VueRouter);
|
||||
Vue.use(iView, { locale });
|
||||
Vue.use(iView, {
|
||||
locale
|
||||
});
|
||||
|
||||
// 开启debug模式
|
||||
Vue.config.debug = true;
|
||||
|
|
@ -18,7 +20,12 @@ Vue.config.debug = true;
|
|||
// 路由配置
|
||||
const router = new VueRouter({
|
||||
esModule: false,
|
||||
mode: 'history',
|
||||
routes: [
|
||||
{
|
||||
path: '/split',
|
||||
component: (resolve) => require(['./routers/split.vue'], resolve)
|
||||
},
|
||||
{
|
||||
path: '/layout',
|
||||
component: (resolve) => require(['./routers/layout.vue'], resolve)
|
||||
|
|
@ -207,9 +214,17 @@ const router = new VueRouter({
|
|||
path: '/scroll',
|
||||
component: (resolve) => require(['./routers/scroll.vue'], resolve)
|
||||
},
|
||||
{
|
||||
path: '/divider',
|
||||
component: (resolve) => require(['./routers/divider.vue'], resolve)
|
||||
},
|
||||
{
|
||||
path: '/time',
|
||||
component: (resolve) => require(['./routers/time.vue'], resolve)
|
||||
},
|
||||
{
|
||||
path: '/cell',
|
||||
component: (resolve) => require(['./routers/cell.vue'], resolve)
|
||||
}
|
||||
]
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,8 +1,28 @@
|
|||
<template>
|
||||
<div>
|
||||
<Alert show-icon banner closable>消息提示文案</Alert>
|
||||
<Alert>
|
||||
An info prompt
|
||||
<template slot="desc">Content of prompt. Content of prompt. Content of prompt. Content of prompt. </template>
|
||||
</Alert>
|
||||
<Alert type="success">
|
||||
A success prompt
|
||||
<template slot="desc">Content of prompt. Content of prompt. Content of prompt. Content of prompt. </template>
|
||||
</Alert>
|
||||
<Alert type="warning">
|
||||
A warning prompt
|
||||
<template slot="desc">
|
||||
Content of prompt. Content of prompt. Content of prompt.
|
||||
</template>
|
||||
</Alert>
|
||||
<Alert type="error">
|
||||
An error prompt
|
||||
<span slot="desc">
|
||||
Custom error description copywriting. <Icon type="help-circled" size="14"></Icon>
|
||||
</span>
|
||||
</Alert>
|
||||
<Alert type="info" show-icon closable>消息提示文案</Alert>
|
||||
<Alert type="success" show-icon>成功提示文案</Alert>
|
||||
<Alert type="warning" show-icon banner>警告提示文案</Alert>
|
||||
<Alert type="warning" show-icon>警告提示文案</Alert>
|
||||
<Alert type="error" show-icon>错误提示文案</Alert>
|
||||
<Alert show-icon>
|
||||
消息提示文案
|
||||
|
|
@ -26,9 +46,20 @@
|
|||
</Alert>
|
||||
<Alert show-icon closable>
|
||||
自定义图标
|
||||
<Icon type="ios-lightbulb-outline" slot="icon"></Icon>
|
||||
<Icon type="ios-bulb-outline" slot="icon"></Icon>
|
||||
<template slot="desc">自定义图标文案自定义图标文案自定义图标文案自定义图标文案自定义图标文案</template>
|
||||
</Alert>
|
||||
<Alert banner type="warning">Notice: notification contents...</Alert>
|
||||
<Alert banner closable type="warning">Notice: notification contents...</Alert>
|
||||
<Alert closable>An info prompt</Alert>
|
||||
<Alert type="success" show-icon closable>
|
||||
A success prompt
|
||||
<span slot="desc">Content of prompt. Content of prompt. Content of prompt. Content of prompt. </span>
|
||||
</Alert>
|
||||
<Alert type="warning" closable>
|
||||
Custom closing content
|
||||
<span slot="close">No longer prompt</span>
|
||||
</Alert>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -14,10 +14,67 @@
|
|||
</style>
|
||||
<template>
|
||||
<div>
|
||||
<Badge dot :count="count">
|
||||
<Badge :count="count">
|
||||
<a href="#" class="demo-badge"></a>
|
||||
</Badge>
|
||||
<Badge :count="0" showZero>
|
||||
<a href="#" class="demo-badge"></a>
|
||||
</Badge>
|
||||
<Button @click="setCount">set count</Button>
|
||||
<br><br>
|
||||
<Badge text="hot">
|
||||
<Button type="ghost">Hello</Button>
|
||||
</Badge>
|
||||
<br><br>
|
||||
<div>
|
||||
<Badge status="success" />
|
||||
<Badge status="error" />
|
||||
<Badge status="default" />
|
||||
<Badge status="processing" />
|
||||
<Badge status="warning" />
|
||||
<br />
|
||||
<Badge status="success" text="Success" />
|
||||
<br />
|
||||
<Badge status="error" text="Error" />
|
||||
<br />
|
||||
<Badge status="default" text="Default" />
|
||||
<br />
|
||||
<Badge status="processing" text="Processing" />
|
||||
<br />
|
||||
<Badge status="warning" text="Warning" />
|
||||
</div>
|
||||
<div style="margin: 50px">
|
||||
<Badge dot>
|
||||
<a href="//iviewui.com">我是一个链接</a>
|
||||
</Badge>
|
||||
<br><br>
|
||||
<Badge :count="10" :offset="[-5, -5]">
|
||||
<a href="//iviewui.com">我是一个链接</a>
|
||||
</Badge>
|
||||
</div>
|
||||
<div>
|
||||
<Badge :count="count" type="primary">
|
||||
<a href="#" class="demo-badge"></a>
|
||||
</Badge>
|
||||
<Badge :count="count" type="success">
|
||||
<a href="#" class="demo-badge"></a>
|
||||
</Badge>
|
||||
<Badge :count="count" type="normal">
|
||||
<a href="#" class="demo-badge"></a>
|
||||
</Badge>
|
||||
<Badge :count="count" type="info">
|
||||
<a href="#" class="demo-badge"></a>
|
||||
</Badge>
|
||||
<Badge :count="count" type="error">
|
||||
<a href="#" class="demo-badge"></a>
|
||||
</Badge>
|
||||
<Badge :count="count" type="warning">
|
||||
<a href="#" class="demo-badge"></a>
|
||||
</Badge>
|
||||
<Badge :count="count">
|
||||
<a href="#" class="demo-badge"></a>
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
|
@ -25,7 +82,7 @@
|
|||
props: {},
|
||||
data () {
|
||||
return {
|
||||
count: 50
|
||||
count: 5
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
|
|
|
|||
|
|
@ -7,8 +7,9 @@
|
|||
<template>
|
||||
<div>
|
||||
<Breadcrumb separator="<b class='demo-breadcrumb-separator'>=></b>">
|
||||
<Breadcrumb-item to="/">Home4</Breadcrumb-item>
|
||||
<Breadcrumb-item :to="{name: 'user', params: { userId: 123 }}">Components</Breadcrumb-item>
|
||||
<Breadcrumb-item to="/button">Home4</Breadcrumb-item>
|
||||
<Breadcrumb-item to="//iviewui.com" target="_blank">Home4</Breadcrumb-item>
|
||||
<Breadcrumb-item :to="{name: 'icon', params: { userId: 123 }}">Components</Breadcrumb-item>
|
||||
<Breadcrumb-item>Breadcrumb</Breadcrumb-item>
|
||||
</Breadcrumb>
|
||||
<Breadcrumb separator="">
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -1,44 +1,43 @@
|
|||
<style>
|
||||
.demo-carousel{
|
||||
height: 200px;
|
||||
line-height: 200px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
background: #506b9e;
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<div>
|
||||
<Carousel v-model="v1" dots="outside" @on-change="hc" :autoplay="false">
|
||||
<Carousel-item>
|
||||
<div class="demo-case-img">
|
||||
<img src="https://file.iviewui.com/dist/84b3cded4163febf9dae090e76129322.png">
|
||||
</div>
|
||||
</Carousel-item>
|
||||
<Carousel-item>
|
||||
<div class="demo-case-img">
|
||||
<img src="https://file.iviewui.com/dist/84b3cded4163febf9dae090e76129322.png">
|
||||
</div>
|
||||
</Carousel-item>
|
||||
<Carousel-item>
|
||||
<div class="demo-case-img">
|
||||
<img src="https://file.iviewui.com/dist/84b3cded4163febf9dae090e76129322.png">
|
||||
</div>
|
||||
</Carousel-item>
|
||||
<div style="width: 400px;">
|
||||
<Carousel v-model="value1" loop arrow="always" @on-change="handleChange">
|
||||
<CarouselItem>
|
||||
<div class="demo-carousel">1</div>
|
||||
</CarouselItem>
|
||||
<CarouselItem>
|
||||
<div class="demo-carousel">2</div>
|
||||
</CarouselItem>
|
||||
<CarouselItem>
|
||||
<div class="demo-carousel">3</div>
|
||||
</CarouselItem>
|
||||
<CarouselItem>
|
||||
<div class="demo-carousel">4</div>
|
||||
</CarouselItem>
|
||||
</Carousel>
|
||||
<Button @click="v1 = 2">change</Button>
|
||||
<Button @click="value1 = 2">change</Button>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
v1: 0
|
||||
value1: 0
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
hc (...args) {
|
||||
console.log(args);
|
||||
handleChange (old, newval) {
|
||||
console.log(old, newval);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="less">
|
||||
.demo-case-img {
|
||||
img{
|
||||
width: 500px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,64 +1,60 @@
|
|||
<template>
|
||||
<div>
|
||||
<Cascader v-model="value3" :data="data" filterable style="width: 400px"></Cascader>
|
||||
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
|
||||
<Cascader v-model="value3" :data="data" filterable style="width: 400px"></Cascader>
|
||||
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
|
||||
<Cascader v-model="value3" :data="data" filterable style="width: 400px"></Cascader>
|
||||
</div>
|
||||
<Cascader :data="data4" :load-data="loadData"></Cascader>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
data: [{
|
||||
value: 1,
|
||||
label: '北京',
|
||||
children: [
|
||||
{
|
||||
value: 11,
|
||||
label: '故宫'
|
||||
},
|
||||
{
|
||||
value: 12,
|
||||
label: '天坛'
|
||||
},
|
||||
{
|
||||
value: 13,
|
||||
label: '王府井'
|
||||
}
|
||||
]
|
||||
}, {
|
||||
value: 2,
|
||||
label: '江苏',
|
||||
children: [
|
||||
{
|
||||
value: 21,
|
||||
label: '南京',
|
||||
children: [
|
||||
{
|
||||
value: 211,
|
||||
label: '夫子庙',
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: 22,
|
||||
label: '苏州',
|
||||
children: [
|
||||
{
|
||||
value: 221,
|
||||
label: '拙政园',
|
||||
},
|
||||
{
|
||||
value: 222,
|
||||
label: '狮子林',
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
}],
|
||||
value3: []
|
||||
data4: [
|
||||
{
|
||||
value: 'beijing',
|
||||
label: '北京',
|
||||
children: [],
|
||||
loading: false
|
||||
},
|
||||
{
|
||||
value: 'hangzhou',
|
||||
label: '杭州',
|
||||
children: [],
|
||||
loading:false
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
loadData (item, callback) {
|
||||
item.loading = true;
|
||||
setTimeout(() => {
|
||||
if (item.value === 'beijing') {
|
||||
item.children = [
|
||||
{
|
||||
value: 'talkingdata',
|
||||
label: 'TalkingData'
|
||||
},
|
||||
{
|
||||
value: 'baidu',
|
||||
label: '百度'
|
||||
},
|
||||
{
|
||||
value: 'sina',
|
||||
label: '新浪'
|
||||
}
|
||||
];
|
||||
} else if (item.value === 'hangzhou') {
|
||||
item.children = [
|
||||
{
|
||||
value: 'ali',
|
||||
label: '阿里巴巴'
|
||||
},
|
||||
{
|
||||
value: '163',
|
||||
label: '网易'
|
||||
}
|
||||
];
|
||||
}
|
||||
item.loading = false;
|
||||
callback();
|
||||
}, 1000);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
42
examples/routers/cell.vue
Normal file
42
examples/routers/cell.vue
Normal file
|
|
@ -0,0 +1,42 @@
|
|||
<template>
|
||||
<div style="margin: 100px;background: #f8f8f9;padding: 100px;">
|
||||
<Card title="选项" :padding="0" shadow style="width: 300px;">
|
||||
<CellGroup @on-click="handleClick">
|
||||
<Cell title="标题一" name="a1" label="附属内容" to="/button">
|
||||
<Badge count="10" slot="extra"></Badge>
|
||||
</Cell>
|
||||
<Cell title="标题一" name="a2" label="附属内容" extra="详细信息"></Cell>
|
||||
<Cell title="标题一" name="a3" label="附属内容" extra="详细信息" to="/button"></Cell>
|
||||
<Cell title="标题一" name="a4" label="附属内容" selected></Cell>
|
||||
<Cell title="标题二">
|
||||
<Icon type="trash-a" slot="icon"></Icon>
|
||||
</Cell>
|
||||
<Cell><span style="color: #ff6600">六七十111</span></Cell>
|
||||
<Cell title="标题四" selected></Cell>
|
||||
<Cell title="标题五"></Cell>
|
||||
<Cell title="标题六" disabled></Cell>
|
||||
<Cell title="标题七" extra="详细信息" to="/icon"></Cell>
|
||||
<Cell title="标题七" extra="详细信息" selected></Cell>
|
||||
<Cell title="标题七" label="附属内容" extra="详细信息"></Cell>
|
||||
<Cell title="标题八">
|
||||
<i-switch v-model="switch1" slot="extra"></i-switch>
|
||||
</Cell>
|
||||
<Cell title="标题九" to="/button"></Cell>
|
||||
</CellGroup>
|
||||
</Card>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data(){
|
||||
return {
|
||||
switch1: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleClick (name) {
|
||||
console.log(name);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,54 +1,17 @@
|
|||
<style lang="less">
|
||||
.demo-circle-custom{
|
||||
& h1{
|
||||
color: #3f414d;
|
||||
font-size: 28px;
|
||||
font-weight: normal;
|
||||
}
|
||||
& p{
|
||||
color: #657180;
|
||||
font-size: 14px;
|
||||
margin: 10px 0 15px;
|
||||
}
|
||||
& span{
|
||||
display: block;
|
||||
padding-top: 15px;
|
||||
color: #657180;
|
||||
font-size: 14px;
|
||||
&:before{
|
||||
content: '';
|
||||
display: block;
|
||||
width: 50px;
|
||||
height: 1px;
|
||||
margin: 0 auto;
|
||||
background: #e0e3e6;
|
||||
position: relative;
|
||||
top: -15px;
|
||||
};
|
||||
}
|
||||
& span i{
|
||||
font-style: normal;
|
||||
color: #3f414d;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<i-circle
|
||||
:size="250"
|
||||
:trail-width="4"
|
||||
:stroke-width="5"
|
||||
:percent="75"
|
||||
stroke-linecap="square"
|
||||
stroke-color="#43a3fb">
|
||||
<div class="demo-circle-custom">
|
||||
<h1>{{ 42001776 }}</h1>
|
||||
<p>消费人群规模</p>
|
||||
<span>
|
||||
总占人数
|
||||
<i>75%</i>
|
||||
</span>
|
||||
</div>
|
||||
</i-circle>
|
||||
<div>
|
||||
<i-circle :percent="80">
|
||||
<span class="demo-i-circle-inner" style="font-size:24px">80%</span>
|
||||
</i-circle>
|
||||
<i-circle :percent="100" stroke-color="#5cb85c">
|
||||
<Icon type="ios-checkmark" size="60" style="color:#5cb85c"></Icon>
|
||||
</i-circle>
|
||||
<i-circle :percent="35" stroke-color="#ff5500">
|
||||
<span class="demo-i-circle-inner">
|
||||
<Icon type="ios-close" size="50" style="color:#ff5500"></Icon>
|
||||
</span>
|
||||
</i-circle>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<div>
|
||||
<Collapse accordion v-model="value3">
|
||||
<Panel name="1">
|
||||
<Collapse accordion v-model="value3" simple>
|
||||
<Panel name="1" hide-arrow>
|
||||
史蒂夫·乔布斯
|
||||
<div slot="content">
|
||||
史蒂夫·乔布斯（Steve Jobs），1955年2月24日生于美国加利福尼亚州旧金山，美国发明家、企业家、美国苹果公司联合创办人。
|
||||
|
|
|
|||
|
|
@ -5,18 +5,15 @@
|
|||
<color-picker
|
||||
v-model="color"
|
||||
placement="bottom-start"
|
||||
size="large"
|
||||
@on-change="c1"
|
||||
@on-active-change="c2"></color-picker>
|
||||
<Input value="hello" style="display: inline-block" />
|
||||
<Date-picker
|
||||
transfer
|
||||
type="date"
|
||||
placeholder="选择日期"
|
||||
style="width: 200px"></Date-picker>
|
||||
<color-picker
|
||||
ref="xxx"
|
||||
:transfer="true"
|
||||
v-model="color"
|
||||
:recommend="true"
|
||||
format="rgb"
|
||||
|
|
@ -32,17 +29,15 @@
|
|||
<color-picker
|
||||
v-model="color"
|
||||
placement="bottom-start"
|
||||
size="small"></color-picker>
|
||||
></color-picker>
|
||||
<Date-picker
|
||||
type="date"
|
||||
placeholder="选择日期"
|
||||
size="small"
|
||||
style="width: 200px"></Date-picker>
|
||||
<color-picker
|
||||
ref="yyy"
|
||||
:colors="colors"
|
||||
v-model="color"
|
||||
transfer
|
||||
format="rgb"
|
||||
alpha></color-picker>
|
||||
<Button @click="setColor">set color</Button>
|
||||
|
|
@ -57,7 +52,6 @@
|
|||
v-model="color7"
|
||||
:hue="false"
|
||||
:hide-drop-down="hideDropDown"
|
||||
transfer
|
||||
@on-open-change="onOpenChange"></ColorPicker>
|
||||
|
||||
<br><br><br><br>
|
||||
|
|
|
|||
75
examples/routers/divider.vue
Normal file
75
examples/routers/divider.vue
Normal file
|
|
@ -0,0 +1,75 @@
|
|||
<template>
|
||||
<Row :gutter="16">
|
||||
<i-col span="12">
|
||||
<Card title="horizontal divider">
|
||||
<div>
|
||||
<p>
|
||||
iView is a set of UI components and widgets built on Vue.js.
|
||||
iView is a set of UI components and widgets built on Vue.js.
|
||||
iView is a set of UI components and widgets built on Vue.js.
|
||||
</p>
|
||||
|
||||
<Divider/>
|
||||
|
||||
<p>
|
||||
iView is a set of UI components and widgets built on Vue.js.
|
||||
iView is a set of UI components and widgets built on Vue.js.
|
||||
iView is a set of UI components and widgets built on Vue.js.
|
||||
</p>
|
||||
|
||||
<Divider>iView </Divider>
|
||||
|
||||
<p>
|
||||
iView is a set of UI components and widgets built on Vue.js.
|
||||
iView is a set of UI components and widgets built on Vue.js.
|
||||
iView is a set of UI components and widgets built on Vue.js.
|
||||
</p>
|
||||
|
||||
<Divider dashed/>
|
||||
|
||||
<p>
|
||||
iView is a set of UI components and widgets built on Vue.js.
|
||||
iView is a set of UI components and widgets built on Vue.js.
|
||||
iView is a set of UI components and widgets built on Vue.js.
|
||||
</p>
|
||||
|
||||
<Divider orientation="left">iView</Divider>
|
||||
|
||||
<p>
|
||||
iView is a set of UI components and widgets built on Vue.js.
|
||||
iView is a set of UI components and widgets built on Vue.js.
|
||||
iView is a set of UI components and widgets built on Vue.js.
|
||||
</p>
|
||||
|
||||
<Divider orientation="right">iView</Divider>
|
||||
|
||||
<p>
|
||||
iView is a set of UI components and widgets built on Vue.js.
|
||||
iView is a set of UI components and widgets built on Vue.js.
|
||||
iView is a set of UI components and widgets built on Vue.js.
|
||||
</p>
|
||||
|
||||
</div>
|
||||
</Card>
|
||||
</i-col>
|
||||
<i-col span="12">
|
||||
<Card title="vertical divider">
|
||||
<div>
|
||||
iView
|
||||
<Divider type="vertical" />
|
||||
<a href="#">Components</a>
|
||||
<Divider type="vertical" />
|
||||
<a href="#">Divider</a>
|
||||
</div>
|
||||
</Card>
|
||||
</i-col>
|
||||
</Row>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
|
|
@ -1,352 +1,44 @@
|
|||
<template>
|
||||
<div>
|
||||
<div>
|
||||
<Dropdown trigger="click" style="margin-left: 20px" placement="right-start" >
|
||||
<a href="javascript:void(0)">
|
||||
right-start
|
||||
<Icon type="arrow-down-b"></Icon>
|
||||
</a>
|
||||
<DropdownMenu slot="list">
|
||||
<DropdownItem>驴打滚</DropdownItem>
|
||||
<DropdownItem>炸酱面</DropdownItem>
|
||||
<DropdownItem>豆汁儿</DropdownItem>
|
||||
<DropdownItem>冰糖葫芦</DropdownItem>
|
||||
<DropdownItem>北京烤鸭</DropdownItem>
|
||||
</DropdownMenu>
|
||||
</Dropdown>
|
||||
<Dropdown trigger="click" style="margin-left: 20px" placement="right-end" >
|
||||
<a href="javascript:void(0)">
|
||||
right-end
|
||||
<Icon type="arrow-down-b"></Icon>
|
||||
</a>
|
||||
<DropdownMenu slot="list">
|
||||
<DropdownItem>驴打滚</DropdownItem>
|
||||
<DropdownItem>炸酱面</DropdownItem>
|
||||
<DropdownItem>豆汁儿</DropdownItem>
|
||||
<DropdownItem>冰糖葫芦</DropdownItem>
|
||||
<DropdownItem>北京烤鸭</DropdownItem>
|
||||
</DropdownMenu>
|
||||
</Dropdown>
|
||||
|
||||
<Dropdown trigger="click" style="margin-left: 20px" placement="bottom-start" >
|
||||
<a href="javascript:void(0)">
|
||||
bottom-start
|
||||
<Icon type="arrow-down-b"></Icon>
|
||||
</a>
|
||||
<DropdownMenu slot="list">
|
||||
<DropdownItem>驴打滚</DropdownItem>
|
||||
<DropdownItem>炸酱面</DropdownItem>
|
||||
<DropdownItem>豆汁儿</DropdownItem>
|
||||
<DropdownItem>冰糖葫芦</DropdownItem>
|
||||
<DropdownItem>北京烤鸭</DropdownItem>
|
||||
</DropdownMenu>
|
||||
</Dropdown>
|
||||
<Dropdown trigger="click" style="margin-left: 20px" placement="bottom-end" >
|
||||
<a href="javascript:void(0)">
|
||||
bottom-end
|
||||
<Icon type="arrow-down-b"></Icon>
|
||||
</a>
|
||||
<DropdownMenu slot="list">
|
||||
<DropdownItem>驴打滚</DropdownItem>
|
||||
<DropdownItem>炸酱面</DropdownItem>
|
||||
<DropdownItem>豆汁儿</DropdownItem>
|
||||
<DropdownItem>冰糖葫芦</DropdownItem>
|
||||
<DropdownItem>北京烤鸭</DropdownItem>
|
||||
</DropdownMenu>
|
||||
</Dropdown>
|
||||
|
||||
<Dropdown trigger="click" style="margin-left: 20px" placement="top-start" >
|
||||
<a href="javascript:void(0)">
|
||||
top-start
|
||||
<Icon type="arrow-down-b"></Icon>
|
||||
</a>
|
||||
<DropdownMenu slot="list">
|
||||
<DropdownItem>驴打滚</DropdownItem>
|
||||
<DropdownItem>炸酱面</DropdownItem>
|
||||
<DropdownItem>豆汁儿</DropdownItem>
|
||||
<DropdownItem>冰糖葫芦</DropdownItem>
|
||||
<DropdownItem>北京烤鸭</DropdownItem>
|
||||
</DropdownMenu>
|
||||
</Dropdown>
|
||||
<Dropdown trigger="click" style="margin-left: 20px" placement="top-end" >
|
||||
<a href="javascript:void(0)">
|
||||
top-end
|
||||
<Icon type="arrow-down-b"></Icon>
|
||||
</a>
|
||||
<DropdownMenu slot="list">
|
||||
<DropdownItem>驴打滚</DropdownItem>
|
||||
<DropdownItem>炸酱面</DropdownItem>
|
||||
<DropdownItem>豆汁儿</DropdownItem>
|
||||
<DropdownItem>冰糖葫芦</DropdownItem>
|
||||
<DropdownItem>北京烤鸭</DropdownItem>
|
||||
</DropdownMenu>
|
||||
</Dropdown>
|
||||
|
||||
<Dropdown trigger="click" style="margin-left: 20px" placement="left-start" >
|
||||
<a href="javascript:void(0)">
|
||||
left-start
|
||||
<Icon type="arrow-down-b"></Icon>
|
||||
</a>
|
||||
<DropdownMenu slot="list">
|
||||
<DropdownItem>驴打滚</DropdownItem>
|
||||
<DropdownItem>炸酱面</DropdownItem>
|
||||
<DropdownItem>豆汁儿</DropdownItem>
|
||||
<DropdownItem>冰糖葫芦</DropdownItem>
|
||||
<DropdownItem>北京烤鸭</DropdownItem>
|
||||
</DropdownMenu>
|
||||
</Dropdown>
|
||||
|
||||
<Dropdown trigger="click" style="margin-left: 20px" placement="left-end" >
|
||||
<a href="javascript:void(0)">
|
||||
left-end
|
||||
<Icon type="arrow-down-b"></Icon>
|
||||
</a>
|
||||
<DropdownMenu slot="list">
|
||||
<DropdownItem>驴打滚</DropdownItem>
|
||||
<DropdownItem>炸酱面</DropdownItem>
|
||||
<DropdownItem>豆汁儿</DropdownItem>
|
||||
<DropdownItem>冰糖葫芦</DropdownItem>
|
||||
<DropdownItem>北京烤鸭</DropdownItem>
|
||||
</DropdownMenu>
|
||||
</Dropdown>
|
||||
|
||||
<Dropdown trigger="click" style="margin-left: 20px" placement="top" >
|
||||
<a href="javascript:void(0)">
|
||||
top
|
||||
<Icon type="arrow-down-b"></Icon>
|
||||
</a>
|
||||
<DropdownMenu slot="list">
|
||||
<DropdownItem>驴打滚</DropdownItem>
|
||||
<DropdownItem>炸酱面</DropdownItem>
|
||||
<DropdownItem>豆汁儿</DropdownItem>
|
||||
<DropdownItem>冰糖葫芦</DropdownItem>
|
||||
<DropdownItem>北京烤鸭</DropdownItem>
|
||||
</DropdownMenu>
|
||||
</Dropdown>
|
||||
<Dropdown trigger="click" style="margin-left: 20px" placement="bottom" >
|
||||
<a href="javascript:void(0)">
|
||||
bottom
|
||||
<Icon type="arrow-down-b"></Icon>
|
||||
</a>
|
||||
<DropdownMenu slot="list">
|
||||
<DropdownItem>驴打滚</DropdownItem>
|
||||
<DropdownItem>炸酱面</DropdownItem>
|
||||
<DropdownItem>豆汁儿</DropdownItem>
|
||||
<DropdownItem>冰糖葫芦</DropdownItem>
|
||||
<DropdownItem>北京烤鸭</DropdownItem>
|
||||
</DropdownMenu>
|
||||
</Dropdown>
|
||||
<Dropdown trigger="click" style="margin-left: 20px" placement="left" >
|
||||
<a href="javascript:void(0)">
|
||||
left
|
||||
<Icon type="arrow-down-b"></Icon>
|
||||
</a>
|
||||
<DropdownMenu slot="list">
|
||||
<DropdownItem>驴打滚</DropdownItem>
|
||||
<DropdownItem>炸酱面</DropdownItem>
|
||||
<DropdownItem>豆汁儿</DropdownItem>
|
||||
<DropdownItem>冰糖葫芦</DropdownItem>
|
||||
<DropdownItem>北京烤鸭</DropdownItem>
|
||||
<DropdownItem>驴打滚</DropdownItem>
|
||||
<DropdownItem>炸酱面</DropdownItem>
|
||||
<DropdownItem>豆汁儿</DropdownItem>
|
||||
<DropdownItem>冰糖葫芦</DropdownItem>
|
||||
<DropdownItem>北京烤鸭</DropdownItem>
|
||||
<DropdownItem>驴打滚</DropdownItem>
|
||||
<DropdownItem>炸酱面</DropdownItem>
|
||||
<DropdownItem>豆汁儿</DropdownItem>
|
||||
<DropdownItem>冰糖葫芦</DropdownItem>
|
||||
<DropdownItem>北京烤鸭</DropdownItem>
|
||||
</DropdownMenu>
|
||||
</Dropdown>
|
||||
<Dropdown trigger="click" style="margin-left: 20px" placement="right" >
|
||||
<a href="javascript:void(0)">
|
||||
right
|
||||
<Icon type="arrow-down-b"></Icon>
|
||||
</a>
|
||||
<DropdownMenu slot="list">
|
||||
<DropdownItem>驴打滚</DropdownItem>
|
||||
<DropdownItem>炸酱面</DropdownItem>
|
||||
<DropdownItem>豆汁儿</DropdownItem>
|
||||
<DropdownItem>冰糖葫芦</DropdownItem>
|
||||
<DropdownItem>北京烤鸭</DropdownItem>
|
||||
</DropdownMenu>
|
||||
</Dropdown>
|
||||
</div>
|
||||
<br><br><br><br>
|
||||
<div style='width:600px;height:100px;overflow: auto;border:1px solid'>
|
||||
<Dropdown trigger="click" style="margin-left: 20px" placement="right-start" >
|
||||
<a href="javascript:void(0)">
|
||||
right-start
|
||||
<Icon type="arrow-down-b"></Icon>
|
||||
</a>
|
||||
<DropdownMenu slot="list">
|
||||
<DropdownItem>驴打滚</DropdownItem>
|
||||
<DropdownItem>炸酱面</DropdownItem>
|
||||
<DropdownItem>豆汁儿</DropdownItem>
|
||||
<DropdownItem>冰糖葫芦</DropdownItem>
|
||||
<DropdownItem>北京烤鸭</DropdownItem>
|
||||
</DropdownMenu>
|
||||
</Dropdown>
|
||||
<Dropdown trigger="click" style="margin-left: 20px" placement="right-end" >
|
||||
<a href="javascript:void(0)">
|
||||
right-end
|
||||
<Icon type="arrow-down-b"></Icon>
|
||||
</a>
|
||||
<DropdownMenu slot="list">
|
||||
<DropdownItem>驴打滚</DropdownItem>
|
||||
<DropdownItem>炸酱面</DropdownItem>
|
||||
<DropdownItem>豆汁儿</DropdownItem>
|
||||
<DropdownItem>冰糖葫芦</DropdownItem>
|
||||
<DropdownItem>北京烤鸭</DropdownItem>
|
||||
</DropdownMenu>
|
||||
</Dropdown>
|
||||
|
||||
<Dropdown trigger="click" style="margin-left: 20px" placement="bottom-start" >
|
||||
<a href="javascript:void(0)">
|
||||
bottom-start
|
||||
<Icon type="arrow-down-b"></Icon>
|
||||
</a>
|
||||
<DropdownMenu slot="list">
|
||||
<DropdownItem>驴打滚</DropdownItem>
|
||||
<DropdownItem>炸酱面</DropdownItem>
|
||||
<DropdownItem>豆汁儿</DropdownItem>
|
||||
<DropdownItem>冰糖葫芦</DropdownItem>
|
||||
<DropdownItem>北京烤鸭</DropdownItem>
|
||||
</DropdownMenu>
|
||||
</Dropdown>
|
||||
<Dropdown trigger="click" style="margin-left: 20px" placement="bottom-end" >
|
||||
<a href="javascript:void(0)">
|
||||
bottom-end
|
||||
<Icon type="arrow-down-b"></Icon>
|
||||
</a>
|
||||
<DropdownMenu slot="list">
|
||||
<DropdownItem>驴打滚</DropdownItem>
|
||||
<DropdownItem>炸酱面</DropdownItem>
|
||||
<DropdownItem>豆汁儿</DropdownItem>
|
||||
<DropdownItem>冰糖葫芦</DropdownItem>
|
||||
<DropdownItem>北京烤鸭</DropdownItem>
|
||||
</DropdownMenu>
|
||||
</Dropdown>
|
||||
|
||||
<Dropdown trigger="click" style="margin-left: 20px" placement="top-start" >
|
||||
<a href="javascript:void(0)">
|
||||
top-start
|
||||
<Icon type="arrow-down-b"></Icon>
|
||||
</a>
|
||||
<DropdownMenu slot="list">
|
||||
<DropdownItem>驴打滚</DropdownItem>
|
||||
<DropdownItem>炸酱面</DropdownItem>
|
||||
<DropdownItem>豆汁儿</DropdownItem>
|
||||
<DropdownItem>冰糖葫芦</DropdownItem>
|
||||
<DropdownItem>北京烤鸭</DropdownItem>
|
||||
</DropdownMenu>
|
||||
</Dropdown>
|
||||
<Dropdown trigger="click" style="margin-left: 20px" placement="top-end" >
|
||||
<a href="javascript:void(0)">
|
||||
top-end
|
||||
<Icon type="arrow-down-b"></Icon>
|
||||
</a>
|
||||
<DropdownMenu slot="list">
|
||||
<DropdownItem>驴打滚</DropdownItem>
|
||||
<DropdownItem>炸酱面</DropdownItem>
|
||||
<DropdownItem>豆汁儿</DropdownItem>
|
||||
<DropdownItem>冰糖葫芦</DropdownItem>
|
||||
<DropdownItem>北京烤鸭</DropdownItem>
|
||||
</DropdownMenu>
|
||||
</Dropdown>
|
||||
|
||||
<Dropdown trigger="click" style="margin-left: 20px" placement="left-start" >
|
||||
<a href="javascript:void(0)">
|
||||
left-start
|
||||
<Icon type="arrow-down-b"></Icon>
|
||||
</a>
|
||||
<DropdownMenu slot="list">
|
||||
<DropdownItem>驴打滚</DropdownItem>
|
||||
<DropdownItem>炸酱面</DropdownItem>
|
||||
<DropdownItem>豆汁儿</DropdownItem>
|
||||
<DropdownItem>冰糖葫芦</DropdownItem>
|
||||
<DropdownItem>北京烤鸭</DropdownItem>
|
||||
</DropdownMenu>
|
||||
</Dropdown>
|
||||
|
||||
<Dropdown trigger="click" style="margin-left: 20px" placement="left-end" >
|
||||
<a href="javascript:void(0)">
|
||||
left-end
|
||||
<Icon type="arrow-down-b"></Icon>
|
||||
</a>
|
||||
<DropdownMenu slot="list">
|
||||
<DropdownItem>驴打滚</DropdownItem>
|
||||
<DropdownItem>炸酱面</DropdownItem>
|
||||
<DropdownItem>豆汁儿</DropdownItem>
|
||||
<DropdownItem>冰糖葫芦</DropdownItem>
|
||||
<DropdownItem>北京烤鸭</DropdownItem>
|
||||
</DropdownMenu>
|
||||
</Dropdown>
|
||||
|
||||
<Dropdown trigger="click" style="margin-left: 20px" placement="top" >
|
||||
<a href="javascript:void(0)">
|
||||
top
|
||||
<Icon type="arrow-down-b"></Icon>
|
||||
</a>
|
||||
<DropdownMenu slot="list">
|
||||
<DropdownItem>驴打滚</DropdownItem>
|
||||
<DropdownItem>炸酱面</DropdownItem>
|
||||
<DropdownItem>豆汁儿</DropdownItem>
|
||||
<DropdownItem>冰糖葫芦</DropdownItem>
|
||||
<DropdownItem>北京烤鸭</DropdownItem>
|
||||
</DropdownMenu>
|
||||
</Dropdown>
|
||||
<Dropdown trigger="click" style="margin-left: 20px" placement="bottom" >
|
||||
<a href="javascript:void(0)">
|
||||
bottom
|
||||
<Icon type="arrow-down-b"></Icon>
|
||||
</a>
|
||||
<DropdownMenu slot="list">
|
||||
<DropdownItem>驴打滚</DropdownItem>
|
||||
<DropdownItem>炸酱面</DropdownItem>
|
||||
<DropdownItem>豆汁儿</DropdownItem>
|
||||
<DropdownItem>冰糖葫芦</DropdownItem>
|
||||
<DropdownItem>北京烤鸭</DropdownItem>
|
||||
</DropdownMenu>
|
||||
</Dropdown>
|
||||
<Dropdown trigger="click" style="margin-left: 20px" placement="left" >
|
||||
<a href="javascript:void(0)">
|
||||
left
|
||||
<Icon type="arrow-down-b"></Icon>
|
||||
</a>
|
||||
<DropdownMenu slot="list">
|
||||
<DropdownItem>驴打滚</DropdownItem>
|
||||
<DropdownItem>炸酱面</DropdownItem>
|
||||
<DropdownItem>豆汁儿</DropdownItem>
|
||||
<DropdownItem>冰糖葫芦</DropdownItem>
|
||||
<DropdownItem>北京烤鸭</DropdownItem>
|
||||
<DropdownItem>驴打滚</DropdownItem>
|
||||
<DropdownItem>炸酱面</DropdownItem>
|
||||
<DropdownItem>豆汁儿</DropdownItem>
|
||||
<DropdownItem>冰糖葫芦</DropdownItem>
|
||||
<DropdownItem>北京烤鸭</DropdownItem>
|
||||
<DropdownItem>驴打滚</DropdownItem>
|
||||
<DropdownItem>炸酱面</DropdownItem>
|
||||
<DropdownItem>豆汁儿</DropdownItem>
|
||||
<DropdownItem>冰糖葫芦</DropdownItem>
|
||||
<DropdownItem>北京烤鸭</DropdownItem>
|
||||
</DropdownMenu>
|
||||
</Dropdown>
|
||||
<Dropdown trigger="click" style="margin-left: 20px" placement="right" >
|
||||
<a href="javascript:void(0)">
|
||||
right
|
||||
<Icon type="arrow-down-b"></Icon>
|
||||
</a>
|
||||
<DropdownMenu slot="list">
|
||||
<DropdownItem>驴打滚</DropdownItem>
|
||||
<DropdownItem>炸酱面</DropdownItem>
|
||||
<DropdownItem>豆汁儿</DropdownItem>
|
||||
<DropdownItem>冰糖葫芦</DropdownItem>
|
||||
<DropdownItem>北京烤鸭</DropdownItem>
|
||||
</DropdownMenu>
|
||||
</Dropdown>
|
||||
</div>
|
||||
<Dropdown trigger="hover">
|
||||
<a href="javascript:void(0)">
|
||||
下拉菜单
|
||||
<Icon type="ios-arrow-down"></Icon>
|
||||
</a>
|
||||
<DropdownMenu slot="list">
|
||||
<DropdownItem>驴打滚</DropdownItem>
|
||||
<DropdownItem>炸酱面</DropdownItem>
|
||||
<DropdownItem disabled>豆汁儿</DropdownItem>
|
||||
<DropdownItem>冰糖葫芦</DropdownItem>
|
||||
<DropdownItem divided>北京烤鸭</DropdownItem>
|
||||
</DropdownMenu>
|
||||
</Dropdown>
|
||||
<Dropdown trigger="click">
|
||||
<a href="javascript:void(0)">
|
||||
下拉菜单
|
||||
<Icon type="ios-arrow-down"></Icon>
|
||||
</a>
|
||||
<DropdownMenu slot="list">
|
||||
<DropdownItem>驴打滚</DropdownItem>
|
||||
<DropdownItem>炸酱面</DropdownItem>
|
||||
<DropdownItem disabled>豆汁儿</DropdownItem>
|
||||
<DropdownItem>冰糖葫芦</DropdownItem>
|
||||
<DropdownItem divided>北京烤鸭</DropdownItem>
|
||||
</DropdownMenu>
|
||||
</Dropdown>
|
||||
<Dropdown trigger="contextMenu">
|
||||
<a href="javascript:void(0)">
|
||||
下拉菜单
|
||||
<Icon type="ios-arrow-down"></Icon>
|
||||
</a>
|
||||
<DropdownMenu slot="list">
|
||||
<DropdownItem>驴打滚</DropdownItem>
|
||||
<DropdownItem>炸酱面</DropdownItem>
|
||||
<DropdownItem disabled>豆汁儿</DropdownItem>
|
||||
<DropdownItem>冰糖葫芦</DropdownItem>
|
||||
<DropdownItem divided>北京烤鸭</DropdownItem>
|
||||
</DropdownMenu>
|
||||
</Dropdown>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -1,16 +1,161 @@
|
|||
<template>
|
||||
<div style="width: 200px;margin: 100px;">
|
||||
{{ value6 }}
|
||||
<Input v-model="value5" type="textarea" placeholder="Enter something..."></Input>
|
||||
<Input v-model="value6" type="textarea" :rows="4" placeholder="Enter something..."></Input>
|
||||
<!--<div>-->
|
||||
<!--<Input v-model="value" placeholder="Enter something..." style="width: 300px"></Input>-->
|
||||
<!--<Input v-model="value11">-->
|
||||
<!--<span slot="prepend">http://</span>-->
|
||||
<!--<span slot="append">.com</span>-->
|
||||
<!--</Input>-->
|
||||
<!--<br>-->
|
||||
<!--<Input v-model="value12">-->
|
||||
<!--<Select v-model="select1" slot="prepend" style="width: 80px">-->
|
||||
<!--<Option value="http">http://</Option>-->
|
||||
<!--<Option value="https">https://</Option>-->
|
||||
<!--</Select>-->
|
||||
<!--<Select v-model="select2" slot="append" style="width: 70px">-->
|
||||
<!--<Option value="com">.com</Option>-->
|
||||
<!--<Option value="org">.org</Option>-->
|
||||
<!--<Option value="io">.io</Option>-->
|
||||
<!--</Select>-->
|
||||
<!--</Input>-->
|
||||
<!--<br>-->
|
||||
<!--<Input v-model="value13">-->
|
||||
<!--<Select v-model="select3" slot="prepend" style="width: 80px">-->
|
||||
<!--<Option value="day">Day</Option>-->
|
||||
<!--<Option value="month">Month</Option>-->
|
||||
<!--</Select>-->
|
||||
<!--<Button slot="append" icon="ios-search"></Button>-->
|
||||
<!--</Input>-->
|
||||
<!--<br>-->
|
||||
|
||||
<!--<Input v-model="value11" size="small">-->
|
||||
<!--<span slot="prepend">http://</span>-->
|
||||
<!--<span slot="append">.com</span>-->
|
||||
<!--</Input>-->
|
||||
<!--<br>-->
|
||||
<!--<Input v-model="value12" size="small">-->
|
||||
<!--<Select v-model="select1" slot="prepend" style="width: 80px">-->
|
||||
<!--<Option value="http">http://</Option>-->
|
||||
<!--<Option value="https">https://</Option>-->
|
||||
<!--</Select>-->
|
||||
<!--<Select v-model="select2" slot="append" style="width: 70px">-->
|
||||
<!--<Option value="com">.com</Option>-->
|
||||
<!--<Option value="org">.org</Option>-->
|
||||
<!--<Option value="io">.io</Option>-->
|
||||
<!--</Select>-->
|
||||
<!--</Input>-->
|
||||
<!--<br>-->
|
||||
<!--<Input v-model="value13" size="small">-->
|
||||
<!--<Select v-model="select3" slot="prepend" style="width: 80px">-->
|
||||
<!--<Option value="day">Day</Option>-->
|
||||
<!--<Option value="month">Month</Option>-->
|
||||
<!--</Select>-->
|
||||
<!--<Button slot="append" icon="ios-search"></Button>-->
|
||||
<!--</Input>-->
|
||||
<!--<br>-->
|
||||
|
||||
<!--<Input v-model="value11" size="large">-->
|
||||
<!--<span slot="prepend">http://</span>-->
|
||||
<!--<span slot="append">.com</span>-->
|
||||
<!--</Input>-->
|
||||
<!--<br>-->
|
||||
<!--<Input v-model="value12" size="large">-->
|
||||
<!--<Select v-model="select1" slot="prepend" style="width: 80px">-->
|
||||
<!--<Option value="http">http://</Option>-->
|
||||
<!--<Option value="https">https://</Option>-->
|
||||
<!--</Select>-->
|
||||
<!--<Select v-model="select2" slot="append" style="width: 70px">-->
|
||||
<!--<Option value="com">.com</Option>-->
|
||||
<!--<Option value="org">.org</Option>-->
|
||||
<!--<Option value="io">.io</Option>-->
|
||||
<!--</Select>-->
|
||||
<!--</Input>-->
|
||||
<!--<br>-->
|
||||
<!--<Input v-model="value13" size="large">-->
|
||||
<!--<Select v-model="select3" slot="prepend" style="width: 80px">-->
|
||||
<!--<Option value="day">Day</Option>-->
|
||||
<!--<Option value="month">Month</Option>-->
|
||||
<!--</Select>-->
|
||||
<!--<Button slot="append" icon="ios-search"></Button>-->
|
||||
<!--</Input>-->
|
||||
<!--<br>-->
|
||||
<!--</div>-->
|
||||
|
||||
<div>
|
||||
<Input
|
||||
v-model="value"
|
||||
size="small"
|
||||
prefix="ios-contact"
|
||||
suffix="ios-search"
|
||||
placeholder="Enter something..."
|
||||
style="width: 300px"></Input>
|
||||
<br>
|
||||
<Input
|
||||
v-model="value"
|
||||
prefix="ios-contact"
|
||||
suffix="ios-search"
|
||||
placeholder="Enter something..."
|
||||
style="width: 300px"></Input>
|
||||
<br>
|
||||
<Input
|
||||
v-model="value"
|
||||
size="large"
|
||||
prefix="ios-contact"
|
||||
suffix="ios-search"
|
||||
placeholder="Enter something..."
|
||||
style="width: 300px"></Input>
|
||||
<br><br>
|
||||
<Input
|
||||
v-model="value"
|
||||
size="small"
|
||||
icon="ios-search"
|
||||
placeholder="Enter something..."
|
||||
style="width: 300px"></Input>
|
||||
<br>
|
||||
<Input
|
||||
v-model="value"
|
||||
icon="ios-search"
|
||||
placeholder="Enter something..."
|
||||
style="width: 300px"></Input>
|
||||
<br>
|
||||
<Input
|
||||
v-model="value"
|
||||
size="large"
|
||||
icon="ios-search"
|
||||
placeholder="Enter something..."
|
||||
style="width: 300px"></Input>
|
||||
<br><br><br>
|
||||
<Input v-model="value" placeholder="Enter something..." style="width: 300px">
|
||||
<Icon type="ios-alarm-outline" slot="suffix" />
|
||||
<Icon type="ios-aperture" slot="prefix" />
|
||||
</Input>
|
||||
<br><br><br><br>
|
||||
<Input v-model="value" search enter-button style="width: 300px" @on-search="hs" size="small" />
|
||||
<br>
|
||||
<Input v-model="value" search enter-button style="width: 300px" @on-search="hs" />
|
||||
<br>
|
||||
<Input v-model="value" search enter-button style="width: 300px" @on-search="hs" size="large" />
|
||||
<br><br>
|
||||
<Input v-model="value" search style="width: 300px" @on-search="hs" />
|
||||
<br><br>
|
||||
<Input v-model="value" search enter-button="Search" style="width: 300px" @on-search="hs" />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
value5: '',
|
||||
value6: ''
|
||||
value: '',
|
||||
value11: '',
|
||||
value12: '',
|
||||
value13: '',
|
||||
select1: 'http',
|
||||
select2: 'com',
|
||||
select3: 'day'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
hs (val) {
|
||||
console.log(val);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -19,11 +19,11 @@
|
|||
}
|
||||
},
|
||||
created () {
|
||||
this.$Loading.config({
|
||||
color: '#5cb85c',
|
||||
failedColor: '#f0ad4e',
|
||||
height: 5
|
||||
});
|
||||
// this.$Loading.config({
|
||||
// color: '#5cb85c',
|
||||
// failedColor: '#f0ad4e',
|
||||
// height: 5
|
||||
// });
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div>
|
||||
<Menu ref="menu" active-name="1-2" :open-names="openNames" theme="dark" accordion @on-open-change="handleOpenChange">
|
||||
<Menu ref="menu" active-name="1-2" :open-names="openNames" theme="light" accordion @on-open-change="handleOpenChange">
|
||||
<Submenu name="1">
|
||||
<template slot="title">
|
||||
<Icon type="ios-analytics"></Icon>
|
||||
|
|
@ -20,8 +20,8 @@
|
|||
<Icon type="ios-filing"></Icon>
|
||||
Navigation Two
|
||||
</template>
|
||||
<MenuItem name="2-1">Option 5</MenuItem>
|
||||
<MenuItem name="2-2">Option 6</MenuItem>
|
||||
<MenuItem name="2-1" to="/button">Option 5</MenuItem>
|
||||
<MenuItem name="2-2" to="//iviewui.com" target="_blank">Option 6</MenuItem>
|
||||
<Submenu name="3">
|
||||
<template slot="title">Submenu</template>
|
||||
<MenuItem name="3-1">Option 7</MenuItem>
|
||||
|
|
|
|||
|
|
@ -1,54 +1,45 @@
|
|||
<template>
|
||||
<div>
|
||||
<i-button @click.native="info">显示普通提示</i-button>
|
||||
<i-button @click.native="success">显示成功提示</i-button>
|
||||
<i-button @click.native="warning">显示警告提示</i-button>
|
||||
<i-button @click.native="error">显示错误提示</i-button>
|
||||
<i-button @click.native="destroy">销毁提示</i-button>
|
||||
<Button type="primary" @click="info">Display info prompt</Button>
|
||||
<Button @click="success">Display success prompt</Button>
|
||||
<Button @click="warning">Display warning prompt</Button>
|
||||
<Button @click="error">Display error prompt</Button>
|
||||
<Button @click="loading">Display loading...</Button>
|
||||
<Button @click="closable">Display a closable message</Button>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
info () {
|
||||
// this.$Message.info('这是一条普通提示');
|
||||
this.$Message.success({
|
||||
content: '这是一条普通提示2',
|
||||
duration: 500,
|
||||
onClose () {
|
||||
// console.log(123)
|
||||
},
|
||||
closable: true,
|
||||
render (h) {
|
||||
return h('Button',{
|
||||
props: {
|
||||
type: 'primary'
|
||||
}
|
||||
}, '这是render出来的');
|
||||
}
|
||||
})
|
||||
},
|
||||
success () {
|
||||
this.$Message.success({
|
||||
content: '这是一条成功的提示',
|
||||
duration: 4
|
||||
this.$Message.info({
|
||||
content: '这是一条普通的提示',
|
||||
duration: 1000
|
||||
});
|
||||
},
|
||||
success () {
|
||||
this.$Message.success('This is a success tip');
|
||||
},
|
||||
warning () {
|
||||
this.$Message.warning('这是一条警告的提示');
|
||||
this.$Message.warning('This is a warning tip');
|
||||
},
|
||||
error () {
|
||||
this.$Message.error('对方不想说话，并且向你抛出了一个异常');
|
||||
this.$Message.error('This is an error tip');
|
||||
},
|
||||
destroy () {
|
||||
this.$Message.destroy();
|
||||
loading () {
|
||||
const msg = this.$Message.loading({
|
||||
content: 'Loading...',
|
||||
duration: 0
|
||||
});
|
||||
setTimeout(msg, 3000);
|
||||
},
|
||||
closable () {
|
||||
this.$Message.info({
|
||||
content: 'Tips for manual closing',
|
||||
duration: 1000,
|
||||
closable: true
|
||||
});
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
// this.$Message.config({
|
||||
// top: 50,
|
||||
// duration: 3
|
||||
// });
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,44 +1,30 @@
|
|||
<template>
|
||||
<div>
|
||||
<Button @click="instance('info')">Info</Button>
|
||||
<Button @click="instance('success')">Success</Button>
|
||||
<Button @click="instance('warning')">Warning</Button>
|
||||
<Button @click="instance('error')">Error</Button>
|
||||
<Button type="primary" @click="modal1 = true">Display dialog box</Button>
|
||||
<Modal
|
||||
v-model="modal1"
|
||||
title="Common Modal dialog box title"
|
||||
@on-ok="ok"
|
||||
@on-cancel="cancel">
|
||||
<p>Content of dialog</p>
|
||||
<p>Content of dialog</p>
|
||||
<p>Content of dialog</p>
|
||||
</Modal>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
modal1: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
instance (type) {
|
||||
const title = 'Title';
|
||||
const content = '<p>Content of dialog</p><p>Content of dialog</p>';
|
||||
switch (type) {
|
||||
case 'info':
|
||||
this.$Modal.info({
|
||||
title: title,
|
||||
content: content,
|
||||
closable: true
|
||||
});
|
||||
break;
|
||||
case 'success':
|
||||
this.$Modal.success({
|
||||
title: title,
|
||||
content: content
|
||||
});
|
||||
break;
|
||||
case 'warning':
|
||||
this.$Modal.warning({
|
||||
title: title,
|
||||
content: content
|
||||
});
|
||||
break;
|
||||
case 'error':
|
||||
this.$Modal.error({
|
||||
title: title,
|
||||
content: content
|
||||
});
|
||||
break;
|
||||
}
|
||||
ok () {
|
||||
this.$Message.info('Clicked ok');
|
||||
},
|
||||
cancel () {
|
||||
this.$Message.info('Clicked cancel');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,9 @@
|
|||
<div>
|
||||
<p>带描述信息</p>
|
||||
<Button @click="normal(false)">普通</Button>
|
||||
<Button @click="normal(true)">普通</Button>
|
||||
<Button @click="info(false)">消息</Button>
|
||||
<Button @click="info(true)">消息</Button>
|
||||
<Button @click="success(false)">成功</Button>
|
||||
<Button @click="warning(false)">警告</Button>
|
||||
<Button @click="error(false)">错误</Button>
|
||||
|
|
@ -23,19 +25,19 @@
|
|||
title: 'google',
|
||||
duration: 0,
|
||||
desc: nodesc ? '' : '这里是通知描述这里,是通知描述这里是通知描述这里,是通知描述这里,是通知描述这里是通知描述这里是通知描述',
|
||||
render (h) {
|
||||
return h('span', {}, 'sdsdfsdf');
|
||||
}
|
||||
// render (h) {
|
||||
// return h('span', {}, 'sdsdfsdf');
|
||||
// }
|
||||
});
|
||||
},
|
||||
info (nodesc) {
|
||||
this.$Notice.info({
|
||||
// title: '这是通知标题',
|
||||
title: '这是通知标题',
|
||||
duration: 0,
|
||||
desc: nodesc ? '' : '这里是通知描述这里,是通知描述这里是通知描述这里,是通知描述这里,是通知描述这里是通知描述这里是通知描述',
|
||||
render (h) {
|
||||
return h('span', {}, 'sdsdfsdf');
|
||||
}
|
||||
// render (h) {
|
||||
// return h('span', {}, 'sdsdfsdf');
|
||||
// }
|
||||
});
|
||||
},
|
||||
success () {
|
||||
|
|
|
|||
|
|
@ -1,28 +1,36 @@
|
|||
<template>
|
||||
<div>
|
||||
<Page :total="total" show-sizer show-elevator show-total transfer :current.sync="current"></Page>
|
||||
<Page prev-text="上一页" next-text="下一页" :total="total" show-sizer show-elevator show-total :current.sync="current"></Page>
|
||||
{{ current }}
|
||||
<Button type="primary" @click="subject">- 1</Button>
|
||||
<Button type="primary" @click="change">Change</Button>
|
||||
<Page :current="2" :total="50" simple></Page>
|
||||
|
||||
<div style="margin:10px 0px">
|
||||
<Page :total="1000" show-sizer show-elevator show-total transfer :current="12"></Page>
|
||||
<Page :total="1000" show-sizer show-elevator show-total :current="12"></Page>
|
||||
</div>
|
||||
<div style="margin:10px 0px">
|
||||
<Page :total="1000" show-sizer show-elevator show-total transfer :current="12"></Page>
|
||||
<Page :total="1000" show-sizer show-elevator show-total :current="12"></Page>
|
||||
</div>
|
||||
<div style="margin:100px 0px">
|
||||
<Page :total="500" show-sizer show-elevator show-total transfer ></Page>
|
||||
<Page :total="500" show-sizer show-elevator show-total ></Page>
|
||||
</div>
|
||||
<div style="margin:100px 0px">
|
||||
<Page :total="500" show-sizer show-elevator transfer ></Page>
|
||||
<Page :total="500" show-sizer show-elevator ></Page>
|
||||
</div>
|
||||
<div style="margin:100px 0px">
|
||||
<Page :total="500" show-sizer show-elevator transfer ></Page>
|
||||
<Page :total="500" show-sizer show-elevator ></Page>
|
||||
</div>
|
||||
<div style="margin:10px 0px">
|
||||
<Page :total="500" show-sizer transfer ></Page>
|
||||
<Page :total="500" show-sizer ></Page>
|
||||
</div>
|
||||
<div style="margin: 10px 0px">
|
||||
<Page :total="40" size="small"></Page>
|
||||
<br><br>
|
||||
<Page :total="40" size="small" show-elevator show-sizer></Page>
|
||||
<br><br>
|
||||
<Page :total="40" size="small" show-total></Page>
|
||||
<br><br>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@
|
|||
</Poptip>
|
||||
</div> -->
|
||||
<div>
|
||||
<Poptip title="提示标题" content="标签一的内容" transfer>
|
||||
<Poptip title="提示标题" content="标签一的内容">
|
||||
<Button id="aaa">点击显示</Button>
|
||||
<div slot="content">
|
||||
<Button @click='loadData(15)'>15条数据</Button>
|
||||
|
|
|
|||
|
|
@ -1,42 +1,20 @@
|
|||
<template>
|
||||
<div>
|
||||
<i-progress :percent="percent"></i-progress>
|
||||
<Button-group size="large">
|
||||
<Button icon="ios-plus-empty" @click.native="add"></Button>
|
||||
<Button icon="ios-minus-empty" @click.native="minus"></Button>
|
||||
</Button-group>
|
||||
<i-progress :percent="25" :stroke-width="5"></i-progress>
|
||||
<i-progress :percent="100">
|
||||
<Icon type="checkmark-circled"></Icon>
|
||||
<span>成功</span>
|
||||
</i-progress>
|
||||
<i-progress :percent="percent"></i-progress>
|
||||
<div style="height: 150px">
|
||||
<i-progress vertical :percent="percent" :stroke-width="20" hide-info></i-progress>
|
||||
<i-progress vertical :percent="percent"></i-progress>
|
||||
</div>
|
||||
<div style="height: 300px;">
|
||||
<Progress vertical :percent="25"></Progress>
|
||||
<Progress vertical :percent="45" status="active"></Progress>
|
||||
<Progress vertical :percent="65" status="wrong"></Progress>
|
||||
<Progress vertical :percent="100"></Progress>
|
||||
<Progress vertical :percent="25" hide-info></Progress>
|
||||
|
||||
<Progress :percent="25"></Progress>
|
||||
<Progress :percent="45" status="active"></Progress>
|
||||
<Progress :percent="65" status="wrong"></Progress>
|
||||
<Progress :percent="100"></Progress>
|
||||
<Progress :percent="25" hide-info></Progress>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
percent: 0
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
add () {
|
||||
if (this.percent >= 100) {
|
||||
return false;
|
||||
}
|
||||
this.percent += 10;
|
||||
},
|
||||
minus () {
|
||||
if (this.percent <= 0) {
|
||||
return false;
|
||||
}
|
||||
this.percent -= 10;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -4,6 +4,12 @@
|
|||
<Rate allow-half v-model="valueHalf"></Rate>
|
||||
<Rate clearable v-model="valueClear"></Rate>
|
||||
<Rate clearable allow-half v-model="valueClearHalf"></Rate>
|
||||
<Rate
|
||||
allow-half
|
||||
show-text
|
||||
v-model="characterValue"
|
||||
character="好"/>
|
||||
<Rate allow-half v-model="cv" icon="ios-heart" />
|
||||
<!--<Rate show-text v-model="valueText"></Rate>-->
|
||||
<!--<Rate show-text allow-half v-model="valueCustomText">-->
|
||||
<!--<span style="color: #f5a623">{{ valueCustomText }}</span>-->
|
||||
|
|
@ -22,6 +28,8 @@
|
|||
valueDisabled: 2.4,
|
||||
valueClear: 1,
|
||||
valueClearHalf: 1.5,
|
||||
characterValue: 2.5,
|
||||
cv: 3.5
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,959 +1,40 @@
|
|||
<!--<template>-->
|
||||
<!--<div>-->
|
||||
<!--{{model10}} - -->
|
||||
<!--{{model11}}-->
|
||||
<!--<Select -->
|
||||
<!--v-model="model10" -->
|
||||
<!--style="width:260px">-->
|
||||
<!--<Option -->
|
||||
<!--v-for="(item, index) in cityList" -->
|
||||
<!--:value="item.value" -->
|
||||
<!--:key="index">{{item.label}}</Option>-->
|
||||
<!--</Select>-->
|
||||
<!--<Select -->
|
||||
<!--v-model="model11" -->
|
||||
<!--style="width:260px">-->
|
||||
<!--<Option -->
|
||||
<!--v-for="(item, index) in cityList" -->
|
||||
<!--:value="item.value" -->
|
||||
<!--:key="index">{{item.label}}</Option>-->
|
||||
<!--</Select>-->
|
||||
<!--</div>-->
|
||||
<!--</template>-->
|
||||
<!--<script>-->
|
||||
<!--export default {-->
|
||||
<!--data() {-->
|
||||
<!--return {-->
|
||||
<!--cityList: [],-->
|
||||
<!--model10: '',-->
|
||||
<!--model11: '',-->
|
||||
<!--model12: '',-->
|
||||
<!--};-->
|
||||
<!--},-->
|
||||
<!--mounted() {-->
|
||||
<!--setTimeout(() => {-->
|
||||
<!--this.cityList = [-->
|
||||
<!--{-->
|
||||
<!--value: 'beijing',-->
|
||||
<!--label: '北京市',-->
|
||||
<!--},-->
|
||||
<!--{-->
|
||||
<!--value: 'shanghai',-->
|
||||
<!--label: '上海市',-->
|
||||
<!--},-->
|
||||
<!--{-->
|
||||
<!--value: 'shenzhen',-->
|
||||
<!--label: '深圳市',-->
|
||||
<!--},-->
|
||||
<!--{-->
|
||||
<!--value: 'hangzhou',-->
|
||||
<!--label: '杭州市',-->
|
||||
<!--},-->
|
||||
<!--{-->
|
||||
<!--value: 'nanjing',-->
|
||||
<!--label: '南京市',-->
|
||||
<!--},-->
|
||||
<!--{-->
|
||||
<!--value: 'chongqing',-->
|
||||
<!--label: '重庆市',-->
|
||||
<!--},-->
|
||||
<!--];-->
|
||||
<!--}, 1000);-->
|
||||
<!--},-->
|
||||
<!--};-->
|
||||
<!--</script>-->
|
||||
|
||||
<!--<template>-->
|
||||
<!--<div>-->
|
||||
<!--<Select v-model="value">-->
|
||||
<!--<Option -->
|
||||
<!--v-for="item in list" -->
|
||||
<!--:value="item.value" -->
|
||||
<!--:label="item.label" -->
|
||||
<!--:key="item.value"></Option>-->
|
||||
<!--</Select>-->
|
||||
<!--<Button @click="setList">set list</Button>-->
|
||||
<!--</div>-->
|
||||
<!--</template>-->
|
||||
<!--<script>-->
|
||||
<!--export default {-->
|
||||
<!--data() {-->
|
||||
<!--return {-->
|
||||
<!--value: '',-->
|
||||
<!--list: [],-->
|
||||
<!--};-->
|
||||
<!--},-->
|
||||
<!--methods: {-->
|
||||
<!--setList() {-->
|
||||
<!--const list = [];-->
|
||||
<!--for (let i = 0; i < 400; i++) {-->
|
||||
<!--list.push({-->
|
||||
<!--value: `value${i}`,-->
|
||||
<!--label: `label${i}`,-->
|
||||
<!--});-->
|
||||
<!--}-->
|
||||
<!--this.list = list;-->
|
||||
<!--},-->
|
||||
<!--},-->
|
||||
<!--};-->
|
||||
<!--</script>-->
|
||||
|
||||
<!--<template>-->
|
||||
<!--<div style="width: 400px;margin: 50px;">-->
|
||||
<!--<div>data: {{model13}}</div>-->
|
||||
<!--<Row>-->
|
||||
<!--<Col -->
|
||||
<!--span="12" -->
|
||||
<!--style="padding-right:10px">-->
|
||||
<!--<Select-->
|
||||
<!--v-model="model13"-->
|
||||
<!--:remote-method="remoteMethod1"-->
|
||||
<!--:loading="loading1"-->
|
||||
<!--size="small"-->
|
||||
<!--placeholder="提示提示"-->
|
||||
<!--filterable-->
|
||||
<!--remote-->
|
||||
<!--transfer>-->
|
||||
<!--<Option -->
|
||||
<!--v-for="(option, index) in options1" -->
|
||||
<!--:value="option.value" -->
|
||||
<!--:key="index">{{option.label}}</Option>-->
|
||||
<!--</Select>-->
|
||||
<!--</Col>-->
|
||||
<!--<Col span="12">-->
|
||||
<!--<Select-->
|
||||
<!--v-model="model14"-->
|
||||
<!--:remote-method="remoteMethod2"-->
|
||||
<!--:loading="loading2"-->
|
||||
<!--multiple-->
|
||||
<!--filterable-->
|
||||
<!--remote>-->
|
||||
<!--<Option -->
|
||||
<!--v-for="(option, index) in options2" -->
|
||||
<!--:value="option.value" -->
|
||||
<!--:key="index">{{option.label}}</Option>-->
|
||||
<!--</Select>-->
|
||||
<!--</Col>-->
|
||||
<!--</Row>-->
|
||||
<!--</div>-->
|
||||
<!--</template>-->
|
||||
<!--<script>-->
|
||||
<!--export default {-->
|
||||
<!--data() {-->
|
||||
<!--return {-->
|
||||
<!--model13: '',-->
|
||||
<!--loading1: false,-->
|
||||
<!--options1: [],-->
|
||||
<!--model14: [],-->
|
||||
<!--loading2: false,-->
|
||||
<!--options2: [],-->
|
||||
<!--list: [-->
|
||||
<!--'Alabama',-->
|
||||
<!--'Alaska',-->
|
||||
<!--'Arizona',-->
|
||||
<!--'Arkansas',-->
|
||||
<!--'California',-->
|
||||
<!--'Colorado',-->
|
||||
<!--'Connecticut',-->
|
||||
<!--'Delaware',-->
|
||||
<!--'Florida',-->
|
||||
<!--'Georgia',-->
|
||||
<!--'Hawaii',-->
|
||||
<!--'Idaho',-->
|
||||
<!--'Illinois',-->
|
||||
<!--'Indiana',-->
|
||||
<!--'Iowa',-->
|
||||
<!--'Kansas',-->
|
||||
<!--'Kentucky',-->
|
||||
<!--'Louisiana',-->
|
||||
<!--'Maine',-->
|
||||
<!--'Maryland',-->
|
||||
<!--'Massachusetts',-->
|
||||
<!--'Michigan',-->
|
||||
<!--'Minnesota',-->
|
||||
<!--'Mississippi',-->
|
||||
<!--'Missouri',-->
|
||||
<!--'Montana',-->
|
||||
<!--'Nebraska',-->
|
||||
<!--'Nevada',-->
|
||||
<!--'New hampshire',-->
|
||||
<!--'New jersey',-->
|
||||
<!--'New mexico',-->
|
||||
<!--'New york',-->
|
||||
<!--'North carolina',-->
|
||||
<!--'North dakota',-->
|
||||
<!--'Ohio',-->
|
||||
<!--'Oklahoma',-->
|
||||
<!--'Oregon',-->
|
||||
<!--'Pennsylvania',-->
|
||||
<!--'Rhode island',-->
|
||||
<!--'South carolina',-->
|
||||
<!--'South dakota',-->
|
||||
<!--'Tennessee',-->
|
||||
<!--'Texas',-->
|
||||
<!--'Utah',-->
|
||||
<!--'Vermont',-->
|
||||
<!--'Virginia',-->
|
||||
<!--'Washington',-->
|
||||
<!--'West virginia',-->
|
||||
<!--'Wisconsin',-->
|
||||
<!--'Wyoming',-->
|
||||
<!--],-->
|
||||
<!--};-->
|
||||
<!--},-->
|
||||
<!--methods: {-->
|
||||
<!--remoteMethod1(query) {-->
|
||||
<!--if (query !== '') {-->
|
||||
<!--this.loading1 = true;-->
|
||||
<!--setTimeout(() => {-->
|
||||
<!--this.loading1 = false;-->
|
||||
<!--const list = this.list.map((item) => ({-->
|
||||
<!--value: item,-->
|
||||
<!--label: item,-->
|
||||
<!--}));-->
|
||||
<!--this.options1 = list.filter((item) => item.label.toLowerCase().indexOf(query.toLowerCase()) > -1);-->
|
||||
<!--}, 200);-->
|
||||
<!--} else {-->
|
||||
<!--this.options1 = [];-->
|
||||
<!--}-->
|
||||
<!--},-->
|
||||
<!--remoteMethod2(query) {-->
|
||||
<!--if (query !== '') {-->
|
||||
<!--this.loading2 = true;-->
|
||||
<!--setTimeout(() => {-->
|
||||
<!--this.loading2 = false;-->
|
||||
<!--const list = this.list.map((item) => ({-->
|
||||
<!--value: item,-->
|
||||
<!--label: item,-->
|
||||
<!--}));-->
|
||||
<!--this.options2 = list.filter((item) => item.label.toLowerCase().indexOf(query.toLowerCase()) > -1);-->
|
||||
<!--}, 200);-->
|
||||
<!--} else {-->
|
||||
<!--this.options2 = [];-->
|
||||
<!--}-->
|
||||
<!--},-->
|
||||
<!--},-->
|
||||
<!--};-->
|
||||
<!--</script>-->
|
||||
|
||||
<!--<template>-->
|
||||
<!--<div style="width: 300px">-->
|
||||
<!--<Select-->
|
||||
<!--v-model="model14"-->
|
||||
<!--:remote-method="remoteMethod2"-->
|
||||
<!--:loading="loading2"-->
|
||||
<!--multiple-->
|
||||
<!--filterable-->
|
||||
<!--remote>-->
|
||||
<!--<Option -->
|
||||
<!--v-for="(option, index) in options2" -->
|
||||
<!--:value="option.value" -->
|
||||
<!--:key="index">{{option.label}}</Option>-->
|
||||
<!--</Select>-->
|
||||
<!--</div>-->
|
||||
<!--</template>-->
|
||||
<!--<script>-->
|
||||
<!--export default {-->
|
||||
<!--data() {-->
|
||||
<!--return {-->
|
||||
<!--model13: '',-->
|
||||
<!--loading1: false,-->
|
||||
<!--options1: [],-->
|
||||
<!--model14: [],-->
|
||||
<!--loading2: false,-->
|
||||
<!--options2: [],-->
|
||||
<!--list: ['a', 'b', 'c'],-->
|
||||
<!--};-->
|
||||
<!--},-->
|
||||
<!--methods: {-->
|
||||
<!--remoteMethod2(query) {-->
|
||||
<!--if (query !== '') {-->
|
||||
<!--this.loading2 = true;-->
|
||||
<!--setTimeout(() => {-->
|
||||
<!--this.loading2 = false;-->
|
||||
<!--const list = this.list.map((item) => ({-->
|
||||
<!--value: item,-->
|
||||
<!--label: item,-->
|
||||
<!--}));-->
|
||||
<!--this.options2 = list.filter((item) => item.label.toLowerCase().indexOf(query.toLowerCase()) > -1);-->
|
||||
<!--}, 200);-->
|
||||
<!--} else {-->
|
||||
<!--this.options2 = [];-->
|
||||
<!--}-->
|
||||
<!--},-->
|
||||
<!--},-->
|
||||
<!--};-->
|
||||
<!--</script>-->
|
||||
|
||||
|
||||
<!--<template>-->
|
||||
<!--<Row>-->
|
||||
<!--<Col -->
|
||||
<!--span="12" -->
|
||||
<!--style="padding-right:10px">-->
|
||||
<!--<Select-->
|
||||
<!--v-model="model13"-->
|
||||
<!--:remote-method="remoteMethod1"-->
|
||||
<!--:loading="loading1"-->
|
||||
<!--filterable-->
|
||||
<!--remote>-->
|
||||
<!--<Option -->
|
||||
<!--v-for="(option, index) in options1" -->
|
||||
<!--:value="option.value" -->
|
||||
<!--:key="index">{{option.label}}</Option>-->
|
||||
<!--</Select>-->
|
||||
<!--</Col>-->
|
||||
<!--<Col span="12">-->
|
||||
<!--<Select-->
|
||||
<!--v-model="model14"-->
|
||||
<!--:remote-method="remoteMethod2"-->
|
||||
<!--:loading="loading2"-->
|
||||
<!--multiple-->
|
||||
<!--filterable-->
|
||||
<!--remote>-->
|
||||
<!--<Option -->
|
||||
<!--v-for="(option, index) in options2" -->
|
||||
<!--:value="option.value" -->
|
||||
<!--:key="index">{{option.label}}</Option>-->
|
||||
<!--</Select>-->
|
||||
<!--</Col>-->
|
||||
<!--</Row>-->
|
||||
<!--</template>-->
|
||||
<!--<script>-->
|
||||
<!--export default {-->
|
||||
<!--data() {-->
|
||||
<!--return {-->
|
||||
<!--model13: '',-->
|
||||
<!--loading1: false,-->
|
||||
<!--options1: [],-->
|
||||
<!--model14: [],-->
|
||||
<!--loading2: false,-->
|
||||
<!--options2: [],-->
|
||||
<!--list: [-->
|
||||
<!--'Alabama',-->
|
||||
<!--'Alaska',-->
|
||||
<!--'Arizona',-->
|
||||
<!--'Arkansas',-->
|
||||
<!--'California',-->
|
||||
<!--'Colorado',-->
|
||||
<!--'Connecticut',-->
|
||||
<!--'Delaware',-->
|
||||
<!--'Florida',-->
|
||||
<!--'Georgia',-->
|
||||
<!--'Hawaii',-->
|
||||
<!--'Idaho',-->
|
||||
<!--'Illinois',-->
|
||||
<!--'Indiana',-->
|
||||
<!--'Iowa',-->
|
||||
<!--'Kansas',-->
|
||||
<!--'Kentucky',-->
|
||||
<!--'Louisiana',-->
|
||||
<!--'Maine',-->
|
||||
<!--'Maryland',-->
|
||||
<!--'Massachusetts',-->
|
||||
<!--'Michigan',-->
|
||||
<!--'Minnesota',-->
|
||||
<!--'Mississippi',-->
|
||||
<!--'Missouri',-->
|
||||
<!--'Montana',-->
|
||||
<!--'Nebraska',-->
|
||||
<!--'Nevada',-->
|
||||
<!--'New hampshire',-->
|
||||
<!--'New jersey',-->
|
||||
<!--'New mexico',-->
|
||||
<!--'New york',-->
|
||||
<!--'North carolina',-->
|
||||
<!--'North dakota',-->
|
||||
<!--'Ohio',-->
|
||||
<!--'Oklahoma',-->
|
||||
<!--'Oregon',-->
|
||||
<!--'Pennsylvania',-->
|
||||
<!--'Rhode island',-->
|
||||
<!--'South carolina',-->
|
||||
<!--'South dakota',-->
|
||||
<!--'Tennessee',-->
|
||||
<!--'Texas',-->
|
||||
<!--'Utah',-->
|
||||
<!--'Vermont',-->
|
||||
<!--'Virginia',-->
|
||||
<!--'Washington',-->
|
||||
<!--'West virginia',-->
|
||||
<!--'Wisconsin',-->
|
||||
<!--'Wyoming',-->
|
||||
<!--],-->
|
||||
<!--};-->
|
||||
<!--},-->
|
||||
<!--methods: {-->
|
||||
<!--remoteMethod1(query) {-->
|
||||
<!--if (query !== '') {-->
|
||||
<!--this.loading1 = true;-->
|
||||
<!--setTimeout(() => {-->
|
||||
<!--this.loading1 = false;-->
|
||||
<!--const list = this.list.map((item) => ({-->
|
||||
<!--value: item,-->
|
||||
<!--label: item,-->
|
||||
<!--}));-->
|
||||
<!--this.options1 = list.filter((item) => item.label.toLowerCase().indexOf(query.toLowerCase()) > -1);-->
|
||||
<!--}, 200);-->
|
||||
<!--} else {-->
|
||||
<!--this.options1 = [];-->
|
||||
<!--}-->
|
||||
<!--},-->
|
||||
<!--remoteMethod2(query) {-->
|
||||
<!--if (query !== '') {-->
|
||||
<!--this.loading2 = true;-->
|
||||
<!--setTimeout(() => {-->
|
||||
<!--this.loading2 = false;-->
|
||||
<!--const list = this.list.map((item) => ({-->
|
||||
<!--value: item,-->
|
||||
<!--label: item,-->
|
||||
<!--}));-->
|
||||
<!--this.options2 = list.filter((item) => item.label.toLowerCase().indexOf(query.toLowerCase()) > -1);-->
|
||||
<!--}, 200);-->
|
||||
<!--} else {-->
|
||||
<!--this.options2 = [];-->
|
||||
<!--}-->
|
||||
<!--},-->
|
||||
<!--},-->
|
||||
<!--};-->
|
||||
<!--</script>-->
|
||||
|
||||
<!--<template>-->
|
||||
<!--<div id="app">-->
|
||||
<!--<input><br>-->
|
||||
<!--<i-select-->
|
||||
<!--v-model="model1"-->
|
||||
<!--style="width:200px"-->
|
||||
<!-->-->
|
||||
<!--<i-option-->
|
||||
<!--v-for="item in cityList"-->
|
||||
<!--:value="item.value"-->
|
||||
<!--:key="item.value"-->
|
||||
<!-->{{item.label}}</i-option>-->
|
||||
<!--</i-select>-->
|
||||
<!--<br>-->
|
||||
<!--<i-select-->
|
||||
<!--v-model="model2"-->
|
||||
<!--size="small"-->
|
||||
<!--style="width:100px"-->
|
||||
<!-->-->
|
||||
<!--<i-option-->
|
||||
<!--v-for="item in cityList"-->
|
||||
<!--:value="item.value"-->
|
||||
<!--:key="item.value"-->
|
||||
<!-->{{item.label}}</i-option>-->
|
||||
<!--</i-select>-->
|
||||
<!--<i-select-->
|
||||
<!--v-model="model3"-->
|
||||
<!--style="width:100px"-->
|
||||
<!-->-->
|
||||
<!--<i-option-->
|
||||
<!--v-for="item in cityList"-->
|
||||
<!--:value="item.value"-->
|
||||
<!--:key="item.value"-->
|
||||
<!-->{{item.label}}</i-option>-->
|
||||
<!--</i-select>-->
|
||||
<!--<i-select-->
|
||||
<!--v-model="model4"-->
|
||||
<!--size="large"-->
|
||||
<!--style="width:100px"-->
|
||||
<!-->-->
|
||||
<!--<i-option-->
|
||||
<!--v-for="item in cityList"-->
|
||||
<!--:value="item.value"-->
|
||||
<!--:key="item.value"-->
|
||||
<!-->{{item.label}}</i-option>-->
|
||||
<!--</i-select>-->
|
||||
<!--<br>-->
|
||||
<!--<i-select-->
|
||||
<!--v-model="model5"-->
|
||||
<!--disabled-->
|
||||
<!--style="width:200px"-->
|
||||
<!-->-->
|
||||
<!--<i-option-->
|
||||
<!--v-for="item in cityList"-->
|
||||
<!--:value="item.value"-->
|
||||
<!--:key="item.value"-->
|
||||
<!-->{{item.label}}</i-option>-->
|
||||
<!--</i-select>-->
|
||||
<!--<i-select-->
|
||||
<!--v-model="model6"-->
|
||||
<!--style="width:200px"-->
|
||||
<!-->-->
|
||||
<!--<i-option value="beijing">New York</i-option>-->
|
||||
<!--<i-option -->
|
||||
<!--value="shanghai" -->
|
||||
<!--disabled>London</i-option>-->
|
||||
<!--<i-option value="shenzhen">Sydney</i-option>-->
|
||||
<!--</i-select>-->
|
||||
<!--<br>-->
|
||||
<!--<i-select-->
|
||||
<!--v-model="model8"-->
|
||||
<!--clearable-->
|
||||
<!--style="width:200px"-->
|
||||
<!-->-->
|
||||
<!--<i-option-->
|
||||
<!--v-for="item in cityList"-->
|
||||
<!--:value="item.value"-->
|
||||
<!--:key="item.value"-->
|
||||
<!-->{{item.label}}</i-option>-->
|
||||
<!--</i-select>-->
|
||||
<!--<br>-->
|
||||
<!--<i-select-->
|
||||
<!--v-model="model7"-->
|
||||
<!--style="width:200px"-->
|
||||
<!-->-->
|
||||
<!--<option-group label="Hot Cities">-->
|
||||
<!--<i-option-->
|
||||
<!--v-for="item in cityList1"-->
|
||||
<!--:value="item.value"-->
|
||||
<!--:key="item.value"-->
|
||||
<!-->{{item.label}}</i-option>-->
|
||||
<!--</option-group>-->
|
||||
<!--<option-group label="Other Cities">-->
|
||||
<!--<i-option-->
|
||||
<!--v-for="item in cityList2"-->
|
||||
<!--:value="item.value"-->
|
||||
<!--:key="item.value"-->
|
||||
<!-->{{item.label}}</i-option>-->
|
||||
<!--</option-group>-->
|
||||
<!--</i-select>-->
|
||||
<!--<br>-->
|
||||
<!--<i-select-->
|
||||
<!--v-model="model9"-->
|
||||
<!--style="width:200px"-->
|
||||
<!-->-->
|
||||
<!--<i-option -->
|
||||
<!--value="New York" -->
|
||||
<!--label="New York">-->
|
||||
<!--<span>New York</span>-->
|
||||
<!--<span style="float:right;color:#ccc">America</span>-->
|
||||
<!--</i-option>-->
|
||||
<!--<i-option -->
|
||||
<!--value="London" -->
|
||||
<!--label="London">-->
|
||||
<!--<span>London</span>-->
|
||||
<!--<span style="float:right;color:#ccc">U.K.</span>-->
|
||||
<!--</i-option>-->
|
||||
<!--<i-option -->
|
||||
<!--value="Sydney" -->
|
||||
<!--label="Sydney">-->
|
||||
<!--<span>Sydney</span>-->
|
||||
<!--<span style="float:right;color:#ccc">Australian</span>-->
|
||||
<!--</i-option>-->
|
||||
<!--</i-select>-->
|
||||
<!--<br>-->
|
||||
<!--<div>here</div>-->
|
||||
<!--<i-select-->
|
||||
<!--v-model="model10"-->
|
||||
<!--multiple-->
|
||||
<!--style="width:260px"-->
|
||||
<!-->-->
|
||||
<!--<i-option-->
|
||||
<!--v-for="item in cityList"-->
|
||||
<!--:value="item.value"-->
|
||||
<!--:key="item.value"-->
|
||||
<!-->{{item.label}}</i-option>-->
|
||||
<!--</i-select>-->
|
||||
<!--<br>-->
|
||||
<!--<row>-->
|
||||
<!--<i-col-->
|
||||
<!--span="12"-->
|
||||
<!--style="padding-right:10px"-->
|
||||
<!-->-->
|
||||
<!--<i-select-->
|
||||
<!--v-model="model11"-->
|
||||
<!--filterable-->
|
||||
<!-->-->
|
||||
<!--<i-option-->
|
||||
<!--v-for="item in cityList"-->
|
||||
<!--:value="item.value"-->
|
||||
<!--:key="item.value"-->
|
||||
<!-->{{item.label}}</i-option>-->
|
||||
<!--</i-select>-->
|
||||
<!--</i-col>-->
|
||||
<!--<i-col span="12">-->
|
||||
<!--<i-select-->
|
||||
<!--v-model="model12"-->
|
||||
<!--filterable-->
|
||||
<!--multiple-->
|
||||
<!-->-->
|
||||
<!--<i-option-->
|
||||
<!--v-for="item in cityList"-->
|
||||
<!--:value="item.value"-->
|
||||
<!--:key="item.value"-->
|
||||
<!-->{{item.label}}</i-option>-->
|
||||
<!--</i-select>-->
|
||||
<!--</i-col>-->
|
||||
<!--</row>-->
|
||||
<!--<br>-->
|
||||
<!--<row>-->
|
||||
<!--<i-col-->
|
||||
<!--span="12"-->
|
||||
<!--style="padding-right:10px"-->
|
||||
<!-->-->
|
||||
<!--<i-select-->
|
||||
<!--v-model="model13"-->
|
||||
<!--:remote-method="remoteMethod1"-->
|
||||
<!--:loading="loading1"-->
|
||||
<!--filterable-->
|
||||
<!--remote-->
|
||||
<!--clearable-->
|
||||
<!-->-->
|
||||
<!--<i-option-->
|
||||
<!--v-for="(option, index) in options1"-->
|
||||
<!--:value="option.value"-->
|
||||
<!--:key="index"-->
|
||||
<!-->{{option.label}}</i-option>-->
|
||||
<!--</i-select>-->
|
||||
<!--</i-col>-->
|
||||
<!--<i-col span="12">-->
|
||||
<!--<i-select-->
|
||||
<!--v-model="model14"-->
|
||||
<!--:remote-method="remoteMethod2"-->
|
||||
<!--:loading="loading2"-->
|
||||
<!--multiple-->
|
||||
<!--filterable-->
|
||||
<!--remote-->
|
||||
<!--clearable>-->
|
||||
<!--<i-option-->
|
||||
<!--v-for="(option, index) in options2"-->
|
||||
<!--:value="option.value"-->
|
||||
<!--:key="index"-->
|
||||
<!-->{{option.label}}</i-option>-->
|
||||
<!--</i-select>-->
|
||||
<!--</i-col>-->
|
||||
<!--</row>-->
|
||||
<!--</div>-->
|
||||
<!--</template>-->
|
||||
|
||||
<!--<script>-->
|
||||
<!--export default {-->
|
||||
<!--data() {-->
|
||||
<!--return {-->
|
||||
<!--cityList: [-->
|
||||
<!--{-->
|
||||
<!--value: 'New York',-->
|
||||
<!--label: 'New York',-->
|
||||
<!--},-->
|
||||
<!--{-->
|
||||
<!--value: 'London',-->
|
||||
<!--label: 'London',-->
|
||||
<!--},-->
|
||||
<!--{-->
|
||||
<!--value: 'Sydney',-->
|
||||
<!--label: 'Sydney',-->
|
||||
<!--},-->
|
||||
<!--{-->
|
||||
<!--value: 'Ottawa',-->
|
||||
<!--label: 'Ottawa',-->
|
||||
<!--},-->
|
||||
<!--{-->
|
||||
<!--value: 'Paris',-->
|
||||
<!--label: 'Paris',-->
|
||||
<!--},-->
|
||||
<!--{-->
|
||||
<!--value: 'Canberra',-->
|
||||
<!--label: 'Canberra',-->
|
||||
<!--},-->
|
||||
<!--],-->
|
||||
<!--cityList1: [-->
|
||||
<!--{-->
|
||||
<!--value: 'New York',-->
|
||||
<!--label: 'New York',-->
|
||||
<!--},-->
|
||||
<!--{-->
|
||||
<!--value: 'London',-->
|
||||
<!--label: 'London',-->
|
||||
<!--},-->
|
||||
<!--{-->
|
||||
<!--value: 'Sydney',-->
|
||||
<!--label: 'Sydney',-->
|
||||
<!--},-->
|
||||
<!--],-->
|
||||
<!--cityList2: [-->
|
||||
<!--{-->
|
||||
<!--value: 'Ottawa',-->
|
||||
<!--label: 'Ottawa',-->
|
||||
<!--},-->
|
||||
<!--{-->
|
||||
<!--value: 'Paris',-->
|
||||
<!--label: 'Paris',-->
|
||||
<!--},-->
|
||||
<!--{-->
|
||||
<!--value: 'Canberra',-->
|
||||
<!--label: 'Canberra',-->
|
||||
<!--},-->
|
||||
<!--],-->
|
||||
<!--model1: '',-->
|
||||
<!--model2: '',-->
|
||||
<!--model3: '',-->
|
||||
<!--model4: '',-->
|
||||
<!--model5: '',-->
|
||||
<!--model6: '',-->
|
||||
<!--model7: '',-->
|
||||
<!--model8: '',-->
|
||||
<!--model9: '',-->
|
||||
<!--model10: [],-->
|
||||
<!--model11: '',-->
|
||||
<!--model12: [],-->
|
||||
<!--model13: '',-->
|
||||
<!--loading1: false,-->
|
||||
<!--options1: [],-->
|
||||
<!--model14: [],-->
|
||||
<!--loading2: false,-->
|
||||
<!--options2: [],-->
|
||||
<!--list: [-->
|
||||
<!--'Alabama',-->
|
||||
<!--'Alaska',-->
|
||||
<!--'Arizona',-->
|
||||
<!--'Arkansas',-->
|
||||
<!--'California',-->
|
||||
<!--'Colorado',-->
|
||||
<!--'Connecticut',-->
|
||||
<!--'Delaware',-->
|
||||
<!--'Florida',-->
|
||||
<!--'Georgia',-->
|
||||
<!--'Hawaii',-->
|
||||
<!--'Idaho',-->
|
||||
<!--'Illinois',-->
|
||||
<!--'Indiana',-->
|
||||
<!--'Iowa',-->
|
||||
<!--'Kansas',-->
|
||||
<!--'Kentucky',-->
|
||||
<!--'Louisiana',-->
|
||||
<!--'Maine',-->
|
||||
<!--'Maryland',-->
|
||||
<!--'Massachusetts',-->
|
||||
<!--'Michigan',-->
|
||||
<!--'Minnesota',-->
|
||||
<!--'Mississippi',-->
|
||||
<!--'Missouri',-->
|
||||
<!--'Montana',-->
|
||||
<!--'Nebraska',-->
|
||||
<!--'Nevada',-->
|
||||
<!--'New hampshire',-->
|
||||
<!--'New jersey',-->
|
||||
<!--'New mexico',-->
|
||||
<!--'New york',-->
|
||||
<!--'North carolina',-->
|
||||
<!--'North dakota',-->
|
||||
<!--'Ohio',-->
|
||||
<!--'Oklahoma',-->
|
||||
<!--'Oregon',-->
|
||||
<!--'Pennsylvania',-->
|
||||
<!--'Rhode island',-->
|
||||
<!--'South carolina',-->
|
||||
<!--'South dakota',-->
|
||||
<!--'Tennessee',-->
|
||||
<!--'Texas',-->
|
||||
<!--'Utah',-->
|
||||
<!--'Vermont',-->
|
||||
<!--'Virginia',-->
|
||||
<!--'Washington',-->
|
||||
<!--'West virginia',-->
|
||||
<!--'Wisconsin',-->
|
||||
<!--'Wyoming',-->
|
||||
<!--],-->
|
||||
<!--};-->
|
||||
<!--},-->
|
||||
|
||||
<!--methods: {-->
|
||||
<!--remoteMethod1(query) {-->
|
||||
<!--if (query !== '') {-->
|
||||
<!--this.loading1 = true;-->
|
||||
|
||||
<!--setTimeout(() => {-->
|
||||
<!--this.loading1 = false;-->
|
||||
|
||||
<!--const list = this.list.map((item) => ({-->
|
||||
<!--value: item,-->
|
||||
<!--label: item,-->
|
||||
<!--}));-->
|
||||
|
||||
<!--this.options1 = list.filter((item) => item.label.toLowerCase().includes(query.toLowerCase()));-->
|
||||
<!--}, 1500);-->
|
||||
<!--} else {-->
|
||||
<!--this.options1 = [];-->
|
||||
<!--}-->
|
||||
<!--},-->
|
||||
<!--remoteMethod2(query) {-->
|
||||
<!--if (query !== '') {-->
|
||||
<!--this.loading2 = true;-->
|
||||
|
||||
<!--setTimeout(() => {-->
|
||||
<!--this.loading2 = false;-->
|
||||
|
||||
<!--const list = this.list.map((item) => ({-->
|
||||
<!--value: item,-->
|
||||
<!--label: item,-->
|
||||
<!--}));-->
|
||||
|
||||
<!--this.options2 = list.filter((item) => item.label.toLowerCase().includes(query.toLowerCase()));-->
|
||||
<!--}, 200);-->
|
||||
<!--} else {-->
|
||||
<!--this.options2 = [];-->
|
||||
<!--}-->
|
||||
<!--},-->
|
||||
<!--},-->
|
||||
<!--};-->
|
||||
<!--</script>-->
|
||||
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<Select
|
||||
v-model="model1"
|
||||
size="small"
|
||||
style="width:200px;" >
|
||||
<Option
|
||||
v-for="item in cityList"
|
||||
:value="item.value"
|
||||
:key="item.value">{{item.label}}</Option>
|
||||
</Select>
|
||||
<Select
|
||||
v-model="model10"
|
||||
size="small"
|
||||
multiple
|
||||
style="width:260px" >
|
||||
<Option
|
||||
v-for="item in cityList"
|
||||
:value="item.value"
|
||||
:key="item.value">{{item.label}}</Option>
|
||||
</Select>
|
||||
|
||||
<br><br>
|
||||
|
||||
<Select
|
||||
v-model="model1"
|
||||
size="large"
|
||||
style="width:200px"
|
||||
clearable
|
||||
@on-clear="onClear">
|
||||
<Option
|
||||
v-for="item in cityList"
|
||||
:value="item.value"
|
||||
:key="item.value">{{item.label}}</Option>
|
||||
</Select>
|
||||
<Select
|
||||
v-model="model10"
|
||||
size="large"
|
||||
multiple
|
||||
style="width:260px">
|
||||
<Option
|
||||
v-for="item in cityList"
|
||||
:value="item.value"
|
||||
:key="item.value">{{item.label}}</Option>
|
||||
</Select>
|
||||
|
||||
<br><br>
|
||||
|
||||
<Select
|
||||
v-model="model1"
|
||||
style="width:200px">
|
||||
<Option
|
||||
v-for="item in cityList"
|
||||
:value="item.value"
|
||||
:key="item.value">{{item.label}}</Option>
|
||||
</Select>
|
||||
<Select
|
||||
v-model="model11"
|
||||
multiple
|
||||
style="width:260px">
|
||||
<Option
|
||||
v-for="item in cityList"
|
||||
:value="item.value"
|
||||
:key="item.value">{{item.label}}</Option>
|
||||
</Select>
|
||||
<Select
|
||||
v-model="model10"
|
||||
multiple
|
||||
style="width:260px">
|
||||
<Option
|
||||
v-for="item in cityList"
|
||||
:value="item.value"
|
||||
:key="item.value">{{item.label}}</Option>
|
||||
</Select>
|
||||
|
||||
<br><br>
|
||||
|
||||
<br><br>
|
||||
|
||||
<br><br>
|
||||
<br><br>
|
||||
<br><br>
|
||||
<br><br>
|
||||
<br><br>
|
||||
<br><br>
|
||||
<Select
|
||||
v-model="model10"
|
||||
multiple
|
||||
style="width:260px">
|
||||
<Option
|
||||
v-for="item in cityList"
|
||||
:value="item.value"
|
||||
:key="item.value">{{item.label}}</Option>
|
||||
</Select>
|
||||
<br><br>
|
||||
|
||||
<br><br>
|
||||
|
||||
<br><br>
|
||||
<br><br>
|
||||
<br><br>
|
||||
<br><br>
|
||||
<br><br>
|
||||
<br><br>
|
||||
<Select
|
||||
v-model="model10"
|
||||
multiple
|
||||
style="width:260px">
|
||||
<Option
|
||||
v-for="item in cityList"
|
||||
:value="item.value"
|
||||
:key="item.value">{{item.label}}</Option>
|
||||
</Select>
|
||||
</div>
|
||||
<Select v-model="model1" style="width:200px">
|
||||
<Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
|
||||
</Select>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
cityList: [
|
||||
{
|
||||
value: 'New York',
|
||||
label: 'New York',
|
||||
},
|
||||
{
|
||||
value: '中国',
|
||||
label: '中国',
|
||||
},
|
||||
{
|
||||
value: 'Sydney',
|
||||
label: 'Sydney',
|
||||
},
|
||||
{
|
||||
value: 'Ottawa',
|
||||
label: 'Ottawa',
|
||||
},
|
||||
{
|
||||
value: 'Paris',
|
||||
label: 'Paris',
|
||||
},
|
||||
{
|
||||
value: 'Canberra',
|
||||
label: 'Canberra',
|
||||
},
|
||||
],
|
||||
model1: '',
|
||||
model10: [],
|
||||
model11: [],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onClear() {
|
||||
console.log('onClear');
|
||||
},
|
||||
},
|
||||
};
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
cityList: [
|
||||
{
|
||||
value: 'New York',
|
||||
label: 'New York'
|
||||
},
|
||||
{
|
||||
value: 'London',
|
||||
label: 'London'
|
||||
},
|
||||
{
|
||||
value: 'Sydney',
|
||||
label: 'Sydney'
|
||||
},
|
||||
{
|
||||
value: 'Ottawa',
|
||||
label: 'Ottawa'
|
||||
},
|
||||
{
|
||||
value: 'Paris',
|
||||
label: 'Paris'
|
||||
},
|
||||
{
|
||||
value: 'Canberra',
|
||||
label: 'Canberra'
|
||||
}
|
||||
],
|
||||
model1: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
74
examples/routers/split.vue
Normal file
74
examples/routers/split.vue
Normal file
|
|
@ -0,0 +1,74 @@
|
|||
<template>
|
||||
<div class="split-pane-page-wrapper">
|
||||
<Split v-model="offset" @on-moving="handleMoving">
|
||||
<div slot="left" class="pane left-pane">
|
||||
<Split v-model="offsetVertical" mode="vertical" @on-moving="handleMoving">
|
||||
<div slot="top" class="pane top-pane"></div>
|
||||
<div slot="bottom" class="pane bottom-pane"></div>
|
||||
<div slot="trigger" class="custom-trigger">
|
||||
<Icon class="trigger-icon" :size="22" type="android-more-vertical" color="#000000"/>
|
||||
</div>
|
||||
</Split>
|
||||
</div>
|
||||
<div slot="right" class="pane right-pane"></div>
|
||||
</Split>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'split_pane_page',
|
||||
data () {
|
||||
return {
|
||||
offset: 0.6,
|
||||
offsetVertical: '250px'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleMoving (e) {
|
||||
console.log(e.atMin, e.atMax)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.center-middle{
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
.split-pane-page-wrapper{
|
||||
height: 600px;
|
||||
.pane{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
&.left-pane{
|
||||
background: sandybrown;
|
||||
}
|
||||
&.right-pane{
|
||||
background: palevioletred;
|
||||
}
|
||||
&.top-pane{
|
||||
background: sandybrown;
|
||||
}
|
||||
&.bottom-pane{
|
||||
background: palevioletred;
|
||||
}
|
||||
}
|
||||
.custom-trigger{
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
background: #fff;
|
||||
position: absolute;
|
||||
.center-middle;
|
||||
box-shadow: 0 0 6px 0 rgba(28, 36, 56, 0.4);
|
||||
cursor: row-resize;
|
||||
i.trigger-icon{
|
||||
.center-middle;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,18 +1,46 @@
|
|||
<template>
|
||||
<div>
|
||||
<i-switch v-model="m1" true-value="yes" false-value="no">
|
||||
<i-switch v-model="m1" :loading="loading">
|
||||
<span slot="open">开</span>
|
||||
<span slot="close">关</span>
|
||||
</i-switch>
|
||||
{{ m1 }}
|
||||
<div @click="m1 = 'no'">toggle</div>
|
||||
<div @click="m1 = !m1">toggle</div>
|
||||
<div @click="loading = !loading">loading</div>
|
||||
<br><br>
|
||||
<i-switch size="large" loading></i-switch>
|
||||
<i-switch></i-switch>
|
||||
<i-switch size="small" v-model="m1" :loading="loading"></i-switch>
|
||||
<br><br>
|
||||
<i-switch>
|
||||
<span slot="open">开</span>
|
||||
<span slot="close">关</span>
|
||||
</i-switch>
|
||||
<i-switch>
|
||||
<Icon type="android-done" slot="open"></Icon>
|
||||
<Icon type="android-close" slot="close"></Icon>
|
||||
</i-switch>
|
||||
<br><br>
|
||||
<i-switch size="large">
|
||||
<span slot="open">开启</span>
|
||||
<span slot="close">关闭</span>
|
||||
</i-switch>
|
||||
<i-switch size="large" v-model="m1" :loading="loading">
|
||||
<span slot="open">ON</span>
|
||||
<span slot="close">OFF</span>
|
||||
</i-switch>
|
||||
<br><br>
|
||||
<i-switch :disabled="disabled"></i-switch>
|
||||
<Button type="primary" @click="disabled = !disabled">Toggle Disabled</Button>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
m1: 'yes'
|
||||
m1: true,
|
||||
disabled: true,
|
||||
loading: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
|
|
|||
|
|
@ -1,350 +1,47 @@
|
|||
<style>
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<!-- <br><br><br><br><br> -->
|
||||
<!-- <Table border :show-header='false' :columns="columns1" height="500" :data="data1"></Table> -->
|
||||
<!-- <Table border :columns="columns1" height='300'></Table> -->
|
||||
<!-- <br><br><br><br><br> -->
|
||||
<!-- <Table width="550" height="200" border :columns="columns2" :data="data4"></Table> -->
|
||||
<!--<br><br><br><br><br>-->
|
||||
<!-- <Table border :columns="columns5" height="240" :data="data5"></Table> -->
|
||||
<!-- <br><br><br><br><br> -->
|
||||
<!-- <Table border :columns="columns6" :data="data5"></Table> -->
|
||||
<!-- <br><br><br><br><br> -->
|
||||
<!-- <Table border :show-header='false' :columns="columns7" height="200" :data="data7"></Table> -->
|
||||
<!-- <Table border :columns="columns7" height="240" :data="data7"></Table> -->
|
||||
<!-- <br><br><br><br><br> -->
|
||||
<!-- <Table border :columns="columns8" :data="data7" height="200"></Table> -->
|
||||
<!-- <Table border :columns="columns8" height="200"></Table> -->
|
||||
<!-- <br><br><br><br><br> -->
|
||||
|
||||
<div class="layout-demo-con">
|
||||
<Button @click="change">修改Sider绑定的变量来控制收缩</Button>
|
||||
<Layout :style="{minHeight: '80vh'}">
|
||||
<Sider
|
||||
v-model="isCollapsed"
|
||||
collapsed-width="0"
|
||||
hide-trigger
|
||||
breakpoint="sm"
|
||||
@on-collapse="changed"
|
||||
collapsible
|
||||
ref="side"
|
||||
width="200">
|
||||
<Menu width="auto" theme="dark" active-name="1">
|
||||
<MenuGroup title="内容管理">
|
||||
<MenuItem name="1">
|
||||
<Icon type="document-text"></Icon>
|
||||
文章管理
|
||||
</MenuItem>
|
||||
<MenuItem name="2">
|
||||
<Icon type="chatbubbles"></Icon>
|
||||
评论管理
|
||||
</MenuItem>
|
||||
</MenuGroup>
|
||||
<MenuGroup title="统计分析">
|
||||
<MenuItem name="3">
|
||||
<Icon type="heart"></Icon>
|
||||
用户留存
|
||||
</MenuItem>
|
||||
<MenuItem name="4">
|
||||
<Icon type="heart-broken"></Icon>
|
||||
流失用户
|
||||
</MenuItem>
|
||||
</MenuGroup>
|
||||
</Menu>
|
||||
<!-- <div slot="trigger"><Icon type="document-text"></Icon></div> -->
|
||||
</Sider>
|
||||
<Layout class-name="test-class">
|
||||
<Header :style="{background: '#eee'}"><Button @click="toggleCollapse">菜单</Button></Header>
|
||||
<Content :style="{background:'#FFCF9E'}">
|
||||
<!-- <Table border :columns="columns1" height="500" :data="data1"></Table> -->
|
||||
<!-- <br> -->
|
||||
<!-- <Table border :columns="columns5" :data="data5"></Table> -->
|
||||
<Table border :columns="columns8" height="240" :data="data7"></Table>
|
||||
</Content>
|
||||
<Footer>sdfsdsdfsdfs</Footer>
|
||||
</Layout>
|
||||
</Layout>
|
||||
</div>
|
||||
<Table ref="currentRowTable" :columns="columns3" :data="data1"></Table>
|
||||
<Button @click="handleClearCurrentRow">Clear</Button>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
isCollapsed: false,
|
||||
columns1: [
|
||||
columns3: [
|
||||
{
|
||||
title: 'Name',
|
||||
key: 'name',
|
||||
type: 'index',
|
||||
width: 60,
|
||||
align: 'center',
|
||||
minWidth: 100,
|
||||
maxWidth: 200,
|
||||
fixed: 'left',
|
||||
filters: [
|
||||
{
|
||||
label: 'Joe',
|
||||
value: 1
|
||||
},
|
||||
{
|
||||
label: 'John',
|
||||
value: 2
|
||||
}
|
||||
],
|
||||
filterMultiple: false,
|
||||
filterMethod (value, row) {
|
||||
if (value === 1) {
|
||||
return row.name === 'Joe';
|
||||
} else if (value === 2) {
|
||||
return row.name === 'John Brown';
|
||||
}
|
||||
indexMethod (row) {
|
||||
return row._index;
|
||||
}
|
||||
},
|
||||
{
|
||||
title: 'Other',
|
||||
align: 'center',
|
||||
children: [
|
||||
{
|
||||
title: 'Age',
|
||||
key: 'age',
|
||||
align: 'center',
|
||||
minWidth: 100,
|
||||
maxWidth: 200,
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
title: 'Address',
|
||||
align: 'center',
|
||||
children: [
|
||||
{
|
||||
title: 'Street',
|
||||
key: 'street',
|
||||
align: 'center',
|
||||
minWidth: 100,
|
||||
maxWidth: 200,
|
||||
},
|
||||
{
|
||||
title: 'Block',
|
||||
align: 'center',
|
||||
children: [
|
||||
{
|
||||
title: 'Building',
|
||||
key: 'building',
|
||||
align: 'center',
|
||||
minWidth: 100,
|
||||
maxWidth: 200,
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
title: 'Door No.',
|
||||
key: 'door',
|
||||
align: 'center',
|
||||
minWidth: 100,
|
||||
maxWidth: 200,
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Company',
|
||||
align: 'center',
|
||||
children: [
|
||||
{
|
||||
title: 'Company Address',
|
||||
key: 'caddress',
|
||||
align: 'center',
|
||||
minWidth: 100,
|
||||
maxWidth: 200,
|
||||
},
|
||||
{
|
||||
title: 'Company Name',
|
||||
key: 'cname',
|
||||
align: 'center',
|
||||
minWidth: 100,
|
||||
maxWidth: 200,
|
||||
}
|
||||
]
|
||||
},
|
||||
// {
|
||||
// title: 'Gender',
|
||||
// key: 'gender',
|
||||
// align: 'center',
|
||||
// width: 200,
|
||||
// fixed: 'right'
|
||||
// },
|
||||
{
|
||||
title: 'Gender',
|
||||
key: 'gender',
|
||||
align: 'center',
|
||||
minWidth: 100,
|
||||
maxWidth: 200,
|
||||
fixed: 'right'
|
||||
}
|
||||
],
|
||||
columns2: [
|
||||
{
|
||||
title: 'Name',
|
||||
key: 'name',
|
||||
width: 100,
|
||||
fixed: 'left'
|
||||
},
|
||||
{
|
||||
title: 'Age',
|
||||
key: 'age',
|
||||
width: 100,
|
||||
fixed: 'right',
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
title: 'Province',
|
||||
key: 'province',
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: 'City',
|
||||
key: 'city',
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: 'Address',
|
||||
key: 'address',
|
||||
width: 200
|
||||
},
|
||||
{
|
||||
title: 'Postcode',
|
||||
key: 'zip',
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: 'Action',
|
||||
key: 'action',
|
||||
fixed: 'right',
|
||||
width: 120,
|
||||
render: (h, params) => {
|
||||
return h('div', [
|
||||
h('Button', {
|
||||
props: {
|
||||
type: 'text',
|
||||
size: 'small'
|
||||
}
|
||||
}, 'View'),
|
||||
h('Button', {
|
||||
props: {
|
||||
type: 'text',
|
||||
size: 'small'
|
||||
}
|
||||
}, 'Edit')
|
||||
]);
|
||||
}
|
||||
}
|
||||
],
|
||||
data1: [],
|
||||
data4: [
|
||||
{
|
||||
name: 'John Brown',
|
||||
age: 18,
|
||||
address: 'New York No. 1 Lake Park',
|
||||
province: 'America',
|
||||
city: 'New York',
|
||||
zip: 100000
|
||||
},
|
||||
{
|
||||
name: 'Jim Green',
|
||||
age: 24,
|
||||
address: 'Washington, D.C. No. 1 Lake Park',
|
||||
province: 'America',
|
||||
city: 'Washington, D.C.',
|
||||
zip: 100000
|
||||
},
|
||||
{
|
||||
name: 'Joe Black',
|
||||
age: 30,
|
||||
address: 'Sydney No. 1 Lake Park',
|
||||
province: 'Australian',
|
||||
city: 'Sydney',
|
||||
zip: 100000
|
||||
},
|
||||
{
|
||||
name: 'Jon Snow',
|
||||
age: 26,
|
||||
address: 'Ottawa No. 2 Lake Park',
|
||||
province: 'Canada',
|
||||
city: 'Ottawa',
|
||||
zip: 100000
|
||||
},
|
||||
{
|
||||
name: 'John Brown',
|
||||
age: 18,
|
||||
address: 'New York No. 1 Lake Park',
|
||||
province: 'America',
|
||||
city: 'New York',
|
||||
zip: 100000
|
||||
},
|
||||
{
|
||||
name: 'Jim Green',
|
||||
age: 24,
|
||||
address: 'Washington, D.C. No. 1 Lake Park',
|
||||
province: 'America',
|
||||
city: 'Washington, D.C.',
|
||||
zip: 100000
|
||||
},
|
||||
{
|
||||
name: 'Joe Black',
|
||||
age: 30,
|
||||
address: 'Sydney No. 1 Lake Park',
|
||||
province: 'Australian',
|
||||
city: 'Sydney',
|
||||
zip: 100000
|
||||
},
|
||||
{
|
||||
name: 'Jon Snow',
|
||||
age: 26,
|
||||
address: 'Ottawa No. 2 Lake Park',
|
||||
province: 'Canada',
|
||||
city: 'Ottawa',
|
||||
zip: 100000
|
||||
}
|
||||
],
|
||||
columns5: [
|
||||
{
|
||||
title: 'Date',
|
||||
key: 'date',
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
title: 'Name',
|
||||
key: 'name'
|
||||
},
|
||||
{
|
||||
title: 'Age',
|
||||
key: 'age',
|
||||
sortable: true
|
||||
key: 'age'
|
||||
},
|
||||
{
|
||||
title: 'Address',
|
||||
key: 'address'
|
||||
key: 'address',
|
||||
tooltip: true
|
||||
}
|
||||
],
|
||||
data5: [
|
||||
data1: [
|
||||
{
|
||||
name: 'John Brown',
|
||||
age: 18,
|
||||
address: 'New York No. 1 Lake Park',
|
||||
address: '自定义渲染列，使用 Vue 的 Render 函数。传入两个参数，第一个是 h，第二个为对象，包含 row、column 和 index，分别指当前行数据，当前列数据，当前行索引，详见示例。自定义渲染列，使用 Vue 的 Render 函数。传入两个参数，第一个是 h，第二个为对象，包含 row、column 和 index，分别指当前行数据，当前列数据，当前行索引，详见示例。自定义渲染列，使用 Vue 的 Render 函数。传入两个参数，第一个是 h，第二个为对象，包含 row、column 和 index，分别指当前行数据，当前列数据，当前行索引，详见示例。',
|
||||
date: '2016-10-03'
|
||||
},
|
||||
{
|
||||
name: 'Jim Green',
|
||||
age: 24,
|
||||
address: 'London No. 1 Lake Park',
|
||||
address: 'London No. 1 Lake Park自定义渲染列，使用 Vue 的 Render 函',
|
||||
date: '2016-10-01'
|
||||
},
|
||||
{
|
||||
|
|
@ -359,173 +56,13 @@ table {
|
|||
address: 'Ottawa No. 2 Lake Park',
|
||||
date: '2016-10-04'
|
||||
}
|
||||
],
|
||||
columns6: [
|
||||
{
|
||||
title: 'Date',
|
||||
key: 'date'
|
||||
},
|
||||
{
|
||||
title: 'Name',
|
||||
key: 'name'
|
||||
},
|
||||
{
|
||||
title: 'Age',
|
||||
key: 'age',
|
||||
filters: [
|
||||
{
|
||||
label: 'Greater than 25',
|
||||
value: 1
|
||||
},
|
||||
{
|
||||
label: 'Less than 25',
|
||||
value: 2
|
||||
}
|
||||
],
|
||||
filterMultiple: false,
|
||||
filterMethod (value, row) {
|
||||
if (value === 1) {
|
||||
return row.age > 25;
|
||||
} else if (value === 2) {
|
||||
return row.age < 25;
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: 'Address',
|
||||
key: 'address',
|
||||
fixed: 'right',
|
||||
filters: [
|
||||
{
|
||||
label: 'New York',
|
||||
value: 'New York'
|
||||
},
|
||||
{
|
||||
label: 'London',
|
||||
value: 'London'
|
||||
},
|
||||
{
|
||||
label: 'Sydney',
|
||||
value: 'Sydney'
|
||||
}
|
||||
],
|
||||
filterMethod (value, row) {
|
||||
return row.address.indexOf(value) > -1;
|
||||
}
|
||||
}
|
||||
],
|
||||
|
||||
columns7: [
|
||||
{
|
||||
title: 'Date',
|
||||
key: 'date',
|
||||
sortable: true,
|
||||
width:200,
|
||||
},
|
||||
{
|
||||
title: 'Name',
|
||||
key: 'name',
|
||||
width:200,
|
||||
},
|
||||
{
|
||||
title: 'Age',
|
||||
key: 'age',
|
||||
width:200,
|
||||
},
|
||||
{
|
||||
title: 'Address',
|
||||
key: 'address',
|
||||
width:200,
|
||||
}
|
||||
],
|
||||
data7: [
|
||||
{
|
||||
name: 'John Brown',
|
||||
age: 18,
|
||||
address: 'New York No. 1 Lake Park',
|
||||
date: '2016-10-03'
|
||||
},
|
||||
{
|
||||
name: 'Jim Green',
|
||||
age: 24,
|
||||
address: 'London No. 1 Lake Park',
|
||||
date: '2016-10-01'
|
||||
},
|
||||
{
|
||||
name: 'Joe Black',
|
||||
age: 30,
|
||||
address: 'Sydney No. 1 Lake Park Sydney No. 1 Lake Park',
|
||||
date: '2016-10-02'
|
||||
},
|
||||
{
|
||||
name: 'Jon Snow',
|
||||
age: 26,
|
||||
address: 'Ottawa No. 2 Lake Park Ottawa No. 2 Lake Park Ottawa No. 2 Lake Park',
|
||||
date: '2016-10-04'
|
||||
}
|
||||
],
|
||||
|
||||
columns8: [
|
||||
{
|
||||
title: 'Address',
|
||||
key: 'address',
|
||||
minWidth:200,
|
||||
//maxWidth:300,
|
||||
},
|
||||
{
|
||||
title: 'Date',
|
||||
key: 'date',
|
||||
sortable: true,
|
||||
minWidth:100,
|
||||
maxWidth:150,
|
||||
},
|
||||
{
|
||||
title: 'Name',
|
||||
key: 'name',
|
||||
minWidth:100,
|
||||
maxWidth:200,
|
||||
},
|
||||
{
|
||||
title: 'Age',
|
||||
key: 'age',
|
||||
minWidth:60,
|
||||
maxWidth:100,
|
||||
},
|
||||
],
|
||||
]
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
const data = [];
|
||||
for (let i = 0; i < 20; i++) {
|
||||
data.push({
|
||||
key: i,
|
||||
name: 'John Brown',
|
||||
age: i + 1,
|
||||
street: 'Lake Park',
|
||||
building: 'C',
|
||||
door: 2035,
|
||||
caddress: 'Lake Street 42',
|
||||
cname: 'SoftLake Co',
|
||||
gender: 'M',
|
||||
});
|
||||
}
|
||||
this.data1 = data;
|
||||
},
|
||||
methods: {
|
||||
toggleCollapse () {
|
||||
this.$refs.side.toggleCollapse();
|
||||
},
|
||||
change () {
|
||||
this.isCollapsed = !this.isCollapsed;
|
||||
},
|
||||
changed (res) {
|
||||
console.log(res)
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
isCollapsed (val) {
|
||||
// console.log(val)
|
||||
handleClearCurrentRow () {
|
||||
this.$refs.currentRowTable.clearCurrentRow();
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,25 @@
|
|||
<template>
|
||||
<div>
|
||||
<div>
|
||||
<Tag color="default">default</Tag>
|
||||
<Tag color="primary">primary</Tag>
|
||||
<Tag color="success">success</Tag>
|
||||
<Tag color="error">error</Tag>
|
||||
<Tag color="warning">warning</Tag>
|
||||
<Tag color="magenta">magenta</Tag>
|
||||
<Tag color="red">red</Tag>
|
||||
<Tag color="volcano">volcano</Tag>
|
||||
<Tag color="orange">orange</Tag>
|
||||
<Tag color="gold">gold</Tag>
|
||||
<Tag color="gold">不错</Tag>
|
||||
<Tag color="lime">lime</Tag>
|
||||
<Tag color="green">green</Tag>
|
||||
<Tag color="cyan">cyan</Tag>
|
||||
<Tag color="blue">blue</Tag>
|
||||
<Tag color="geekblue">geekblue</Tag>
|
||||
<Tag color="purple">purple</Tag>
|
||||
<Tag color="white">purple</Tag>
|
||||
</div>
|
||||
<Tag checkable>标签一</Tag>
|
||||
<Tag>标签二</Tag>
|
||||
<Tag v-if="show" closable @on-close="handleClose">标签三</Tag>
|
||||
|
|
@ -9,15 +29,15 @@
|
|||
<Tag type="dot">标签一</Tag>
|
||||
<Tag type="dot" closable>标签二</Tag>
|
||||
<br><br>
|
||||
<Tag closable color="blue" checkable>标签一</Tag>
|
||||
<Tag closable color="green" checkable>标签二</Tag>
|
||||
<Tag closable color="red" checkable>标签三</Tag>
|
||||
<Tag closable color="yellow" checkable>标签四</Tag>
|
||||
<Tag closable color="primary" checkable>标签一</Tag>
|
||||
<Tag closable color="success" checkable>标签二</Tag>
|
||||
<Tag closable color="error" checkable>标签三</Tag>
|
||||
<Tag closable color="warning" checkable>标签四</Tag>
|
||||
<br><br>
|
||||
<Tag color="blue" checkable>标签一</Tag>
|
||||
<Tag color="green" checkable>标签二</Tag>
|
||||
<Tag color="red" checkable>标签三</Tag>
|
||||
<Tag color="yellow" checkable>标签四</Tag>
|
||||
<Tag color="primary" checkable>标签一</Tag>
|
||||
<Tag color="success" checkable>标签二</Tag>
|
||||
<Tag color="error" checkable>标签三</Tag>
|
||||
<Tag color="warning" checkable>标签四</Tag>
|
||||
<br><br>
|
||||
<Tag closable color="#EF6AFF" checkable>标签一</Tag>
|
||||
<Tag color="#EF6AFF" checkable>标签一</Tag>
|
||||
|
|
@ -30,15 +50,15 @@
|
|||
<Tag type="dot" closable color="#EF6AFF">标签三</Tag>
|
||||
<Tag closable color="default">标签四</Tag>
|
||||
<br><br>
|
||||
<Tag type="border" closable color="blue" checkable>标签一</Tag>
|
||||
<Tag type="border" closable color="green">标签二</Tag>
|
||||
<Tag type="border" closable color="red">标签三</Tag>
|
||||
<Tag type="border" closable color="yellow">标签四</Tag>
|
||||
<Tag type="border" closable color="primary" checkable>标签一</Tag>
|
||||
<Tag type="border" closable color="success">标签二</Tag>
|
||||
<Tag type="border" closable color="error">标签三</Tag>
|
||||
<Tag type="border" closable color="warning">标签四</Tag>
|
||||
<br><br>
|
||||
<Tag type="dot" closable color="blue" checkable>标签一</Tag>
|
||||
<Tag type="dot" closable color="green">标签二</Tag>
|
||||
<Tag type="dot" closable color="red">标签三</Tag>
|
||||
<Tag type="dot" closable color="yellow">标签四</Tag>
|
||||
<Tag type="dot" closable color="primary" checkable>标签一</Tag>
|
||||
<Tag type="dot" closable color="success">标签二</Tag>
|
||||
<Tag type="dot" closable color="error">标签三</Tag>
|
||||
<Tag type="dot" closable color="warning">标签四</Tag>
|
||||
<br><br>
|
||||
<Tag v-for="item in count" :key="item" :name="item" closable @on-close="handleClose2">标签{{ item + 1 }}</Tag>
|
||||
<Button icon="ios-plus-empty" type="dashed" size="small" @click="handleAdd">添加标签</Button>
|
||||
|
|
|
|||
|
|
@ -3,13 +3,15 @@
|
|||
<Time :time="1526608921" />
|
||||
<Time :time="1652839997" />
|
||||
<Time :time="ddd" :interval="1" />
|
||||
|
||||
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
ddd: new Date('2018-04-27 14:23:00')
|
||||
ddd: new Date()
|
||||
};
|
||||
},
|
||||
computed: {},
|
||||
|
|
|
|||
|
|
@ -1,12 +1,15 @@
|
|||
<template>
|
||||
<div>
|
||||
<Tooltip always placement="top" transfer :content="text" :delay="1000">
|
||||
<div style="margin: 200px;">
|
||||
<Tooltip always placement="top-end" :content="text" :delay="1000" theme="light">
|
||||
<Button @click="disabled = true">延时1秒显示</Button>
|
||||
</Tooltip>
|
||||
<Tooltip placement="top" transfer :content="text">
|
||||
<Tooltip always :max-width="200" content="我的文本超级无敌长我的文本超级无敌长我的文本超级无敌长我的文本超级无敌长我的文本超级无敌长我的文本超级无敌长">
|
||||
<Button @click="handleChange">change</Button>
|
||||
</Tooltip>
|
||||
<Button @click="handleChange">change</Button>
|
||||
<Poptip title="Title" padding="0" width="250" word-wrap content="我的文本超级，无敌,长我的文本超级无敌长我的文本超级无敌长我的文本超级无敌长我的文本超级无敌长我的文本超级无敌长">
|
||||
<Button>Click</Button>
|
||||
</Poptip>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -1,16 +1,27 @@
|
|||
<template>
|
||||
<Transfer
|
||||
:data="data1"
|
||||
:target-keys="targetKeys1"
|
||||
:render-format="render1"
|
||||
@on-change="handleChange1"></Transfer>
|
||||
:data="data3"
|
||||
:target-keys="targetKeys3"
|
||||
:list-style="listStyle"
|
||||
:render-format="render3"
|
||||
:operations="['To left','To right']"
|
||||
filterable
|
||||
@on-change="handleChange3">
|
||||
<div :style="{float: 'right', margin: '5px'}">
|
||||
<Button type="ghost" size="small" @click="reloadMockData">Refresh</Button>
|
||||
</div>
|
||||
</Transfer>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
data1: this.getMockData(),
|
||||
targetKeys1: this.getTargetKeys()
|
||||
data3: this.getMockData(),
|
||||
targetKeys3: this.getTargetKeys(),
|
||||
listStyle: {
|
||||
width: '250px',
|
||||
height: '300px'
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
|
@ -19,8 +30,8 @@
|
|||
for (let i = 1; i <= 20; i++) {
|
||||
mockData.push({
|
||||
key: i.toString(),
|
||||
label: '内容' + i,
|
||||
description: '内容' + i + '的描述信息',
|
||||
label: 'Content ' + i,
|
||||
description: 'The desc of content ' + i,
|
||||
disabled: Math.random() * 3 < 1
|
||||
});
|
||||
}
|
||||
|
|
@ -31,14 +42,15 @@
|
|||
.filter(() => Math.random() * 2 > 1)
|
||||
.map(item => item.key);
|
||||
},
|
||||
render1 (item) {
|
||||
return item.label;
|
||||
handleChange3 (newTargetKeys) {
|
||||
this.targetKeys3 = newTargetKeys;
|
||||
},
|
||||
handleChange1 (newTargetKeys, direction, moveKeys) {
|
||||
console.log(newTargetKeys);
|
||||
console.log(direction);
|
||||
console.log(moveKeys);
|
||||
this.targetKeys1 = newTargetKeys;
|
||||
render3 (item) {
|
||||
return item.label + ' - ' + item.description;
|
||||
},
|
||||
reloadMockData () {
|
||||
this.data3 = this.getMockData();
|
||||
this.targetKeys3 = this.getTargetKeys();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue