border-1px

解决移动端 1像素边框问题；

一、安装方式

// 下载 npm 包
npm install @funren/border-1px -S

二、引入方式

border-1px 支持 scss 或 css 两种使用方式；

1、scss 方式引入

引入 .scss文件，支持 scss 混入（可自定义边框色、透明度、圆角）和 class 类名，两种使用方式；

• 局部引入

// home.vue
// Vue 项目中局部引入 
<template>
  <div id="app">
      <div class="box">scss 方式添加边框</div>
  </div>
</template>

<style lang="scss">
@import "~@funren/border-1px";

.box {
  @include border-1px(red , 0.1 , 3px) 
</style>

• 全局引入

// vue.config.js
// Vue 项目中全局引入

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        // 全局引入scss文件
        prependData: `@import "@funren/border-1px";`
      }
    }
  }
};

2、css 方式引入

引入 .css 文件，仅支持 class 类名方式使用；

// main.js
// Vue 项目全局引入
import '@funren/border-1px/css/border-1px.min.css';
// 或
<link type="text/css" href="border-1px/css/border-1px.min.css"></link>


<div id="app">
    <div class="border-top-1px">css 方式添加边框</div>
</div>

三、使用方式

scss 混入

• 适用范围：不支持表单元素 input、select、textarea
• scss @minxi 方式引入接收 2~3 个可选参数；可自定义边框颜色、边框透明度、圆角（全边框可设置）

| SCSS @minxi 方法使用 （接收三个可选参数） | 边框色设置 | 透明度设置 | 圆角设置 | 作用 | | - |:-:|:-:|:-:|:-:| | @include border-top-1px(color,alpha) | true |true （范围：0~1）|false| 上边框 | | @include border-bottom-1px(color,alpha) | true |true （范围：0~1）|false| 下边框 | | @include border-left-1px(color,alpha) | true |true （范围：0~1）|false| 左边框 | | @include border-right-1px(color,alpha) | true |true （范围：0~1）|false| 右边框 | | @include border-1px(color,alpha,radius) | true |true （范围：0~1）|true| 全边框 |

• 实例

// mian.js 全局引入 scss 文件
import 'border-1px/scss/border-1px.scss'

/* scss 混入方式使用 */
<style lang="scss">
  .box {
      @include border-1px(red,0.1,3px)
  }
</style>

class 类名

• 适用范围：不支持表单元素 input、select、textarea

| CSS 样式 | 作用 | 是否支持 input、select、textarea | | ----------------- | ---------------------------|-------------- | | border-top-1px | 上边框 | false | | border-bottom-1px | 下边框 | false | | border-left-1px | 左边框 | false | | border-right-1px | 右边框 | false | | border-1px | 全边框 | false | | from-border-1px | 全边框 | true |

• 实例

<div class="border-top-1px"></div>