forked from devsam/core
Hide_D
4f4533e533
- eslint에 prettier 조합 - prettierrc에 width 120, tabWidth 2 - gameStor->map_theme 제거 - map_theme, mapTheme를 GameConst::$mapName으로 대체 - eslint에서 vue/vue3-essential 대신 vue3-recommended 적용 - vue/max-attributes-per-line 완화 - vue/v-on-event-hyphenation 해제 - vue/attribute-hyphenation 해제 - 일부 tsc import type warning 해결 - 일부 vue template type warning 해결 - 일부 vue SFC를 script setup으로 변경 - TipTap - TopBackBar - BottomBackBar - BoardArticle - ProcessCity
70 lines
2.0 KiB
Vue
70 lines
2.0 KiB
Vue
<template>
|
|
<div class="input-group">
|
|
<b-button v-if="maxAmount > 20000" class="btn-sm" @click="amount = Math.max(amount - 10000, minAmount)">
|
|
-만
|
|
</b-button>
|
|
<b-button v-if="maxAmount > 2000" class="btn-sm" @click="amount = Math.max(amount - 1000, minAmount)">
|
|
-천
|
|
</b-button>
|
|
<b-button v-if="maxAmount > 200" class="btn-sm" @click="amount = Math.max(amount - 100, minAmount)"> -백 </b-button>
|
|
<input
|
|
v-model="amount"
|
|
type="number"
|
|
class="form-control text-end"
|
|
:max="maxAmount"
|
|
:min="minAmount"
|
|
:step="step"
|
|
placeholder="금액"
|
|
/>
|
|
<b-dropdown v-if="amountGuide" right text="" class="amount-dropdown">
|
|
<b-dropdown-item v-for="guide in amountGuide" :key="guide" @click="amount = guide">
|
|
<div class="text-end">
|
|
{{ guide.toLocaleString() }}
|
|
</div>
|
|
</b-dropdown-item>
|
|
</b-dropdown>
|
|
<b-button v-if="maxAmount > 200" class="btn-sm" @click="amount = Math.min(amount + 100, maxAmount)"> +백 </b-button>
|
|
<b-button v-if="maxAmount > 2000" class="btn-sm" @click="amount = Math.min(amount + 1000, maxAmount)">
|
|
+천
|
|
</b-button>
|
|
<b-button v-if="maxAmount > 20000" class="btn-sm" @click="amount = Math.min(amount + 10000, maxAmount)">
|
|
+만
|
|
</b-button>
|
|
</div>
|
|
</template>
|
|
<script lang="ts">
|
|
import { defineComponent } from "vue";
|
|
import VueTypes from "vue-types";
|
|
|
|
export default defineComponent({
|
|
props: {
|
|
modelValue: VueTypes.number.isRequired,
|
|
minAmount: VueTypes.number.isRequired,
|
|
maxAmount: VueTypes.number.isRequired,
|
|
amountGuide: VueTypes.arrayOf(Number).def([1000, 2000, 5000, 10000]),
|
|
step: VueTypes.number.def(1),
|
|
},
|
|
emits: ["update:modelValue"],
|
|
data() {
|
|
return {
|
|
amount: this.modelValue,
|
|
};
|
|
},
|
|
watch: {
|
|
amount(val: number) {
|
|
this.$emit("update:modelValue", val);
|
|
},
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.btn-group.amount-dropdown > .btn {
|
|
border-radius: 0;
|
|
}
|
|
|
|
.btn-group.amount-dropdown .dropdown-menu.show {
|
|
min-width: 6rem;
|
|
}
|
|
</style>
|