@koihe/web-style

一套基于 scss 的前端样式库

安装

npm install --save @koihe/web-style
yarn add @koihe/web-style

引入

在 vue.config.js 中导入样式库入口文件

module.exports = {
    css: {
        loaderOptions: {
            sass: {
                data: `
                @import "@koihe/web-style/src/index.scss";
            `,
            },
        },
    },
};

在 vite.config.ts 中导入样式库入口文件

module.exports = {
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `
          @import "@koihe/web-style/src/index.scss";
         `,
      },
    },
  },
};

在 main.js 中或 main.ts 以及需要使用的地方导入方法

import cssUtils from '@koihe/web-style/src';
Vue.prototype.$cssUtils = cssUtils;

函数

1. pxToRem

   @desc: px 转换 rem 方法

   @param {Number} $px 像素值

   @use: pxToRem(10px);

   @return: {String} rem 像素对象转换的 rem 值;

   使用参考：无

   .demo {
       width: pxToRem(16); // width: 1rem;
   }

2. pxToPercent

   @desc: 计算百分比方法

   @param {Number} $px 像素值

   @param {Number} $refer 参考值

   @use: pxToPercent(80, 100);

   @return: {String} % 计算后的百分比;

   使用参考：无

   .demo {
       width: pxToPercent(50, 100); // width: 50%;
   }

方法

1. wh

   @desc: 设置元素宽高

   @param {String} $width 宽度 默认 100%

   @param {String} $height 高度 默认继承宽度

   @use: @include wh;

   使用参考：无

   .demo {
       @include wh; // width: 100%; height: 100%;
       @include wh(100px); // width: 100px; height: 100px;
       @include wh(100px, 50px); // width: 100px; height: 50px;
   }

2. whrem

   @desc: 设置元素宽高,传入数值自动转换 rem 值

   @param {String} $width 宽度

   @param {String} $height 高度 默认继承宽度

   @use: @include wh(40);

   @use: @include wh(40, 50);

   使用参考：无

   .demo {
       @include wh(40); // width: 2.5rem; height: 2.5rem;
       @include wh(40, 50); // width: 2.5rem; height: 3.125rem;
   }

3. fullContain

   @desc: 宽高为 100%;

   @use: @include fullContain;

   使用参考：无

   .demo {
       @include fullContain; // width: 100%; height: 100%;
   }

4. flexCenter

   @desc: 弹性盒 flex;

   @param {String} $justify 主轴对齐方式 默认 center

   @param {String} $align 副轴对齐方式 默认 center

   @param {String} $direction 主轴是否垂直 默认 false

   @use: @include flexCenter;

   使用参考：无

   .demo {
       @include flexCenter; // flex 垂直水平居中
       @include flexCenter(space-between); // flex 水平两端对齐，水平居中
       @include flexCenter(center, center, true); // 水平垂直居中，主轴方向为垂直
   }

5. flexwh

   @desc: 弹性盒-平分元素 flex 1

   @use: @include flexwh;

   使用参考：无

   .demo {
       @include flexwh; // flex: 1; flex-shrink: 0;
   }

6. grid

   @desc: 网格布局 grid;

   @param {Number} $columns 网格分割行数

   @param {Number} $rows 网格分割列数

   @use: @include grid(2, 2);

   使用参考：无

   .demo {
       @include grid(2, 2); // 表示划分为 2 x 2 的表格
   }

7. gridItem

   @desc: 网格布局-格子设置 配合 @include grid 使用;

   @param {Number} $column-start 网格行起始点

   @param {Number} $column-end 网格行结束点

   @param {Number} $row-start 网格列起始点

   @param {Number} $row-end 网格列结束点

   @use: @include gridItem(1, 2, 2, 2);

   使用参考：无

   .demo {
       @include grid(2, 2);
       @include gridItem(1, 2, 1, 2); // 表示行1-2，列2-2大小的格子;
   }

8. textEllipsis / textHidden

   @desc: 单行文本溢出省略号;

   @use: @include textEllipsis;

   使用参考：无

   .demo {
       @include wh(pxToRem(100), pxToRem(40));
       line-height: pxToRem(40);
       @include textEllipsis; // 单行文本溢出省略号
   }

9. boxClamp

   @desc: 多行文本溢出省略号;

   @param {Number} $row 行数 默认 3 行

   @use: @include boxClamp(2);

   使用参考：无

   .demo {
       @include wh(pxToRem(100), pxToRem(80));
       line-height: pxToRem(40);
       @include boxClamp(2); // 两行文本溢出省略
   }

10. longWordWrap

    @desc: 长单词自动换行;

    @use: @include longWordWrap;

    使用参考：无

    .demo {
        @include longWordWrap;
    }

11. position

    @desc: 定位;

    @param {String} $position 定位方式

    @param {String} $args 定位参数

    @use: @include position(absolute,top 10px right 20px bottom 20px left 20px);

    使用参考：无

    .demo {
        @include wh(pxToRem(100));
        @include position(absolute, top 10px right 20px bottom 20px left 20px);
        // 表示绝对定位， 上右下左分别为 10px, 20px, 20px, 20px;
    }

12. fixed

    @desc: 固定定位;

    @param {String} $param 定位方式

    @use: @include fixed(top-left);

    使用参考：无

    .demo {
        @include wh(pxToRem(100));
        @include fixed(top-left); // 固定定位 - 上左
        @include fixed(top-center); // 固定定位 - 上中
        @include fixed(top-right); // 固定定位 - 上右
        @include fixed(center-left); // 固定定位 - 中左
        @include fixed(center-center); // 固定定位 - 中
        @include fixed(center); // 固定定位 - 中
        @include fixed(center-right); // 固定定位 - 中右
        @include fixed(bottom-left); // 固定定位 - 下左
        @include fixed(bottom-center); // 固定定位 - 下中
        @include fixed(bottom-right); // 固定定位 - 下右
    }

13. absolute

    @desc: 绝对定位;

    @param {String} $param 定位方式

    @use: @include absolute(top-left);

    使用参考：无

    .demo {
        @include wh(pxToRem(100));
        @include absolute(top-left); // 绝对定位 - 上左
        @include absolute(top-center); // 绝对定位 - 上中
        @include absolute(top-right); // 绝对定位 - 上右
        @include absolute(center-left); // 绝对定位 - 中左
        @include absolute(center-center); // 绝对定位 - 中
        @include absolute(center); // 绝对定位 - 中
        @include absolute(center-right); // 绝对定位 - 中右
        @include absolute(bottom-left); // 绝对定位 - 下左
        @include absolute(bottom-center); // 绝对定位 - 下中
        @include absolute(bottom-right); // 绝对定位 - 下右
    }

14. resize

    @desc: 宽高变化过度动画;

    @param {String} $duration 过度所需时间 默认 3s

    @use: @include resize;

    @use: @include resize(0.2s);

    使用参考：无

    .demo {
        @include wh(pxToRem(100));
        @include centerTranslate(both); // 水平/垂直居中
        @include resize;
    }

15. centerTranslate

    @desc: 未知宽高的元素水平/垂直居中;

    @param {String} $direction 居中方式

    @use: @include centerTranslate;

    使用参考：无

    .demo {
        @include wh(pxToRem(100));
        @include centerTranslate(both); // 水平/垂直居中
        @include centerTranslate(horizontal); // 水平居中
        @include centerTranslate(vertical); // 垂直居中
    }

16. pointerEvents

    @desc: 点击穿透;

    @param {String} $pointer 穿透参数

    @use: @include pointerEvents;

    使用参考：无

    .demo {
        @include wh(pxToRem(100));
        @include pointerEvents; // 点击穿透
        @include pointerEvents(auto); // 取消
    }

17. pointer

    @desc: 点击穿透;

    @param {String} $pointer 穿透参数

    @use: @include pointer(false);

    使用参考：无

    .demo {
        @include wh(pxToRem(100));
        @include pointer; // 点击穿透
        @include pointer(false); // 取消
    }

18. cursor

    @desc: 鼠标样式;

    @param {String} $pointer 穿透参数

    @use: @include cursor;

    使用参考：无

    .demo {
        @include wh(pxToRem(100));
        @include cursor; // 点击手势
        @include cursor(auto); // 默认手势
    }

19. css3

    @desc: 浏览器兼容性前缀;

    @param {String} $property 属性名

    @param {String} $value 属性值

    @use: @include css3(transition, 0.5s all);

    使用参考：无

    .demo {
        @include wh(pxToRem(100));
        @include css3(transition, 0.5s all);
        // 编译为
        -webkit-transition: 0.5s all;
        -moz-transition: 0.5s all;
        -ms-transition: 0.5s all;
        -o-transition: 0.5s all;
        transition: 0.5s all;
    }

20. bgImage / bgImg

    @desc: css 背景图;

    @param {String} $url 图片路径

    @param {String} $width 背景宽度 默认 100%

    @param {String} $height 背景高度 默认继承宽度

    @param {String} $isUrl 是否带 url()的地址 默认 false

    @use: @include bgImage('../../public/img/demo.png');

    使用参考：无

    .demo {
        @include wh(pxToRem(100));
        @include bgImage('../../public/img/demo.png');
        @include bgImage('../../public/img/demo.png', cover);
        @include bgImage('../../public/img/demo.png', 100%);
        @include bgImage('../../public/img/demo.png', 100%, 80%);
    }

21. img

    @desc: 给 img 标签设置样式和 src，仅适用于 img 标签;

    @param {String} $url 图片地址

    @param {String} $width img 标签宽度 默认 auto

    @param {String} $height img 标签高度 默认 auto

    @use: @include img('../../public/img/demo.png');

    使用参考：无

    .demo {
        @include wh(pxToRem(100));
        @include img('../../public/img/demo.png');
        @include img('../../public/img/demo.png', 100%);
        @include img('../../public/img/demo.png', 100px, auto);
    }

22. regularTriangle

    @desc: div 边框实现正三角;

    @param {String} $direction 三角形方向 默认 bottom

    @param {String} $color 三角形颜色 默认 #000

    @param {String} $size 三角形大小 默认 1rem

    @use: @include regularTriangle;

    使用参考：无

    .demo {
        @include wh(pxToRem(100));
        @include regularTriangle;
        @include regularTriangle(left, red, 2rem);
    }

23. shadow

    @desc: div 边框阴影;

    @param {String} $x 阴影 x 轴偏移 默认 pxToRem(3)

    @param {String} $y 阴影 y 轴偏移 默认 pxToRem(3)

    @param {String} $shadowColor 阴影颜色 默认 #cccccc

    @param {String} $spread 扩散大小 默认 pxToRem(4)

    @use: @include shadow;

    使用参考：无

    .demo {
        @include wh(pxToRem(100));
        @include shadow;
        @include shadow(5px);
        @include shadow(5px, 3px, red);
        @include shadow(5px, 3px, red, 10px);
    }

24. keyframes

    @desc: 动画 keyframes 兼容性;

    @param {String} $animationName 动画名称 默认名称 anime

    @use: @include keyframes(move-the-object) {100% { transform: translateX(200px); }}

    使用参考：无

    .demo {
        @include wh(pxToRem(100));
        @include keyframes(move-the-object) {
            100% {
                transform: translateX(200px);
            }
        }
    }

25. placeholder

    @desc: 输入框提示文字样式;

    @use: @include placeholder { color: #fff; }

    使用参考：无

    input.demo {
        @include placeholder {
            color: #fff;
        }
    }

26. scrollbar

    @desc: 滚动条样式;

    @use: @include scrollbar { background: #fff; }

    使用参考：无

    input.demo {
        @include placeholder {
            background: #fff;
        }
    }

27. miniFont

    @desc: 小于 12px 的文字 取值范围 0-12;

    @param {Number} $font-size 字体大小 默认名称 12

    @use: @include miniFont(12)

    使用参考：无

    .demo {
        @include wh(pxToRem(100));
        @include miniFont(8);
    }

28. select

    @desc: 用户是否可用选中文本;

    @param {Boolean} $operation 是否可选 默认不能

    @use: @include select;

    使用参考：无

    .demo {
        @include wh(pxToRem(100));
        @include select; //不可选
        @include select(true); //可选
    }

29. gradient

    @desc: 渐变背景色;

    @param {String} $colors 颜色数组 默认 transparent

    @param {String} $direction 渐变方向 默认 0deg

    @use: @include gradient(red blue);

    使用参考：无

    .demo {
        @include wh(pxToRem(100));
        @include gradient(red blue, 90deg);
    }

30. textAlignment

    @desc: 文字水平对齐方式;

    @param {String} $align 对齐方式;

    @param {Boolean} $last 最后一行是否两端对齐;

    @use: @include textAlignment(left);

    @use: @include textAlignment(justify,true);

    使用参考：无

    .demo {
        @include wh(pxToRem(100));
        @include textAlignment(justify,true); // 文字两端对齐，且最后一行也是两端对齐
    }

样式块

1. gradientBorder

   @desc: 带圆角渐变色边框实现，需要在父元素里嵌套一个 class 名为 content 的子元素;

   @param {String} $border-width 边框宽度 默认 1px

   @param {String} $radius 圆角度数 默认 0

   @param {String} $direction 渐变色方向 默认 vertical

   @use: @include gradientBorder(1px, 10px, red yellow, vertical);

   使用参考：无

   .demo {
       @include gradientBorder(1px, 10px, red yellow, vertical); // 垂直渐变
       @include gradientBorder(1px, 10px, red yellow, horizontal); // 水平渐变
   }

2. linearGradientText

   @desc: 文字发光 + 文字阴影效果，需要在元素上添加 title 为文字内容 ;

   @param {Number} $fontSize 文字大小 默认 1rem

   @param {String} $linearGradient1 起始渐变色 默认 #dcebff

   @param {String} $linearGradient2 结束渐变色 默认 #9cc5ff

   @param {String} $textShadow 文字阴影颜色 默认 #032e60

   @param {String} $deg 渐变色角度 默认 0deg 从上到下

   @use: @use: @include linearGradientText(16, #dcebff, #9cc5ff, #032e60, 0); 垂直渐变

   使用参考：无

   .demo {
       @include linearGradientText(16, #dcebff, #9cc5ff, #032e60, 0); // 垂直渐变
   }

3. hover

   @desc: hover 给当前元素添加 hover;

   @param {Number} $duration 过度时长 默认 0.5 单位秒(s)

   @use: @include hover{ width: 20px; height: 20px; }

   使用参考：无

   .demo {
       @include hover {
           background: red;
       }
       @include hover(2) {
           background: yellow;
           color: red;
       }
   }

4. focus

   @desc: focus 给当前元素添加 focus;

   @param {Number} $duration 过度时长 默认 0.5 单位秒(s)

   @use: @include focus{ width: 20px; height: 20px; }

   使用参考：无

   .demo {
       @include focus {
           background: red;
       }
       @include focus(2) {
           background: yellow;
           color: red;
       }
   }

5. before

   @desc: before 伪类添加;

   @use: @include before{ width: 20px; height: 20px; }

   使用参考：无

   .demo {
       @include before {
           width: 20px;
           height: 20px;
           background: red;
       }
   }

6. after

   @desc: after 伪类添加;

   @use: @include after{ width: 20px; height: 20px; }

   使用参考：无

   .demo {
       @include after {
           width: 20px;
           height: 20px;
           background: skyblue;
       }
   }

7. placeholder

   @desc: placeholder 样式修改;

   @use: @use: @include placeholder{ width: 20px; height: 20px; }

   使用参考：无

   input.demo {
       @include placeholder {
           width: 20px;
           height: 20px;
           background: skyblue;
       }
   }

8. console

   @desc: 利用伪类打印 SCSS 日志;

   @param {String} $log 打印内容

   @use: @include console(Fate);

   使用参考：无

   .demo {
       @include console(Fate);
       // 伪类的content: log -> Fate
   }

9. modulewh

   @desc: 平时调度-模块大小;

   @param {String} $widthList 宽度列表

   @param {String} $className 类名 默认绑定 module

   @use: @include modulewh(8 8 8); 表示有三列，每列占 8 格，共 24 格。

   使用参考：无

   .demo {
       // 利用网格布局默认将父元素划分为24格
       // 传入8 8 8 表示表示有三列，每列占 8 格
       @include modulewh(8 8 8);
   }

10. demoBox

    @desc: 测试盒子样式; 给父元素设置 子元素需要有个元素 class 为 demo-box

    @param {Boolean} $showBorder 是否显示边界线

    @use: @include demoBox

    使用参考：无

    .demo {
        @include demoBox(true);
    }

11. titleStyle

    @desc: 平时调度标题基础样式 取全局自定义变量中的响应名称的基础样式

    @param {String} $name 基础标题名称

    @use: @include titleStyle('main');

    使用参考：无

    .demo {
        @include titleStyle('main');
        // 编译为
        font-size: var(--main-title-font-size);
        font-weight: var(--main-title-font-weight);
        font-family: var(--main-title-font-family);
        color: var(--main-title-font-color);
        letter-spacing: var(--main-title-letter-spacing);
        transform: translate(var(--main-title-font-position));
    }

内置操作 css 方法

1. getRootCss

   @desc: 获取全局自定义 css 变量方法

   @param {String} varName 自定义变量名

   @use: cssUtils.getRootCss('--main-title-font-size');

   使用参考：无

   const fontSize = cssUtils.getRootCss('--main-title-font-size');

2. setRootCss

   @desc: 设置全局自定义 css 变量方法

   @param {String} varName 自定义变量名

   @param {String} varValue 设置的值

   @use: cssUtils.setRootCss('--main-title-font-size','5rem');

   使用参考：无

   cssUtils.setRootCss('--main-title-font-size', '5rem');

3. removeRootCss

   @desc: 删除全局已设置的自定义 css 变量方法

   @param {String} varName 自定义变量名

   @use: cssUtils.removeRootCss('--main-title-font-size');

   使用参考：无

   cssUtils.removeRootCss('--main-title-font-size');

4. getCss

   @desc: 获取某项自定义 css 变量方法

   @param {Object} dom 获取的 dom 对象

   @param {String} varName 自定义变量名

   @use: cssUtils.getCss(document.querySelect('#headerMain'), '--title-font-size');

   使用参考：无

   const fontSize = cssUtils.getCss(document.querySelect('#headerMain'), '--title-font-size');

5. setCss

   @desc: 设置某项自定义 css 变量方法

   @param {Object} dom 获取的 dom 对象

   @param {String} varName 自定义变量名

   @param {String} varValue 设置的值

   @use: cssUtils.setCss(document.querySelect('#headerMain'), '--title-font-size','5rem');

   使用参考：无

   cssUtils.setCss(document.querySelect('#headerMain'), '--title-font-size', '5rem');

6. removeCss

   @desc: 删除某项已设置的自定义 css 变量方法

   @param {Object} dom 获取的 dom 对象

   @param {String} varName 自定义变量名

   @use: cssUtils.removeCss(document.querySelect('#headerMain'), '--title-font-size');

   使用参考：无

   cssUtils.removeCss(document.querySelect('#headerMain'), '--title-font-size');