css的使用技巧

是达宝吖
407 阅读3分钟

总结一些在工作中常见的在vue中使用css的技巧

scss 的使用

// 如何引入图片

.box {
  color: rgba(255,255,255);
  /* 在vue中'@'表示src文件夹, 在css中可以用'~@'表示src文件夹 */
  background: url("~@/widget-tools/img/iu.jpg");
}

// css中使用变量

/* 使用$表示变量，使用~@就能表示src */
$baseUrl: "~@/assets/img";
/* 引入$baseUrl变量，可以用插值语法#{}，#{}和vue中的${}功能相同 */
background-image: url(#{$baseUrl}/img_title_bg.png);

// @mixinde的使用

/* 定义混合指令@mixin + 变量，可用于定义可重复使用的样式 */
@mixin background-images-baseStyle {
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.box {
  color: rgba(255,255,255);
  background: url("~@/widget-tools/img/iu.jpg");
  /* 引入混合样式 */
  @include background-images-baseStyle;
}

// 导入css文件使用@import

@import "sidebar.scss";

css 使用变量var(--*)

--*即可定义一个变量，*为定义变量的名称，可以在js中使用

例如开发一个如下的占比条

image.png


<template>
  <div class="sort-strip">
    <div
      class="sort-item"
      v-for="(item, index) in sortList"
      :key="index"
      // --flex和--bgColor可以在js中使用
      :style="{ '--flex': item.value, '--bgColor': item.color }"
    ></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      sortList: [
        {
          value: 38,
          color: "#007FFF",
        },
        {
          value: 27,
          color: "#30FFA9",
        },
        {
          value: 74,
          color: "#FF5252",
        },
      ],
    };
  }
};
</script>


/* var(--*)的使用 */
.sort-strip {
  width: 100%;
  height: 12px;
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, 0.16);
  margin-bottom: 6px;
  display: flex;
  .sort-item {
    margin-right: 2px;
    background: red;
    display: 12;
    /* --flex及为定义的变量，通过var(xxx)引入就会生效 */
    flex: var(--flex);
    /* --bgColor即为定义的变量，通过var(xxx)引入就会生效 */
    background: var(--bgColor);
    &:last-child {
      margin-right: 0;
    }
  }
}

组合选择器的使用

  1. 子组合选择器 >

    A > B : 选择所有父级是 A 元素的 B 元素

  2. 同层相邻组合选择器 +

    A + B : 选择所有紧接着 A 元素之后的 B 元素

  3. 同层全体组合选择器 ~

    A ~ B : 选择 A 元素之后的每一个 B 元素

滚动条的使用

.avg-block_scroll {
  overflow-y: scroll;
  &::-webkit-scrollbar-track {
    display: none;
  }
  &::-webkit-scrollbar-thumb {
    display: none;
  }
  &:hover {
    &::-webkit-scrollbar-track {
      display: block;
    }
    &::-webkit-scrollbar-thumb {
      display: block;
    }
  }
}

字体引入

  1. 新建 font.css 文件

  2. font.css中引入文字

    @font-face {
 font-family: 'Msyhbd';
 src: url('msyhbd.ttf'); // 引入字体文件
}

  3. 在 main.js 中引入 font.css 文件

    import "@/assets/font/font.css"

  4. 使用

    .box {
  font: Msyhbd; // 使用字体样式
  color: red;
  font-size: 18px
}

伪元素::before和attr结合使用

例如实现图片右上角半圆并动态展示文字

微信截图_20240629185710.png

<template>
  <div class="portrait" :name="name"></div>
</template>

<script>
export default {
  data() {
    return {
      name: "jisoo"
    };
  }
};
</script>

.portrait {
    width: 300px;
    height: 300px;
    background-color: red;
    background: url("~@/assets/img/jisoo.jpg");
    background-size: 100% 100%;
    position: relative;
    &::before {
      // ::before伪元素定义右上角样式
      content: attr(name); // attr(xxx),xxx为需要展示的内容的变量
      color: rgba(255, 255, 255, 0.9);
      position: absolute;
      right: 0;
      top: 0;
      width: 50px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      background: rgba(244, 62, 62, 0.6);
      border-radius: 0px 0 0 20px;
    }
  }

style样式引入图片

<template>
  <div class="head-box" :style="getHeadBg()"></div>
</template>

<script>
export default {
 props: {
    width: {
      type: String,
      default: '350',
    },     
    height: {
      type: String,
      default: '32',
    },
    bgUrl: {
      type: String,
      default: 'first-head',
    },
  },
  methods: {
      getHeadBg() {
          return {
            width: this.width + 'px',
            height: this.height + 'px',
            // 需要使用require引入
            background: `url(${require('@/assets/images/ads/' + this.bgUrl + '.png')}) left center no-repeat`,
            backgroundSize: '100% 100%',
            lineHeight: this.height + 'px',
          }
        },
  }
}

判断图片是否存在，不存在则展示默认图片

使用img元素的onerror事件，onerror 事件会在文档或图像加载过程中发生错误时被触发。

<template>
  <div class="portrait">
    <img
      src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F553ffa1e-2217-495d-b119-1b036ec886b4%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1722329473&t=95711fb0626cbd914978e25c75b56e11"
      alt=""
      :onerror="defaultImg"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 图片加载失败时则会展示引入的默认图片
      defaultImg: `this.src='${require("@/assets/img/noData.png")}'`
    };
  }
};
</script>


<style lang="scss" scoped>
.portrait {
  width: 300px;
  height: 300px;
  border: 1px solid #e0e0e0;
  img {
    width: 100%;
    height: 100%;
  }
}
</style>

微信截图_20240630165917.png

滚动条hover时变宽

<template>
  <div>
    ="item">这里是模块三</div>
    </div>

    <div class="test">
      <div class="item">
        <div>这里是模块一</div>
      </div>
      <div class="item">这里是模块二</div>
      <div class="item">这里是模块三</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {}
  },
}
</script>

<style lang="scss" scoped>
.test {
  color: rgba(62, 61, 61, 0.6);
  margin-top: 50px;
  width: 800px;
  height: 200px;
  display: flex;
  overflow-x: auto;

  .item {
    width: 450px;
    height: 100%;
    flex-shrink: 0;
  }
  .item:nth-child(1) {
    background-color: rgb(242, 147, 147);
  }
  .item:nth-child(2) {
    background-color: rgb(167, 172, 230);
  }
  .item:nth-child(3) {
    background-color: rgb(177, 240, 182);
  }

  &::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }
  // 滚动条里的小方块
  &::-webkit-scrollbar-thumb {
    /* 先设置border颜色为transparent,这样hover时背景色不会border被挡住 */
    border: 3px solid transparent;
    border-radius: 10px;
    /* background-clip的作用是设置背景元素的背景（背景图片或颜色）的填充规则 */
    /* border-box:设置填充范围到border(包括border),默认选项 */
    /* padding-box:设置填充范围到padding,即border不会有background的填充 */
    /* content-box:设置填充范围到content区域  */
    /* 设置元素的背景色是伸至padding，即border不会有background的填充  */
    background-clip: padding-box;
    background-color: rgba(157, 165, 183, 0.4);
    &:hover {
      /* hover时再将背景色延伸至border即可  */
      background-clip: border-box;
    }
  }
}
</style>

滚动条hover时变宽.gif

横向滚动条跟随鼠标滚轮滚动

// 设置自定义指令
import Vue from 'vue'
// 自定义指令有5个钩子函数
// bind: 只调用一次，在指令第一次绑定到元素时调用，可以再这个钩子函数中进行初始化设置
// inserted: 被绑定元素插入父节点时调用，在bind后面调用
// update: 所在绑定的组件的VNode更新时调用，但是可能发生在其子VNode更新之前。调用时指令的值不一定发生改变，通过比较更新前后的值来忽略不必要的模板更新
// componentUpdated: 指令所在组件的VNode及其子VNode全部更新后调用
// unbind: 只调用一次，指令与元素解绑时调用

// 横向滚动
Vue.directive('cross', {
  inserted(el) {
    // 监听鼠标的滚动事件
    el.addEventListener('wheel', e => {
      console.log(e.deltaY, 'deltaY')
      // 阻止默认滚动事件
      e.preventDefault()
      // 添加页面左右滚动事件
      el.scrollLeft += e.deltaY
    })
  },
})


<template>
  <div>
    <div v-cross class="test">
      <div class="item">
        <div>这里是模块一</div>
      </div>
      <div class="item">这里是模块二</div>
      <div class="item">这里是模块三</div>
    </div>
  </div>
</template>

<script>
import '@/plugins/directive'

export default {}
</script>

<style lang="scss" scoped>
.test {
  color: rgba(62, 61, 61, 0.6);
  margin-top: 50px;
  width: 800px;
  height: 200px;
  display: flex;
  overflow-x: auto;

  .item {
    width: 450px;
    height: 100%;
    flex-shrink: 0;
  }
  .item:nth-child(1) {
    background-color: rgb(242, 147, 147);
  }
  .item:nth-child(2) {
    background-color: rgb(167, 172, 230);
  }
  .item:nth-child(3) {
    background-color: rgb(177, 240, 182);
  }

  &::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }
  &::-webkit-scrollbar-thumb {
    border: 3px solid transparent;
    border-radius: 10px;
    background-clip: padding-box;
    background-color: rgba(157, 165, 183, 0.4);
    &:hover {
      background-clip: border-box;
    }
  }
}
</style>

横向滚动条跟随鼠标滚轮滚动.gif

avatar
文章
阅读
粉丝