多维表格

91 lines
2.8 KiB

<template>
<v-dialog v-model="localState" max-width="900">
<v-card>
<v-card-title> Shortcuts </v-card-title>
<v-card-text>
<v-simple-table v-slot dense>
<thead>
<tr>
<th></th>
<th class="pa-2">Mac OS</th>
<th class="pa-2">Windows / Linux</th>
</tr>
</thead>
<tbody>
<tr v-for="(short, i) in shortcuts" :key="i">
<td class="caption">{{ short.description }}</td>
<td class="caption pa-2" v-html="short.mac"></td>
<td class="caption pa-2" v-html="short.windows"></td>
</tr>
</tbody>
</v-simple-table>
</v-card-text>
</v-card>
</v-dialog>
</template>
<script>
export default {
name: 'Help',
props: {
value: Boolean,
},
data() {
return {
shortcuts: [
{
description: 'Add tables',
mac: '<kbd>Command</kbd> + <kbd>Control</kbd> + <kbd>T</kbd>',
windows: '<kbd>Alt</kbd> + <kbd>Shift</kbd> + <kbd>T</kbd>',
},
{
description: 'Add columns',
mac: '<kbd>Command</kbd> + <kbd>Control</kbd> + <kbd>C</kbd>',
windows: '<kbd>Alt</kbd> + <kbd>Shift</kbd> + <kbd>C</kbd>',
},
{
description: 'Add new column row',
mac: '<kbd>Command</kbd> + <kbd>Control</kbd> + <kbd>A</kbd>',
windows: '<kbd>Alt</kbd> + <kbd>Shift</kbd> + <kbd>A</kbd>',
},
{
description: 'Table navigation',
mac: '<kbd>Command</kbd> + <kbd>Control</kbd> + <kbd>Arrow Down</kbd> <br>AND<br> <kbd>Command</kbd> + <kbd>Control</kbd> + <kbd>Arrow Up</kbd>',
windows:
'<kbd>Alt</kbd> + <kbd>Shift</kbd> + <kbd>Arrow Down</kbd> <br>AND<br> <kbd>Alt</kbd> + <kbd>Shift</kbd> + <kbd>Arrow Up</kbd>',
},
{
description: 'Column navigation',
mac: '<kbd>Command</kbd> + <kbd>Control</kbd> + <kbd>Arrow Right</kbd> <br>AND<br> <kbd>Command</kbd> + <kbd>Control</kbd> + <kbd>Arrow Left</kbd>',
windows:
'<kbd>Alt</kbd> + <kbd>Shift</kbd> + <kbd>Arrow Right</kbd> <br>AND<br> <kbd>Alt</kbd> + <kbd>Shift</kbd> + <kbd>Arrow Right</kbd>',
},
{
description: 'Copy json to clipboard',
mac: '<kbd>Command</kbd> + <kbd>Control</kbd> + <kbd>J</kbd>',
windows: '<kbd>Alt</kbd> + <kbd>Shift</kbd> + <kbd>J</kbd>',
},
{
description: 'Submit template',
mac: '<kbd>Command</kbd> + <kbd>Control</kbd> + <kbd>S</kbd>',
windows: '<kbd>Alt</kbd> + <kbd>Shift</kbd> + <kbd>S</kbd>',
},
],
};
},
computed: {
localState: {
get() {
return this.value;
},
set(val) {
this.$emit('input', val);
},
},
},
};
</script>
<style scoped></style>