code refactor

This commit is contained in:
MaysWind
2020-12-12 22:11:08 +08:00
parent 6aa03e5796
commit 75b151da9b
5 changed files with 142 additions and 194 deletions
+19 -7
View File
@@ -1,5 +1,5 @@
<template>
<f7-sheet :opened="show" @sheet:closed="onSheetClosed">
<f7-sheet :opened="show" @sheet:open="onSheetOpen" @sheet:closed="onSheetClosed">
<f7-toolbar>
<div class="left"></div>
<div class="right">
@@ -11,12 +11,12 @@
<f7-row class="padding-vertical padding-horizontal-half" v-for="(row, idx) in allColorRows" :key="idx">
<f7-col class="text-align-center" v-for="colorInfo in row" :key="colorInfo.color">
<f7-icon f7="app_fill" :style="{ color: '#' + colorInfo.color }" @click.native="onColorClicked(colorInfo)">
<f7-badge color="default" class="right-bottom-icon" v-if="color && color === colorInfo.color">
<f7-badge color="default" class="right-bottom-icon" v-if="currentValue && currentValue === colorInfo.color">
<f7-icon f7="checkmark_alt"></f7-icon>
</f7-badge>
</f7-icon>
</f7-col>
<f7-col v-for="idx in (columnCount - row.length)" :key="idx"></f7-col>
<f7-col v-for="idx in (itemPerRow - row.length)" :key="idx"></f7-col>
</f7-row>
</f7-block>
</f7-page-content>
@@ -26,18 +26,26 @@
<script>
export default {
props: [
'color',
'value',
'columnCount',
'show',
'allColorInfos'
],
data() {
const self = this;
return {
currentValue: self.value,
itemPerRow: self.columnCount || 7
}
},
computed: {
allColorRows() {
const ret = [];
let rowCount = -1;
for (let i = 0; i < this.allColorInfos.length; i++) {
if (i % this.columnCount === 0) {
if (i % this.itemPerRow === 0) {
ret[++rowCount] = [];
}
@@ -51,10 +59,14 @@ export default {
},
methods: {
onColorClicked(colorInfo) {
this.$emit('color:change', colorInfo.color);
this.currentValue = colorInfo.color;
this.$emit('input', this.currentValue);
},
onSheetOpen() {
this.currentValue = this.value;
},
onSheetClosed() {
this.$emit('color:closed');
this.$emit('update:show', false);
}
}
}
+19 -7
View File
@@ -1,5 +1,5 @@
<template>
<f7-sheet :class="{ 'icon-selection-huge-sheet': hugeIconRows }" :opened="show" @sheet:closed="onSheetClosed">
<f7-sheet :class="{ 'icon-selection-huge-sheet': hugeIconRows }" :opened="show" @sheet:open="onSheetOpen" @sheet:closed="onSheetClosed">
<f7-toolbar>
<div class="left"></div>
<div class="right">
@@ -11,12 +11,12 @@
<f7-row class="padding-vertical-half padding-horizontal-half" v-for="(row, idx) in allIconRows" :key="idx">
<f7-col class="text-align-center" v-for="iconInfo in row" :key="iconInfo.id">
<f7-icon :icon="iconInfo.icon" :style="{ color: '#' + (color || '000000') }" @click.native="onIconClicked(iconInfo)">
<f7-badge color="default" class="right-bottom-icon" v-if="icon && icon === iconInfo.id">
<f7-badge color="default" class="right-bottom-icon" v-if="currentValue && currentValue === iconInfo.id">
<f7-icon f7="checkmark_alt"></f7-icon>
</f7-badge>
</f7-icon>
</f7-col>
<f7-col v-for="idx in (columnCount - row.length)" :key="idx"></f7-col>
<f7-col v-for="idx in (itemPerRow - row.length)" :key="idx"></f7-col>
</f7-row>
</f7-block>
</f7-page-content>
@@ -26,12 +26,20 @@
<script>
export default {
props: [
'icon',
'value',
'color',
'columnCount',
'show',
'allIconInfos'
],
data() {
const self = this;
return {
currentValue: self.value,
itemPerRow: self.columnCount || 7
}
},
computed: {
allIconRows() {
const ret = [];
@@ -46,7 +54,7 @@ export default {
if (!ret[rowCount]) {
ret[rowCount] = [];
} else if (ret[rowCount] && ret[rowCount].length >= this.columnCount) {
} else if (ret[rowCount] && ret[rowCount].length >= this.itemPerRow) {
rowCount++;
ret[rowCount] = [];
}
@@ -65,10 +73,14 @@ export default {
},
methods: {
onIconClicked(iconInfo) {
this.$emit('icon:change', iconInfo.id);
this.currentValue = iconInfo.id;
this.$emit('input', this.currentValue);
},
onSheetOpen() {
this.currentValue = this.value;
},
onSheetClosed() {
this.$emit('icon:closed');
this.$emit('update:show', false);
}
}
}
+13 -19
View File
@@ -1,5 +1,5 @@
<template>
<f7-sheet class="numpad-sheet" :opened="show" @sheet:closed="onSheetClosed">
<f7-sheet class="numpad-sheet" :opened="show" @sheet:open="onSheetOpen" @sheet:closed="onSheetClosed">
<f7-page-content class="no-margin no-padding-top">
<f7-row class="numpad-values">
<span class="numpad-value">{{ currentDisplay }}</span>
@@ -48,9 +48,9 @@
<span class="numpad-button-text numpad-button-text-normal">0</span>
</f7-button>
<f7-button class="numpad-button numpad-button-num" @click="backspace" @taphold.native="clear()">
<span class="numpad-button-text numpad-button-text-normal">
<f7-icon f7="delete_left"></f7-icon>
</span>
<span class="numpad-button-text numpad-button-text-normal">
<f7-icon f7="delete_left"></f7-icon>
</span>
</f7-button>
<f7-button class="numpad-button numpad-button-confirm no-right-border no-bottom-border" fill @click="confirm()">
<span :class="{ 'numpad-button-text': true, 'numpad-button-text-confirm': !currentSymbol }">{{ confirmText }}</span>
@@ -63,7 +63,7 @@
<script>
export default {
props: [
'amount',
'value',
'show'
],
data() {
@@ -72,7 +72,7 @@ export default {
return {
previousValue: '',
currentSymbol: '',
currentValue: self.getStringValue(self.amount)
currentValue: self.getStringValue(self.value)
}
},
computed: {
@@ -94,11 +94,6 @@ export default {
}
}
},
watch: {
amount: function(newValue){
this.currentValue = this.getStringValue(newValue);
}
},
methods: {
getStringValue(value) {
let str = this.$utilities.numericCurrencyToString(value);
@@ -225,18 +220,17 @@ export default {
this.previousValue = '';
this.currentSymbol = '';
} else {
const amount = this.$utilities.stringCurrencyToNumeric(this.currentValue);
this.currentValue = '';
const value = this.$utilities.stringCurrencyToNumeric(this.currentValue);
this.$emit('numpad:change', amount);
this.$emit('input', value);
this.$emit('update:show', false);
}
},
onSheetOpen() {
this.currentValue = this.getStringValue(this.value);
},
onSheetClosed() {
this.currentValue = '';
this.previousValue = '';
this.currentSymbol = '';
this.$emit('numpad:closed');
this.$emit('update:show', false);
}
}
}