jy-web-style

v0.0.3

Published

2 years ago

> 一套基于 scss 的前端样式库

Downloads

0High
0Medium
0Low

hejiayong

jy-web-style

一套基于 scss 的前端样式库

安装

npm install --save jy-web-style
yarn add jy-web-style

引入

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

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

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

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

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

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

函数

pxToRem
@desc: px 转换 rem 方法
@param {Number} $px 像素值
@use: pxToRem(10px);
@return: {String} rem 像素对象转换的 rem 值;
使用参考：无
```
.demo {
    width: pxToRem(16); // width: 1rem;
}
```
pxToPercent
@desc: 计算百分比方法
@param {Number} $px 像素值
@param {Number} $refer 参考值
@use: pxToPercent(80, 100);
@return: {String} % 计算后的百分比;
使用参考：无
```
.demo {
    width: pxToPercent(50, 100); // width: 50%;
}
```

方法

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;
}

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;
}
```
fullContain
@desc: 宽高为 100%;
@use: @include fullContain;
使用参考：无
```
.demo {
    @include fullContain; // width: 100%; height: 100%;
}
```
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); // 水平垂直居中，主轴方向为垂直
}
```
flexwh
@desc: 弹性盒-平分元素 flex 1
@use: @include flexwh;
使用参考：无
```
.demo {
    @include flexwh; // flex: 1; flex-shrink: 0;
}
```
grid
@desc: 网格布局 grid;
@param {Number} $columns 网格分割行数
@param {Number} $rows 网格分割列数
@use: @include grid(2, 2);
使用参考：无
```
.demo {
    @include grid(2, 2); // 表示划分为 2 x 2 的表格
}
```
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大小的格子;
}
```

textEllipsis / textHidden

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

@use: @include textEllipsis;

使用参考：无

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

boxClamp

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

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

@use: @include boxClamp(2);

使用参考：无

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

longWordWrap
@desc: 长单词自动换行;
@use: @include longWordWrap;
使用参考：无
```
.demo {
    @include longWordWrap;
}
```

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;
}

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); // 固定定位 - 下右
}

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); // 绝对定位 - 下右
}

resize
@desc: 宽高变化过度动画;
@param {String} $duration 过度所需时间默认 3s
@use: @include resize;
@use: @include resize(0.2s);
使用参考：无
```
.demo {
    @include wh(pxToRem(100));
    @include centerTranslate(both); // 水平/垂直居中
    @include resize;
}
```

centerTranslate

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

@param {String} $direction 居中方式

@use: @include centerTranslate;

使用参考：无

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

pointerEvents

@desc: 点击穿透;

@param {String} $pointer 穿透参数

@use: @include pointerEvents;

使用参考：无

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

pointer

@desc: 点击穿透;

@param {String} $pointer 穿透参数

@use: @include pointer(false);

使用参考：无

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

cursor

@desc: 鼠标样式;

@param {String} $pointer 穿透参数

@use: @include cursor;

使用参考：无

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

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;
}

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%);
}
```
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);
}
```
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);
}
```
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);
}
```
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);
        }
    }
}
```
placeholder
@desc: 输入框提示文字样式;
@use: @include placeholder { color: #fff; }
使用参考：无
```
input.demo {
    @include placeholder {
        color: #fff;
    }
}
```
scrollbar
@desc: 滚动条样式;
@use: @include scrollbar { background: #fff; }
使用参考：无
```
input.demo {
    @include placeholder {
        background: #fff;
    }
}
```
miniFont
@desc: 小于 12px 的文字取值范围 0-12;
@param {Number} $font-size 字体大小默认名称 12
@use: @include miniFont(12)
使用参考：无
```
.demo {
    @include wh(pxToRem(100));
    @include miniFont(8);
}
```
select
@desc: 用户是否可用选中文本;
@param {Boolean} $operation 是否可选默认不能
@use: @include select;
使用参考：无
```
.demo {
    @include wh(pxToRem(100));
    @include select; //不可选
    @include select(true); //可选
}
```
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);
}
```
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); // 文字两端对齐，且最后一行也是两端对齐
}
```

样式块

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); // 水平渐变
}
```
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); // 垂直渐变
}
```
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;
    }
}
```
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;
    }
}
```

before

@desc: before 伪类添加;

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

使用参考：无

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

after

@desc: after 伪类添加;

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

使用参考：无

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

placeholder
@desc: placeholder 样式修改;
@use: @use: @include placeholder{ width: 20px; height: 20px; }
使用参考：无
```
input.demo {
    @include placeholder {
        width: 20px;
        height: 20px;
        background: skyblue;
    }
}
```
console
@desc: 利用伪类打印 SCSS 日志;
@param {String} $log 打印内容
@use: @include console(Fate);
使用参考：无
```
.demo {
    @include console(Fate);
    // 伪类的content: log -> Fate
}
```
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);
}
```
demoBox
@desc: 测试盒子样式; 给父元素设置子元素需要有个元素 class 为 demo-box
@param {Boolean} $showBorder 是否显示边界线
@use: @include demoBox
使用参考：无
```
.demo {
    @include demoBox(true);
}
```

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 方法

getRootCss
@desc: 获取全局自定义 css 变量方法
@param {String} varName 自定义变量名
@use: cssUtils.getRootCss('--main-title-font-size');
使用参考：无
```
const fontSize = cssUtils.getRootCss('--main-title-font-size');
```
setRootCss
@desc: 设置全局自定义 css 变量方法
@param {String} varName 自定义变量名
@param {String} varValue 设置的值
@use: cssUtils.setRootCss('--main-title-font-size','5rem');
使用参考：无
```
cssUtils.setRootCss('--main-title-font-size', '5rem');
```
removeRootCss
@desc: 删除全局已设置的自定义 css 变量方法
@param {String} varName 自定义变量名
@use: cssUtils.removeRootCss('--main-title-font-size');
使用参考：无
```
cssUtils.removeRootCss('--main-title-font-size');
```
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');
```
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');
```
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');
```

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

jy-web-style

安装

引入

函数

方法

样式块

内置操作 css 方法