open
/
open-dbtool
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

优化

Browse Source
master
wangbing 4 years ago
parent b9b9e2e0ef
commit 43d509c637
2 changed files with 199 additions and 554 deletions
Show Stats Download Patch File Download Diff File

548
src/main/resources/modules/SpringBoot/resources/templates/control/mint-ui-extend.ftl
Unescape View File

@ -34,496 +34,118 @@
}
});
Vue.component('wb-field-select', {
data: function () {
return {
selectValue: '',
popupVisible: false,
clearVisible: false,
slots: [{
values: this.items
}],
}
},
computed: {
currentValue: {
get: function () {
return this.value;
},
set: function (value) {
this.$emit('input', value);
value ? this.clearVisible = true : this.clearVisible = false;
}
}
},
Vue.prototype.$action = 'go';
Vue.prototype.$isSubmit = false;
Vue.mixin({
methods: {
onSelect: function () {
this.popupVisible = true;
if (!this.value) {
this.currentValue = this.items[0];
}
},
onClear: function () {
this.currentValue = '';
},
onValuesChange: function (picker, values) {
if (this.popupVisible) {
this.currentValue = picker.getValues(0)[0];
}
},
},
props: ['value', 'label', 'placeholder', 'items'],
template: '' +
'<a class="mint-cell mint-field"><!---->' +
' <div class="mint-cell-wrapper">' +
' <div class="mint-cell-title"><!----><span class="mint-cell-text">{{label}}</span><!----></div>' +
' <div class="mint-cell-value">' +
' <input :placeholder="placeholder" @click="onSelect" readonly v-model="currentValue" class="mint-field-core">' +
' <div class="mint-field-clear" v-if="clearVisible" @click="onClear"><i class="mintui mintui-field-error"></i></div>' +
' </div>' +
' </div>' +
' <mt-popup style="width: 100%" v-model="popupVisible" position="bottom"><mt-picker :slots="slots" @change="onValuesChange"></mt-picker></mt-popup>' +
'</a>'
$push: function (param) {
Vue.prototype.$action = 'go';
if (typeof param === 'string') {
param = {
name: param
};
}
this.$router.push(param);
},
$pop: function () {
Vue.prototype.$action = 'back';
// if (typeof (this.$router) === 'undefined') {//客户端使用时偶会出现undefined错误
// window.history.back();
// this.$destroy();
// } else {
this.$router.go(-1);
this.$destroy();
// }
},
$replace: function (param) {
Vue.prototype.$action = 'go';
if (typeof param === 'string') {
param = {
name: param
};
}
this.$router.replace(param);
},
$home: function () {
Vue.prototype.$action = 'back';
this.$router.push("nav")
this.$destroy()
},
$showLoading: function () {
this.$toast.loading({
duration: 0,
forbidClick: true,
message: '请稍等...'
});
Vue.component('wb-field-dict', {
data: function () {
return {
selectValue: '',
popupVisible: false,
clearVisible: false,
slots: [{
values: this.items
}],
}
},
computed: {
currentValue: {
get: function () {
return this.value;
},
set: function (value) {
this.$emit('input', value);
value ? this.clearVisible = true : this.clearVisible = false;
}
}
},
created: function () {
this.items.forEach(function (item) {
item.keyValue = "[" + item.key + "]" + item.value;
})
},
methods: {
onSelect: function () {
this.popupVisible = true;
if (!this.value) {
this.currentValue = "[" + this.items[0].key + "]" + this.items[0].value;
}
Vue.prototype.$isSubmit = true
},
onClear: function () {
this.currentValue = '';
$closeLoading: function () {
this.$toast.clear();
Vue.prototype.$isSubmit = false
},
onValuesChange: function (picker, values) {
if (this.popupVisible) {
this.currentValue = "[" + picker.getValues(0)[0].key + "]" + picker.getValues(0)[0].value;
}
}
},
props: ['value', 'label', 'placeholder', 'items'],
template: '' +
'<a class="mint-cell mint-field"><!---->' +
' <div class="mint-cell-wrapper">' +
' <div class="mint-cell-title"><!----><span class="mint-cell-text">{{label}}</span><!----></div>' +
' <div class="mint-cell-value">' +
' <input :placeholder="placeholder" @click="onSelect" readonly v-model="currentValue" class="mint-field-core">' +
' <div class="mint-field-clear" v-if="clearVisible" @click="onClear"><i class="mintui mintui-field-error"></i></div>' +
' </div>' +
' </div>' +
' <mt-popup style="width: 100%" v-model="popupVisible" position="bottom"><mt-picker :slots="slots" valueKey="keyValue" @change="onValuesChange"></mt-picker></mt-popup>' +
'</a>'
});
Vue.component('wb-field-date', {
data: function () {
var startDate = new Date();
startDate.setFullYear(1990, 0, 1);
return {
selectValue: '',
clearVisible: false,
startDate:startDate
}
},
computed: {
currentValue: {
get: function () {
return this.value;
},
set: function (value) {
this.$emit('input', value);
value ? this.clearVisible = true : this.clearVisible = false;
}
}
},
methods: {
onSelect: function () {
this.$refs.picker.open();
},
onClear: function () {
this.currentValue = '';
},
onConfirm: function (value) {
this.currentValue = value.format("yyyy-MM-dd")
}
},
props: ['value', 'label', 'placeholder', 'items'],
template: '' +
'<a class="mint-cell mint-field"><!---->' +
' <div class="mint-cell-wrapper">' +
' <div class="mint-cell-title"><!----><span class="mint-cell-text">{{label}}</span><!----></div>' +
' <div class="mint-cell-value">' +
' <input :placeholder="placeholder" @click="onSelect" readonly v-model="currentValue" class="mint-field-core">' +
' <div class="mint-field-clear" v-if="clearVisible" @click="onClear"><i class="mintui mintui-field-error"></i></div>' +
' </div>' +
' </div>' +
' <mt-datetime-picker ref="picker" type="date" :startDate="startDate" v-model="selectValue" @confirm="onConfirm" year-format="{value}" month-format="{value}" date-format="{value}"></mt-datetime-picker>' +
'</a>'
$showMessage: function (msg, fn) {
this.$toast({
duration: 1000,
message: msg
});
Vue.component('wb-field-time', {
data: function () {
return {
selectValue: '',
clearVisible: false,
}
},
computed: {
currentValue: {
get: function () {
return this.value;
},
set: function (value) {
this.$emit('input', value);
value ? this.clearVisible = true : this.clearVisible = false;
}
}
},
methods: {
onSelect: function () {
this.$refs.picker.open();
},
onClear: function () {
this.currentValue = '';
},
onConfirm: function (value) {
this.currentValue = value;
if (typeof fn === 'function') {
setTimeout(function () {
fn();
}, 1000)
}
},
props: ['value', 'label', 'placeholder', 'items'],
template: '' +
'<a class="mint-cell mint-field"><!---->' +
' <div class="mint-cell-wrapper">' +
' <div class="mint-cell-title"><!----><span class="mint-cell-text">{{label}}</span><!----></div>' +
' <div class="mint-cell-value">' +
' <input :placeholder="placeholder" @click="onSelect" readonly v-model="currentValue" class="mint-field-core">' +
' <div class="mint-field-clear" v-if="clearVisible" @click="onClear"><i class="mintui mintui-field-error"></i></div>' +
' </div>' +
' </div>' +
' <mt-datetime-picker ref="picker" type="time" v-model="selectValue" @confirm="onConfirm" year-format="{value}" month-format="{value}" date-format="{value}"></mt-datetime-picker>' +
'</a>'
});
Vue.component('wb-field-datetime', {
data: function () {
return {
selectValue: '',
clearVisible: false,
}
},
computed: {
currentValue: {
get: function () {
return this.value;
activated: function () {
},
set: function (value) {
this.$emit('input', value);
value ? this.clearVisible = true : this.clearVisible = false;
filters: {
notNull: function (val) {
if (val === null) {
return "";
}
}
},
methods: {
onSelect: function () {
this.$refs.picker.open();
},
onClear: function () {
this.currentValue = '';
},
onConfirm: function (value) {
this.currentValue = value.format("yyyy-MM-dd hh:mm")
}
},
props: ['value', 'label', 'placeholder', 'items'],
template: '' +
'<a class="mint-cell mint-field"><!---->' +
' <div class="mint-cell-wrapper">' +
' <div class="mint-cell-title"><!----><span class="mint-cell-text">{{label}}</span><!----></div>' +
' <div class="mint-cell-value">' +
' <input :placeholder="placeholder" @click="onSelect" readonly v-model="currentValue" class="mint-field-core">' +
' <div class="mint-field-clear" v-if="clearVisible" @click="onClear"><i class="mintui mintui-field-error"></i></div>' +
' </div>' +
' </div>' +
' <mt-datetime-picker ref="picker" type="datetime" v-model="selectValue" @confirm="onConfirm" year-format="{value}" month-format="{value}" date-format="{value}"></mt-datetime-picker>' +
'</a>'
});
Vue.component('wb-field-cphm', {
Vue.component('form-area', {
data: function () {
return {
prefixData: [
{
key: '',
value: '京',
children: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P', 'Q', 'Y']
},
{
key: '',
value: '津',
children: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P', 'Q', 'R']
},
{key: '', value: '冀', children: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'O', 'R', 'T']},
{key: '', value: '晋', children: ['A', 'B', 'C', 'D', 'E', 'F', 'H', 'J', 'K', 'L', 'M']},
{key: '', value: '蒙', children: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M']},
{
key: '',
value: '辽',
children: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P']
},
{key: '', value: '吉', children: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K']},
{
key: '',
value: '黑',
children: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P', 'R']
},
{
key: '',
value: '沪',
children: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'AX', 'BX', 'DX']
},
{
key: '',
value: '苏',
children: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'U']
},
{key: '', value: '浙', children: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L']},
{
key: '',
value: '皖',
children: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P', 'R', 'S']
},
{key: '', value: '闽', children: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K']},
{key: '', value: '赣', children: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'S']},
{
key: '',
value: '鲁',
children: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P', 'Q', 'R', 'S', 'U', 'V', 'W', 'Y']
},
{
key: '',
value: '豫',
children: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P', 'Q', 'R', 'S', 'U']
},
{
key: '',
value: '鄂',
children: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P', 'Q', 'R', 'S', 'AW']
},
{
key: '',
value: '湘',
children: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'S', 'U']
},
{
key: '',
value: '粤',
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: '',
value: '桂',
children: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P', 'R']
},
{key: '', value: '琼', children: ['A', 'B', 'C', 'D', 'E', 'F']},
{key: '', value: '渝', children: ['A', 'B', 'C', 'D', 'F', 'G', 'H', 'N']},
{
key: '',
value: '川',
children: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']
},
{key: '', value: '贵', children: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J']},
{
key: '',
value: '云',
children: ['A', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P', 'Q', 'R', 'S']
},
{key: '', value: '藏', children: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J']},
{key: '', value: '陕', children: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'V']},
{
key: '',
value: '甘',
children: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P']
},
{key: '', value: '青', children: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H']},
{key: '', value: '宁', children: ['A', 'B', 'C', 'D', 'E']},
{
key: '',
value: '新',
children: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P', 'Q', 'S']
showValue: ''
}
],
popupVisible: false,
clearVisible: false,
slots: [{
values: [],
defaultIndex: 9,
className: 'slot1'
}, {
divider: true,
content: '',
className: 'slot2'
}, {
values: [],
defaultIndex: 11,
className: 'slot3'
}],
}
},
created: function () {
if (!this.value) {//当model为空时初始化前缀
this.$emit('input', this.prefixData[this.slots[0].defaultIndex].value + this.prefixData[this.slots[0].defaultIndex].children[this.slots[2].defaultIndex]);
}
this.slots[0].values = this.getSlot1();
this.slots[2].values = this.getSlot3(this.prefixData[0].value);
},
computed: {
prefix: {
get: function () {
return this.value.slice(0, 2);
props: {
'label': {
type: String,
default: ''
},
set: function (value) {
this.$emit('input', value + this.value.slice(2, this.value.length));
}
'required': {
type: Boolean,
default: false
},
subfix: {
get: function () {
return this.value.slice(2, this.value.length);
'readonly': {
type: Boolean,
default: false
},
set: function (value) {
this.$emit('input', this.value.slice(0, 2) + value);
value ? this.clearVisible = true : this.clearVisible = false;
}
'value': {
type: String,
default: ''
}
},
methods: {
onSelect: function () {
this.popupVisible = true;
},
getSlot1: function () {
var items = [];
this.prefixData.forEach(function (item) {
items.push(item.value);
});
return items;
},
getSlot3: function (value) {
for (var i in this.prefixData) {
if (value == this.prefixData[i].value) {
return this.prefixData[i].children;
}
}
return []
},
onClear: function () {
this.subfix = '';
},
onValuesChange: function (picker, values) {
if (this.popupVisible) {
picker.setSlotValues(1, this.getSlot3(values[0]));
this.prefix = picker.getSlotValue(0) + picker.getSlotValue(1)
}
onChange: function (value) {
this.$emit('input', value);
}
},
props: ['value', 'label', 'placeholder', 'items'],
template: '' +
'<a class="mint-cell mint-field"><!---->' +
' <div class="mint-cell-wrapper">' +
' <div class="mint-cell-title"><!----><span class="mint-cell-text">{{label}}</span><!----></div>' +
' <div class="mint-cell-value">' +
' <span @click="onSelect" style="padding-right: 5px;color:#47d3ff;line-height: 1.6">{{prefix}}</span>' +
' <input :placeholder="placeholder" maxlength="6" v-model="subfix" class="mint-field-core">' +
' <div class="mint-field-clear" v-if="clearVisible" @click="onClear"><i class="mintui mintui-field-error"></i></div>' +
' </div>' +
' </div>' +
' <mt-popup style="width: 100%" v-model="popupVisible" position="bottom"><mt-picker ref="picker" :slots="slots" @change="onValuesChange"></mt-picker></mt-popup>' +
'</a>'
'<van-field' +
' :value="value"' +
' :required="required"' +
' clearable' +
' :readonly="readonly"' +
' type="textarea"' +
' row="3"' +
' :label="label"' +
' @input="onChange"' +
' :placeholder="\'请输入\'"/>'
});
Vue.component('wb-field-pictures', {
data: function () {
return {
fileList: []
}
},
methods: {
onClear: function (item) {
this.fileList.remove(item);
},
onValuesChange: function (picker, values) {
if (this.popupVisible) {
picker.setSlotValues(1, this.getSlot3(values[0]));
this.prefix = picker.getSlotValue(0) + picker.getSlotValue(1)
}
},
onTakePicture: function () {
this.fileList.push({
name: '',
file: ''
})
setTimeout(function () {
this.$refs.input[this.fileList.length - 1].click();
}.bind(this), 1)
},
onChange: function (e, file) {
file.file = e.target.files[0]
file.name = e.target.files[0].name;
this.$emit("handle-file", file, {
finish: function () {
this.$emit("input", this.fileList)
}.bind(this),
cancel: function () {
this.fileList.remove(file);
this.$emit("input", this.fileList)
}.bind(this)
});
},
},
props: ['value', 'label'],
template: '' +
'<a class="mint-cell mint-field"><!---->' +
' <div class="mint-cell-wrapper">' +
' <div class="mint-cell-title"><!----><span class="mint-cell-text">{{label}}</span><!----></div>' +
' <div class="mint-cell-value">' +
' <div style="padding-top: 11px;padding-bottom: 11px;text-align: left;width: 100%">' +
' <mt-button type="primary" size="small" @click="onTakePicture">添加</mt-button>' +
' <div style="line-height: 35px;" v-for="item in fileList" v-show="item.name">' +
' <span class="mint-field-clear" style="padding-right: 10px;" @click="onClear(item)"><i class="mintui mintui-field-error"></i></span><!---->' +
' <a>{{item.name}}</a><!---->' +
' <input ref="input" @change="onChange($event,item)" type="file" style="display: none"/>' +
' </div>' +
' </div>' +
' </div>' +
' </div>' +
'</a>'
});
</script>

197
src/main/resources/modules/SpringBoot/resources/templates/layout/app.ftl
Unescape View File

@ -3,10 +3,11 @@
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<script src="${context}/static/dist/lib.min.js" type="text/javascript"></script>
<script src="${context}/static/dist/mint-ui.min.js" type="text/javascript"></script>
<link href="${context}/static/dist/mint-ui.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.10/lib/index.css"/>
<script src="https://cdn.jsdelivr.net/npm/vant@2.10/lib/vant.min.js"></script>
<link href="${context}/static/favicon.ico" rel="icon" type="image/x-icon"/>
<style>
* {
@ -19,113 +20,143 @@
height: 100%;
}
.left-in-right-out-enter-active, .left-in-right-out-leave-active {
transition: all 0.3s linear;
position: absolute;
.layout-bar {
position: fixed !important;
width: 100%;
top: 0;
}
.left-in-right-out-enter {
transform: translateX(-100%);
opacity: 0;
.layout .body {
margin-top: 50px;
}
.left-in-right-out-leave-to {
transform: translateX(100%);
opacity: 0;
.layout .body .van-grid-item {
min-height: 100px;
}
.right-in-left-out-enter-active, .right-in-left-out-leave-active {
transition: all .3s linear;
position: absolute;
.layout .body .van-nav-bar__title {
color: #767676;
}
.right-in-left-out-enter {
transform: translateX(100%);
.layout .body .van-grid-item__text {
font-size: 14px;
}
.right-in-left-out-leave-to {
transform: translateX(-100%);
.layout .body .van-cell {
padding: 10px 10px !important;
}
.left-in-right-out-enter-active, .left-in-right-out-leave-active {
transition: all 0.3s linear;
position: absolute;
.card {
background: #ffffff;
width: 100%;
margin: 10px 0;
border-radius: 3px;
box-shadow: 0 0 6px 0 #eaeaea;
border: 1px solid #eaeaea;
}
.left-in-right-out-enter {
transform: translateX(-100%);
opacity: 0;
.card .title {
height: 40px;
line-height: 40px;
padding: 0 15px;
}
.left-in-right-out-leave-to {
transform: translateX(100%);
opacity: 0;
.card .title .time {
float: right;
font-size: smaller;
color: #9a9a9a;
}
.card .info {
padding: 0 15px;
background: #ffffff;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
}
.card .info {
padding: 0 15px;
background: #ffffff;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
}
.card .info .content {
padding: 10px;
color: rgb(63, 63, 63);
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.right-in-left-out-enter-active, .right-in-left-out-leave-active {
transition: all .3s linear;
.card .info .content_view {
padding: 10px;
color: rgb(63, 63, 63);
}
.child-view {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
transition: all .5s cubic-bezier(.55, 0, .1, 1);
}
.right-in-left-out-enter {
transform: translateX(100%);
.go-enter, .back-leave-active {
opacity: 0;
-webkit-transform: translate(50px, 0);
transform: translate(50px, 0);
}
.right-in-left-out-leave-to {
transform: translateX(-100%);
.go-leave-active, .back-enter {
opacity: 0;
-webkit-transform: translate(-50px, 0);
transform: translate(-50px, 0);
}
</style>
</head>
<body>
<#include Layout.setControl("mint-ui-extend")/>
<#include controlHolder("mint-ui-extend")/>
<div id="app">
<transition :name="transitionName">
<transition :name="$action">
<router-view></router-view>
</transition>
</div>
<template id="home">
<div class="view">
<mt-header title="Hello world">
<router-link to="/" slot="left">
<mt-button icon="back">返回</mt-button>
</router-link>
<mt-button icon="more" slot="right"></mt-button>
</mt-header>
<div class="content" style="text-align: center;padding-top: 200px">
Hello world <router-link to="demo">demo</router-link>
<div class="layout">
<van-nav-bar class="layout-bar"
:title="$route.meta.title"
left-arrow
left-text="返回"
@click-left="$pop"
@click-right="$home">
</van-nav-bar>
<div class="body">
Hello world <a @click="$push('demo')">demo</a>
</div>
</div>
</template>
<template id="demo">
<div class="view">
<mt-header title="表单输入">
<mt-button icon="back" slot="left" @click="back">关闭</mt-button>
</mt-header>
<div class="content" style="text-align: center;">
<mt-header title="Mint-ui自带控件"></mt-header>
<mt-field label="普通文字" placeholder="请输入用户名" v-model="field1"></mt-field>
<mt-field label="邮箱地址" placeholder="请输入邮箱" type="email" v-model="field2"></mt-field>
<mt-field label="用户密码" placeholder="请输入密码" type="password" v-model="field3"></mt-field>
<mt-field label="手机号码" placeholder="请输入手机号" type="tel" v-model="field4"></mt-field>
<mt-field label="网站链接" placeholder="请输入网址" type="url" v-model="field5"></mt-field>
<mt-field label="数字输入" placeholder="请输入数字" type="number" v-model="field6"></mt-field>
<mt-field label="生日日期" placeholder="请输入生日" type="date" v-model="field7"></mt-field>
<mt-field label="多行文字" placeholder="多行文字" type="textarea" rows="2" v-model="field8"></mt-field>
<mt-header title="扩展控件"></mt-header>
<wb-field-select label="文字选择" placeholder="请选择" :items="['男','女']" v-model="field10"></wb-field-select>
<wb-field-dict label="字典选择" placeholder="请选择" :items="[{key:'1',value:'男'},{key:'2',value:'女'}]"
v-model="field11"></wb-field-dict>
<wb-field-date label="日期选择" placeholder="请选择" v-model="field12"></wb-field-date>
<wb-field-time label="时间选择" placeholder="请选择" v-model="field13"></wb-field-time>
<wb-field-datetime label="日期时间" placeholder="请选择" v-model="field14"></wb-field-datetime>
<wb-field-cphm label="车牌号码" placeholder="车牌号" v-model="field15"></wb-field-cphm>
<wb-field-pictures label="选择照片" v-model="field16" @handle-file="handleFile"></wb-field-pictures>
<div class="layout">
<van-nav-bar class="layout-bar"
:title="$route.meta.title"
left-arrow
left-text="返回"
@click-left="$pop"
@click-right="$home">
</van-nav-bar>
<div class="body">
<van-form>
<van-field v-model="field1" label="文本" placeholder="请输入用户名"/>
<van-field v-model="field2" label="文本" placeholder="请输入用户名"/>
<van-field v-model="field3" label="文本" placeholder="请输入用户名"/>
<form-area v-model="field4" label="文本域"></form-area>
</van-form>
<div style="padding: 10px">
<mt-button type="primary" size="large" @click="doSearch()">打印类容</mt-button>
<van-button type="primary" size="large" @click="doSearch()">打印类容</van-button>
</div>
</div>
</div>
@ -137,11 +168,17 @@
{
path: '/',
name: 'home',
meta: {
title: "首页"
},
component: Vue.extend({template: '#home'})
},
{
path: '/demo',
name: 'demo',
meta: {
title: "示例"
},
component: Vue.extend({
template: '#demo',
mounted: function () {
@ -177,13 +214,6 @@
console.log(this.field15);
console.log(this.field16);
},
back: function () {
if (window.android) {
android.finish()
} else {
location.href = "${context}/app/index.htm"
}
},
handleFile: function (file, inputCall) {
//do upload
console.log("正在上传文件" + file.name);
@ -200,15 +230,8 @@
});
var app = new Vue({
el: '#app',
data: {
transitionName: ''
},
router: router,
watch: {
'$route': function (to, from) {
this.transitionName = to.meta.index < from.meta.index ? 'left-in-right-out' : 'right-in-left-out'
}
}
data: {},
router: router
})
</script>
</html>

Write Preview
Loading…
Cancel
Save

Powered by TurnKey Linux.