wangbing
6 years ago
parent
bd0a764736
commit
c722be6d6f
@ -1,6 +0,0 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="Encoding" defaultCharsetForPropertiesFiles="UTF-8">
|
||||
<file url="PROJECT" charset="UTF-8" />
|
||||
</component>
|
||||
</project>
|
||||
@ -1,6 +0,0 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="JavaScriptLibraryMappings">
|
||||
<includedPredefinedLibrary name="ECMAScript 6" />
|
||||
</component>
|
||||
</project>
|
||||
|
After Width: | Height: | Size: 1.6 KiB |
@ -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>
|
||||
@ -0,0 +1,223 @@
|
||||
<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">
|
||||
<form-select
|
||||
:data="dzdjList"
|
||||
v-model="form.dzdj"
|
||||
label="地址等级"/>
|
||||
|
||||
<van-field
|
||||
clickable
|
||||
v-model="form.dmdm"
|
||||
required
|
||||
clearable
|
||||
label="地名代码"
|
||||
placeholder="请检索选择地名"/>
|
||||
|
||||
<form-select
|
||||
:data="lqxlList"
|
||||
v-model="form.lqxl"
|
||||
label="路区序列"/>
|
||||
|
||||
<form-number
|
||||
v-model="form.lqbh"
|
||||
label="路区编号"/>
|
||||
|
||||
<form-number
|
||||
:readonly="!form.lqbh"
|
||||
v-model="form.lqfh"
|
||||
label="路区副号"/>
|
||||
|
||||
<form-select
|
||||
:data="lqlcList"
|
||||
v-model="form.lqlc"
|
||||
label="路区量词"/>
|
||||
|
||||
<form-select
|
||||
:data="qnxlList"
|
||||
v-model="form.qnxl"
|
||||
label="区内序列"/>
|
||||
|
||||
<form-number
|
||||
v-model="form.lzbh"
|
||||
label="楼幢编号"/>
|
||||
|
||||
<form-number
|
||||
:readonly="!form.lzbh"
|
||||
v-model="form.lzfh"
|
||||
label="楼幢副号"/>
|
||||
|
||||
<form-select
|
||||
:data="lzlcList"
|
||||
v-model="form.lzlc"
|
||||
label="楼幢量词"/>
|
||||
|
||||
<form-number
|
||||
v-model="form.lcbh"
|
||||
label="楼层编号"/>
|
||||
|
||||
<form-select
|
||||
:data="lclcList"
|
||||
v-model="form.lclc"
|
||||
label="楼幢量词"/>
|
||||
|
||||
<form-number
|
||||
v-model="form.shbh"
|
||||
label="室号编号"/>
|
||||
|
||||
<form-number
|
||||
:readonly="!form.shbh"
|
||||
v-model="form.shfh"
|
||||
label="室号副号"/>
|
||||
|
||||
<form-select
|
||||
:data="shlcList"
|
||||
v-model="form.shlc"
|
||||
label="室号量词"/>
|
||||
|
||||
<form-select
|
||||
:data="sszrqList"
|
||||
v-model="form.sszrq"
|
||||
required
|
||||
clearable
|
||||
label="所属责任区"/>
|
||||
<form-select
|
||||
required
|
||||
clearable
|
||||
:data="sssqList"
|
||||
v-model="form.sssq"
|
||||
label="所属社区"/>
|
||||
|
||||
<van-field
|
||||
clickable
|
||||
v-model="form.dzmc"
|
||||
required
|
||||
clearable
|
||||
label="地址名称"
|
||||
placeholder="请输入"/>
|
||||
<van-button style="margin:30px 0" type="primary" size="large" @click="onSubmit">提交</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 {
|
||||
form: {},
|
||||
dzdjList: [
|
||||
{text: "一级", code: "1", value: "一级"},
|
||||
{text: "二级", code: "2", value: "二级"},
|
||||
{text: "三级", code: "3", value: "三级"},
|
||||
{text: "四级", code: "4", value: "四级"},
|
||||
{text: "五级", code: "5", value: "五级"},
|
||||
{text: "六级", code: "6", value: "六级"}
|
||||
],
|
||||
lqxlList: [
|
||||
{text: "路区序列", code: "1", value: "路区序列"},
|
||||
],
|
||||
lqlcList: [
|
||||
{text: "号", code: "号", value: "号"},
|
||||
{text: "幢", code: "幢", value: "幢"},
|
||||
],
|
||||
qnxlList: [
|
||||
{text: "区内序列", code: "1", value: "区内序列"},
|
||||
],
|
||||
lzlcList: [
|
||||
{text: "号", code: "号", value: "号"},
|
||||
{text: "幢", code: "幢", value: "幢"},
|
||||
],
|
||||
lclcList: [
|
||||
{text: "层", code: "层", value: "层"},
|
||||
],
|
||||
shlcList: [
|
||||
{text: "室", code: "室", value: "室"},
|
||||
],
|
||||
sszrqList: [
|
||||
{text: "责任区1", code: "责任区1", value: "责任区1"},
|
||||
],
|
||||
sssqList: [
|
||||
{text: "社区1", code: "社区1", value: "社区1"},
|
||||
],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onClickLeft() {
|
||||
this.$router.go(-1)
|
||||
},
|
||||
onClickRight() {
|
||||
this.$router.push('nav');
|
||||
},
|
||||
onSubmit() {
|
||||
window.console.log(this.form);
|
||||
Toast.loading({
|
||||
duration: 0,
|
||||
forbidClick: true,
|
||||
message: '正在提交'
|
||||
});
|
||||
|
||||
setTimeout(() => {
|
||||
Toast.clear();
|
||||
Toast({
|
||||
duration: 1000,
|
||||
message: "提交成功"
|
||||
});
|
||||
setTimeout(() => {
|
||||
this.onClickLeft();
|
||||
}, 1000)
|
||||
}, 2000)
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
|
||||
.layout {
|
||||
&-bar {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
top: 0px;
|
||||
}
|
||||
|
||||
.body {
|
||||
margin-top: 50px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,145 @@
|
||||
<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="身份证号"/>
|
||||
|
||||
<form-cphm
|
||||
v-model="vm.cphm"
|
||||
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'
|
||||
import FormCphm from '../../wbui/form/FormCphm'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
[NavBar.name]: NavBar,
|
||||
[Toast.name]: Toast,
|
||||
[Button.name]: Button,
|
||||
[Icon.name]: Icon,
|
||||
[Field.name]: Field,
|
||||
FormDatetime,
|
||||
FormDate,
|
||||
FormTime,
|
||||
FormSelect,
|
||||
FormNumber,
|
||||
FormSfzh,
|
||||
FormCphm,
|
||||
},
|
||||
|
||||
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>
|
||||
@ -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>
|
||||
@ -0,0 +1,219 @@
|
||||
<template>
|
||||
<div>
|
||||
<van-field
|
||||
v-model="value"
|
||||
:required="required"
|
||||
clearable
|
||||
clickable
|
||||
readonly
|
||||
:label="label"
|
||||
@click="showPicker"
|
||||
right-icon="logistics"
|
||||
placeholder="车牌号码">
|
||||
</van-field>
|
||||
<van-popup
|
||||
v-model="showPopup"
|
||||
position="bottom">
|
||||
<van-picker
|
||||
ref="prefix"
|
||||
:columns="columns"
|
||||
:show-toolbar="true"
|
||||
confirm-button-text="确认"
|
||||
cancel-button-text="取消"
|
||||
@confirm="onConfirm"
|
||||
@cancel="onCancel"
|
||||
@change="onChange"/>
|
||||
</van-popup>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import {
|
||||
Field,
|
||||
Popup,
|
||||
Toast,
|
||||
Picker,
|
||||
} from 'vant';
|
||||
|
||||
import keyboard from '../../wbui/keyboard/index'
|
||||
|
||||
export default{
|
||||
components: {
|
||||
[Field.name]: Field,
|
||||
[Popup.name]: Popup,
|
||||
[Toast.name]: Toast,
|
||||
[Picker.name]: Picker,
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
showPopup: false,
|
||||
value: '',
|
||||
columns: [
|
||||
{
|
||||
values: [
|
||||
{
|
||||
key: '',
|
||||
text: '京',
|
||||
children: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P', 'Q', 'Y']
|
||||
},
|
||||
{
|
||||
key: '',
|
||||
text: '津',
|
||||
children: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P', 'Q', 'R']
|
||||
},
|
||||
{
|
||||
key: '',
|
||||
text: '冀',
|
||||
children: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'O', 'R', 'T']
|
||||
},
|
||||
{key: '', text: '晋', children: ['A', 'B', 'C', 'D', 'E', 'F', 'H', 'J', 'K', 'L', 'M']},
|
||||
{
|
||||
key: '',
|
||||
text: '蒙',
|
||||
children: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M']
|
||||
},
|
||||
{
|
||||
key: '',
|
||||
text: '辽',
|
||||
children: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P']
|
||||
},
|
||||
{key: '', text: '吉', children: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K']},
|
||||
{
|
||||
key: '',
|
||||
text: '黑',
|
||||
children: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P', 'R']
|
||||
},
|
||||
{
|
||||
key: '',
|
||||
text: '沪',
|
||||
children: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'AX', 'BX', 'DX']
|
||||
},
|
||||
{
|
||||
key: '',
|
||||
text: '苏',
|
||||
children: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'U']
|
||||
},
|
||||
{key: '', text: '浙', children: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L']},
|
||||
{
|
||||
key: '',
|
||||
text: '皖',
|
||||
children: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P', 'R', 'S']
|
||||
},
|
||||
{key: '', text: '闽', children: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K']},
|
||||
{
|
||||
key: '',
|
||||
text: '赣',
|
||||
children: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'S']
|
||||
},
|
||||
{
|
||||
key: '',
|
||||
text: '鲁',
|
||||
children: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P', 'Q', 'R', 'S', 'U', 'V', 'W', 'Y']
|
||||
},
|
||||
{
|
||||
key: '',
|
||||
text: '豫',
|
||||
children: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P', 'Q', 'R', 'S', 'U']
|
||||
},
|
||||
{
|
||||
key: '',
|
||||
text: '鄂',
|
||||
children: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P', 'Q', 'R', 'S', 'AW']
|
||||
},
|
||||
{
|
||||
key: '',
|
||||
text: '湘',
|
||||
children: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'S', 'U']
|
||||
},
|
||||
{
|
||||
key: '',
|
||||
text: '粤',
|
||||
children: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']
|
||||
},
|
||||
{
|
||||
key: '',
|
||||
text: '桂',
|
||||
children: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P', 'R']
|
||||
},
|
||||
{key: '', text: '琼', children: ['A', 'B', 'C', 'D', 'E', 'F']},
|
||||
{key: '', text: '渝', children: ['A', 'B', 'C', 'D', 'F', 'G', 'H', 'N']},
|
||||
{
|
||||
key: '',
|
||||
text: '川',
|
||||
children: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']
|
||||
},
|
||||
{key: '', text: '贵', children: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J']},
|
||||
{
|
||||
key: '',
|
||||
text: '云',
|
||||
children: ['A', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P', 'Q', 'R', 'S']
|
||||
},
|
||||
{key: '', text: '藏', children: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J']},
|
||||
{key: '', text: '陕', children: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'V']},
|
||||
{
|
||||
key: '',
|
||||
text: '甘',
|
||||
children: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P']
|
||||
},
|
||||
{key: '', text: '青', children: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H']},
|
||||
{key: '', text: '宁', children: ['A', 'B', 'C', 'D', 'E']},
|
||||
{
|
||||
key: '',
|
||||
text: '新',
|
||||
children: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P', 'Q', 'S']
|
||||
}
|
||||
],
|
||||
className: 'column1',
|
||||
defaultIndex: 9
|
||||
},
|
||||
{
|
||||
values: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P', 'Q', 'Y'],
|
||||
className: 'column2',
|
||||
defaultIndex: 6
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
props: {
|
||||
'label': String,
|
||||
'required': Boolean
|
||||
},
|
||||
methods: {
|
||||
onConfirm() {
|
||||
//隐藏区域选择并弹出字母键盘
|
||||
const c = this.$refs['prefix'].getValues();
|
||||
this.showPopup = false;
|
||||
keyboard({
|
||||
value: c[0].text + c[1],
|
||||
cols: 10,
|
||||
keys: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', '[+]'],
|
||||
finish: this.finish,
|
||||
filter: this.filter,
|
||||
})
|
||||
},
|
||||
onCancel() {
|
||||
this.showPopup = false;
|
||||
},
|
||||
onChange(picker, values) {
|
||||
window.console.log(values);
|
||||
// picker.setColumnValues(1, values.children);
|
||||
},
|
||||
showPicker(){
|
||||
this.showPopup = true;
|
||||
},
|
||||
finish(value){
|
||||
this.value = value;
|
||||
this.$emit('input', this.value);
|
||||
},
|
||||
filter(key){
|
||||
if (key === '[+]') {
|
||||
Toast("扫描未实现")
|
||||
return "";
|
||||
}
|
||||
return key;
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
@ -1,40 +1,104 @@
|
||||
<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>
|
||||
<van-popup
|
||||
v-model="showPopup"
|
||||
:style="'height:'+ (54*rows+30) +'px;'"
|
||||
position="bottom">
|
||||
<div>
|
||||
<input class="view" readonly v-model="value"/>
|
||||
</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 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 v-for="key in keys" :key="key" role="key" class="van-hairline van-key" @click="onKey(key)"
|
||||
:style="'width:'+ 100/cols +'%;'">{{key}}</i>
|
||||
</div>
|
||||
<div class="van-number-keyboard__sidebar">
|
||||
<i role="control" :style="'height:'+ 54*rows/2 +'px;line-height:'+54*rows/2+'px;'"
|
||||
class="van-hairline van-key van-key--delete van-key--big van-key--gray van-key--delete"
|
||||
@click="onDelete">删除</i>
|
||||
<i role="control" :style="'height:'+ 54*rows/2 +'px;line-height:'+54*rows/2+'px;'"
|
||||
class="van-hairline van-key van-key--blue van-key--big van-key--close"
|
||||
@click="onFinish">完成</i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</van-popup>
|
||||
|
||||
</template>
|
||||
<script>
|
||||
import {
|
||||
Popup,
|
||||
NumberKeyboard,
|
||||
} from 'vant';
|
||||
|
||||
export default{
|
||||
components: {},
|
||||
components: {
|
||||
[Popup.name]: Popup,
|
||||
[NumberKeyboard.name]: NumberKeyboard
|
||||
},
|
||||
props: {
|
||||
showPopup: Boolean,
|
||||
value: String,
|
||||
keys: Array,
|
||||
cols: Number,
|
||||
cancel: Function,
|
||||
finish: Function,
|
||||
filter: Function
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
value: '',
|
||||
defaultIndex: 0,
|
||||
rows: 0
|
||||
}
|
||||
},
|
||||
props: {
|
||||
'keyGroup': Array,
|
||||
methods: {
|
||||
onKey: function (key) {
|
||||
const keyFiler = this.filter(key);
|
||||
this.value = this.value + keyFiler;
|
||||
this.$emit('input', this.value);
|
||||
},
|
||||
onDelete: function () {
|
||||
if (this.value.length > 0) {
|
||||
this.value = this.value.substr(0, this.value.length - 1)
|
||||
}
|
||||
this.$emit('input', this.value);
|
||||
},
|
||||
onFinish(){
|
||||
this.showPopup = false;
|
||||
this.$emit('input', this.value);
|
||||
if (this.finish) {
|
||||
this.finish(this.value);
|
||||
}
|
||||
},
|
||||
onCancel(){
|
||||
if (this.cancel) {
|
||||
this.cancel();
|
||||
}
|
||||
},
|
||||
show(){
|
||||
this.showPopup = true;
|
||||
this.rows = Math.ceil(this.keys.length / this.cols);
|
||||
window.console.log(this.rows)
|
||||
}
|
||||
},
|
||||
methods: {},
|
||||
mounted(){
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.view {
|
||||
width: 100%;
|
||||
background-color: #FFFFFF;
|
||||
outline: none;
|
||||
border: 0px;
|
||||
height: 30px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
i[role="key"]:active {
|
||||
background-color: #d2d2d2;
|
||||
}
|
||||
|
||||
i[role="control"]:active {
|
||||
opacity: 0.7
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,29 @@
|
||||
import Vue from 'vue'
|
||||
import Keyboard from '../../wbui/keyboard/Keyboard'
|
||||
function createInstance() {
|
||||
// 返回一个扩展实例构造器
|
||||
const KeyboardConstructor = Vue.extend(Keyboard);
|
||||
// 构造一个实例
|
||||
const toastDom = new KeyboardConstructor({
|
||||
el: document.createElement('div'),
|
||||
});
|
||||
// 把实例化的 toast.vue 添加到 body 里
|
||||
document.body.appendChild(toastDom.$el);
|
||||
return toastDom;
|
||||
}
|
||||
|
||||
// 注册为全局组件的函数
|
||||
function KeyBoard(options = {}) {
|
||||
const toastDom = createInstance();
|
||||
toastDom.cols = options.cols || 3;
|
||||
toastDom.keys = options.keys;
|
||||
toastDom.value = options.value || '';
|
||||
toastDom.finish = options.finish || null;
|
||||
toastDom.cancel = options.cancel || null;
|
||||
toastDom.filter = options.filter || function (key) {
|
||||
return key;
|
||||
};
|
||||
toastDom.show();
|
||||
}
|
||||
|
||||
export default KeyBoard
|
||||
Loading…
Reference in new issue