|
@@ -1,8 +1,8 @@
|
|
|
<template>
|
|
|
- <div class="input-action-sheet-wrapper">
|
|
|
+ <div class="input-action-sheet-wrapper" v-if="visible" :style="{position: position}">
|
|
|
<div class="input-action-sheet-content">
|
|
|
<div class="title">
|
|
|
-
|
|
|
+ {{title}}
|
|
|
</div>
|
|
|
<div class="input-wrapper">
|
|
|
<input class="input"
|
|
@@ -13,11 +13,11 @@
|
|
|
@blur="onValueBlur">
|
|
|
</div>
|
|
|
<div class="btn-wrapper">
|
|
|
- <div class="btn cancel">
|
|
|
-
|
|
|
+ <div class="btn cancel" @click="cancel">
|
|
|
+ {{cancelText}}
|
|
|
</div>
|
|
|
- <div class="btn confirm">
|
|
|
-
|
|
|
+ <div class="btn confirm" @click="confirm">
|
|
|
+ {{confirmText}}
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -30,6 +30,14 @@ import { ref, defineProps, defineEmits } from "vue";
|
|
|
let inputVal = ref('');
|
|
|
|
|
|
const props = defineProps({
|
|
|
+ visible: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false
|
|
|
+ },
|
|
|
+ position: {
|
|
|
+ type: String,
|
|
|
+ default: 'fixed'
|
|
|
+ },
|
|
|
title: {
|
|
|
type: String,
|
|
|
default: '',
|
|
@@ -54,11 +62,10 @@ const onValueBlur = () => {
|
|
|
inputValHandler();
|
|
|
}
|
|
|
|
|
|
-// emits("postPublishFinish", { publishRes });
|
|
|
|
|
|
const inputValHandler = () => {
|
|
|
let val = inputVal.value;
|
|
|
- val = val.replace(/[^\d^\.]+/g, "");
|
|
|
+ val = val.replace(/^\D*(\d*(?:\.\d{0,18})?).*$/g, '$1');
|
|
|
|
|
|
if(val == '00') {
|
|
|
val = '0'
|
|
@@ -75,6 +82,16 @@ const inputValHandler = () => {
|
|
|
return val;
|
|
|
}
|
|
|
|
|
|
+const cancel = () => {
|
|
|
+ emits("cancel", { });
|
|
|
+}
|
|
|
+
|
|
|
+const confirm = () => {
|
|
|
+ if(inputVal.value > 0) {
|
|
|
+ emits("confirm", { inputVal: inputVal.value });
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
@@ -82,20 +99,79 @@ const inputValHandler = () => {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
|
|
|
.input-action-sheet-content {
|
|
|
width: 335px;
|
|
|
- height: 186px;
|
|
|
+ min-height: 186px;
|
|
|
background: #fff;
|
|
|
border-radius: 20px;
|
|
|
padding: 20px 15px;
|
|
|
box-sizing: border-box;
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ top: 50%;
|
|
|
+ z-index: 1000;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
|
|
|
.title {
|
|
|
font-weight: 600;
|
|
|
font-size: 16px;
|
|
|
}
|
|
|
|
|
|
+ .input-wrapper {
|
|
|
+ width: 100%;
|
|
|
+ border: 1px solid #DFDFDF;
|
|
|
+ border-radius: 5px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ height: 42px;
|
|
|
+ margin: 17px 0 23px 0;
|
|
|
+
|
|
|
+ .input {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ outline: none;
|
|
|
+ border: none;
|
|
|
+ padding: 0 10px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border-radius: 5px;
|
|
|
+ font-weight: 600;
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .input::placeholder {
|
|
|
+ color: #B3B3B3;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn-wrapper {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ .btn {
|
|
|
+ width: 150px;
|
|
|
+ height: 47px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 16px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border-radius: 1000px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+
|
|
|
+ .cancel {
|
|
|
+ border: 1px solid #CFCFCF;
|
|
|
+ }
|
|
|
+
|
|
|
+ .confirm {
|
|
|
+ color: #fff;
|
|
|
+ background: #1D9BF0;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
</style>
|