代客下单增加商品称重弹窗

src/views/tool/Instead/components/keyboard.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="simple-Keyboard-number">
-    <div class="carts">
+    <div class="keybord-box">
       <div class="box_status">
         <slot name="input">
-          <span> {{ number }}</span>
+          <span>{{ number }}</span>
         </slot>
       </div>
       <slot name="tips"></slot>
@@ -28,15 +28,25 @@
               </div>
               <div class="key-line">
                 <div class="key" @click="clearFunction">
-                  <slot name="clear"> </slot>
+                  <slot name="clear"></slot>
                 </div>
                 <div class="key" @click="keyboradAdd('0')">0</div>
                 <div class="key" style="font-size: 31px" @click="keyboradReduce">
-                  <svg t="1723453480343" class="icon" viewBox="0 0 1664 1024" version="1.1"
-                    xmlns="http://www.w3.org/2000/svg" p-id="1467" width="32" height="32">
+                  <svg
+                    t="1723453480343"
+                    class="icon"
+                    viewBox="0 0 1664 1024"
+                    version="1.1"
+                    xmlns="http://www.w3.org/2000/svg"
+                    p-id="1467"
+                    width="32"
+                    height="32"
+                  >
                     <path
                       d="M1526.08 1.6H459.84L41.28 416c-53.76 53.248-53.76 139.52 0 192.64l418.624 414.592v-0.064h1066.176a136.96 136.96 0 0 0 137.6-136.256V137.792a136.96 136.96 0 0 0-137.6-136.192z m-331.392 631.168c26.816 26.624 26.816 69.76 0 96.384-26.88 26.56-70.4 26.56-97.28 0l-121.28-120.128-123.328 122.112a69.76 69.76 0 0 1-97.92 0 68.096 68.096 0 0 1 0-96.96L878.208 512l-121.28-120.064a67.648 67.648 0 0 1 0-96.32c26.88-26.624 70.4-26.624 97.28 0l121.216 120.064 122.24-120.96a69.696 69.696 0 0 1 97.92 0 68.032 68.032 0 0 1 0 96.96l-122.24 120.96 121.344 120.064z"
-                      fill="#333333" p-id="1468"></path>
+                      fill="#333333"
+                      p-id="1468"
+                    ></path>
                   </svg>
                 </div>
               </div>
@@ -50,88 +60,88 @@
     </div>
   </div>
 </template>
-<script>
-export default {
-  props: {
-    isCanEmpty: {
-      type: Boolean,
-      default: false,
-    },
-    maxTips: {
-      type: String,
-      default: "输入值超范围",
-    },
-    showConfirm: {
-      type: Boolean,
-      default: false,
-    },
-    disabled:{
-      type:Boolean,
-      default:false
-    },
-    max: {
-      type: [Number, String],
-      default: Infinity,
-    },
-    value: {
-      type: [String, Number],
-      default: 0,
-    },
-    // 是否启用小数
-    isFloat: {
-      type: Boolean,
-      default: false,
+<script setup>
+const props = defineProps({
+  isCanEmpty: {
+    type: Boolean,
+    default: false,
+  },
+  maxTips: {
+    type: String,
+    default: "输入值超范围",
+  },
+  showConfirm: {
+    type: Boolean,
+    default: false,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  max: {
+    type: [Number, String],
+    default: Infinity,
+  },
+  value: {
+    type: [String, Number],
+    default: 0,
+  },
+  // 是否启用小数
+  isFloat: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+let number = ref(0);
+
+watch(
+  () => props.value,
+  (newval) => {
+    number.value = newval;
+  }
+);
+const emits = defineEmits(["input", "confirm"]);
+watch(
+  () => number.value,
+  (newval) => {
+    emits("input", newval);
+  }
+);
+
+function clearFunction() {
+  if (props.isFloat) {
+    return keyboradAdd(".");
+  }
+}
+function keyboradAdd(n) {
+  if (n == "." && `${number.value}`.includes(".")) {
+    return;
+  }
+  if (Number(number.value) == 0) {
+    if (n == ".") {
+      return (number.value = 0 + n);
     }
-  },
-  data() {
-    return {
-      number: 0,
-    };
-  },
-  watch: {
-    value(newval) {
-      this.number = newval;
-    },
-    number(newval) {
-      this.$emit("input", newval);
-    },
-  },
-  methods: {
-    clearFunction() {
-      if (this.isFloat) {
-        return this.keyboradAdd('.')
-      }
-      // this.$emit("clear", this.number);
-    },
-    keyboradAdd(n) {
-      if (n == '.' && `${this.number}`.includes('.')) {
-        return
-      }
-      if (Number(this.number) == 0) {
-        if (n == '.') {
-          return (this.number = 0 + n);
-        }
-      }
-      const newval = this.number + n;
-      if (newval * 1 > this.max * 1) {
-        return this.$message(this.maxTips);
-      }
-      this.number = newval;
-    },
-    keyboradReduce() {
-      if (this.number.length <= 1) {
-        return (this.number = this.isCanEmpty ? "" : "0");
-      }
-      this.number = `${this.number}`.substring(0, this.number.length - 1);
-    },
-    keyboradConfirm() {
-      this.$emit("confirm", this.number);
-    },
-  },
-  mounted() {
-    this.number = `${this.value}`;
-  },
-};
+  }
+  const newval = number.value + n;
+  if (newval * 1 > props.max * 1) {
+    return ElMessage.error(this.maxTips);
+  }
+  number.value = newval;
+}
+function keyboradReduce() {
+  if (number.value.length <= 1) {
+    return (number.value = props.isCanEmpty ? "" : "0");
+  }
+  number.value = `${number.value}`.substring(0, number.value.length - 1);
+}
+function keyboradConfirm() {
+  this.$emit("confirm", number.value);
+}
+
+onMounted(() => {
+  number.value = `${props.value}`;
+});
 </script>
 
 <style lang="scss" scoped>
@@ -267,21 +277,21 @@ export default {
   bottom: 0;
 }
 
-.carts {
+.keybord-box {
   flex-direction: column;
   background: #fff;
   height: 100%;
 }
 
-.carts .title,
-.carts {
+.keybord-box .title,
+.keybord-box {
   display: flex;
 
   align-items: center;
   width: 100%;
 }
 
-.carts .title {
+.keybord-box .title {
   justify-content: space-between;
   height: 64px;
   border-bottom: 1px solid #ebebeb;
@@ -289,24 +299,23 @@ export default {
   padding-top: 30px;
 }
 
-.carts .title .left {
+.keybord-box .title .left {
   font-family: PingFangSC-Medium;
   font-weight: 500;
   font-size: 18px;
   color: #000;
 }
 
-.carts .title .right {
+.keybord-box .title .right {
   font-size: 14.4px;
   cursor: pointer;
 }
 
-.carts .box_status {
+.keybord-box .box_status {
   margin-bottom: 20px;
   width: 370px;
   height: 58px;
   background: #fff;
-  border: 1px solid #dcdfe6;
   border-radius: 4px;
 
   display: flex;
@@ -322,7 +331,7 @@ export default {
   text-align: center;
 }
 
-.carts .box_status span {
+.keybord-box .box_status span {
   padding: 0 5px;
 }
 </style>