vue 整合雪碧图功能

Posted liugx

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue 整合雪碧图功能相关的知识,希望对你有一定的参考价值。

1、通过命令新建一个vue项目

环境要求:  安装有 Node.js、 vue、 vue-cli 。

创建项目:

vue init webpack tx_demo

cd  tx_demo

进入项目,下载依赖:

// 最新版已经无需安装依赖初始化,可直接运行下面的命令 npm install 或者 cnpm install

运行项目:

npm run dev

2、由于我用的是sass样式,所以安装sass依赖

npm install node-sass sass-loader

3、配置雪碧图功能

先安装依赖

npm install webpack-spritesmith


配置webpack配置文件,由于开发和生产环境都需要用到雪碧图,所以我们在base(webpack.base.conf.js)配置中添加
// 雪碧图
const SpritesPlugin = require(webpack-spritesmith);
①:注意plugins这块代码,没有plugins就自己新建一个
②:在配置中,用到了别名([email protected] :@前面需要加波浪线),这样在生成的sprite.scss就不会存在在不到图片资源的问题了
  plugins: [
      // 雪碧图相关
      new SpritesPlugin({
          // 目标小图标
          src: {
              cwd: path.resolve(__dirname, ../src/assets/images/icon),
              glob: *.png
          },
          // 输出雪碧图文件及样式文件
          target: {
              image: path.resolve(__dirname, ../src/assets/css/sprite.png),
              css:[[path.resolve(__dirname, ../src/assets/css/sprite.scss),{
                  format: function_based_template
              }]]
          },
          customTemplates: {
              function_based_template: path.resolve(__dirname, ../sprite_handlebars_template.handlebars)
          },
          // 样式文件中调用雪碧图地址写法
          apiOptions: {
              cssImageRef: "[email protected]/assets/css/sprite.png?v="+Date.parse(new Date())
          },
          spritesmithOptions: {
              algorithm: binary-tree,
              padding: 4
          }
      })
  ]

生成 sprite.scss 个规则模板为项目根目录下 sprite_handlebars_template.handlebars
//随机数字
@function parse-random($value) {
  @return round(random() * $value);
}
$randomId: parse-random(1000000);

$spriteSrc: "{{{spritesheet.image}}}";
$spriteWidth: {{{spritesheet.width}}}px;
$spriteHeight: {{{spritesheet.height}}}px;
{{#items}}
${{name}}: {{px.offset_x}} {{px.offset_y}} {{px.width}} {{px.height}};
{{/items}}

@function px2rem ($px) {
  @if (type-of($px) == "number") {
    @return $px / 75px * 1rem;
  }
  @if (type-of($px) == "list") {
    @if (nth($px, 1) == 0 and nth($px, 2) != 0) {
      @return 0 nth($px, 2) / 75px * 1rem;
    } @else if (nth($px, 1) == 0 and nth($px, 2) == 0)  {
      @return 0 0;
    } @else if (nth($px, 1) != 0 and nth($px, 2) == 0) {
      @return nth($px, 1) / 75px * 1rem 0;
    } @else {
      @return nth($px, 1) / 75px *1rem nth($px, 2) / 75px * 1rem;
    }
  }
}

@function strip-units($number){
  @return $number / ($number * 0 + 1);
}

@function format-zero($number){
    @if $number == 0 {
        @return 1;
    }@else{
        @return $number;
    }
}

@mixin sprite-width($sprite, $precision) {
    @if $precision {
        width: px2rem(nth($sprite, 3));
    }@else{
        width: px2rem(nth($sprite, 3) + 2px);
    }

}

@mixin sprite-height($sprite, $precision) {
    @if $precision {
        height: px2rem(nth($sprite, 4));
    }@else{
        height: px2rem(nth($sprite, 4) + 2px);
    }
}

@mixin sprite-position($sprite, $precision) {
    @if $precision {
        background-position: strip-units(nth($sprite, 1)) / strip-units(nth($sprite, 3) - $spriteWidth) * 100%  strip-units(nth($sprite, 2)) / format-zero(strip-units(nth($sprite, 4) - $spriteHeight)) * 100%;
    }@else{
        background-position: strip-units(nth($sprite, 1)) / strip-units(nth($sprite, 3) + 1 - $spriteWidth) * 100%  strip-units(nth($sprite, 2)) / format-zero(strip-units(nth($sprite, 4) + 1 - $spriteHeight)) * 100%;
    }
}

@mixin sprite($sprite, $precision) {
    @include sprite-position($sprite, $precision);
    @include sprite-width($sprite, $precision);
    @include sprite-height($sprite, $precision);
  background-image: url(#{$spriteSrc});
    background-repeat: no-repeat;
    background-size: px2rem(($spriteWidth, $spriteHeight));
  display: inline-block;
}

{{#sprite}}
    {{class}} {
    background-repeat: no-repeat;
    overflow: hidden;
    border: none;
    background: url(#{$spriteSrc});
    @include inline-block();
    vertical-align: middle;
    font-style: normal;
    color:$icon-font-color;
    }
{{/sprite}}

{{#items}}
@mixin mix-{{name}}() {
    @include sprite(${{name}}, $precision: false);
}
{{/items}}

整个工程结构图及配置图如下:
技术分享图片

 

4、使用方法如下(直接使用 sprite.scss 中的 @mixin方法):

技术分享图片

 

 效果如下

技术分享图片

 


以上是关于vue 整合雪碧图功能的主要内容,如果未能解决你的问题,请参考以下文章

什么是雪碧图?它的优缺点是什么?

gulp-css-spriter 雪碧图合成

图片整合技术

制作雪碧图代码示例

createjs使用雪碧图代码

雪碧图的使用方法