WebApp【公共组件库】@前端(For Git Submodule)
Tevin
2021-03-29 1bd2c493c9cbe47d10e4ba045d5c4635fd4eccef
批量增加中文注释
14 files modified
234 ■■■■ changed files
common/sassMixin.scss 106 ●●●●● patch | view | raw | blame | history
forms/chinaArea/CChinaArea.vue 15 ●●●●● patch | view | raw | blame | history
forms/form/CForm.vue 8 ●●●● patch | view | raw | blame | history
forms/form/CFormAgreement.vue 5 ●●●●● patch | view | raw | blame | history
forms/form/CFormItem.vue 25 ●●●● patch | view | raw | blame | history
forms/form/CFormSubmit.vue 2 ●●● patch | view | raw | blame | history
forms/imagePicker/CImagePicker.vue 2 ●●● patch | view | raw | blame | history
forms/input/CInput.vue 9 ●●●●● patch | view | raw | blame | history
forms/input/CInputPhoneCode.vue 15 ●●●● patch | view | raw | blame | history
forms/select/CSelect.vue 29 ●●●● patch | view | raw | blame | history
forms/switch/CSwitch.vue 1 ●●●● patch | view | raw | blame | history
forms/textarea/CTextArea.vue 5 ●●●● patch | view | raw | blame | history
layout/h5Page/CNavBar.vue 4 ●●●● patch | view | raw | blame | history
plugins/infiniteScroll/CInfiniteScroll.vue 8 ●●●● patch | view | raw | blame | history
common/sassMixin.scss
@@ -3,17 +3,11 @@
 * @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 ---------- */
/**
 * clearfix - 清除浮动
 * 示例
 *   @include clearfix;
 */
@mixin clearfix() {
    &:after {
        clear: both;
@@ -25,7 +19,14 @@
    }
}
/* ---------- ellipsis ---------- */
/**
 * ellipsis - 省略号
 * 示例
 *   @include ellipsis;
 *   @include ellipsis(100%);
 * 参数
 *   $width 宽度
 */
@mixin ellipsis($width:false) {
    overflow: hidden;
    text-overflow: ellipsis;
@@ -35,29 +36,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 +63,7 @@
            left: nth($values, 2);
        }
    }
    // 3个值:上、左右、下
    // 当 3 个值时:上、左右、下
    @else if (length($values)==3) {
        @if (nth($values, 1) !=n) {
            top: nth($values, 1);
@@ -79,7 +76,7 @@
            bottom: nth($values, 3);
        }
    }
    // 4个值:上、左、下、右
    // 当 4 个值时:上、左、下、右
    @else if (length($values)==4) {
        @if (nth($values, 1) !=n) {
            top: nth($values, 1);
@@ -100,17 +97,24 @@
}
/**
 * ---------- flex ----------
 * @include flexbox();
 *   $mode:
 * flex 适应布局
 * 示例
 *   @include flexbox(flex, center center);
 * 参数
 *   $mode 布局类型
 *     flex / inline
 *   $align: <justify-content> <align-items> <align-content>
 *     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: <flex-direction> <flex-wrap>
 *     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 +166,14 @@
    }
}
/* ---------- keyframes ---------- */
/**
 * keyframes - css 动画简写
 * 示例
 *   @include keyframes(fade-out) {
 *      0% { opacity: 1 }
 *      100% { opacity: 0 }
 *   }
 */
@mixin keyframes($name) {
    @-webkit-keyframes #{$name} {
        @content;
@@ -175,7 +186,18 @@
    }
}
/* ---------- media ---------- */
/**
 * media - 媒体查询简写
 * 示例
 *   @include media(phone) {
 *       .logo {
 *           display: none;
 *       }
 *   }
 * 参数
 *   $type 指定媒体类型生效,print、pc、padpro、padmini、phone
 *   $only 是否只在此媒体类型生效
 */
@mixin media($type, $only:"") {
    $title: "";
    // 打印媒体
forms/chinaArea/CChinaArea.vue
@@ -1,5 +1,5 @@
/**
 * CChinaArea
 * CChinaArea - 表单项,中国地址三级联动
 * @author Tevin
 */
@@ -44,12 +44,15 @@
        AtIcon,
    },
    props: {
        // 表单数据资源(表单组件内部机制专用)
        itemRes: Object,
        // 当地址获取经纬度时,设置加载中显示状态
        loading: {
            type: Boolean,
            default: false,
        },
        // 占位提示
        placeholder: String,
        itemRes: Object,
    },
    data() {
        return {
@@ -86,7 +89,7 @@
                // 省
                if (curVal[0]) {
                    const proviceIndex = locationTree.findIndex(
                        (provice) => provice.code === curVal[0]
                        provice => provice.code === curVal[0]
                    );
                    if (proviceIndex >= 0) {
                        range[1] = locationTree[proviceIndex].children;
@@ -94,7 +97,9 @@
                        current[0] = proviceIndex;
                        // 市
                        if (curVal[1]) {
                            const cityIndex = range[1].findIndex((city) => city.code === curVal[1]);
                            const cityIndex = range[1].findIndex(
                                city => city.code === curVal[1]
                            );
                            if (cityIndex >= 0) {
                                range[2] = range[1].children[cityIndex].children;
                                current[1] = cityIndex;
@@ -102,7 +107,7 @@
                            // 区
                            if (curVal[2]) {
                                const areaIndex = range[2].findIndex(
                                    (area) => area.code === curVal[2]
                                    area => area.code === curVal[2]
                                );
                                if (areaIndex >= 0) {
                                    current[2] === areaIndex;
forms/form/CForm.vue
@@ -1,5 +1,5 @@
/**
 * CForm
 * CForm - 表单套装组件,套件的主体
 * @author Tevin
 */
@@ -19,8 +19,14 @@
export default {
    name: 'CForm',
    props: {
        // 表单数据主体
        formData: Object,
        // 表单项变化的回调
        //   回调传参只有单项数据
        onChange: Function,
        // 表单完成的回调
        //   提交且通过表单验证后调用,不通过验证不调用
        //   回调传参包含整个表单数据
        onFinish: Function,
    },
    data() {
forms/form/CFormAgreement.vue
@@ -1,5 +1,5 @@
/**
 * CFormAgreement
 * CFormAgreement - 表单套装组件,同意协议勾选项
 * @author Tevin
 */
@@ -9,7 +9,6 @@
            class="title"
            @tap="evt=>handleCheck()"
        >
            <view :class="['icon', checked?'checked':'']">
                <text class="at-icon at-icon-check"></text>
            </view>
@@ -38,7 +37,9 @@
        AtFloatLayout,
    },
    props: {
        // 表单数据资源(表单组件内部机制专用)
        formRes: Object,
        // 需要同意的协议内容
        protocol: String,
    },
    data() {
forms/form/CFormItem.vue
@@ -1,5 +1,5 @@
/**
 * CFormItem
 * CFormItem - 表单套装组件,单项包囊器
 * @author Tevin
 * @tutorial rules see https://github.com/yiminghe/async-validator#type
 */
@@ -17,11 +17,26 @@
export default {
    name: 'CFormItem',
    props: {
        name: String,
        label: String,
        required: Boolean,
        rules: Array,
        // 表单数据资源(表单组件内部机制专用)
        formRes: Object,
        // 表单项字段键名
        name: String,
        // 表单项中文名
        label: String,
        // 表单项验证规则之是否必填
        required: Boolean,
        // 表单项验证规则之复合规则
        //   例如:[{type:'string', min: 2, max: 100}]
        //   常用项:
        //     type        string           类型,常见有 string、number、boolean、array、object、url、email
        //     len         number           string 类型时为字符串长度;number 类型时为确定数字; array 类型时为数组长度
        //     max         number           必须设置 type:string 类型为字符串最大长度;number 类型时为最大值;array 类型时为数组最大长度
        //     min         number           必须设置 type:string 类型为字符串最小长度;number 类型时为最小值;array 类型时为数组最小长度
        //     pattern     RegExp           正则表达式匹配
        //     required    boolean          是否为必选字段
        //     transform   (value) => any   将字段值转换成目标值后进行校验
        //     message     string           错误信息,不设置时会通过模板自动生成
        rules: Array,
    },
    data() {
        return {
forms/form/CFormSubmit.vue
@@ -1,5 +1,5 @@
/**
 * CFormSubmit
 * CFormSubmit - 表单套装组件,提交按钮
 * @author Tevin
 */
forms/imagePicker/CImagePicker.vue
@@ -53,6 +53,7 @@
        AtCurtain,
    },
    props: {
        // 表单数据资源(表单组件内部机制专用)
        itemRes: Object,
    },
    data() {
@@ -166,7 +167,6 @@
                .find('.at-input__input')
                .prepend(this.$refs.picker.$el);
        } else if (process.env.TARO_ENV === 'weapp') {
            console.log(this.$refs);
            $(this.$refs.input.$el)
                .find('.at-input__container')
                .append(this.$refs.picker.$el);
forms/input/CInput.vue
@@ -1,5 +1,5 @@
/**
 * CInput
 * CInput - 表单项,文本输入框
 * @author Tevin
 */
@@ -28,9 +28,12 @@
        AtInput,
    },
    props: {
        type: String,
        placeholder: String,
        // 表单数据资源(表单组件内部机制专用)
        itemRes: Object,
        // 输入框类型,text、number、password、phone、idcard、digit
        type: String,
        // 占位提示
        placeholder: String,
    },
    mounted() {},
};
forms/input/CInputPhoneCode.vue
@@ -1,5 +1,5 @@
/**
 * CInputPhoneCode
 * CInputPhoneCode - 表单项,手机验证码输入框
 * @author Tevin
 */
@@ -37,9 +37,18 @@
        AtButton,
    },
    props: {
        placeholder: String,
        // 表单数据资源(表单组件内部机制专用)
        itemRes: Object,
        autoStart: { type: Boolean, default: true },
        // 占位提示
        placeholder: String,
        // 验证码计时器开始方式
        //   true 点击按钮后立即自动开始
        //   false 后台返回为成功时才开始
        autoStart: {
            type: Boolean,
            default: true,
        },
        // 发送请求,通知后端给手机发验证码
        onCallPhoneCode: Function,
    },
    data() {
forms/select/CSelect.vue
@@ -32,7 +32,7 @@
                :required="itemRes.required"
                :error="itemRes.error"
                :placeholder="placeholder"
                :value="selected"
                :value="chose.name"
                :onFocus="evt=>onGoToSelectorPage()"
            >
                <view class="at-icon at-icon-chevron-right" />
@@ -52,14 +52,21 @@
        AtInput,
    },
    props: {
        options: Array,
        placeholder: String,
        // 表单数据资源(表单组件内部机制专用)
        itemRes: Object,
        // 选择菜单选项(浮窗模式)
        options: Array,
        // 占位提示
        placeholder: String,
        // 开启选择菜单跳转选择页面模式,并指定功能页面
        selectByPage: String,
        // 页面模式下,选择完成后的回调
        onSelectFromPage: Function,
    },
    data() {
        return {};
        return {
            chose: {},
        };
    },
    computed: {
        optionKey() {
@@ -90,10 +97,22 @@
            this.itemRes.onChange(item[this.optionKey]);
        },
        onGoToSelectorPage() {
            let url = this.selectByPage;
            if (this.selectByPage.indexOf('?') > 0) {
                url += '&mode=CSelect';
            } else {
                url += '?mode=CSelect';
            }
            Taro.navigateTo({
                url: this.selectByPage,
                url,
                events: {
                    'CSelect:onSelected': data => {
                        const value = data.id || data.value || data.key;
                        this.chose = {
                            name: data.name,
                            value,
                        };
                        this.itemRes.onChange(value);
                        this.onSelectFromPage(data);
                    },
                },
forms/switch/CSwitch.vue
@@ -21,6 +21,7 @@
    name: 'CSwitch',
    components: { AtSwitch },
    props: {
        // 表单数据资源(表单组件内部机制专用)
        itemRes: Object,
    },
    data() {
forms/textarea/CTextArea.vue
@@ -36,12 +36,15 @@
        AtInput,
    },
    props: {
        // 表单数据资源(表单组件内部机制专用)
        itemRes: Object,
        // 文本域输入区域高度
        height: {
            type: Number,
            default: 94,
        },
        // 占位提示
        placeholder: String,
        itemRes: Object,
    },
    data() {
        return {};
layout/h5Page/CNavBar.vue
@@ -43,12 +43,16 @@
        AtNavBar,
    },
    props: {
        // H5页面导航标题
        title: String,
        // H5页面导航左侧图标
        iconType: {
            type: String,
            default: 'chevron-left',
        },
        // H5页面导航左侧图点击事件
        onClickIcon: Function,
        // H5页面导航右侧下拉菜单配置
        dropNav: Array,
    },
    data() {
plugins/infiniteScroll/CInfiniteScroll.vue
@@ -70,7 +70,13 @@
            type: Boolean,
            default: false,
        },
        // 加载页面回调
        // 发起加载页面数据回调
        //   参数 {
        //     current: 当前页页码,
        //     next: 需要到达的页面页码,
        //     success: 当加载成功后页面调用, 回传参数 { pageTotal: 当前翻页总页数 }
        //     fail: 加载失败后页面调用
        //   }
        onLoadMore: Function,
    },
    data() {