| | |
| | | * @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; |
| | |
| | | } |
| | | } |
| | | |
| | | /* ---------- ellipsis ---------- */ |
| | | /** |
| | | * ellipsis - 省略号 |
| | | * 示例 |
| | | * @include ellipsis; |
| | | * @include ellipsis(100%); |
| | | * 参数 |
| | | * $width 宽度 |
| | | */ |
| | | @mixin ellipsis($width:false) { |
| | | overflow: hidden; |
| | | text-overflow: ellipsis; |
| | |
| | | } |
| | | } |
| | | |
| | | /* ---------- 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); |
| | |
| | | left: nth($values, 2); |
| | | } |
| | | } |
| | | // 3个值:上、左右、下 |
| | | // 当 3 个值时:上、左右、下 |
| | | @else if (length($values)==3) { |
| | | @if (nth($values, 1) !=n) { |
| | | top: nth($values, 1); |
| | |
| | | bottom: nth($values, 3); |
| | | } |
| | | } |
| | | // 4个值:上、左、下、右 |
| | | // 当 4 个值时:上、左、下、右 |
| | | @else if (length($values)==4) { |
| | | @if (nth($values, 1) !=n) { |
| | | top: nth($values, 1); |
| | |
| | | } |
| | | |
| | | /** |
| | | * ---------- 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") { |
| | |
| | | } |
| | | } |
| | | |
| | | /* ---------- keyframes ---------- */ |
| | | /** |
| | | * keyframes - css 动画简写 |
| | | * 示例 |
| | | * @include keyframes(fade-out) { |
| | | * 0% { opacity: 1 } |
| | | * 100% { opacity: 0 } |
| | | * } |
| | | */ |
| | | @mixin keyframes($name) { |
| | | @-webkit-keyframes #{$name} { |
| | | @content; |
| | |
| | | } |
| | | } |
| | | |
| | | /* ---------- media ---------- */ |
| | | /** |
| | | * media - 媒体查询简写 |
| | | * 示例 |
| | | * @include media(phone) { |
| | | * .logo { |
| | | * display: none; |
| | | * } |
| | | * } |
| | | * 参数 |
| | | * $type 指定媒体类型生效,print、pc、padpro、padmini、phone |
| | | * $only 是否只在此媒体类型生效 |
| | | */ |
| | | @mixin media($type, $only:"") { |
| | | $title: ""; |
| | | // 打印媒体 |
| | |
| | | /** |
| | | * CChinaArea |
| | | * CChinaArea - 表单项,中国地址三级联动 |
| | | * @author Tevin |
| | | */ |
| | | |
| | |
| | | AtIcon, |
| | | }, |
| | | props: { |
| | | // 表单数据资源(表单组件内部机制专用) |
| | | itemRes: Object, |
| | | // 当地址获取经纬度时,设置加载中显示状态 |
| | | loading: { |
| | | type: Boolean, |
| | | default: false, |
| | | }, |
| | | // 占位提示 |
| | | placeholder: String, |
| | | itemRes: Object, |
| | | }, |
| | | data() { |
| | | return { |
| | |
| | | // 省 |
| | | 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; |
| | |
| | | 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; |
| | |
| | | // 区 |
| | | if (curVal[2]) { |
| | | const areaIndex = range[2].findIndex( |
| | | (area) => area.code === curVal[2] |
| | | area => area.code === curVal[2] |
| | | ); |
| | | if (areaIndex >= 0) { |
| | | current[2] === areaIndex; |
| | |
| | | /** |
| | | * CForm |
| | | * CForm - 表单套装组件,套件的主体 |
| | | * @author Tevin |
| | | */ |
| | | |
| | |
| | | export default { |
| | | name: 'CForm', |
| | | props: { |
| | | // 表单数据主体 |
| | | formData: Object, |
| | | // 表单项变化的回调 |
| | | // 回调传参只有单项数据 |
| | | onChange: Function, |
| | | // 表单完成的回调 |
| | | // 提交且通过表单验证后调用,不通过验证不调用 |
| | | // 回调传参包含整个表单数据 |
| | | onFinish: Function, |
| | | }, |
| | | data() { |
| | |
| | | /** |
| | | * CFormAgreement |
| | | * CFormAgreement - 表单套装组件,同意协议勾选项 |
| | | * @author Tevin |
| | | */ |
| | | |
| | |
| | | class="title" |
| | | @tap="evt=>handleCheck()" |
| | | > |
| | | |
| | | <view :class="['icon', checked?'checked':'']"> |
| | | <text class="at-icon at-icon-check"></text> |
| | | </view> |
| | |
| | | AtFloatLayout, |
| | | }, |
| | | props: { |
| | | // 表单数据资源(表单组件内部机制专用) |
| | | formRes: Object, |
| | | // 需要同意的协议内容 |
| | | protocol: String, |
| | | }, |
| | | data() { |
| | |
| | | /** |
| | | * CFormItem |
| | | * CFormItem - 表单套装组件,单项包囊器 |
| | | * @author Tevin |
| | | * @tutorial rules see https://github.com/yiminghe/async-validator#type |
| | | */ |
| | |
| | | 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 { |
| | |
| | | /** |
| | | * CFormSubmit |
| | | * CFormSubmit - 表单套装组件,提交按钮 |
| | | * @author Tevin |
| | | */ |
| | | |
| | |
| | | AtCurtain, |
| | | }, |
| | | props: { |
| | | // 表单数据资源(表单组件内部机制专用) |
| | | itemRes: Object, |
| | | }, |
| | | data() { |
| | |
| | | .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); |
| | |
| | | /** |
| | | * CInput |
| | | * CInput - 表单项,文本输入框 |
| | | * @author Tevin |
| | | */ |
| | | |
| | |
| | | AtInput, |
| | | }, |
| | | props: { |
| | | type: String, |
| | | placeholder: String, |
| | | // 表单数据资源(表单组件内部机制专用) |
| | | itemRes: Object, |
| | | // 输入框类型,text、number、password、phone、idcard、digit |
| | | type: String, |
| | | // 占位提示 |
| | | placeholder: String, |
| | | }, |
| | | mounted() {}, |
| | | }; |
| | |
| | | /** |
| | | * CInputPhoneCode |
| | | * CInputPhoneCode - 表单项,手机验证码输入框 |
| | | * @author Tevin |
| | | */ |
| | | |
| | |
| | | AtButton, |
| | | }, |
| | | props: { |
| | | placeholder: String, |
| | | // 表单数据资源(表单组件内部机制专用) |
| | | itemRes: Object, |
| | | autoStart: { type: Boolean, default: true }, |
| | | // 占位提示 |
| | | placeholder: String, |
| | | // 验证码计时器开始方式 |
| | | // true 点击按钮后立即自动开始 |
| | | // false 后台返回为成功时才开始 |
| | | autoStart: { |
| | | type: Boolean, |
| | | default: true, |
| | | }, |
| | | // 发送请求,通知后端给手机发验证码 |
| | | onCallPhoneCode: Function, |
| | | }, |
| | | data() { |
| | |
| | | :required="itemRes.required" |
| | | :error="itemRes.error" |
| | | :placeholder="placeholder" |
| | | :value="selected" |
| | | :value="chose.name" |
| | | :onFocus="evt=>onGoToSelectorPage()" |
| | | > |
| | | <view class="at-icon at-icon-chevron-right" /> |
| | |
| | | AtInput, |
| | | }, |
| | | props: { |
| | | options: Array, |
| | | placeholder: String, |
| | | // 表单数据资源(表单组件内部机制专用) |
| | | itemRes: Object, |
| | | // 选择菜单选项(浮窗模式) |
| | | options: Array, |
| | | // 占位提示 |
| | | placeholder: String, |
| | | // 开启选择菜单跳转选择页面模式,并指定功能页面 |
| | | selectByPage: String, |
| | | // 页面模式下,选择完成后的回调 |
| | | onSelectFromPage: Function, |
| | | }, |
| | | data() { |
| | | return {}; |
| | | return { |
| | | chose: {}, |
| | | }; |
| | | }, |
| | | computed: { |
| | | optionKey() { |
| | |
| | | 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); |
| | | }, |
| | | }, |
| | |
| | | name: 'CSwitch', |
| | | components: { AtSwitch }, |
| | | props: { |
| | | // 表单数据资源(表单组件内部机制专用) |
| | | itemRes: Object, |
| | | }, |
| | | data() { |
| | |
| | | AtInput, |
| | | }, |
| | | props: { |
| | | // 表单数据资源(表单组件内部机制专用) |
| | | itemRes: Object, |
| | | // 文本域输入区域高度 |
| | | height: { |
| | | type: Number, |
| | | default: 94, |
| | | }, |
| | | // 占位提示 |
| | | placeholder: String, |
| | | itemRes: Object, |
| | | }, |
| | | data() { |
| | | return {}; |
| | |
| | | AtNavBar, |
| | | }, |
| | | props: { |
| | | // H5页面导航标题 |
| | | title: String, |
| | | // H5页面导航左侧图标 |
| | | iconType: { |
| | | type: String, |
| | | default: 'chevron-left', |
| | | }, |
| | | // H5页面导航左侧图点击事件 |
| | | onClickIcon: Function, |
| | | // H5页面导航右侧下拉菜单配置 |
| | | dropNav: Array, |
| | | }, |
| | | data() { |
| | |
| | | type: Boolean, |
| | | default: false, |
| | | }, |
| | | // 加载页面回调 |
| | | // 发起加载页面数据回调 |
| | | // 参数 { |
| | | // current: 当前页页码, |
| | | // next: 需要到达的页面页码, |
| | | // success: 当加载成功后页面调用, 回传参数 { pageTotal: 当前翻页总页数 } |
| | | // fail: 加载失败后页面调用 |
| | | // } |
| | | onLoadMore: Function, |
| | | }, |
| | | data() { |