@funren/border-1px v1.0.3

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 个可选参数；可自定义边框颜色、边框透明度、圆角（全边框可设置）

• 实例

// 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

• 实例

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