操作记录

描述：

技术杖element组件封装的

  1. <template>
  2.   <div :class="onOff ? 'content contentLeft' : 'content'">
  3.     <div
  4.       :class="onOff ? 'record' : 'packUp'"
  5.       class="btn"
  6.       @click="
  7.         () => {
  8.           onOff = !onOff;
  9.         }
  10.       "
  11.     >
  12.       {{ onOff ? "操作记录" : "收起" }}
  13.     </div>
  14.     <div class="body">
  15.       <h3>操作记录</h3>
  16.       <el-timeline :reverse="reverse">
  17.         <el-timeline-item
  18.           v-for="(activity, index) in activities"
  19.           :key="index"
  20.           :timestamp="activity.timestamp"
  21.         >
  22.           {{ activity.content }}
  23.         </el-timeline-item>
  24.       </el-timeline>
  25.     </div>
  26.   </div>
  27. </template>
  29. <script>
  30. export default {
  31.   props: {
  32.     activities: {
  33.       type: Array,
  34.       default: function () {
  35.         return [
  36.           {
  37.             content: "测试数据1",
  38.             timestamp: "2018-04-15",
  39.           },
  40.           {
  41.             content: "测试数据2",
  42.             timestamp: "2018-04-13",
  43.           },
  44.           {
  45.             content: "测试数据3",
  46.             timestamp: "2018-04-11",
  47.           },
  48.         ];
  49.       },
  50.     },
  51.     reverse: {
  52.       type: Boolean,
  53.       default: false,
  54.     },
  55.   },
  56.   data() {
  57.     return {
  58.       // 开关
  59.       onOff: true,
  60.     };
  61.   },
  62. };
  63. </script>
  65. <style scoped lang="scss">
  66. .content {
  67.   display: flex;
  68.   position: fixed;
  69.   top: 20%;
  70.   right: -20px;
  71.   z-index: 333;
  72.   transition: right 1s;
  73.   .record {
  74.     font-size: 14px;
  75.     box-sizing: border-box;
  76.     height: 80px;
  77.     width: 50px;
  78.     line-height: 50px;
  79.     color: #fff;
  80.     background-color: #1bb6ec;
  81.     border-radius: 6px 0 0 6px;
  82.     cursor: pointer;
  83.     -ms-writing-mode: tb-rl;
  84.     text-align: center;
  85.     writing-mode: tb-rl;
  86.     &::selection {
  87.       text-shadow: none;
  88.     }
  89.   }
  90.   .packUp {
  91.     font-size: 14px;
  92.     box-sizing: border-box;
  93.     height: 80px;
  94.     width: 50px;
  95.     border: 1px solid #ccc;
  96.     line-height: 50px;
  97.     background-color: #fff;
  98.     border-radius: 6px 0 0 6px;
  99.     cursor: pointer;
  100.     writing-mode: tb-rl;
  101.     -ms-writing-mode: tb-rl;
  102.     text-align: center;
  103.     &::selection {
  104.       text-shadow: none;
  105.     }
  106.   }
  107.   .body {
  108.     width: 260px;
  109.     height: 360px;
  110.     padding: 10px;
  111.     box-sizing: border-box;
  112.     border: 1px solid #ccc;
  113.     background-color: #fff;
  114.     overflow: auto;
  115.     h3 {
  116.       text-align: center;
  117.       margin-bottom: 20px;
  118.     }
  119.   }
  120. }
  121. .contentLeft {
  122.   right: -280px;
  123.   transition: right 1s;
  124. }
  125. </style>

image.pngimage.png