Merge branch '2.0' into pr004
This commit is contained in:
Aresn
GitHub
commit
e9dc3c4289
177 changed files with 62359 additions and 18930 deletions
109
examples/routers/anchor.vue
Normal file
109
examples/routers/anchor.vue
Normal file
|
|
@ -0,0 +1,109 @@
|
|||
<template>
|
||||
<div class="anchor-wrapper">
|
||||
<div class="link-wrapper">
|
||||
<Button @click="changeCon">修改为Window</Button>
|
||||
<Button @click="andLink">添加一个连接</Button>
|
||||
<Anchor @on-change="handleChange" @on-select="handleSelect" :style="{right: '100px'}" :affix="true" :offset-top="30" :container="scrollCon" show-ink-in-fixed>
|
||||
<AnchorLink v-if="(link - 1) % 30 === 0" v-for="link in 300" :key="`link${link}`" :href="`#title-${link}`" :title="`title-${link}`">
|
||||
<AnchorLink v-if="link === 61" href="#title-child-69" title="title-child-69"/>
|
||||
</AnchorLink>
|
||||
<AnchorLink v-if="showNewLink" href="#new-link" title="这是动态添加的连接"/>
|
||||
</Anchor>
|
||||
</div>
|
||||
<div v-if="con === 'div'" ref="listWrapper" id="listWrapper" class="list-wrapper">
|
||||
<div style="height: 100px;"></div>
|
||||
<template v-for="i in 300">
|
||||
<h1 v-if="(i - 1) % 30 === 0" :key="`h1${i}`" :id="`title-${i}`">{{ `title-${i}` }}</h1>
|
||||
<h1 v-if="i === 69" :key="`h1${i}`" :id="`title-child-${i}`">{{ `title-${i}` }}</h1>
|
||||
<h1 v-if="i === 75" :key="`h1${i}`" :id="`title-child-${i}`">{{ `title-${i}` }}</h1>
|
||||
<p v-else :key="`p${i}`">{{ `content-row-index-${i}` }}</p>
|
||||
<Collapse v-if="i === 3" v-model="value1" :key="`collapse-${i}`">
|
||||
<Panel name="1">
|
||||
史蒂夫·乔布斯
|
||||
<p v-for="index in 50" :key="`ppp-${index}`" slot="content">{{ index }}</p>
|
||||
</Panel>
|
||||
<Panel name="2">
|
||||
斯蒂夫·盖瑞·沃兹尼亚克
|
||||
<p slot="content">斯蒂夫·盖瑞·沃兹尼亚克（Stephen Gary Wozniak），美国电脑工程师，曾与史蒂夫·乔布斯合伙创立苹果电脑（今之苹果公司）。斯蒂夫·盖瑞·沃兹尼亚克曾就读于美国科罗拉多大学，后转学入美国著名高等学府加州大学伯克利分校（UC Berkeley）并获得电机工程及计算机（EECS）本科学位（1987年）。</p>
|
||||
</Panel>
|
||||
<Panel name="3">
|
||||
乔纳森·伊夫
|
||||
<p slot="content">乔纳森·伊夫是一位工业设计师，现任Apple公司设计师兼资深副总裁，英国爵士。他曾参与设计了iPod，iMac，iPhone，iPad等众多苹果产品。除了乔布斯，他是对苹果那些著名的产品最有影响力的人。</p>
|
||||
</Panel>
|
||||
</Collapse>
|
||||
</template>
|
||||
<!-- <h1 id="new-link">这是新添加的哦哦哦哦哦 哦 </h1>
|
||||
<p v-for="i in 50" :key="`new-${i}`">这是信息司大是大非胜多负少的{{i}}</p> -->
|
||||
</div>
|
||||
<div v-else>
|
||||
<template v-for="i in 300">
|
||||
<h1 v-if="(i - 1) % 30 === 0" :key="`h1${i}`" :id="`title-${i}`">{{ `title-${i}` }}</h1>
|
||||
<h1 v-if="i === 69" :key="`h1${i}`" :id="`title-child-${i}`">{{ `title-${i}` }}</h1>
|
||||
<h1 v-if="i === 75" :key="`h1${i}`" :id="`title-child-${i}`">{{ `title-${i}` }}</h1>
|
||||
<p v-else :key="`p${i}`">{{ `content-row-index-${i}` }}</p>
|
||||
<Collapse v-if="i === 3" v-model="value1" :key="`collapse-${i}`">
|
||||
<Panel name="1">
|
||||
史蒂夫·乔布斯
|
||||
<p v-for="index in 50" :key="`ppp-${index}`" slot="content">{{ index }}</p>
|
||||
</Panel>
|
||||
<Panel name="2">
|
||||
斯蒂夫·盖瑞·沃兹尼亚克
|
||||
<p slot="content">斯蒂夫·盖瑞·沃兹尼亚克（Stephen Gary Wozniak），美国电脑工程师，曾与史蒂夫·乔布斯合伙创立苹果电脑（今之苹果公司）。斯蒂夫·盖瑞·沃兹尼亚克曾就读于美国科罗拉多大学，后转学入美国著名高等学府加州大学伯克利分校（UC Berkeley）并获得电机工程及计算机（EECS）本科学位（1987年）。</p>
|
||||
</Panel>
|
||||
<Panel name="3">
|
||||
乔纳森·伊夫
|
||||
<p slot="content">乔纳森·伊夫是一位工业设计师，现任Apple公司设计师兼资深副总裁，英国爵士。他曾参与设计了iPod，iMac，iPhone，iPad等众多苹果产品。除了乔布斯，他是对苹果那些著名的产品最有影响力的人。</p>
|
||||
</Panel>
|
||||
</Collapse>
|
||||
</template>
|
||||
<h1 id="new-link">这是新添加的哦哦哦哦哦 哦 </h1>
|
||||
<p v-for="i in 50" :key="`new-${i}`">这是信息司大是大非胜多负少的{{i}}</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
container: null,
|
||||
value1: '1',
|
||||
scrollCon: '',
|
||||
con: 'div',
|
||||
showNewLink: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
changeCon () {
|
||||
this.con = 'window';
|
||||
this.scrollCon = undefined;
|
||||
},
|
||||
handleChange (newHref, oldHref) {
|
||||
console.log(`${oldHref} => ${newHref}`)
|
||||
},
|
||||
handleSelect (href) {
|
||||
console.log(`select ${href}`)
|
||||
},
|
||||
andLink () {
|
||||
this.showNewLink = true;
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.scrollCon = this.$refs.listWrapper
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="less">
|
||||
.anchor-wrapper{
|
||||
.link-wrapper{
|
||||
position: absolute;
|
||||
top: 200px;
|
||||
right: 100px;
|
||||
width: 200px;
|
||||
}
|
||||
.list-wrapper{
|
||||
height: 600px;
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,38 +1,58 @@
|
|||
<template>
|
||||
<Collapse accordion v-model="value3">
|
||||
<Panel name="1">
|
||||
史蒂夫·乔布斯
|
||||
<div slot="content">
|
||||
史蒂夫·乔布斯（Steve Jobs），1955年2月24日生于美国加利福尼亚州旧金山，美国发明家、企业家、美国苹果公司联合创办人。
|
||||
<Collapse accordion v-model="value4">
|
||||
<Panel name="1-1">
|
||||
iPhone
|
||||
<p slot="content">iPhone，是美国苹果公司研发的智能手机，它搭载iOS操作系统。第一代iPhone于2007年1月9日由苹果公司前首席执行官史蒂夫·乔布斯发布，并在2007年6月29日正式发售。</p>
|
||||
<div>
|
||||
<Collapse accordion v-model="value3">
|
||||
<Panel name="1">
|
||||
史蒂夫·乔布斯
|
||||
<div slot="content">
|
||||
史蒂夫·乔布斯（Steve Jobs），1955年2月24日生于美国加利福尼亚州旧金山，美国发明家、企业家、美国苹果公司联合创办人。
|
||||
<Collapse accordion v-model="value4">
|
||||
<Panel name="1-1">
|
||||
iPhone
|
||||
<p slot="content">iPhone，是美国苹果公司研发的智能手机，它搭载iOS操作系统。第一代iPhone于2007年1月9日由苹果公司前首席执行官史蒂夫·乔布斯发布，并在2007年6月29日正式发售。</p>
|
||||
</Panel>
|
||||
<Panel name="1-2">
|
||||
iPad
|
||||
<p slot="content">iPad是由苹果公司于2010年开始发布的平板电脑系列，定位介于苹果的智能手机iPhone和笔记本电脑产品之间，（屏幕中有4个虚拟程序固定栏）与iPhone布局一样，提供浏览网站、收发电子邮件、观看电子书、播放音频或视频、玩游戏等功能。由英国出生的设计主管乔纳森·伊夫（Jonathan Ive）（有些翻译为 乔纳森·艾维）领导的团队设计的，这个圆滑、超薄的产品反映出了伊夫对德国天才设计师Dieter Rams的崇敬之情。</p>
|
||||
</Panel>
|
||||
</Collapse>
|
||||
</div>
|
||||
</Panel>
|
||||
<Panel name="1-2">
|
||||
iPad
|
||||
<p slot="content">iPad是由苹果公司于2010年开始发布的平板电脑系列，定位介于苹果的智能手机iPhone和笔记本电脑产品之间，（屏幕中有4个虚拟程序固定栏）与iPhone布局一样，提供浏览网站、收发电子邮件、观看电子书、播放音频或视频、玩游戏等功能。由英国出生的设计主管乔纳森·伊夫（Jonathan Ive）（有些翻译为 乔纳森·艾维）领导的团队设计的，这个圆滑、超薄的产品反映出了伊夫对德国天才设计师Dieter Rams的崇敬之情。</p>
|
||||
<Panel name="2">
|
||||
斯蒂夫·盖瑞·沃兹尼亚克
|
||||
<p slot="content">斯蒂夫·盖瑞·沃兹尼亚克（Stephen Gary Wozniak），美国电脑工程师，曾与史蒂夫·乔布斯合伙创立苹果电脑（今之苹果公司）。斯蒂夫·盖瑞·沃兹尼亚克曾就读于美国科罗拉多大学，后转学入美国著名高等学府加州大学伯克利分校（UC Berkeley）并获得电机工程及计算机（EECS）本科学位（1987年）。</p>
|
||||
</Panel>
|
||||
<Panel name="3">
|
||||
乔纳森·伊夫
|
||||
<p slot="content">乔纳森·伊夫是一位工业设计师，现任Apple公司设计师兼资深副总裁，英国爵士。他曾参与设计了iPod，iMac，iPhone，iPad等众多苹果产品。除了乔布斯，他是对苹果那些著名的产品最有影响力的人。</p>
|
||||
</Panel>
|
||||
</Collapse>
|
||||
</div>
|
||||
</Panel>
|
||||
<Panel name="2">
|
||||
斯蒂夫·盖瑞·沃兹尼亚克
|
||||
<p slot="content">斯蒂夫·盖瑞·沃兹尼亚克（Stephen Gary Wozniak），美国电脑工程师，曾与史蒂夫·乔布斯合伙创立苹果电脑（今之苹果公司）。斯蒂夫·盖瑞·沃兹尼亚克曾就读于美国科罗拉多大学，后转学入美国著名高等学府加州大学伯克利分校（UC Berkeley）并获得电机工程及计算机（EECS）本科学位（1987年）。</p>
|
||||
</Panel>
|
||||
<Panel name="3">
|
||||
乔纳森·伊夫
|
||||
<p slot="content">乔纳森·伊夫是一位工业设计师，现任Apple公司设计师兼资深副总裁，英国爵士。他曾参与设计了iPod，iMac，iPhone，iPad等众多苹果产品。除了乔布斯，他是对苹果那些著名的产品最有影响力的人。</p>
|
||||
</Panel>
|
||||
</Collapse>
|
||||
|
||||
<br/>
|
||||
<br/>
|
||||
<Collapse v-model="value5">
|
||||
<Panel name="21">
|
||||
斯蒂夫·盖瑞·沃兹尼亚克
|
||||
<p slot="content">斯蒂夫·盖瑞·沃兹尼亚克（Stephen Gary Wozniak），美国电脑工程师，曾与史蒂夫·乔布斯合伙创立苹果电脑（今之苹果公司）。斯蒂夫·盖瑞·沃兹尼亚克曾就读于美国科罗拉多大学，后转学入美国著名高等学府加州大学伯克利分校（UC Berkeley）并获得电机工程及计算机（EECS）本科学位（1987年）。</p>
|
||||
</Panel>
|
||||
<Panel name="22">
|
||||
乔纳森·伊夫
|
||||
<p slot="content">乔纳森·伊夫是一位工业设计师，现任Apple公司设计师兼资深副总裁，英国爵士。他曾参与设计了iPod，iMac，iPhone，iPad等众多苹果产品。除了乔布斯，他是对苹果那些著名的产品最有影响力的人。</p>
|
||||
</Panel>
|
||||
<Panel name="23">
|
||||
乔纳森·伊夫
|
||||
<p slot="content">乔纳森·伊夫是一位工业设计师，现任Apple公司设计师兼资深副总裁，英国爵士。他曾参与设计了iPod，iMac，iPhone，iPad等众多苹果产品。除了乔布斯，他是对苹果那些著名的产品最有影响力的人。</p>
|
||||
</Panel>
|
||||
</Collapse>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
value3: '1',
|
||||
value4: '1-1'
|
||||
}
|
||||
value3: ['1', '2', '3'],
|
||||
value4: '1-1',
|
||||
value5: ['21', '22', '23']
|
||||
};
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,41 +1,158 @@
|
|||
<template>
|
||||
<div style="margin: 100px;">
|
||||
{{ color }}
|
||||
{{color}}
|
||||
<!--<Input placeholder="请输入..." size="large" style="width: 50px;"></Input>-->
|
||||
<color-picker @on-change="c1" @on-active-change="c2" v-model="color" placement="bottom-start" size="large"></color-picker>
|
||||
<Date-picker transfer type="date" placeholder="选择日期" style="width: 200px"></Date-picker>
|
||||
<color-picker :transfer="true" ref="xxx" v-model="color" format="rgb" alpha :recommend="true"></color-picker>
|
||||
<color-picker v-model="color2" format="hsv" :alpha="true" :recommend="false"></color-picker>
|
||||
<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"
|
||||
alpha
|
||||
@on-change="onChange"
|
||||
@on-active-change="onActiveChange"></color-picker>
|
||||
<color-picker
|
||||
v-model="color2"
|
||||
:alpha="true"
|
||||
:recommend="false"
|
||||
format="hsv"></color-picker>
|
||||
<!--<Date-picker type="date" placeholder="选择日期" style="width: 200px"></Date-picker>-->
|
||||
<color-picker v-model="color" placement="bottom-start" size="small"></color-picker>
|
||||
<Date-picker type="date" placeholder="选择日期" size="small" style="width: 200px"></Date-picker>
|
||||
<color-picker
|
||||
v-model="color"
|
||||
placement="bottom-start"
|
||||
size="small"></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>
|
||||
|
||||
<br><br><br><br>
|
||||
<ColorPicker v-model="color7" :hue="false"></ColorPicker>
|
||||
{{openState}}
|
||||
<ColorPicker
|
||||
v-model="color7"
|
||||
:hue="false"
|
||||
@on-open-change="onOpenChange"></ColorPicker>
|
||||
<ColorPicker
|
||||
v-model="color7"
|
||||
:hue="false"
|
||||
:hide-drop-down="hideDropDown"
|
||||
transfer
|
||||
@on-open-change="onOpenChange"></ColorPicker>
|
||||
|
||||
<br><br><br><br>
|
||||
<ColorPicker
|
||||
v-model="color7"
|
||||
disabled></ColorPicker>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {},
|
||||
data () {
|
||||
return {
|
||||
color: 'rgba(12,34,255,.85)',
|
||||
color2: '',
|
||||
color7: '#19be6b'
|
||||
};
|
||||
export default {
|
||||
props: {},
|
||||
|
||||
data() {
|
||||
return {
|
||||
color: 'rgba(12,34,255,.85)',
|
||||
color2: '',
|
||||
color7: '#19be6b',
|
||||
openState: false,
|
||||
colors: [
|
||||
'#2d8cf0',
|
||||
'#19be6b',
|
||||
'#ff9900',
|
||||
'#ed3f14',
|
||||
'#00b5ff',
|
||||
'#19c919',
|
||||
'#f9e31c',
|
||||
'#ea1a1a',
|
||||
'#9b1dea',
|
||||
'#00c2b1',
|
||||
'#ac7a33',
|
||||
'#1d35ea',
|
||||
'#8bc34a',
|
||||
'#f16b62',
|
||||
'#ea4ca3',
|
||||
'#0d94aa',
|
||||
'#febd79',
|
||||
'#5d4037',
|
||||
'#00bcd4',
|
||||
'#f06292',
|
||||
'#cddc39',
|
||||
'#607d8b',
|
||||
'#000000',
|
||||
'#ffffff',
|
||||
'#2d8cf0',
|
||||
'#19be6b',
|
||||
'#ff9900',
|
||||
'#ed3f14',
|
||||
'#00b5ff',
|
||||
'#19c919',
|
||||
'#f9e31c',
|
||||
'#ea1a1a',
|
||||
'#9b1dea',
|
||||
'#00c2b1',
|
||||
'#ac7a33',
|
||||
'#1d35ea',
|
||||
'#8bc34a',
|
||||
'#f16b62',
|
||||
'#ea4ca3',
|
||||
'#0d94aa',
|
||||
'#febd79',
|
||||
'#5d4037',
|
||||
],
|
||||
hideDropDown: false,
|
||||
};
|
||||
},
|
||||
|
||||
computed: {},
|
||||
|
||||
mounted() {
|
||||
setInterval(this.toggleShowHide, 2000);
|
||||
},
|
||||
|
||||
methods: {
|
||||
setColor() {
|
||||
this.color = '#26bc77';
|
||||
},
|
||||
computed: {},
|
||||
methods: {
|
||||
setColor () {
|
||||
this.color = '#26bc77';
|
||||
},
|
||||
c1 (d) {
|
||||
console.log(d);
|
||||
},
|
||||
c2 (d) {
|
||||
console.log(d);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
c1(d) {
|
||||
console.log(d);
|
||||
},
|
||||
c2(d) {
|
||||
console.log(d);
|
||||
},
|
||||
onOpenChange(state) {
|
||||
this.openState = state;
|
||||
},
|
||||
onChange(d) {
|
||||
console.log(d);
|
||||
},
|
||||
onActiveChange(d) {
|
||||
console.log(d);
|
||||
},
|
||||
toggleShowHide() {
|
||||
this.hideDropDown = !this.hideDropDown;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
32
examples/routers/custem-menu-item.vue
Normal file
32
examples/routers/custem-menu-item.vue
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
<template>
|
||||
<Submenu :name="`${parentName}`">
|
||||
<template slot="title">
|
||||
<span>{{ parentItem.name }}</span>
|
||||
</template>
|
||||
<template v-for="item in children">
|
||||
<custem-menu-item v-if="item.children && item.children.length !== 0" :key="`menu-${item.name}`" :parent-item="item"></custem-menu-item>
|
||||
<menu-item v-else :name="`${item.name}`" :key="`menu-${item.name}`">{{ item.name }}</menu-item>
|
||||
</template>
|
||||
</Submenu>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'custemMenuItem',
|
||||
props: {
|
||||
parentItem: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
},
|
||||
theme: String,
|
||||
iconSize: Number
|
||||
},
|
||||
computed: {
|
||||
parentName () {
|
||||
return this.parentItem.name
|
||||
},
|
||||
children () {
|
||||
return this.parentItem.children
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -249,14 +249,17 @@
|
|||
|
||||
<template>
|
||||
<div style="width: 500px;margin: 100px;">
|
||||
<Row>
|
||||
<Col span="12">
|
||||
<DatePicker type="date" show-week-numbers placeholder="Select date" style="width: 200px"></DatePicker>
|
||||
</Col>
|
||||
<Col span="12">
|
||||
<DatePicker type="daterange" show-week-numbers placement="bottom-end" placeholder="Select date" style="width: 200px"></DatePicker>
|
||||
</Col>
|
||||
</Row>
|
||||
<p><input type="text"></p>
|
||||
|
||||
<DatePicker type="month" show-week-numbers placeholder="Select date" style="width: 200px"></DatePicker>
|
||||
<DatePicker type="year" show-week-numbers placeholder="Select date" style="width: 200px"></DatePicker>
|
||||
|
||||
<DatePicker type="date" transfer show-week-numbers placeholder="Select date" style="width: 400px"></DatePicker>
|
||||
<DatePicker type="datetime" show-week-numbers confirm placeholder="Select date" style="width: 400px"></DatePicker>
|
||||
|
||||
<DatePicker type="daterange" transfer show-week-numbers placeholder="Select date" style="width: 400px"></DatePicker>
|
||||
<DatePicker type="datetimerange" transfer show-week-numbers placeholder="Select date" style="width: 400px"></DatePicker>
|
||||
<Time-Picker :steps="[1, 1, 15]" :value="new Date()"></Time-Picker>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -1,17 +1,353 @@
|
|||
<template>
|
||||
<Dropdown trigger="click" style="margin-left: 20px">
|
||||
<a href="javascript:void(0)">
|
||||
click 触发
|
||||
<Icon type="arrow-down-b"></Icon>
|
||||
</a>
|
||||
<DropdownMenu slot="list">
|
||||
<DropdownItem>驴打滚</DropdownItem>
|
||||
<DropdownItem>炸酱面</DropdownItem>
|
||||
<DropdownItem>豆汁儿</DropdownItem>
|
||||
<DropdownItem>冰糖葫芦</DropdownItem>
|
||||
<DropdownItem>北京烤鸭</DropdownItem>
|
||||
</DropdownMenu>
|
||||
</Dropdown>
|
||||
<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>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
|
|
|
|||
|
|
@ -41,13 +41,20 @@
|
|||
|
||||
<template>
|
||||
<div>
|
||||
<InputNumber :max="1000000000" :min="1" v-model="value1" :formatter="formatter" :parser="parser" @on-change="change" style="width: 200px"></InputNumber>
|
||||
<!-- <InputNumber :max="1000000000" :min="1" v-model="value1" :formatter="formatter" :parser="parser" @on-change="change" style="width: 200px"></InputNumber>
|
||||
<InputNumber :max="1000000000" :min="1" v-model="value2" :formatter="formatter2" :parser="parser2" @on-change="change" style="width: 200px"></InputNumber>
|
||||
|
||||
<InputNumber @on-change="change" style="width: 200px"></InputNumber>
|
||||
|
||||
<InputNumber v-model="valueNull" @on-change="change" style="width: 200px"></InputNumber>
|
||||
<InputNumber v-model="valueNull" @on-change="change" :formatter="formatter" :parser="parser" style="width: 200px"></InputNumber>
|
||||
|
||||
<InputNumber v-model="value2" @on-focus="focus" style="width: 200px"></InputNumber>
|
||||
|
||||
<InputNumber v-model="value3" style="width: 200px" placeholder="Enter something..."></InputNumber> -->
|
||||
|
||||
|
||||
<InputNumber v-model="valueNull" style="width: 200px" :min='0' :max='10000' :precision='2' ></InputNumber>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
|
@ -56,6 +63,7 @@
|
|||
return {
|
||||
value1: 1800000,
|
||||
value2: 55,
|
||||
value3: 100,
|
||||
valueNull:null,
|
||||
formatter: (value) => `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ','),
|
||||
parser: (value) => value.replace(/\$\s?|(,*)/g, ''),
|
||||
|
|
@ -64,6 +72,9 @@
|
|||
}
|
||||
},
|
||||
methods: {
|
||||
focus (e) {
|
||||
e.target.select()
|
||||
},
|
||||
change (v) {
|
||||
console.log(v)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,46 +1,213 @@
|
|||
<template>
|
||||
<Menu active-name="1-2" :open-names="['1']" theme="dark">
|
||||
<Submenu name="1">
|
||||
<template slot="title">
|
||||
<Icon type="ios-analytics"></Icon>
|
||||
Navigation One
|
||||
</template>
|
||||
<MenuGroup title="Item 1">
|
||||
<MenuItem name="1-1">Option 1</MenuItem>
|
||||
<MenuItem name="1-2">Option 2</MenuItem>
|
||||
</MenuGroup>
|
||||
<MenuGroup title="Item 2">
|
||||
<MenuItem name="1-3">Option 3</MenuItem>
|
||||
<MenuItem name="1-4">Option 4</MenuItem>
|
||||
</MenuGroup>
|
||||
</Submenu>
|
||||
<Submenu name="2">
|
||||
<template slot="title">
|
||||
<Icon type="ios-filing"></Icon>
|
||||
Navigation Two
|
||||
</template>
|
||||
<MenuItem name="2-1">Option 5</MenuItem>
|
||||
<MenuItem name="2-2">Option 6</MenuItem>
|
||||
<Submenu name="3">
|
||||
<template slot="title">Submenu</template>
|
||||
<MenuItem name="3-1">Option 7</MenuItem>
|
||||
<MenuItem name="3-2">Option 8</MenuItem>
|
||||
<div>
|
||||
<Menu ref="menu" active-name="1-2" :open-names="openNames" theme="dark" accordion @on-open-change="handleOpenChange">
|
||||
<Submenu name="1">
|
||||
<template slot="title">
|
||||
<Icon type="ios-analytics"></Icon>
|
||||
Navigation One
|
||||
</template>
|
||||
<MenuGroup title="Item 1">
|
||||
<MenuItem name="1-1">Option 1</MenuItem>
|
||||
<MenuItem name="1-2">Option 2</MenuItem>
|
||||
</MenuGroup>
|
||||
<MenuGroup title="Item 2">
|
||||
<MenuItem name="1-3">Option 3</MenuItem>
|
||||
<MenuItem name="1-4">Option 4</MenuItem>
|
||||
</MenuGroup>
|
||||
</Submenu>
|
||||
</Submenu>
|
||||
<Submenu name="4">
|
||||
<template slot="title">
|
||||
<Icon type="ios-gear"></Icon>
|
||||
Navigation Three
|
||||
<Submenu name="2">
|
||||
<template slot="title">
|
||||
<Icon type="ios-filing"></Icon>
|
||||
Navigation Two
|
||||
</template>
|
||||
<MenuItem name="2-1">Option 5</MenuItem>
|
||||
<MenuItem name="2-2">Option 6</MenuItem>
|
||||
<Submenu name="3">
|
||||
<template slot="title">Submenu</template>
|
||||
<MenuItem name="3-1">Option 7</MenuItem>
|
||||
<MenuItem name="3-2">Option 8</MenuItem>
|
||||
</Submenu>
|
||||
<Submenu name="4">
|
||||
<template slot="title">Submenu</template>
|
||||
<MenuItem name="4-1">Option 7</MenuItem>
|
||||
<MenuItem name="4-2">Option 8</MenuItem>
|
||||
</Submenu>
|
||||
</Submenu>
|
||||
<Submenu name="5">
|
||||
<template slot="title">
|
||||
<Icon type="ios-gear"></Icon>
|
||||
Navigation Three
|
||||
</template>
|
||||
<MenuItem name="5-1">Option 9</MenuItem>
|
||||
<MenuItem name="5-2">Option 10</MenuItem>
|
||||
<MenuItem name="5-3">Option 11</MenuItem>
|
||||
<MenuItem name="5-4">Option 12</MenuItem>
|
||||
</Submenu>
|
||||
</Menu>
|
||||
<br/>
|
||||
<Menu ref="menu2" theme="dark" accordion :open-names="openNames2" @on-open-change="handleOpenChange">
|
||||
<template v-for="item in menuList">
|
||||
<custem-menu-item v-if="item.children" :key="`menu-${item.name}`" :parent-item="item"></custem-menu-item>
|
||||
<menu-item v-else :name="`${item.name}`" :key="`menu-${item.name}`">{{ item.name }}</menu-item>
|
||||
</template>
|
||||
<MenuItem name="4-1">Option 9</MenuItem>
|
||||
<MenuItem name="4-2">Option 10</MenuItem>
|
||||
<MenuItem name="4-3">Option 11</MenuItem>
|
||||
<MenuItem name="4-4">Option 12</MenuItem>
|
||||
</Submenu>
|
||||
</Menu>
|
||||
</Menu>
|
||||
<Button @click="addNewItem">添加菜单项</Button>
|
||||
<Button @click="changeActive">修改激活项</Button>
|
||||
<Button @click="setOpenNames">修改展开数组</Button>
|
||||
<Menu mode="horizontal" theme="light" :active-name="activeName" @on-open-change="hc">
|
||||
<MenuItem name="1">
|
||||
<Icon type="ios-paper"></Icon>
|
||||
内容管理
|
||||
</MenuItem>
|
||||
<MenuItem name="2">
|
||||
<Icon type="ios-people"></Icon>
|
||||
用户管理
|
||||
</MenuItem>
|
||||
<Submenu name="3">
|
||||
<template slot="title">
|
||||
<Icon type="stats-bars"></Icon>
|
||||
统计分析
|
||||
</template>
|
||||
<MenuGroup title="使用">
|
||||
<MenuItem name="3-1">新增和启动</MenuItem>
|
||||
<MenuItem name="3-2">活跃分析</MenuItem>
|
||||
<MenuItem name="3-3">时段分析</MenuItem>
|
||||
</MenuGroup>
|
||||
<MenuGroup title="留存">
|
||||
<MenuItem name="3-4">用户留存</MenuItem>
|
||||
<MenuItem name="3-5">流失用户</MenuItem>
|
||||
</MenuGroup>
|
||||
</Submenu>
|
||||
<Submenu name="4">
|
||||
<template slot="title">
|
||||
<Icon type="stats-bars"></Icon>
|
||||
统计分析2
|
||||
</template>
|
||||
<MenuGroup title="使用2">
|
||||
<MenuItem name="4-1">新增和启动2</MenuItem>
|
||||
<MenuItem name="4-2">活跃分析2</MenuItem>
|
||||
<MenuItem name="4-3">时段分析2</MenuItem>
|
||||
</MenuGroup>
|
||||
<MenuGroup title="留存2">
|
||||
<MenuItem name="4-4">用户留存2</MenuItem>
|
||||
<MenuItem name="4-5">流失用户2</MenuItem>
|
||||
</MenuGroup>
|
||||
</Submenu>
|
||||
<MenuItem name="5">
|
||||
<Icon type="settings"></Icon>
|
||||
综合设置
|
||||
</MenuItem>
|
||||
</Menu>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import custemMenuItem from './custem-menu-item.vue'
|
||||
export default {
|
||||
|
||||
components: {
|
||||
custemMenuItem
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
openNames: ['1'],
|
||||
openNames2: [],
|
||||
menuList: [
|
||||
{
|
||||
name: '111',
|
||||
children: [
|
||||
{
|
||||
name: '111-111'
|
||||
},
|
||||
{
|
||||
name: '111-222'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: '222',
|
||||
children: [
|
||||
{
|
||||
name: '222-111'
|
||||
},
|
||||
{
|
||||
name: '222-222',
|
||||
children: [
|
||||
{
|
||||
name: '222-222-111'
|
||||
},
|
||||
{
|
||||
name: '222-222-222',
|
||||
children: [
|
||||
{
|
||||
name: '222-222-222-111'
|
||||
},
|
||||
{
|
||||
name: '222-222-222-222'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: '222-333',
|
||||
children: [
|
||||
{
|
||||
name: '222-333-111',
|
||||
children: [
|
||||
{
|
||||
name: '222-333-111-111'
|
||||
},
|
||||
{
|
||||
name: '222-333-111-222'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: '222-333-222',
|
||||
children: [
|
||||
{
|
||||
name: '222-333-222-111'
|
||||
},
|
||||
{
|
||||
name: '222-333-222-222'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
activeName: '1'
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleOpenChange (name) {
|
||||
console.log(name)
|
||||
},
|
||||
setOpenNames () {
|
||||
this.openNames = ['2', '3'];
|
||||
this.openNames2 = ['222', '222-222', '222-222-222', '222-222-222-111']
|
||||
this.$nextTick(() => {
|
||||
this.$refs.menu.updateOpened();
|
||||
this.$refs.menu2.updateOpened();
|
||||
})
|
||||
},
|
||||
addNewItem () {
|
||||
this.menuList[1].children[1].children.push({
|
||||
name: '222-222-333',
|
||||
children: [
|
||||
{
|
||||
name: '222-222-333-111'
|
||||
}
|
||||
]
|
||||
})
|
||||
},
|
||||
changeActive () {
|
||||
this.activeName = String(Number(this.activeName) + 1)
|
||||
},
|
||||
hc (data) {
|
||||
console.log(data);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,22 +1,87 @@
|
|||
<template>
|
||||
<div style="margin: 200px;">
|
||||
<Poptip title="提示标题" transfer>
|
||||
<div slot="content" style="padding: 50px">
|
||||
<Button>click me</Button>
|
||||
</div>
|
||||
<Button>click 激活</Button>
|
||||
</Poptip>
|
||||
<div style="margin: 200px">
|
||||
<Tabs value="name1">
|
||||
<TabPane label="标签一" name="name1">
|
||||
<!-- <div style="width: 200px;height:300px;overflow: auto;">
|
||||
<Poptip title="提示标题" content="标签一的内容" placement="left" transfer >
|
||||
<Button id="aaa">左边</Button>
|
||||
</Poptip>
|
||||
<Poptip title="提示标题" content="标签一的内容" placement="right" transfer>
|
||||
<Button id="aaa">右边</Button>
|
||||
</Poptip>
|
||||
<Poptip title="提示标题" content="标签一的内容" placement="top" transfer>
|
||||
<Button id="aaa">上边</Button>
|
||||
</Poptip>
|
||||
<Poptip title="提示标题" content="标签一的内容" placement="bottom" transfer>
|
||||
<Button id="aaa">下边</Button>
|
||||
</Poptip>
|
||||
</div> -->
|
||||
<div>
|
||||
<Poptip title="提示标题" content="标签一的内容" transfer>
|
||||
<Button id="aaa">点击显示</Button>
|
||||
<div slot="content">
|
||||
<Button @click='loadData(15)'>15条数据</Button>
|
||||
<Button @click='loadData(10)'>10条数据</Button>
|
||||
<Button @click='loadData(5)'>5条数据</Button>
|
||||
<Button @click='loadData(3)'>3条数据</Button>
|
||||
<Table :columns='columns1' :data='data1'>
|
||||
</Table>
|
||||
</div>
|
||||
</Poptip>
|
||||
</div>
|
||||
</TabPane>
|
||||
<TabPane label="标签二" name="name2">标签二的内容</TabPane>
|
||||
</Tabs>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
ok () {
|
||||
this.$Message.info('点击了确定');
|
||||
},
|
||||
cancel () {
|
||||
this.$Message.info('点击了取消');
|
||||
data () {
|
||||
return {
|
||||
options: {
|
||||
|
||||
},
|
||||
columns1:[
|
||||
{
|
||||
title: 'Data1',
|
||||
key: 'data1',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: 'Data2',
|
||||
key: 'data2',
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: 'Data3',
|
||||
key: 'data3',
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: 'Data4',
|
||||
key: 'data4',
|
||||
width: 100
|
||||
}
|
||||
],
|
||||
data1:[],
|
||||
}
|
||||
},
|
||||
created(){
|
||||
this.loadData(5);
|
||||
},
|
||||
methods:{
|
||||
loadData(num){
|
||||
let data = [];
|
||||
for (let i=0; i<num; i++) {
|
||||
data.push({
|
||||
data1:Math.random()*1000000,
|
||||
data2:Math.random()*100000000,
|
||||
data3:Math.random()*10000000000,
|
||||
data4:Math.random()*1000000000000,
|
||||
})
|
||||
}
|
||||
this.data1 = data
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -2,6 +2,8 @@
|
|||
<div>
|
||||
<Rate v-model="value"></Rate>
|
||||
<Rate allow-half v-model="valueHalf"></Rate>
|
||||
<Rate clearable v-model="valueClear"></Rate>
|
||||
<Rate clearable allow-half v-model="valueClearHalf"></Rate>
|
||||
<!--<Rate show-text v-model="valueText"></Rate>-->
|
||||
<!--<Rate show-text allow-half v-model="valueCustomText">-->
|
||||
<!--<span style="color: #f5a623">{{ valueCustomText }}</span>-->
|
||||
|
|
@ -17,7 +19,9 @@
|
|||
valueHalf: 2.5,
|
||||
valueText: 3,
|
||||
valueCustomText: 4.0,
|
||||
valueDisabled: 2.4
|
||||
valueDisabled: 2.4,
|
||||
valueClear: 1,
|
||||
valueClearHalf: 1.5,
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
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,28 +1,91 @@
|
|||
<style>
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<br><br><br><br><br>
|
||||
<Table border :columns="columns1" height="500" :data="data1"></Table>
|
||||
<br><br><br><br><br>
|
||||
<!--<Table width="550" height="200" border :columns="columns2" :data="data4"></Table>-->
|
||||
<!-- <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 :columns="columns7" height="240" :data="data7"></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>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
isCollapsed: false,
|
||||
columns1: [
|
||||
{
|
||||
title: 'Name',
|
||||
key: 'name',
|
||||
align: 'center',
|
||||
width: 200,
|
||||
minWidth: 100,
|
||||
maxWidth: 200,
|
||||
fixed: 'left',
|
||||
filters: [
|
||||
{
|
||||
|
|
@ -51,7 +114,8 @@
|
|||
title: 'Age',
|
||||
key: 'age',
|
||||
align: 'center',
|
||||
width: 200,
|
||||
minWidth: 100,
|
||||
maxWidth: 200,
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
|
|
@ -62,7 +126,8 @@
|
|||
title: 'Street',
|
||||
key: 'street',
|
||||
align: 'center',
|
||||
width: 200
|
||||
minWidth: 100,
|
||||
maxWidth: 200,
|
||||
},
|
||||
{
|
||||
title: 'Block',
|
||||
|
|
@ -72,14 +137,16 @@
|
|||
title: 'Building',
|
||||
key: 'building',
|
||||
align: 'center',
|
||||
width: 200,
|
||||
minWidth: 100,
|
||||
maxWidth: 200,
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
title: 'Door No.',
|
||||
key: 'door',
|
||||
align: 'center',
|
||||
width: 200
|
||||
minWidth: 100,
|
||||
maxWidth: 200,
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -95,13 +162,15 @@
|
|||
title: 'Company Address',
|
||||
key: 'caddress',
|
||||
align: 'center',
|
||||
width: 200
|
||||
minWidth: 100,
|
||||
maxWidth: 200,
|
||||
},
|
||||
{
|
||||
title: 'Company Name',
|
||||
key: 'cname',
|
||||
align: 'center',
|
||||
width: 200
|
||||
minWidth: 100,
|
||||
maxWidth: 200,
|
||||
}
|
||||
]
|
||||
},
|
||||
|
|
@ -116,8 +185,9 @@
|
|||
title: 'Gender',
|
||||
key: 'gender',
|
||||
align: 'center',
|
||||
width: 200,
|
||||
//fixed: 'right'
|
||||
minWidth: 100,
|
||||
maxWidth: 200,
|
||||
fixed: 'right'
|
||||
}
|
||||
],
|
||||
columns2: [
|
||||
|
|
@ -360,6 +430,7 @@
|
|||
{
|
||||
title: 'Age',
|
||||
key: 'age',
|
||||
width:200,
|
||||
},
|
||||
{
|
||||
title: 'Address',
|
||||
|
|
@ -393,6 +464,34 @@
|
|||
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 () {
|
||||
|
|
@ -411,6 +510,22 @@
|
|||
});
|
||||
}
|
||||
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)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -158,21 +158,57 @@
|
|||
<!--</script>-->
|
||||
|
||||
<template>
|
||||
<Tabs type="card">
|
||||
<TabPane v-for="tab in tabs" :key="tab" :label="'标签' + tab">标签{{ tab }}</TabPane>
|
||||
<div>
|
||||
<i-input></i-input>
|
||||
<Button type="ghost" @click="handleTabsAdd" size="small" slot="extra">增加</Button>
|
||||
</Tabs>
|
||||
|
||||
<hr style="margin: 10px 0;">
|
||||
<Tabs type="card">
|
||||
<TabPane v-for="tab in tabs" :key="tab" :label="'Tab' + tab">
|
||||
<div>
|
||||
<h3>Some text...</h3>
|
||||
<i-button>Some focusable content...{{ tab }}</i-button>
|
||||
</div>
|
||||
</TabPane>
|
||||
</Tabs>
|
||||
<Tabs type="card">
|
||||
<TabPane label="标签一">标签一的内容</TabPane>
|
||||
<TabPane label="标签二" disabled>标签二的内容</TabPane>
|
||||
<TabPane label="标签三">标签三的内容</TabPane>
|
||||
</Tabs>
|
||||
<tabs v-model="name" type="card" @on-click="handleClick">
|
||||
<tab-pane name="a" label="标签一">
|
||||
<div>1</div>
|
||||
</tab-pane>
|
||||
<tab-pane name="b" label="标签二">
|
||||
<div>2</div>
|
||||
</tab-pane>
|
||||
<tab-pane name="c" label="标签三">
|
||||
<div>3</div>
|
||||
</tab-pane>
|
||||
<tab-pane name="d" label="标签四">
|
||||
<div>4</div>
|
||||
</tab-pane>
|
||||
<tab-pane name="e" label="标签五">
|
||||
<div>5</div>
|
||||
</tab-pane>
|
||||
</tabs>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
tabs: 2
|
||||
tabs: 2,
|
||||
name: 'b',
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleTabsAdd () {
|
||||
this.tabs ++;
|
||||
},
|
||||
handleClick (name) {
|
||||
console.log(name);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
18
examples/routers/time.vue
Normal file
18
examples/routers/time.vue
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
<template>
|
||||
<div>
|
||||
<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')
|
||||
};
|
||||
},
|
||||
computed: {},
|
||||
methods: {}
|
||||
};
|
||||
</script>
|
||||
Loading…
Add table
Add a link
Reference in a new issue