mirror of
https://github.com/mayswind/ezbookkeeping.git
synced 2026-05-16 07:57:33 +08:00
code refactor
This commit is contained in:
MaysWind
@@ -0,0 +1,46 @@
|
||||
<template>
|
||||
<f7-sheet style="height:auto" :opened="show" @sheet:closed="onSheetClosed">
|
||||
<f7-page-content>
|
||||
<div class="display-flex padding justify-content-space-between align-items-center">
|
||||
<div style="font-size: 18px" v-if="title"><b>{{ title }}</b></div>
|
||||
</div>
|
||||
<div class="padding-horizontal padding-bottom">
|
||||
<p class="no-margin-top margin-bottom-half" v-if="hint">
|
||||
<span>{{ hint }}</span>
|
||||
<f7-link class="icon-after-text"
|
||||
icon-only icon-f7="doc_on_doc" icon-size="16px"
|
||||
v-if="enableCopy"
|
||||
v-clipboard:copy="information" v-clipboard:success="onCopied"></f7-link>
|
||||
</p>
|
||||
<textarea class="information-content full-line" :rows="rowCount" readonly="readonly" v-model="information"></textarea>
|
||||
<div class="margin-top text-align-center">
|
||||
<f7-link @click="cancel" :text="$t('Close')"></f7-link>
|
||||
</div>
|
||||
</div>
|
||||
</f7-page-content>
|
||||
</f7-sheet>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: [
|
||||
'title',
|
||||
'hint',
|
||||
'information',
|
||||
'rowCount',
|
||||
'enableCopy',
|
||||
'show'
|
||||
],
|
||||
methods: {
|
||||
onSheetClosed() {
|
||||
this.$emit('update:show', false);
|
||||
},
|
||||
onCopied() {
|
||||
this.$emit('info:copied');
|
||||
},
|
||||
cancel() {
|
||||
this.$emit('update:show', false);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,71 @@
|
||||
<template>
|
||||
<f7-sheet style="height:auto" :opened="show"
|
||||
@sheet:open="onSheetOpen" @sheet:closed="onSheetClosed">
|
||||
<f7-page-content>
|
||||
<div class="display-flex padding justify-content-space-between align-items-center">
|
||||
<div style="font-size: 18px" v-if="title"><b>{{ title }}</b></div>
|
||||
</div>
|
||||
<div class="padding-horizontal padding-bottom">
|
||||
<p class="no-margin-top margin-bottom-half" v-if="hint">{{ hint }}</p>
|
||||
<slot></slot>
|
||||
<f7-list no-hairlines class="no-margin-top margin-bottom">
|
||||
<f7-list-input
|
||||
type="number"
|
||||
autocomplete="one-time-code"
|
||||
outline
|
||||
clear-button
|
||||
:placeholder="$t('Passcode')"
|
||||
:value="currentPasscode"
|
||||
@input="currentPasscode = $event.target.value"
|
||||
@keyup.enter.native="confirm()"
|
||||
></f7-list-input>
|
||||
</f7-list>
|
||||
<f7-button large fill
|
||||
:class="{ 'disabled': !currentPasscode || confirmDisabled }"
|
||||
:text="$t('Continue')"
|
||||
@click="confirm">
|
||||
</f7-button>
|
||||
<div class="margin-top text-align-center">
|
||||
<f7-link :class="{ 'disabled': cancelDisabled }" @click="cancel" :text="$t('Cancel')"></f7-link>
|
||||
</div>
|
||||
</div>
|
||||
</f7-page-content>
|
||||
</f7-sheet>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: [
|
||||
'value',
|
||||
'title',
|
||||
'hint',
|
||||
'confirmDisabled',
|
||||
'cancelDisabled',
|
||||
'show'
|
||||
],
|
||||
data() {
|
||||
return {
|
||||
currentPasscode: ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onSheetOpen() {
|
||||
this.currentPasscode = '';
|
||||
},
|
||||
onSheetClosed() {
|
||||
this.$emit('update:show', false);
|
||||
},
|
||||
confirm() {
|
||||
if (!this.currentPasscode || this.confirmDisabled) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.$emit('input', this.currentPasscode);
|
||||
this.$emit('passcode:confirm', this.currentPasscode);
|
||||
},
|
||||
cancel() {
|
||||
this.$emit('update:show', false);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,70 @@
|
||||
<template>
|
||||
<f7-sheet style="height:auto" :opened="show"
|
||||
@sheet:open="onSheetOpen" @sheet:closed="onSheetClosed">
|
||||
<f7-page-content>
|
||||
<div class="display-flex padding justify-content-space-between align-items-center">
|
||||
<div style="font-size: 18px" v-if="title"><b>{{ title }}</b></div>
|
||||
</div>
|
||||
<div class="padding-horizontal padding-bottom">
|
||||
<p class="no-margin-top margin-bottom-half" v-if="hint">{{ hint }}</p>
|
||||
<f7-list no-hairlines class="no-margin-top margin-bottom">
|
||||
<f7-list-input
|
||||
type="password"
|
||||
autocomplete="current-password"
|
||||
outline
|
||||
clear-button
|
||||
:placeholder="$t('Password')"
|
||||
:value="currentPassword"
|
||||
@input="currentPassword = $event.target.value"
|
||||
@keyup.enter.native="confirm()"
|
||||
></f7-list-input>
|
||||
</f7-list>
|
||||
<f7-button large fill
|
||||
:class="{ 'disabled': !currentPassword || confirmDisabled }"
|
||||
:text="$t('Continue')"
|
||||
@click="confirm">
|
||||
</f7-button>
|
||||
<div class="margin-top text-align-center">
|
||||
<f7-link :class="{ 'disabled': cancelDisabled }" @click="cancel" :text="$t('Cancel')"></f7-link>
|
||||
</div>
|
||||
</div>
|
||||
</f7-page-content>
|
||||
</f7-sheet>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: [
|
||||
'value',
|
||||
'title',
|
||||
'hint',
|
||||
'confirmDisabled',
|
||||
'cancelDisabled',
|
||||
'show'
|
||||
],
|
||||
data() {
|
||||
return {
|
||||
currentPassword: ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onSheetOpen() {
|
||||
this.currentPassword = '';
|
||||
},
|
||||
onSheetClosed() {
|
||||
this.$emit('update:show', false);
|
||||
},
|
||||
confirm() {
|
||||
if (!this.currentPassword || this.confirmDisabled) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.$emit('input', this.currentPassword);
|
||||
this.$emit('password:confirm', this.currentPassword);
|
||||
},
|
||||
cancel() {
|
||||
this.$emit('update:show', false);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,74 @@
|
||||
<template>
|
||||
<f7-sheet style="height:auto" :opened="show"
|
||||
@sheet:open="onSheetOpen" @sheet:closed="onSheetClosed">
|
||||
<f7-page-content>
|
||||
<div class="display-flex padding justify-content-space-between align-items-center">
|
||||
<div style="font-size: 18px"><b>{{ title }}</b></div>
|
||||
</div>
|
||||
<div class="padding-horizontal padding-bottom">
|
||||
<p class="no-margin-top margin-bottom-half">{{ hint }}</p>
|
||||
<f7-list no-hairlines class="no-margin-top margin-bottom">
|
||||
<f7-list-item class="list-item-pincode-input">
|
||||
<PincodeInput secure :length="6" v-model="currentPinCode" />
|
||||
</f7-list-item>
|
||||
</f7-list>
|
||||
<f7-button large fill
|
||||
:class="{ 'disabled': !currentPinCodeValid || confirmDisabled }"
|
||||
:text="$t('Continue')"
|
||||
@click="confirm">
|
||||
</f7-button>
|
||||
<div class="margin-top text-align-center">
|
||||
<f7-link @click="cancel" :text="$t('Cancel')"></f7-link>
|
||||
</div>
|
||||
</div>
|
||||
</f7-page-content>
|
||||
</f7-sheet>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: [
|
||||
'value',
|
||||
'title',
|
||||
'hint',
|
||||
'confirmDisabled',
|
||||
'cancelDisabled',
|
||||
'show'
|
||||
],
|
||||
data() {
|
||||
return {
|
||||
currentPinCode: ''
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
currentPinCodeValid() {
|
||||
return this.currentPinCode && this.currentPinCode.length === 6;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
onSheetOpen() {
|
||||
this.currentPinCode = '';
|
||||
},
|
||||
onSheetClosed() {
|
||||
this.$emit('update:show', false);
|
||||
},
|
||||
confirm() {
|
||||
if (!this.currentPinCodeValid || this.confirmDisabled) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.$emit('input', this.currentPinCode);
|
||||
this.$emit('pincode:confirm', this.currentPinCode);
|
||||
},
|
||||
cancel() {
|
||||
this.$emit('update:show', false);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.list-item-pincode-input .item-inner {
|
||||
justify-content: center;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user