|
@@ -0,0 +1,64 @@
|
|
|
+<template>
|
|
|
+ <div style='position: fixed;bottom: 0;right:0;width: 280px;' class='key-boards'>
|
|
|
+ <a-collapse :bordered='false' expand-icon-position='right'>
|
|
|
+ <template #expandIcon='props'>
|
|
|
+ <a-icon type='caret-up' :rotate='props.isActive ? 180 : 0' />
|
|
|
+ </template>
|
|
|
+ <a-collapse-panel key='1' :style='customStyle'>
|
|
|
+ <template slot='header'>
|
|
|
+ <div style='font-size: 12px;color: #8D9399;'>
|
|
|
+ <a-icon type='exclamation-circle' />
|
|
|
+ <span style='margin-left: 5px;'>键盘操作提示</span>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <p v-for='item in keyboardOperation' :key='item.value' style='display: flex;margin-top: 13px;'>
|
|
|
+ <span>{{item.value}}</span>
|
|
|
+ <span class='key-board'>{{item.keys}}</span>
|
|
|
+ <span v-if='item.events' style='margin: 0 5px;'>
|
|
|
+ +
|
|
|
+ <img style='width:13px;height:18px;' src='./../../assets/images/shubiao.png' alt />
|
|
|
+ </span>
|
|
|
+ <span>{{item.events}}</span>
|
|
|
+ </p>
|
|
|
+ </a-collapse-panel>
|
|
|
+ </a-collapse>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ name: '',
|
|
|
+ props: {},
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ customStyle: 'background: #fff;overflow: hidden; box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.11);border:0',
|
|
|
+ keyboardOperation: [
|
|
|
+ { value: '拖动画布:', keys: 'Space', events: 'Click' },
|
|
|
+ // { value: "加选对象:", keys: "Ctrl", events: "Press" },
|
|
|
+ { value: '确认操作:', keys: 'Enter' },
|
|
|
+ // { value: "取消对象:", keys: "Enter" }
|
|
|
+ ],
|
|
|
+ }
|
|
|
+ },
|
|
|
+ components: {},
|
|
|
+ beforeMount() {},
|
|
|
+ mounted() {},
|
|
|
+ methods: {},
|
|
|
+}
|
|
|
+</script>
|
|
|
+<style lang='less' scoped>
|
|
|
+.key-boards {
|
|
|
+ .key-board {
|
|
|
+ width: 52px;
|
|
|
+ height: 24px;
|
|
|
+ border-radius: 3px;
|
|
|
+ border: 1px solid rgba(195, 199, 203, 1);
|
|
|
+ font-size: 14px;
|
|
|
+ color: #646a73;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ /deep/ .ant-collapse-content {
|
|
|
+ border-top: 1px solid #eff0f1;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|