init
init
This commit is contained in:
梁灏
parent
5762337416
commit
7fa943eb39
128 changed files with 51042 additions and 1 deletions
147
local/routers/button.vue
Normal file
147
local/routers/button.vue
Normal file
|
|
@ -0,0 +1,147 @@
|
|||
<style>
|
||||
|
||||
</style>
|
||||
<template>
|
||||
<Button size="small" shape="circle" type="primary" icon="add" @click="abc">
|
||||
<Icon type="link"></Icon>
|
||||
链接
|
||||
</Button>
|
||||
|
||||
<Button-group>
|
||||
<Button>上一页</Button>
|
||||
<Button>1</Button>
|
||||
<Button>2</Button>
|
||||
<Button>3</Button>
|
||||
<Button>下一页</Button>
|
||||
</Button-group>
|
||||
{{ msg }}
|
||||
<i-input placeholder="请输入邮箱" size="large" :value.sync="msg" @keyup.enter="abc"></i-input>
|
||||
|
||||
<Switch size="large" @on-change="changeSwitch">
|
||||
<span slot="checkedItem">开</span>
|
||||
<span slot="unCheckedItem">关</span>
|
||||
</Switch>
|
||||
|
||||
<br>
|
||||
|
||||
<Radio @on-change="changeRadio">梁灏</Radio>
|
||||
<Radio checked>谦翔</Radio>
|
||||
|
||||
<br><br><br>
|
||||
<Radio value="谦翔">
|
||||
谦翔
|
||||
</Radio>
|
||||
<Radio value="梁灏">
|
||||
梁灏
|
||||
</Radio>
|
||||
<Radio value="倪斌">
|
||||
倪斌
|
||||
</Radio>
|
||||
<Radio value="段模">
|
||||
段模
|
||||
</Radio>
|
||||
<br><br><br>
|
||||
<Radio-group>
|
||||
<Radio value="谦翔">
|
||||
谦翔
|
||||
</Radio>
|
||||
<Radio value="梁灏">
|
||||
梁灏
|
||||
</Radio>
|
||||
<Radio value="倪斌">
|
||||
倪斌
|
||||
</Radio>
|
||||
<Radio value="段模">
|
||||
段模
|
||||
</Radio>
|
||||
</Radio-group>
|
||||
<br><br><br>
|
||||
<Checkbox-group :model="checkbox" @on-change="groupChange">
|
||||
<Checkbox value="梁灏">梁灏</Checkbox>
|
||||
<Checkbox value="段模">段模</Checkbox>
|
||||
<Checkbox value="倪斌">倪斌</Checkbox>
|
||||
</Checkbox-group>
|
||||
<br><br><br>
|
||||
<div @click="changeCB">切换名称数据</div>
|
||||
{{ checkbox | json }}
|
||||
<br><br><br>
|
||||
<Checkbox :checked.sync="singleRadio" @on-change="singleChange">梁灏</Checkbox>
|
||||
<br>
|
||||
{{ singleRadio }}
|
||||
<div @click="singleRadio = !singleRadio">切换单个名称数据</div>
|
||||
<br><br><br>
|
||||
------------------------------
|
||||
<Input-number :step="1.2" :value="1"></Input-number>
|
||||
{{ inumber }}
|
||||
<br><br><br>
|
||||
<Row type="flex" align="top" justify="end" class="hello world">
|
||||
<i-col span="8" offset="2" class="nihao shijie">1</i-col>
|
||||
<i-col span="8" push="3">2</i-col>
|
||||
<i-col span="8" order="2">3</i-col>
|
||||
</Row>
|
||||
|
||||
<br><br><br>
|
||||
|
||||
<Page :current="1" :total="100" simple></Page>
|
||||
</template>
|
||||
<script>
|
||||
import { Button, Icon, Input, Switch, Radio, Checkbox, InputNumber, Row, Col, Page } from 'iview';
|
||||
const ButtonGroup = Button.Group;
|
||||
const RadioGroup = Radio.Group;
|
||||
const CheckboxGroup = Checkbox.Group;
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Button,
|
||||
ButtonGroup,
|
||||
Icon,
|
||||
iInput: Input,
|
||||
Switch,
|
||||
Radio,
|
||||
RadioGroup,
|
||||
Checkbox,
|
||||
CheckboxGroup,
|
||||
InputNumber,
|
||||
Row,
|
||||
iCol: Col,
|
||||
Page
|
||||
},
|
||||
props: {
|
||||
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
msg: 123,
|
||||
radio: '梁灏',
|
||||
checkbox: ['倪斌'],
|
||||
inumber: 5,
|
||||
singleRadio: true
|
||||
}
|
||||
},
|
||||
ready () {
|
||||
setTimeout(() => {
|
||||
// this.checkbox = ['倪斌', '梁灏'];
|
||||
}, 2000);
|
||||
},
|
||||
methods: {
|
||||
abc() {
|
||||
console.log(123);
|
||||
},
|
||||
changeSwitch (data) {
|
||||
console.log(data);
|
||||
},
|
||||
changeRadio (data) {
|
||||
console.log(data);
|
||||
},
|
||||
changeCB () {
|
||||
this.checkbox = ['梁灏', '段模'];
|
||||
},
|
||||
groupChange (data) {
|
||||
// console.log(data);
|
||||
},
|
||||
singleChange (data) {
|
||||
// console.log(data);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
21
local/routers/index.vue
Normal file
21
local/routers/index.vue
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
<style>
|
||||
|
||||
</style>
|
||||
<template>
|
||||
<div>welcome</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
34
local/routers/layout.vue
Normal file
34
local/routers/layout.vue
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
<template>
|
||||
<Row>
|
||||
<i-col span="4">
|
||||
我在左边
|
||||
</i-col>
|
||||
<i-col span="20">
|
||||
我在右边
|
||||
</i-col>
|
||||
</Row>
|
||||
</template>
|
||||
<script>
|
||||
import { Row, Col } from 'iview';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Row,
|
||||
iCol: Col
|
||||
},
|
||||
props: {
|
||||
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
133
local/routers/more.vue
Normal file
133
local/routers/more.vue
Normal file
|
|
@ -0,0 +1,133 @@
|
|||
<style scoped>
|
||||
body{
|
||||
padding: 50px;
|
||||
height: 2000px;
|
||||
}
|
||||
.example-badge{
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
border-radius: 6px;
|
||||
background: #eee;
|
||||
display: inline-block;
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
|
||||
<Badge count="10">
|
||||
<a class="example-badge"></a>
|
||||
</Badge>
|
||||
|
||||
<Tag color="green" closable @on-close="closed">管理员</Tag>
|
||||
<Progress :percent="50" status="active" :stroke-width="20">
|
||||
|
||||
</Progress>
|
||||
|
||||
<Circle :percent="p">
|
||||
{{p}}%
|
||||
</Circle>
|
||||
<br><br>
|
||||
<Timeline pending>
|
||||
<Timeline-item color="red">发布3.0版本</Timeline-item>
|
||||
<Timeline-item color="green">
|
||||
<Icon type="time" slot="dot"></Icon>
|
||||
发布2.0版本
|
||||
</Timeline-item>
|
||||
<Timeline-item color="#ff6600">发布1.0版本</Timeline-item>
|
||||
<Timeline-item>发布里程碑版本</Timeline-item>
|
||||
</Timeline>
|
||||
<br><br>
|
||||
<Affix :offset-top="50" @on-change="affixChange">
|
||||
<Button>固定的图钉</Button>
|
||||
</Affix>
|
||||
<Back-top @on-click="backtop">
|
||||
|
||||
</Back-top>
|
||||
|
||||
<div style="width: 200px;height: 100px;border:1px solid #b2b2b2;position:relative">
|
||||
<!--<Spin size="large" fix>加载中...</Spin>-->
|
||||
<Spin size="large" fix v-if="spinShow">加载中...</Spin>
|
||||
</div>
|
||||
<div @click="spinShow = !spinShow">消失</div>
|
||||
<br><br>
|
||||
|
||||
<Button @click="nextStep">下一步</Button>
|
||||
<Button @click="step_status = 'error'">步骤3切换为错误</Button>
|
||||
<Button @click="step_process = 'error'">切换steps状态为error</Button>
|
||||
<Breadcrumb separator="<b>=></b>">
|
||||
<Breadcrumb-item href="/index">首页</Breadcrumb-item>
|
||||
<Breadcrumb-item href="/my">我的</Breadcrumb-item>
|
||||
<Breadcrumb-item>
|
||||
<Icon type="photo"></Icon>照片
|
||||
</Breadcrumb-item>
|
||||
</Breadcrumb>
|
||||
<br>
|
||||
<Steps :current="1" status="error">
|
||||
<Step title="已完成" content="这里是该步骤的描述信息"></Step>
|
||||
<Step title="进行中" content="这里是该步骤的描述信息"></Step>
|
||||
<Step title="待进行" content="这里是该步骤的描述信息"></Step>
|
||||
<Step title="待进行" content="这里是该步骤的描述信息"></Step>
|
||||
</Steps>
|
||||
<Button @click="testStatus = 'process'">change Status</Button>
|
||||
</template>
|
||||
<script>
|
||||
import { Badge, Tag, Progress, Circle, Timeline, Icon, Affix, Button, BackTop, Spin, Steps, Breadcrumb} from 'iview';
|
||||
const TimelineItem = Timeline.Item;
|
||||
const Step = Steps.Step;
|
||||
const BreadcrumbItem = Breadcrumb.Item;
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Badge,
|
||||
Tag,
|
||||
Progress,
|
||||
Circle,
|
||||
Timeline,
|
||||
TimelineItem,
|
||||
Icon,
|
||||
Affix,
|
||||
Button,
|
||||
BackTop,
|
||||
Spin,
|
||||
Steps,
|
||||
Step,
|
||||
Breadcrumb,
|
||||
BreadcrumbItem
|
||||
},
|
||||
props: {
|
||||
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
total: 512,
|
||||
p: 50,
|
||||
step_current: 0,
|
||||
step_status: 'wait',
|
||||
step_process: 'process',
|
||||
spinShow: true,
|
||||
testStatus: 'wait'
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
||||
},
|
||||
methods: {
|
||||
closed (e) {
|
||||
console.log(e)
|
||||
},
|
||||
affixChange (status) {
|
||||
console.log(status)
|
||||
},
|
||||
backtop () {
|
||||
console.log('toppp')
|
||||
},
|
||||
nextStep () {
|
||||
this.step_current += 1;
|
||||
}
|
||||
},
|
||||
ready () {
|
||||
setTimeout(() => {
|
||||
this.p = 60;
|
||||
}, 1000)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
36
local/routers/page.vue
Normal file
36
local/routers/page.vue
Normal file
|
|
@ -0,0 +1,36 @@
|
|||
<style>
|
||||
body{
|
||||
padding: 100px;
|
||||
}
|
||||
.ivu-page-item-active{
|
||||
color: #f60;
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<Page :current="1" :total="total" show-sizer show-total show-elevator :page-size="10" simple @on-change="setPage"></Page>
|
||||
</template>
|
||||
<script>
|
||||
import { Page } from 'iview';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Page
|
||||
},
|
||||
props: {
|
||||
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
total: 512
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
||||
},
|
||||
methods: {
|
||||
setPage (page) {
|
||||
console.log(page)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
44
local/routers/radio.vue
Normal file
44
local/routers/radio.vue
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
<template>
|
||||
<div>
|
||||
<Radio :checked.sync="radio">梁灏</Radio>
|
||||
{{ radio | json }}
|
||||
<div @click="radio = false">单项切换</div>
|
||||
<br><br><br>
|
||||
<Radio-group :model.sync="radioGroup" size="large" type="button" @on-change="changeGroup">
|
||||
<Radio value="梁灏"></Radio>
|
||||
<Radio value="段模"></Radio>
|
||||
<Radio value="倪斌"></Radio>
|
||||
</Radio-group>
|
||||
{{ radioGroup | json }}
|
||||
<div @click="radioGroup = '梁灏'">多项切换</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { Radio } from 'iview';
|
||||
|
||||
const RadioGroup = Radio.Group;
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Radio,
|
||||
RadioGroup
|
||||
},
|
||||
props: {
|
||||
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
radio: true,
|
||||
radioGroup: '段模'
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
||||
},
|
||||
methods: {
|
||||
changeGroup (data) {
|
||||
console.log(data);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Loading…
Add table
Add a link
Reference in a new issue