79 lines
1.7 KiB
Vue
79 lines
1.7 KiB
Vue
<template>
|
|
<v-container>
|
|
<v-row>
|
|
<v-col cols="12">
|
|
<v-select block
|
|
v-model="language"
|
|
:items="languages"
|
|
label="Language"
|
|
item-value="mime"
|
|
item-text="name"
|
|
dense
|
|
></v-select>
|
|
</v-col>
|
|
</v-row>
|
|
<v-row>
|
|
<v-col cols="12">
|
|
<codemirror v-model="code" :options="cmOptions" />
|
|
</v-col>
|
|
</v-row>
|
|
<v-row>
|
|
<v-col cols="12">
|
|
<v-btn v-on:click="minify" block>
|
|
Minify
|
|
</v-btn>
|
|
</v-col>
|
|
</v-row>
|
|
<v-row class="text-center">
|
|
<v-col cols="12">
|
|
<v-container fluid>
|
|
<v-textarea
|
|
label="Minified"
|
|
v-model="minified"
|
|
></v-textarea>
|
|
</v-container>
|
|
</v-col>
|
|
</v-row>
|
|
</v-container>
|
|
</template>
|
|
|
|
<script>
|
|
import axios from "axios";
|
|
|
|
export default {
|
|
name: 'MinifierEditor',
|
|
data () {
|
|
return {
|
|
code: '',
|
|
minified: '',
|
|
language: 'text/javascript',
|
|
languages: [
|
|
{ mime: 'text/html', name: 'HTML' },
|
|
{ mime: 'text/css', name: 'CSS' },
|
|
{ mime: 'text/javascript', name: 'JavaScript' },
|
|
{ mime: 'application/json', name: 'JSON' },
|
|
{ mime: 'text/xml', name: 'XML' },
|
|
],
|
|
cmOptions: {
|
|
// codemirror options
|
|
tabSize: 4,
|
|
mode: this.language,
|
|
lineNumbers: true,
|
|
line: true,
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
async minify() {
|
|
const {data} = await axios.post('http://localhost:3000/api', this.code, {
|
|
headers: {
|
|
'Content-Type': this.language
|
|
}
|
|
});
|
|
|
|
this.minified = data;
|
|
}
|
|
},
|
|
}
|
|
</script>
|