任意页面的系统设置

先做一个组件，然后把这个组件挂在到，最上面的一个组件上，并且让这个组件绝对定位
position 是定义这个元素的定位， fixed 代表着它是一个固定定位，它是以当前浏览器的窗口左上角为坐标系，比如 top: 70% 就是这个元素到浏览器窗口 最上面的距离是 整个窗口高度的 70%， right: 0px 代表着它距离浏览器窗口的右边距离是 0， 这个可以是负数，相同的属性还有 left 和 bottom
https://www.w3school.com.cn/css/css_positioning.asp

<template>
  <div>
     <!-- 当前按钮需要在最外层的布局组件中，这样才能保证所有组件都能显示此按钮 -->
    <div @click="openDrawer" class="sys-setting">
      <i class="el-icon-setting" style="font-size: 24px; color: #fff"></i>
    </div>
    <el-drawer
      title="系统设置"
      :visible.sync="drawer"
      direction="rtl"
      :before-close="closeDrawer"
    >
    </el-drawer>
  </div>
</template>
<script>
export default {
  data() {
    return {
      drawer: false,
    };
  },
  methods: {
    openDrawer() {
      this.drawer = true;
    },
    closeDrawer() {
      this.drawer = false;
    },
  },
};
</script>
<style scoped>
.sys-setting {
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 70%;
  right: 0px;
  height: 48px;
  width: 48px;
  font-size: 16px;
  background: #1890ff;
  text-align: center;
  border-radius: 5px 0px 0px 5px;
}
</style>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-77S4PghZ-1618371164237)(https:/]