Skip to content

Commit

Permalink
添加整理按钮
Browse files Browse the repository at this point in the history
  • Loading branch information
keysking committed May 6, 2023
1 parent b3f2d0d commit b2ec7b1
Show file tree
Hide file tree
Showing 2 changed files with 79 additions and 12 deletions.
68 changes: 62 additions & 6 deletions src/components/SendPanel/SendPanel.vue
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import { useSettingStore } from "@/store/useSettingStore";
import { useCheckDigit } from "@/utils/useCheckDigit/useCheckDigit";
import { useDataCode } from "@/utils/useDataCode/useDataCode";
import { useEventBus } from "@vueuse/core";
import { computed, inject, ref, watch } from "vue";
import AutoSendButton from "./components/AutoSendButton.vue";
import HexShower from "./components/HexShower.vue";
Expand Down Expand Up @@ -85,12 +86,53 @@ function onInput() {
sendData.value = sendData.value
.replace(/([^0-9a-fA-F ])/, "")
.toUpperCase();
reformatHex();
}
}
function clear() {
sendData.value = "";
}
function switchSendHexInputMode() {
if (sendHexInputMode.value == "format") {
sendHexInputMode.value = "normal";
} else {
sendHexInputMode.value = "format";
}
}
const reformatBus = useEventBus("reformat");
function reformat() {
if (sendType.value == "hex") {
reformatBus.emit("reformat");
if (sendHexInputMode.value == "normal") {
reformatHex();
}
}
}
function reformatHex() {
let data = sendData.value;
// 首先使用空格分割 并去掉空字符串
data = data.split(" ").filter((item) => item);
// 在长度为奇数的字符串的最后一位前补0
data = data.map((item) => {
if (item.length % 2 == 1) {
// 最后一位前补0
return item.slice(0, item.length - 1) + "0" + item.slice(item.length - 1);
}
return item;
});
// 将数组转换为字符串
data = data.join("");
// 将字符串按照每两个字符分割
data = data.match(/.{1,2}/g);
// 将数组转换为字符串
data = data.join(" ");
sendData.value = data;
}
</script>

<template>
Expand Down Expand Up @@ -143,11 +185,25 @@ function clear() {
发 送
</button>
</div>
<button
class="absolute right-1 top-1 btn btn-ghost btn-circle btn-sm"
@click="clear"
>
<img class="w-5 h-5" src="/clear_context.svg" />
</button>
<div class="absolute right-1 top-1 flex flex-col gap-y-2">
<button class="btn btn-ghost btn-circle btn-sm" @click="clear">
<img class="w-5 h-5" src="/clear_context.svg" />
</button>
<button
v-if="sendType == 'hex'"
class="btn btn-ghost btn-circle btn-sm lowercase"
@click="reformat"
>
<span class="text-xs">整理</span>
</button>
<button
v-if="sendType == 'hex'"
class="btn btn-outline btn-circle btn-sm lowercase"
:class="sendHexInputMode == 'format' ? 'btn-active' : ''"
@click="switchSendHexInputMode"
>
<span>0x</span>
</button>
</div>
</div>
</template>
23 changes: 17 additions & 6 deletions src/components/SendPanel/components/HexShower.vue
Original file line number Diff line number Diff line change
@@ -1,26 +1,37 @@
<script setup>
import { useSettingStore } from "@/store/useSettingStore";
import { nextTick, ref, watch } from "vue";
const props = defineProps(["modelValue"]);
const emit = defineEmits(["update:modelValue"]);
const { sendHexInputMode } = useSettingStore();
const groups = ref(
props.modelValue.length == 0 ? [""] : props.modelValue.match(/.{1,2}/g)
props.modelValue.length == 0
? [""]
: props.modelValue.replaceAll(" ", "").match(/.{1,2}/g)
);
const items = ref([]);
watch(
props,
(p) => {
console.log(1);
[sendHexInputMode],
() => {
if (sendHexInputMode.value == "format") return;
groups.value =
p.modelValue.length == 0 ? [""] : p.modelValue.match(/.{1,2}/g);
props.modelValue.length == 0
? [""]
: props.modelValue.replaceAll(" ", "").match(/.{1,2}/g);
},
{ deep: true }
);
watch(
groups,
(n) => {
const data = groups.value.join("");
// 不足两位的前面补0
const data = groups.value
.map((v) => v.padStart(2, "0"))
.join("")
.replace(/(.{2})/g, "$1 ")
.trim();
emit("update:modelValue", data);
if (n.length == 0) {
groups.value = [""];
Expand Down

0 comments on commit b2ec7b1

Please sign in to comment.