front/src/components/MxPaper/plus/plus-paper-help.vue

<template>
  <div>
    <i class="el-icon-question pointer" @click="handleHelpOpen"></i>
    <el-dialog :visible.sync="helpVisible" append-to-body width="500px">
      <div class="fx-column">
        <div class="f12 f-999"><i class="el-icon-magic-stick mr5"></i>小提示</div>
        <div class="fx-column fx-cen-base mt30 pl60">
          <div class="fx-row fx-sta-cen">
            可使用
            <el-image class="ml5 mr5" style="height:40px"
                      :src="require('@/assets/images/evaluation/icon-key-tab.png')"></el-image>
            打断输入，启用快速切换
          </div>
          <div class="fx-row fx-sta-cen mt10">
            可使用
            <el-image class="ml5 mr5" style="height:40px"
                      :src="require('@/assets/images/evaluation/icon-key-enter.png')"></el-image>
            快速切换下一题
          </div>
          <div class="fx-row fx-sta-cen mt10">
            可使用
            <el-image class="ml5 mr5" style="height:40px"
                      :src="require('@/assets/images/evaluation/icon-key-backspace.png')"></el-image>
            快速切换上一题
          </div>
        </div>
        <div class="fx-row fx-end-cen mt30">
          <el-button ref="btnConfirm" type="primary" @click="handleHelpClose()">知道了</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import paperMixin from '../mx-paper-mixin'
import consts from '@/common/mx-const'

export default {
  mixins: [paperMixin],
  name: 'plus-paper-help',
  data() {
    return {
      helpVisible: false
    }
  },
  mounted() {
    const key = consts.keys.keyPaperShortcutNotified
    const notified = localStorage.getItem(key)
    if (!notified) {
      localStorage.setItem(key, "1")
      this.helpVisible = true
    }
  },
  methods: {
    handleHelpOpen() {
      this.helpVisible = true
      this.$nextTick(() => this.$refs.btnConfirm.$el.focus())
    },
    handleHelpClose() {
      this.helpVisible = false
      this.$nextTick(() => this.forceBlur())
    }
  }
}
</script>

<style scoped>
/deep/ .el-dialog__header {
  display: none;
}
</style>