From 85b6529fde4e584a0e48d8c25a455a4bace89708 Mon Sep 17 00:00:00 2001
From: fit2cloud-chenyw <yawen.chen@fit2cloud.com>
Date: Tue, 27 Sep 2022 17:28:43 +0800
Subject: [PATCH] =?UTF-8?q?fix(=E8=A7=86=E5=9B=BE):=20=E5=A4=96=E8=BE=B9?=
 =?UTF-8?q?=E8=B7=9D=E5=8F=AF=E4=BB=A5=E8=BE=93=E5=85=A5=E9=99=90=E5=88=B6?=
 =?UTF-8?q?=E4=BB=A5=E5=A4=96=E7=9A=84=E6=95=B0=E5=AD=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../component-style/MarginSelector.vue           | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/frontend/src/views/chart/components/component-style/MarginSelector.vue b/frontend/src/views/chart/components/component-style/MarginSelector.vue
index 41ebf2aa2a..3ceaf0558c 100644
--- a/frontend/src/views/chart/components/component-style/MarginSelector.vue
+++ b/frontend/src/views/chart/components/component-style/MarginSelector.vue
@@ -11,25 +11,25 @@
         </el-form-item>
         <div v-show="showProperty('marginModel') && marginForm.marginModel !== 'auto'">
           <el-form-item v-show="showProperty('marginTop')" :label="$t('chart.text_pos_top')" class="form-item" prop="marginTop">
-            <el-input v-model="marginForm.marginTop" :placeholder="placeholder" oninput="value=value.replace(/[^\d]/g,'')" @change="changeMarginStyle(marginForm.marginTop, 'marginTop')">
+            <el-input v-model="marginForm.marginTop" :placeholder="placeholder" type="number" class="hide-icon-number" @change="changeMarginStyle(marginForm.marginTop, 'marginTop')">
               <template v-if="unitSuffix" slot="append">{{ unitSuffix }}</template>
             </el-input>
           </el-form-item>
 
           <el-form-item v-show="showProperty('marginBottom')" :label="$t('chart.text_pos_bottom')" class="form-item" prop="marginBottom">
-            <el-input v-model="marginForm.marginBottom" :placeholder="placeholder" oninput="value=value.replace(/[^\d]/g,'')" @change="changeMarginStyle(marginForm.marginBottom, 'marginBottom')">
+            <el-input v-model="marginForm.marginBottom" :placeholder="placeholder" type="number" class="hide-icon-number" @change="changeMarginStyle(marginForm.marginBottom, 'marginBottom')">
               <template v-if="unitSuffix" slot="append">{{ unitSuffix }}</template>
             </el-input>
           </el-form-item>
 
           <el-form-item v-show="showProperty('marginLeft')" :label="$t('chart.text_pos_left')" class="form-item" prop="marginLeft">
-            <el-input v-model="marginForm.marginLeft" :placeholder="placeholder" oninput="value=value.replace(/[^\d]/g,'')" @change="changeMarginStyle(marginForm.marginLeft, 'marginLeft')">
+            <el-input v-model="marginForm.marginLeft" :placeholder="placeholder" type="number" class="hide-icon-number" @change="changeMarginStyle(marginForm.marginLeft, 'marginLeft')">
               <template v-if="unitSuffix" slot="append">{{ unitSuffix }}</template>
             </el-input>
           </el-form-item>
 
           <el-form-item v-show="showProperty('marginRight')" :label="$t('chart.text_pos_right')" class="form-item" prop="marginRight">
-            <el-input v-model="marginForm.marginRight" :placeholder="placeholder" oninput="value=value.replace(/[^\d]/g,'')" @change="changeMarginStyle(marginForm.marginRight, 'marginRight')">
+            <el-input v-model="marginForm.marginRight" :placeholder="placeholder" type="number" class="hide-icon-number" @change="changeMarginStyle(marginForm.marginRight, 'marginRight')">
               <template v-if="unitSuffix" slot="append">{{ unitSuffix }}</template>
             </el-input>
           </el-form-item>
@@ -196,4 +196,12 @@ export default {
   cursor: pointer;
   z-index: 1003;
 }
+::v-deep .hide-icon-number input::-webkit-outer-spin-button,
+::v-deep .hide-icon-number input::-webkit-inner-spin-button {
+  -webkit-appearance: none !important;
+}
+::v-deep .hide-icon-number input[type="number"] {
+  -moz-appearance: textfield !important;
+}
+
 </style>