Add monaco editor
This commit is contained in:
@ -4,19 +4,19 @@
|
||||
|
||||
<div class="input-group">
|
||||
<label for="data">Data</label>
|
||||
<textarea id="data" v-model="toolData.data"></textarea>
|
||||
<textarea id="data" v-model="toolData.data" v-on:keyup="result"></textarea>
|
||||
</div>
|
||||
|
||||
<div class="input-group">
|
||||
<label>Mode</label>
|
||||
|
||||
<div>
|
||||
<input id="sort_mode_alpha" value="alpha" name="sort_mode" v-model="toolData.sortMode" type="radio"> <label for="sort_mode_alpha">alphabetically</label><br>
|
||||
<input id="sort_mode_numerically" value="numerically" name="sort_mode" v-model="toolData.sortMode" type="radio"> <label for="sort_mode_numerically">numerically</label><br>
|
||||
<input id="sort_mode_by_length" value="by_length" name="sort_mode" v-model="toolData.sortMode" type="radio"> <label for="sort_mode_by_length">by length</label><br>
|
||||
<input id="sort_mode_random" value="random" name="sort_mode" v-model="toolData.sortMode" type="radio"> <label for="sort_mode_random">random</label><br>
|
||||
<input id="sort_mode_alpha" value="alpha" name="sort_mode" v-model="toolData.sortMode" v-on:change="result" type="radio"> <label for="sort_mode_alpha">alphabetically</label><br>
|
||||
<input id="sort_mode_numerically" value="numerically" name="sort_mode" v-model="toolData.sortMode" v-on:change="result" type="radio"> <label for="sort_mode_numerically">numerically</label><br>
|
||||
<input id="sort_mode_by_length" value="by_length" name="sort_mode" v-model="toolData.sortMode" v-on:change="result" type="radio"> <label for="sort_mode_by_length">by length</label><br>
|
||||
<input id="sort_mode_random" value="random" name="sort_mode" v-model="toolData.sortMode" v-on:change="result" type="radio"> <label for="sort_mode_random">random</label><br>
|
||||
<br>
|
||||
<input id="sort_mode_reverse" value="random" name="sort_mode_reverse" v-model="toolData.sortModeReverse" type="checkbox"> <label for="sort_mode_reverse">reverse</label>
|
||||
<input id="sort_mode_reverse" value="random" name="sort_mode_reverse" v-model="toolData.sortModeReverse" v-on:change="result" type="checkbox"> <label for="sort_mode_reverse">reverse</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -24,12 +24,17 @@
|
||||
|
||||
<div class="input-group">
|
||||
<label for="result">Result</label>
|
||||
<textarea id="result" v-model="toolResult"></textarea>
|
||||
<MonacoEditor name="result" language="text" :value="toolResult"></MonacoEditor>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import MonacoEditor from "@/components/MonacoEditor.vue";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
MonacoEditor
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
toolData: {
|
||||
@ -37,10 +42,11 @@ export default {
|
||||
sortMode: 'alpha',
|
||||
sortModeReverse: false,
|
||||
},
|
||||
toolResult: '',
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
toolResult() {
|
||||
methods: {
|
||||
result() {
|
||||
let result = []
|
||||
const data = this.toolData.data.split('\n');
|
||||
|
||||
@ -73,7 +79,7 @@ export default {
|
||||
result = result.reverse();
|
||||
}
|
||||
|
||||
return result.join('\n');
|
||||
this.toolResult = result.join('\n');
|
||||
},
|
||||
},
|
||||
}
|
||||
|
Reference in New Issue
Block a user