地址组件，增加智能地址识别功能

Tevin

2022-04-22 a580cafe59a8f067cc6f011193952367beadcb2f

 common/sassMixin.scss

@@ -3,17 +3,22 @@
 * @author Tevin
 */

/* ---------- transition ---------- */
@mixin transition($time:0.2s, $rate:ease-in-out) {
    @if ($rate=="ease-in-out-2") {
        $rate: cubic-bezier(0.645, 0.045, 0.355, 1);
    }
    -webkit-transition: all $time $rate;
    -moz-transition: all $time $rate;
    transition: all $time $rate;
}

/* ---------- clearfix ---------- */
/**
 * 全局颜色
 */
$colorStress: #2093df;
$colorSuccess: #22c322;
$colorInfo: #05b7c7;
$colorWarning: #db9d00;
$colorDanger: #FF5722;
$colorIgnore: rgba(0, 0, 0, 0.45);

/**
 * clearfix - 清除浮动
 * 示例
 *   @include clearfix;
 */
@mixin clearfix() {
    &:after {
        clear: both;
@@ -25,7 +30,14 @@
    }
}

/* ---------- ellipsis ---------- */
/**
 * ellipsis - 省略号
 * 示例
 *   @include ellipsis;
 *   @include ellipsis(100%);
 * 参数
 *   $width 宽度
 */
@mixin ellipsis($width:false) {
    overflow: hidden;
    text-overflow: ellipsis;
@@ -35,29 +47,25 @@
    }
}

/* ---------- prefixer ---------- */
@mixin prefixer ($property, $value...) {
    -webkit-#{$property}: $value;
    -moz-#{$property}: $value;
    #{$property}: $value;
}

@mixin prefixer-val ($property, $value) {
    #{$property}: -webkit-#{$value};
    #{$property}: -moz-#{$value};
    #{$property}: #{$value};
}

/* ---------- position ---------- */
/**
 * position 元素定位的简写
 * 示例
 *   @include position(absolute, 0 0);
 *   @include position(absolute, 0 n n 0, 100);
 * 参数
 *   $type 定位类型
 *   $values 定位值
 *   $zindex 定位层级
 */
@mixin position($type, $values:(), $zindex:false) {
    position: $type;
    // 1个值：上
    // 当 1 个值时：上
    @if (length($values)==1) {
        @if (nth($values, 1) !=n) {
            top: nth($values, 1);
        }
    }
    // 2个值：上、左
    // 当 2 个值时：上、左
    @else if (length($values)==2) {
        @if (nth($values, 1) !=n) {
            top: nth($values, 1);
@@ -66,7 +74,7 @@
            left: nth($values, 2);
        }
    }
    // 3个值：上、左右、下
    // 当 3 个值时：上、左右、下
    @else if (length($values)==3) {
        @if (nth($values, 1) !=n) {
            top: nth($values, 1);
@@ -79,7 +87,7 @@
            bottom: nth($values, 3);
        }
    }
    // 4个值：上、左、下、右
    // 当 4 个值时：上、左、下、右
    @else if (length($values)==4) {
        @if (nth($values, 1) !=n) {
            top: nth($values, 1);
@@ -100,17 +108,24 @@
}

/**
 * ---------- flex ---------- 
 * @include flexbox();
 *   $mode:
 * flex 适应布局
 * 示例
 *   @include flexbox(flex, center center);
 * 参数
 *   $mode 布局类型
 *     flex / inline
 *   $align:
 *     flex-start / flex-end / center / space-between / space-around
 *     flex-start / flex-end / center / baseline / stretch
 *     flex-start / flex-end / center / space-between / space-around / stretch
 *   $flow:
 *     row / row-reverse / column / column-reverse
 *     nowrap / wrap / wrap-reverse
 *   $align 对齐方式
 *     <justify-content> 主轴对齐方式
 *       flex-start / flex-end / center / space-between / space-around
 *     <align-items> 交叉轴对齐方式
 *       flex-start / flex-end / center / baseline / stretch
 *     <align-content> 多轴对齐方式（把每根轴视为一个单元，指定所有单元的对齐方式）
 *       flex-start / flex-end / center / space-between / space-around / stretch
 *   $flow 排列方式
 *     <flex-direction> 主轴方向
 *       row / row-reverse / column / column-reverse
 *     <flex-wrap> 换行方式
 *       nowrap / wrap / wrap-reverse
 */
@mixin flexbox ($mode:flex, $align:(), $flow:()) {
    @if ($mode=="flex") {
@@ -162,7 +177,14 @@
    }
}

/* ---------- keyframes ---------- */
/** 
 * keyframes - css 动画简写
 * 示例
 *   @include keyframes(fade-out) {
 *      0% { opacity: 1 }
 *      100% { opacity: 0 }
 *   }
 */
@mixin keyframes($name) {
    @-webkit-keyframes #{$name} {
        @content;
@@ -175,7 +197,18 @@
    }
}

/* ---------- media ---------- */
/**
 * media - 媒体查询简写
 * 示例
 *   @include media(phone) {
 *       .logo {
 *           display: none;
 *       }
 *   }
 * 参数
 *   $type 指定媒体类型生效，print、pc、padpro、padmini、phone
 *   $only 是否只在此媒体类型生效
 */
@mixin media($type, $only:"") {
    $title: "";
    // 打印媒体