85 lines
1.7 KiB
Vue
85 lines
1.7 KiB
Vue
<template>
|
|
<h2 class="tool-title">URL encode/decode</h2>
|
|
<hr class="mt-5 mb-5" />
|
|
|
|
<div class="input-group">
|
|
<label for="data">Data</label>
|
|
<textarea id="data" v-model="toolData.data" v-on:keyup="result"></textarea>
|
|
</div>
|
|
|
|
<div class="input-group">
|
|
<label>Mode</label>
|
|
|
|
<div>
|
|
<input
|
|
id="encode_mode_encode"
|
|
value="encode"
|
|
name="encode_mode"
|
|
v-model="toolData.encodeMode"
|
|
v-on:change="result"
|
|
type="radio"
|
|
/>
|
|
<label for="encode_mode_encode">encode</label><br />
|
|
<input
|
|
id="encode_mode_decode"
|
|
value="decode"
|
|
name="encode_mode"
|
|
v-model="toolData.encodeMode"
|
|
v-on:change="result"
|
|
type="radio"
|
|
/>
|
|
<label for="encode_mode_decode">decode</label>
|
|
</div>
|
|
</div>
|
|
|
|
<hr class="mt-5 mb-5" />
|
|
|
|
<div class="input-group">
|
|
<label for="result">Result</label>
|
|
<MonacoEditor
|
|
name="result"
|
|
language="text"
|
|
:value="toolResult"
|
|
></MonacoEditor>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import MonacoEditor from "@/components/MonacoEditor.vue";
|
|
|
|
export default {
|
|
components: {
|
|
MonacoEditor,
|
|
},
|
|
data() {
|
|
return {
|
|
toolData: {
|
|
data: "",
|
|
encodeMode: "decode",
|
|
},
|
|
toolResult: "",
|
|
};
|
|
},
|
|
methods: {
|
|
result() {
|
|
switch (this.toolData.encodeMode) {
|
|
case "encode":
|
|
this.toolResult = this.toolData.data
|
|
.split("\n")
|
|
.map(encodeURIComponent)
|
|
.join("\n");
|
|
break;
|
|
case "decode":
|
|
this.toolResult = this.toolData.data
|
|
.split("\n")
|
|
.map(decodeURIComponent)
|
|
.join("\n");
|
|
break;
|
|
}
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss"></style>
|