starter
/
starter-vant
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

git

Browse Source
master
wangbing 5 years ago
parent c6a8507a0b
commit 4c0acf5e0e
12 changed files with 641 additions and 6 deletions
Show Stats Download Patch File Download Diff File

12
src/App.vue
Unescape View File

@ -9,15 +9,17 @@
export default { export default {
data() { data() {
return { return {
transitionName: 'slide-right' transitionName: ''
}; };
}, },
watch: { watch: {
'$route' (to, from) { '$route' (to, from) {
if(to.path == '/'){ if (to.path.length > from.path.length) {
this.transitionName = 'slide-right';
}else{
this.transitionName = 'slide-left'; this.transitionName = 'slide-left';
} else if (to.path.length < from.path.length) {
this.transitionName = 'slide-right';
} else {
this.transitionName = '';
} }
} }
} }
@ -37,7 +39,7 @@
top: 0; top: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
transition: all 0.5s cubic-bezier(.55,0,.1,1); transition: all .5s cubic-bezier(.55,0,.1,1);
} }
.slide-left-enter, .slide-right-leave-active { .slide-left-enter, .slide-right-leave-active {
opacity: 0; opacity: 0;

22
src/main.js
Unescape View File

@ -8,3 +8,25 @@ new Vue({
el: '#app', el: '#app',
render: h => h(App) render: h => h(App)
}); });
/**
* 日期格式化
*/
Date.prototype.format = function (format) {
var o = {
"M+": this.getMonth() + 1, //month
"d+": this.getDate(), //day
"h+": this.getHours(), //hour
"m+": this.getMinutes(), //minute
"s+": this.getSeconds(), //second
"q+": Math.floor((this.getMonth() + 3) / 3), //quarter
"S": this.getMilliseconds() //millisecond
}
if (/(y+)/.test(format)) format = format.replace(RegExp.$1,
(this.getFullYear() + "").substr(4 - RegExp.$1.length));
for (var k in o)if (new RegExp("(" + k + ")").test(format))
format = format.replace(RegExp.$1,
RegExp.$1.length == 1 ? o[k] :
("00" + o[k]).substr(("" + o[k]).length));
return format;
};

7
src/router.js
Unescape View File

@ -22,6 +22,13 @@ const routes = [
title: '设置中心' title: '设置中心'
} }
}, },
{
name: 'dzgl',
component: () => import('./view/dzgl'),
meta: {
title: '房屋管理'
}
},
]; ];
// add route path // add route path

139
src/view/dzgl/index.vue
Unescape View File

@ -0,0 +1,139 @@
<template>
<div class="layout">
<van-nav-bar class="layout-bar"
title="地址管理"
@click-left="onClickLeft"
@click-right="onClickRight"
left-arrow>
<van-icon name="home-o" slot="right"/>
</van-nav-bar>
<div class="body">
<van-field
clickable
v-model="vm.text"
required
clearable
label="普通文本"
placeholder="请输入"/>
<van-field
clickable
v-model="vm.textarea"
type="textarea"
required
clearable
label="多行文本"
placeholder="请输入"/>
<form-datetime
v-model="vm.datetime"
formatter="yyyy年MM月dd hh:mm:ss"
label="日期时间"/>
<form-date
v-model="vm.date"
formatter="yyyy年MM月dd"
label="日期"/>
<form-time
v-model="vm.time"
label="时间"/>
<form-select
:data="selectData"
v-model="vm.select"
label="选择"/>
<form-number
v-model="vm.number"
label="数量"/>
<form-sfzh
v-model="vm.sfzh"
label="身份证号"/>
<van-button style="margin-top: 30px" type="primary" size="large" @click="onSearch">查询</van-button>
</div>
</div>
</template>
<script>
import {
NavBar,
Toast,
Button,
Icon,
Field,
} from 'vant';
import FormDatetime from '../../wbui/form/FormDatetime'
import FormDate from '../../wbui/form/FormData'
import FormTime from '../../wbui/form/FormTime'
import FormSelect from '../../wbui/form/FormSelect'
import FormNumber from '../../wbui/form/FormNumber'
import FormSfzh from '../../wbui/form/FormSfzh'
export default {
components: {
[NavBar.name]: NavBar,
[Toast.name]: Toast,
[Button.name]: Button,
[Icon.name]: Icon,
[Field.name]: Field,
FormDatetime,
FormDate,
FormTime,
FormSelect,
FormNumber,
FormSfzh
},
data() {
return {
vm: {
text: '',
textarea: '',
datetime: '',
date: '',
time: '',
select: '',
number: '',
},
selectData: [//text为显示文字,其他属性可以自定义
{text: "[1]A", code: "1", value: "A"},
{text: "[2]B", code: "2", value: "B"},
{text: "[3]C", code: "3", value: "C"},
{text: "[4]D", code: "4", value: "D"},
{text: "[5]E", code: "5", value: "E"}
]
};
},
methods: {
onClickLeft() {
this.$router.go(-1)
},
onClickRight() {
this.$router.push('nav');
},
onSearch() {
window.console.log(this.vm);
},
}
};
</script>
<style lang="less">
.layout {
&-bar {
position: fixed;
width: 100%;
top: 0px;
}
.body {
margin-top: 50px;
}
}
</style>

10
src/view/nav/index.vue
Unescape View File

@ -19,6 +19,7 @@
<van-grid> <van-grid>
<van-grid-item <van-grid-item
@click="onItem(g.key)"
v-for="g in grids" v-for="g in grids"
:key="g.key" :key="g.key"
:icon="g.icon" :icon="g.icon"
@ -115,7 +116,14 @@
onRefresh() { onRefresh() {
Toast("Refresh finish"); Toast("Refresh finish");
this.isLoading = false; this.isLoading = false;
} },
onItem(index) {
switch (index){
case "1":
this.$router.push('dzgl');
break
}
},
} }
}; };
</script> </script>

78
src/wbui/form/FormData.vue
Unescape View File

@ -0,0 +1,78 @@
<template>
<div>
<van-field
v-model="value"
:required="required"
clearable
clickable
readonly
:label="label"
@click="onPick"
right-icon="clock-o"
placeholder="请选择日期"/>
<van-popup
v-model="showPopup"
position="bottom"
show-cancel-button>
<van-datetime-picker
:min-date="minDate"
v-model="currentDate"
@confirm="onConfirm"
@cancel="onCancel"
type="date"/>
</van-popup>
</div>
</template>
<script>
import {
Field,
DatetimePicker,
Popup,
} from 'vant';
export default{
components: {
[Field.name]: Field,
[DatetimePicker.name]: DatetimePicker,
[Popup.name]: Popup
},
data(){
return {
showPopup: false,
value: '',
currentDate: '',
minDate: '',
}
},
props: {
'label': String,
'formatter': String,
'required': Boolean
},
methods: {
onPick(){
this.showPopup = true;
},
onConfirm(value){
this.showPopup = false;
this.value = value.format(this.formatter);
this.$emit('input', this.value);
},
onCancel(){
this.showPopup = false;
}
},
mounted(){
this.minDate = new Date(new Date().getTime() - 100 * 365 * 24 * 60 * 60 * 1000);
this.currentDate = new Date();
if (!this.formatter) {
this.formatter = 'yyyy-MM-dd hh:mm:00'
}
}
}
</script>
<style lang="less">
</style>

78
src/wbui/form/FormDatetime.vue
Unescape View File

@ -0,0 +1,78 @@
<template>
<div>
<van-field
v-model="value"
:required="required"
clearable
clickable
readonly
:label="label"
@click="onPick"
right-icon="clock-o"
placeholder="请选择日期时间"/>
<van-popup
v-model="showPopup"
position="bottom"
show-cancel-button>
<van-datetime-picker
:min-date="minDate"
v-model="currentDate"
@confirm="onConfirm"
@cancel="onCancel"
type="datetime"/>
</van-popup>
</div>
</template>
<script>
import {
Field,
DatetimePicker,
Popup,
} from 'vant';
export default{
components: {
[Field.name]: Field,
[DatetimePicker.name]: DatetimePicker,
[Popup.name]: Popup
},
data(){
return {
showPopup: false,
value: '',
currentDate: '',
minDate: '',
}
},
props: {
'label': String,
'formatter': String,
'required': Boolean
},
methods: {
onPick(){
this.showPopup = true;
},
onConfirm(value){
this.showPopup = false;
this.value = value.format(this.formatter);
this.$emit('input', this.value);
},
onCancel(){
this.showPopup = false;
}
},
mounted(){
this.minDate = new Date(new Date().getTime() - 100 * 365 * 24 * 60 * 60 * 1000);
this.currentDate = new Date();
if (!this.formatter) {
this.formatter = 'yyyy-MM-dd hh:mm:00'
}
}
}
</script>
<style lang="less">
</style>

51
src/wbui/form/FormNumber.vue
Unescape View File

@ -0,0 +1,51 @@
<template>
<div>
<van-field
v-model="value"
:required="required"
clearable
readonly
:label="label"
@click="onPick">
<van-stepper
slot="input"
:value="value"
@change="onChange"/>
</van-field>
</div>
</template>
<script>
import {
Field,
Stepper,
} from 'vant';
export default{
components: {
[Field.name]: Field,
[Stepper.name]: Stepper,
},
data(){
return {
showPopup: false,
value: '',
}
},
props: {
'label': String,
'required': Boolean
},
methods: {
onPick(){
this.showPopup = true;
},
onChange(value){
this.showPopup = false;
this.$emit('input', value);
}
},
mounted(){
}
}
</script>

76
src/wbui/form/FormSelect.vue
Unescape View File

@ -0,0 +1,76 @@
<template>
<div>
<van-field
v-model="value"
:required="required"
clearable
readonly
:label="label"
@click="onPick"
right-icon="wap-nav"
placeholder="请选择"/>
<van-popup
v-model="showPopup"
position="bottom">
<van-picker
:columns="data"
:default-index="defaultIndex"
:show-toolbar="true"
confirm-button-text="确认"
cancel-button-text="取消"
@cancel="onCancel"
@confirm="onConfirm"/>
</van-popup>
</div>
</template>
<script>
import {
Field,
Picker,
Popup,
} from 'vant';
export default{
components: {
[Field.name]: Field,
[Picker.name]: Picker,
[Popup.name]: Popup
},
data(){
return {
showPopup: false,
value: '',
defaultIndex: 0,
}
},
props: {
'label': String,
'data': Array,
'required': Boolean
},
methods: {
onPick(){
this.showPopup = true;
},
onConfirm(value, index) {
this.showPopup = false;
this.value = this.data[index].text;
this.$emit('input',this.data[index]);
},
onCancel(){
this.showPopup = false;
}
},
mounted(){
for (let i = 0; i < this.data.length; i++) {
if (this.data[i] === this.value) {
this.defaultIndex = i;
}
}
}
}
</script>
<style lang="less">
</style>

66
src/wbui/form/FormSfzh.vue
Unescape View File

@ -0,0 +1,66 @@
<template>
<div>
<van-field
v-model="value"
:required="required"
clearable
clickable
readonly
:label="label"
@click="onPick"
right-icon="clock-o"
placeholder="证件号码"/>
<van-popup
:overlay="false"
v-model="showPopup"
position="bottom">
<keyboard :keyGroup="keyGroup"/>
</van-popup>
</div>
</template>
<script>
import {
Field,
Popup,
NumberKeyboard,
} from 'vant';
import Keyboard from '../../wbui/keyboard/Keyboard'
export default{
components: {
[Field.name]: Field,
[Popup.name]: Popup,
[NumberKeyboard.name]: NumberKeyboard,
Keyboard
},
data(){
return {
showPopup: false,
value: '',
currentTime: '',
keyGroup:[]
}
},
props: {
'label': String,
'required': Boolean
},
methods: {
onPick(){
this.showPopup = true;
},
onConfirm(){
this.showPopup = false;
this.$emit('input', this.value);
},
onCancel(){
this.showPopup = false;
}
},
mounted(){
}
}
</script>

67
src/wbui/form/FormTime.vue
Unescape View File

@ -0,0 +1,67 @@
<template>
<div>
<van-field
v-model="value"
:required="required"
clearable
clickable
readonly
:label="label"
@click="onPick"
right-icon="clock-o"
placeholder="请选择时间"/>
<van-popup
v-model="showPopup"
position="bottom">
<van-datetime-picker
v-model="currentTime"
@confirm="onConfirm"
@cancel="onCancel"
type="time"/>
</van-popup>
</div>
</template>
<script>
import {
Field,
DatetimePicker,
Popup,
} from 'vant';
export default{
components: {
[Field.name]: Field,
[DatetimePicker.name]: DatetimePicker,
[Popup.name]: Popup
},
data(){
return {
showPopup: false,
value: '',
currentTime: '',
}
},
props: {
'label': String,
'required': Boolean
},
methods: {
onPick(){
this.showPopup = true;
},
onConfirm(value){
this.showPopup = false;
this.value = value + ":00";
this.$emit('input', this.value);
},
onCancel(){
this.showPopup = false;
}
},
mounted(){
this.currentTime = new Date().format("hh:mm");
}
}
</script>

41
src/wbui/keyboard/Keyboard.vue
Unescape View File

@ -0,0 +1,41 @@
<template>
<div class="van-number-keyboard van-number-keyboard--custom van-number-keyboard--safe-area-inset-bottom"
style="z-index: 100;">
<div class="van-number-keyboard__body"><i role="button" tabindex="0" class="van-hairline van-key">1</i><i
role="button" tabindex="0" class="van-hairline van-key">2</i><i role="button" tabindex="0"
class="van-hairline van-key">3</i><i
role="button" tabindex="0" class="van-hairline van-key">4</i><i role="button" tabindex="0"
class="van-hairline van-key">5</i><i
role="button" tabindex="0" class="van-hairline van-key">6</i><i role="button" tabindex="0"
class="van-hairline van-key">7</i><i
role="button" tabindex="0" class="van-hairline van-key">8</i><i role="button" tabindex="0"
class="van-hairline van-key">9</i><i
role="button" tabindex="0" class="van-hairline van-key van-key--middle">0</i><i role="button"
tabindex="0"
class="van-hairline van-key">.</i>
</div>
<div class="van-number-keyboard__sidebar"><i role="button" tabindex="0"
class="van-hairline van-key van-key--delete van-key--big van-key--gray van-key--delete">删除</i><i
role="button" tabindex="0"
class="van-hairline van-key van-key--blue van-key--big van-key--close">完成</i>
</div>
</div>
</template>
<script>
export default{
components: {
},
data(){
return {
value: '',
defaultIndex: 0,
}
},
props: {
'keyGroup': Array,
},
methods: {},
mounted(){
}
}
</script>
Write Preview
Loading…
Cancel
Save

Powered by TurnKey Linux.