在vue页面中使用伪元素进行 气泡框创建|选中效果自定义|滚动条自定义

在vue页面中使用伪元素进行 气泡框|单选框自定义|滚动条自定义

1. 基于vue，使用到的图标是element plus

2. vue单页面代码

<template>
  <h1>{{ msg }}</h1>

  <div className="error-message">
    <el-icon :size="20" :color="'blue'">
      <edit />
    </el-icon>系统异常，请稍后再试
  </div>
  <!-- 气泡框 -->
  <div className="container">
    <div className="box top-arrow">Top </div>
    <div className="box right-arrow">Right</div>
    <div className="box bottom-arrow">Bottom</div>
    <div className="box left-arrow">Left</div>
  </div>
  <!-- 单选框自定义 -->
  <div className="container">
    <div>
      <input type="checkbox" id="backend" />
      <label htmlFor="backend">后端开发</label>
    </div>

    <div>
      <input type="checkbox" id="backend" />
      <label htmlFor="backend">后端开发</label>
    </div>

    <div>
      <input type="checkbox" id="frontend" />
      <label htmlFor="checkbox">前端开发</label>
    </div>

    <div>
      <input type="checkbox" id="frontend" />
      <label htmlFor="checkbox">前端开发</label>
    </div>
  </div>


  <!-- 浏览器中自定义滚动条 -->
  <div class="container2">
    <div class="rect">
      <div class="box"></div>
    </div>
    <div class="rect2">
      <div class="box"></div>
    </div>
  </div>

</template>



<script setup>
import { ref } from 'vue'
import { Edit } from '@element-plus/icons'

defineProps({
  msg: String
})

const count = ref(0)
</script>

<style scoped lang="scss">
.error-message {
  position: relative;
  color: #666666;
  padding: 12px 30px;
  background-color: #FFECE4;
  border-radius: 5px;
}

.error-message::before {
  content: '::before伪元素';
}

.container {
  display: grid;
  grid-template-columns: 200px 200px;
  grid-template-rows: 200px 200px;

  .box {
    width: 150px;
    height: 100px;
    background-color: red;
    color: white;
    position: relative;
    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
  }

  .box::after {
    content: '';
    width: 0;
    height: 0;
    position: absolute;
  }

  .box.bottom-arrow::after {
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 12px solid red;
    left: 22px;
    top: -10px;
  }

  .box.right-arrow::after {
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-right: 12px solid red;
    top: 22px;
    left: -10px;
  }

  .box.left-arrow::after {
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 12px solid red;
    top: 22px;
    right: -10px;
  }

  .box.top-arrow::after {
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 12px solid red;
    left: 22px;
    bottom: -10px;
  }
}

// 自定义复选框样式
input[type="checkbox"] {
  margin: 0;
}

#frontend {
  opacity: 0;
}

#frontend+label {
  margin-left: -12px;
  pointer-events: none;
}

#frontend+label::before {
  content: '\a0';
  display: inline-block;
  vertical-align: 0.1em;
  width: 0.8em;
  height: 0.8em;
  border-radius: 0.2em;
  background-color: silver;
  text-indent: 0.15em;
  line-height: 0.65;
  cursor: pointer;
}

#frontend:checked+label::before {
  content: '\2713';
  background-color: yellowgreen;
}


.container2 {
  display: flex;
  justify-content: space-around;

  .rect,
  .rect2 {
    width: 200px;
    height: 200px;
    overflow: scroll;
    border: 1px solid gainsboro;
  }

  .rect2::-webkit-scrollbar {
    width: 10px;
    height: 0;
    background-color: transparent;
  }

  .rect2::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.08);
    border-left: 4px solid transparent;
    background-clip: padding-box;
  }

  .rect2::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, 0.08);
    border: 0;
  }

  .box {
    width: 100px;
    height: 300px;
    background-color: aliceblue;
  }

}
</style>

2023.04.26更新一个新的气泡框添加创建方式

   child3是所在框的class名
   
   .child3::before {
    position: absolute;
    content: '';
    width: 0;
    height: 0;
    border: 10px solid;
    border-color: rgba(20, 102, 166, 0.85) transparent transparent transparent;
    //transparent放在不同位置改变箭头方向
    left:88px;
    top: 51px;
  }