From 1bd2c493c9cbe47d10e4ba045d5c4635fd4eccef Mon Sep 17 00:00:00 2001
From: Tevin <tingquanren@163.com>
Date: Mon, 29 Mar 2021 11:17:01 +0800
Subject: [PATCH] 批量增加中文注释
---
forms/textarea/CTextArea.vue | 5 +
forms/form/CFormItem.vue | 25 +++++-
forms/imagePicker/CImagePicker.vue | 2
plugins/infiniteScroll/CInfiniteScroll.vue | 8 +
forms/input/CInput.vue | 9 +
forms/form/CFormSubmit.vue | 2
common/sassMixin.scss | 106 ++++++++++++++++----------
layout/h5Page/CNavBar.vue | 4 +
forms/switch/CSwitch.vue | 1
forms/input/CInputPhoneCode.vue | 15 +++
forms/chinaArea/CChinaArea.vue | 15 ++-
forms/form/CForm.vue | 8 +
forms/select/CSelect.vue | 29 ++++++-
forms/form/CFormAgreement.vue | 5
14 files changed, 164 insertions(+), 70 deletions(-)
diff --git a/common/sassMixin.scss b/common/sassMixin.scss
index 888c160..669b3f8 100644
--- a/common/sassMixin.scss
+++ b/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: "";
// 打印媒体
diff --git a/forms/chinaArea/CChinaArea.vue b/forms/chinaArea/CChinaArea.vue
index 9efc4b7..d797021 100644
--- a/forms/chinaArea/CChinaArea.vue
+++ b/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;
diff --git a/forms/form/CForm.vue b/forms/form/CForm.vue
index e50dd75..8e42097 100644
--- a/forms/form/CForm.vue
+++ b/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() {
diff --git a/forms/form/CFormAgreement.vue b/forms/form/CFormAgreement.vue
index 31d6392..c11369b 100644
--- a/forms/form/CFormAgreement.vue
+++ b/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() {
diff --git a/forms/form/CFormItem.vue b/forms/form/CFormItem.vue
index 6a2fbdf..3913dc1 100644
--- a/forms/form/CFormItem.vue
+++ b/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 {
diff --git a/forms/form/CFormSubmit.vue b/forms/form/CFormSubmit.vue
index 3d6d0ff..81efc4b 100644
--- a/forms/form/CFormSubmit.vue
+++ b/forms/form/CFormSubmit.vue
@@ -1,5 +1,5 @@
/**
- * CFormSubmit
+ * CFormSubmit - 表单套装组件，提交按钮
* @author Tevin
*/
diff --git a/forms/imagePicker/CImagePicker.vue b/forms/imagePicker/CImagePicker.vue
index c3f7ff5..4d692f3 100644
--- a/forms/imagePicker/CImagePicker.vue
+++ b/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);
diff --git a/forms/input/CInput.vue b/forms/input/CInput.vue
index 67e15b8..c6f16c8 100644
--- a/forms/input/CInput.vue
+++ b/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() {},
};
diff --git a/forms/input/CInputPhoneCode.vue b/forms/input/CInputPhoneCode.vue
index 9f00532..d089588 100644
--- a/forms/input/CInputPhoneCode.vue
+++ b/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() {
diff --git a/forms/select/CSelect.vue b/forms/select/CSelect.vue
index d68e2b9..2d1edbd 100644
--- a/forms/select/CSelect.vue
+++ b/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);
},
},
diff --git a/forms/switch/CSwitch.vue b/forms/switch/CSwitch.vue
index a5620c1..c8662f5 100644
--- a/forms/switch/CSwitch.vue
+++ b/forms/switch/CSwitch.vue
@@ -21,6 +21,7 @@
name: 'CSwitch',
components: { AtSwitch },
props: {
+ // 表单数据资源（表单组件内部机制专用）
itemRes: Object,
},
data() {
diff --git a/forms/textarea/CTextArea.vue b/forms/textarea/CTextArea.vue
index 29c897a..8e3321c 100644
--- a/forms/textarea/CTextArea.vue
+++ b/forms/textarea/CTextArea.vue
@@ -36,12 +36,15 @@
AtInput,
},
props: {
+ // 表单数据资源（表单组件内部机制专用）
+ itemRes: Object,
+ // 文本域输入区域高度
height: {
type: Number,
default: 94,
},
+ // 占位提示
placeholder: String,
- itemRes: Object,
},
data() {
return {};
diff --git a/layout/h5Page/CNavBar.vue b/layout/h5Page/CNavBar.vue
index 50bfc5d..096602c 100644
--- a/layout/h5Page/CNavBar.vue
+++ b/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() {
diff --git a/plugins/infiniteScroll/CInfiniteScroll.vue b/plugins/infiniteScroll/CInfiniteScroll.vue
index b28aa65..19504bd 100644
--- a/plugins/infiniteScroll/CInfiniteScroll.vue
+++ b/plugins/infiniteScroll/CInfiniteScroll.vue
@@ -70,7 +70,13 @@
type: Boolean,
default: false,
},
- // 加载页面回调
+ // 发起加载页面数据回调
+ // 参数 {
+ // current: 当前页页码,
+ // next: 需要到达的页面页码,
+ // success: 当加载成功后页面调用, 回传参数 { pageTotal: 当前翻页总页数 }
+ // fail: 加载失败后页面调用
+ // }
onLoadMore: Function,
},
data() {
--
Gitblit v1.9.1