52 lines
1.3 KiB
Vue
52 lines
1.3 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" style="height: 150px"></textarea>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="input-group">
|
||
|
|
<label>Mode</label>
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<input id="encode_mode_encode" value="encode" name="encode_mode" v-model="toolData.encodeMode" type="radio"> <label for="encode_mode_encode">endode</label><br>
|
||
|
|
<input id="encode_mode_decode" value="decode" name="encode_mode" v-model="toolData.encodeMode" 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>
|
||
|
|
<textarea id="result" v-model="toolResult" style="height: 150px"></textarea>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
toolData: {
|
||
|
|
data: '',
|
||
|
|
encodeMode: 'decode',
|
||
|
|
},
|
||
|
|
};
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
toolResult() {
|
||
|
|
switch (this.toolData.encodeMode) {
|
||
|
|
case 'encode':
|
||
|
|
return this.toolData.data.split('\n').map(encodeURIComponent).join('\n');
|
||
|
|
case 'decode':
|
||
|
|
return this.toolData.data.split('\n').map(decodeURIComponent).join('\n');
|
||
|
|
}
|
||
|
|
},
|
||
|
|
},
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss">
|
||
|
|
|
||
|
|
</style>
|