Merge remote-tracking branch 'upstream/2.0' into 2.0
This commit is contained in:
jingsam
commit
1212d3da35
22 changed files with 317 additions and 122 deletions
|
|
@ -47,6 +47,8 @@ li + li { border-left: solid 1px #bbb; padding-left: 10px; margin-left: 10px; }
|
|||
<li><router-link to="/backtop">Backtop</router-link></li>
|
||||
<li><router-link to="/page">Page</router-link></li>
|
||||
<li><router-link to="/transfer">Transfer</router-link></li>
|
||||
<li><router-link to="/date">Date</router-link></li>
|
||||
<li><router-link to="/form">Form</router-link></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<router-view></router-view>
|
||||
|
|
|
|||
|
|
@ -42,12 +42,12 @@ const router = new VueRouter({
|
|||
component: require('./routers/checkbox.vue')
|
||||
},
|
||||
{
|
||||
path: '/steps',
|
||||
component: require('./routers/steps.vue')
|
||||
path: '/steps',
|
||||
component: require('./routers/steps.vue')
|
||||
},
|
||||
{
|
||||
path: '/timeline',
|
||||
component: require('./routers/timeline.vue')
|
||||
path: '/timeline',
|
||||
component: require('./routers/timeline.vue')
|
||||
},
|
||||
{
|
||||
path: '/switch',
|
||||
|
|
@ -152,7 +152,15 @@ const router = new VueRouter({
|
|||
{
|
||||
path: '/transfer',
|
||||
component: require('./routers/transfer.vue')
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/date',
|
||||
component: require('./routers/date.vue')
|
||||
},
|
||||
{
|
||||
path: '/form',
|
||||
component: require('./routers/form.vue')
|
||||
},
|
||||
]
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -1,14 +1,178 @@
|
|||
<template>
|
||||
<Date-picker type="datetime" placeholder="选择日期和时间" style="width: 200px"></Date-picker>
|
||||
<br>
|
||||
<Date-picker type="datetime" format="yyyy-MM-dd HH:mm" placeholder="选择日期和时间（不含秒）" style="width: 200px"></Date-picker>
|
||||
<br>
|
||||
<Date-picker type="datetimerange" placeholder="选择日期和时间" style="width: 300px"></Date-picker>
|
||||
<br>
|
||||
<Date-picker type="datetimerange" format="yyyy-MM-dd HH:mm" placeholder="选择日期和时间（不含秒）" style="width: 300px"></Date-picker>
|
||||
<div>
|
||||
{{ val1 }}
|
||||
<Date-picker v-model="val1" type="daterange" placeholder="选择日期" style="width: 200px"></Date-picker>
|
||||
<div @click="val1 = '2017-03-02'">change</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
val1: ''
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
ddd () {
|
||||
const date = new Date(this.val1);
|
||||
const year = date.getFullYear();
|
||||
const month = date.getMonth() + 1;
|
||||
const day = date.getDate();
|
||||
|
||||
return `${year}-${month}-${day}`;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<!--<template>-->
|
||||
<!--<row>-->
|
||||
<!--<i-col span="12">-->
|
||||
<!--<Date-picker type="date" :options="options1" placeholder="选择日期" style="width: 200px"></Date-picker>-->
|
||||
<!--</i-col>-->
|
||||
<!--<i-col span="12">-->
|
||||
<!--<Date-picker type="daterange" :options="options2" placement="bottom-end" placeholder="选择日期" style="width: 200px"></Date-picker>-->
|
||||
<!--</i-col>-->
|
||||
<!--</row>-->
|
||||
<!--</template>-->
|
||||
<!--<script>-->
|
||||
<!--export default {-->
|
||||
<!--data () {-->
|
||||
<!--return {-->
|
||||
<!--options1: {-->
|
||||
<!--shortcuts: [-->
|
||||
<!--{-->
|
||||
<!--text: '今天',-->
|
||||
<!--value () {-->
|
||||
<!--return new Date();-->
|
||||
<!--},-->
|
||||
<!--onClick: (picker) => {-->
|
||||
<!--this.$Message.info('点击了今天');-->
|
||||
<!--}-->
|
||||
<!--},-->
|
||||
<!--{-->
|
||||
<!--text: '昨天',-->
|
||||
<!--value () {-->
|
||||
<!--const date = new Date();-->
|
||||
<!--date.setTime(date.getTime() - 3600 * 1000 * 24);-->
|
||||
<!--return date;-->
|
||||
<!--},-->
|
||||
<!--onClick: (picker) => {-->
|
||||
<!--this.$Message.info('点击了昨天');-->
|
||||
<!--}-->
|
||||
<!--},-->
|
||||
<!--{-->
|
||||
<!--text: '一周前',-->
|
||||
<!--value () {-->
|
||||
<!--const date = new Date();-->
|
||||
<!--date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);-->
|
||||
<!--return date;-->
|
||||
<!--},-->
|
||||
<!--onClick: (picker) => {-->
|
||||
<!--this.$Message.info('点击了一周前');-->
|
||||
<!--}-->
|
||||
<!--}-->
|
||||
<!--]-->
|
||||
<!--},-->
|
||||
<!--options2: {-->
|
||||
<!--shortcuts: [-->
|
||||
<!--{-->
|
||||
<!--text: '最近一周',-->
|
||||
<!--value () {-->
|
||||
<!--const end = new Date();-->
|
||||
<!--const start = new Date();-->
|
||||
<!--start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);-->
|
||||
<!--return [start, end];-->
|
||||
<!--}-->
|
||||
<!--},-->
|
||||
<!--{-->
|
||||
<!--text: '最近一个月',-->
|
||||
<!--value () {-->
|
||||
<!--const end = new Date();-->
|
||||
<!--const start = new Date();-->
|
||||
<!--start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);-->
|
||||
<!--return [start, end];-->
|
||||
<!--}-->
|
||||
<!--},-->
|
||||
<!--{-->
|
||||
<!--text: '最近三个月',-->
|
||||
<!--value () {-->
|
||||
<!--const end = new Date();-->
|
||||
<!--const start = new Date();-->
|
||||
<!--start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);-->
|
||||
<!--return [start, end];-->
|
||||
<!--}-->
|
||||
<!--}-->
|
||||
<!--]-->
|
||||
<!--}-->
|
||||
<!--}-->
|
||||
<!--}-->
|
||||
<!--}-->
|
||||
<!--</script>-->
|
||||
|
||||
|
||||
<!--<template>-->
|
||||
<!--<row>-->
|
||||
<!--<i-col span="12">-->
|
||||
<!--<Date-picker :value="value1" format="yyyy年MM月dd日" type="date" placeholder="选择日期" style="width: 200px"></Date-picker>-->
|
||||
<!--</i-col>-->
|
||||
<!--<i-col span="12">-->
|
||||
<!--<Date-picker :value="value2" format="yyyy/MM/dd" type="daterange" placement="bottom-end" placeholder="选择日期" style="width: 200px"></Date-picker>-->
|
||||
<!--</i-col>-->
|
||||
<!--</row>-->
|
||||
<!--</template>-->
|
||||
<!--<script>-->
|
||||
<!--export default {-->
|
||||
<!--data () {-->
|
||||
<!--return {-->
|
||||
<!--value1: '2016-01-01',-->
|
||||
<!--value2: ['2016-01-01', '2016-02-15']-->
|
||||
<!--}-->
|
||||
<!--}-->
|
||||
<!--}-->
|
||||
<!--</script>-->
|
||||
|
||||
|
||||
<!--<template>-->
|
||||
<!--<div>-->
|
||||
<!--<Date-picker type="datetime" placeholder="选择日期和时间" style="width: 200px"></Date-picker>-->
|
||||
<!--<br>-->
|
||||
<!--<Date-picker type="datetime" format="yyyy-MM-dd HH:mm" placeholder="选择日期和时间（不含秒）" style="width: 200px"></Date-picker>-->
|
||||
<!--<br>-->
|
||||
<!--<Date-picker type="datetimerange" placeholder="选择日期和时间" style="width: 300px"></Date-picker>-->
|
||||
<!--<br>-->
|
||||
<!--<Date-picker type="datetimerange" format="yyyy-MM-dd HH:mm" placeholder="选择日期和时间（不含秒）" style="width: 300px"></Date-picker>-->
|
||||
<!--</div>-->
|
||||
<!--</template>-->
|
||||
<!--<script>-->
|
||||
<!--export default {-->
|
||||
|
||||
<!--}-->
|
||||
<!--</script>-->
|
||||
|
||||
|
||||
<!--<template>-->
|
||||
<!--<row>-->
|
||||
<!--<i-col span="12">-->
|
||||
<!--<Time-picker type="time" placeholder="选择时间" style="width: 168px"></Time-picker>-->
|
||||
<!--</i-col>-->
|
||||
<!--<i-col span="12">-->
|
||||
<!--<Time-picker type="timerange" placement="bottom-end" placeholder="选择时间" style="width: 168px"></Time-picker>-->
|
||||
<!--</i-col>-->
|
||||
<!--</row>-->
|
||||
<!--</template>-->
|
||||
<!--<script>-->
|
||||
<!--export default {-->
|
||||
<!--data () {-->
|
||||
<!--return {-->
|
||||
<!--t1: ''-->
|
||||
<!--}-->
|
||||
<!--}-->
|
||||
<!--}-->
|
||||
<!--</script>-->
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,21 +1,17 @@
|
|||
<template>
|
||||
<i-form v-ref:form-validate :model="formValidate" :rules="ruleValidate" :label-width="100">
|
||||
<Form-item label="输入框" prop="input">
|
||||
<i-input :value.sync="formValidate.input" placeholder="请输入"></i-input>
|
||||
<i-form ref="formInline" :model="formInline" :rules="ruleInline" inline>
|
||||
<Form-item prop="user">
|
||||
<Input type="text" v-model="formInline.user" placeholder="Username">
|
||||
<Icon type="ios-person-outline" slot="prepend"></Icon>
|
||||
</Input>
|
||||
</Form-item>
|
||||
<Form-item label="Ajax：" prop="ajax">
|
||||
<div slot="label">
|
||||
<span>Ajax</span>
|
||||
<Tooltip content="基于 axios">
|
||||
<Icon type="ios-help" size="14" color="#3399ff"></Icon>
|
||||
</Tooltip>
|
||||
<span>：</span>
|
||||
</div>
|
||||
<Switch :checked.sync="formValidate.ajax"></Switch>
|
||||
<Form-item prop="password">
|
||||
<Input type="password" v-model="formInline.password" placeholder="Password">
|
||||
<Icon type="ios-locked-outline" slot="prepend"></Icon>
|
||||
</Input>
|
||||
</Form-item>
|
||||
<Form-item>
|
||||
<i-button type="primary" @click="handleSubmit('formValidate')">提交</i-button>
|
||||
<i-button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px">重置</i-button>
|
||||
<Button type="primary" @click.native="handleSubmit('formInline')">登录</Button>
|
||||
</Form-item>
|
||||
</i-form>
|
||||
</template>
|
||||
|
|
@ -23,27 +19,30 @@
|
|||
export default {
|
||||
data () {
|
||||
return {
|
||||
formValidate: {
|
||||
input: '123',
|
||||
ajax: true
|
||||
formInline: {
|
||||
user: '',
|
||||
password: ''
|
||||
},
|
||||
ruleValidate: {
|
||||
|
||||
ruleInline: {
|
||||
user: [
|
||||
{ required: true, message: '请填写用户名', trigger: 'blur' }
|
||||
],
|
||||
password: [
|
||||
{ required: true, message: '请填写密码', trigger: 'blur' },
|
||||
{ type: 'string', min: 6, message: '密码长度不能小于6位', trigger: 'blur' }
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleSubmit (name) {
|
||||
handleSubmit(name) {
|
||||
this.$refs[name].validate((valid) => {
|
||||
if (valid) {
|
||||
this.$Message.success('提交成功!');
|
||||
console.log('success');
|
||||
} else {
|
||||
this.$Message.error('表单验证失败!');
|
||||
console.log('fail')
|
||||
}
|
||||
})
|
||||
},
|
||||
handleReset (name) {
|
||||
this.$refs[name].resetFields();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue