aurora-admin/frameworks/ShortcutPanel.vue2.vue

<template>
  <div class="kole-shortcut">
    <input class="kole-shortcut-search" v-model="q" placeholder="搜索快捷键…" />
    <div class="kole-shortcut-list">
      <div v-if="!filtered.length" class="kole-shortcut-empty">无匹配快捷键</div>
      <div v-for="(it, i) in filtered" :key="i" class="kole-shortcut-item">
        <span>{{ it.name }}</span><span class="kole-shortcut-key">{{ it.key }}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'KoleShortcutPanel',
  props: {
    items: {
      type: Array,
      default: () => [
        { name: '保存', key: 'Ctrl + S' },
        { name: '搜索', key: 'Ctrl + K' },
        { name: '新建', key: 'Ctrl + N' },
        { name: '刷新', key: 'F5' },
        { name: '关闭页签', key: 'Ctrl + W' },
        { name: '全屏', key: 'F11' },
        { name: '帮助', key: '?' },
        { name: '命令面板', key: 'Ctrl + P' }
      ]
    }
  },
  data() {
    return { q: '' };
  },
  computed: {
    filtered() {
      var q = this.q.trim().toLowerCase();
      if (!q) return this.items;
      return this.items.filter(function (it) { return it.name.toLowerCase().indexOf(q) >= 0 || it.key.toLowerCase().indexOf(q) >= 0; });
    }
  }
};
</script>

<style src="./ShortcutPanel.css"></style>