| @@ -1,47 +0,0 @@ | |||||
| Component({ | |||||
| externalClasses: ['i-class', 'i-class-mask', 'i-class-header'], | |||||
| options: { | |||||
| multipleSlots: true | |||||
| }, | |||||
| properties: { | |||||
| visible: { | |||||
| type: Boolean, | |||||
| value: false | |||||
| }, | |||||
| maskClosable: { | |||||
| type: Boolean, | |||||
| value: true | |||||
| }, | |||||
| showCancel: { | |||||
| type: Boolean, | |||||
| value: false | |||||
| }, | |||||
| cancelText: { | |||||
| type: String, | |||||
| value: '取消' | |||||
| }, | |||||
| actions: { | |||||
| type: Array, | |||||
| value: [] | |||||
| } | |||||
| }, | |||||
| methods: { | |||||
| handleClickMask () { | |||||
| if (!this.data.maskClosable) return; | |||||
| this.handleClickCancel(); | |||||
| }, | |||||
| handleClickItem ({ currentTarget = {} }) { | |||||
| const dataset = currentTarget.dataset || {}; | |||||
| const { index } = dataset; | |||||
| this.triggerEvent('click', { index }); | |||||
| }, | |||||
| handleClickCancel () { | |||||
| this.triggerEvent('cancel'); | |||||
| } | |||||
| } | |||||
| }); | |||||
| @@ -1,8 +0,0 @@ | |||||
| { | |||||
| "component": true, | |||||
| "usingComponents": | |||||
| { | |||||
| "i-button": "../button/index", | |||||
| "i-icon": "../icon/index" | |||||
| } | |||||
| } | |||||
| @@ -1,23 +0,0 @@ | |||||
| <view class="i-as-mask i-class-mask {{ visible ? 'i-as-mask-show' : '' }}" bindtap="handleClickMask"></view> | |||||
| <view class="i-class i-as {{ visible ? 'i-as-show' : '' }}"> | |||||
| <view class="i-as-header i-class-header"><slot name="header"></slot></view> | |||||
| <view class="i-as-actions"> | |||||
| <view class="i-as-action-item" wx:for="{{ actions }}" wx:key="{{ item.name }}"> | |||||
| <i-button | |||||
| bind:click="handleClickItem" | |||||
| data-index="{{ index }}" | |||||
| open-type="{{ item.openType }}" | |||||
| type="ghost" | |||||
| size="large" | |||||
| long | |||||
| > | |||||
| <view class="i-as-btn-loading" wx:if="{{ item.loading }}"></view> | |||||
| <i-icon wx:if="{{ item.icon }}" type="{{ item.icon }}" i-class="i-as-btn-icon"></i-icon> | |||||
| <view class="i-as-btn-text" style="{{ item.color ? 'color: ' + item.color : '' }}">{{ item.name }}</view> | |||||
| </i-button> | |||||
| </view> | |||||
| </view> | |||||
| <view class="i-as-cancel" wx:if="{{ showCancel }}"> | |||||
| <i-button i-class="i-as-cancel-btn" type="ghost" size="large" long="true" bind:click="handleClickCancel">{{ cancelText }}</i-button> | |||||
| </view> | |||||
| </view> | |||||
| @@ -1 +0,0 @@ | |||||
| .i-as{position:fixed;width:100%;box-sizing:border-box;left:0;right:0;bottom:0;background:#f7f7f7;transform:translate3d(0,100%,0);transform-origin:center;transition:all .2s ease-in-out;z-index:900;visibility:hidden}.i-as-show{transform:translate3d(0,0,0);visibility:visible}.i-as-mask{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.7);z-index:900;transition:all .2s ease-in-out;opacity:0;visibility:hidden}.i-as-mask-show{opacity:1;visibility:visible}.i-as-action-item{position:relative}.i-as-action-item::after{content:'';position:absolute;top:0;left:0;width:200%;height:200%;transform:scale(.5);transform-origin:0 0;pointer-events:none;box-sizing:border-box;border:0 solid #e9eaec;border-bottom-width:1px}.i-as-header{background:#fff;text-align:center;position:relative;font-size:12px;color:#80848f}.i-as-header::after{content:'';position:absolute;top:0;left:0;width:200%;height:200%;transform:scale(.5);transform-origin:0 0;pointer-events:none;box-sizing:border-box;border:0 solid #e9eaec;border-bottom-width:1px}.i-as-cancel{margin-top:6px}.i-as-btn-loading{display:inline-block;vertical-align:middle;margin-right:10px;width:12px;height:12px;background:0 0;border-radius:50%;border:2px solid #e5e5e5;border-color:#666 #e5e5e5 #e5e5e5 #e5e5e5;animation:btn-spin .6s linear;animation-iteration-count:infinite}.i-as-btn-text{display:inline-block;vertical-align:middle}.i-as-btn-icon{font-size:14px!important;margin-right:4px}@keyframes btn-spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}} | |||||
| @@ -1,37 +0,0 @@ | |||||
| Component({ | |||||
| externalClasses: ['i-class'], | |||||
| options: { | |||||
| multipleSlots: true | |||||
| }, | |||||
| properties: { | |||||
| //info, success, warning, error | |||||
| type: { | |||||
| type: String, | |||||
| value: 'info' | |||||
| }, | |||||
| closable: { | |||||
| type: Boolean, | |||||
| value: false | |||||
| }, | |||||
| showIcon: { | |||||
| type: Boolean, | |||||
| default: false | |||||
| }, | |||||
| desc: { | |||||
| type: Boolean, | |||||
| default: false | |||||
| }, | |||||
| }, | |||||
| data: { | |||||
| closed: false | |||||
| }, | |||||
| methods: { | |||||
| handleTap() { | |||||
| this.setData({ | |||||
| closed: !this.data.closed, | |||||
| }); | |||||
| this.triggerEvent('close'); | |||||
| }, | |||||
| } | |||||
| }); | |||||
| @@ -1,7 +0,0 @@ | |||||
| { | |||||
| "component": true, | |||||
| "usingComponents": | |||||
| { | |||||
| "i-icon": "../icon/index" | |||||
| } | |||||
| } | |||||
| @@ -1,15 +0,0 @@ | |||||
| <view class="i-class i-alert {{'i-alert-'+type}} {{showIcon?'i-alert-with-icon':''}} {{desc?'i-alert-with-desc':''}}" wx:if="{{!closed}}"> | |||||
| <view wx:if="{{ showIcon }}" class="i-alert-icon"> | |||||
| <i-icon type="prompt" wx:if="{{ type === 'info' }}" size="{{desc?24:16}}"></i-icon> | |||||
| <i-icon type="success" wx:if="{{ type === 'success' }}" size="{{desc?24:16}}"></i-icon> | |||||
| <i-icon type="warning" wx:if="{{ type === 'warning' }}" size="{{desc?24:16}}"></i-icon> | |||||
| <i-icon type="delete" wx:if="{{ type === 'error' }}" size="{{desc?24:16}}"></i-icon> | |||||
| </view> | |||||
| <slot></slot> | |||||
| <view class="i-alert-desc"> | |||||
| <slot name="desc"></slot> | |||||
| </view> | |||||
| <view class="i-alert-close" wx:if="{{ closable }}" bindtap="handleTap"> | |||||
| <i-icon type="close"></i-icon> | |||||
| </view> | |||||
| </view> | |||||
| @@ -1 +0,0 @@ | |||||
| .i-alert{position:relative;margin:10px;padding:8px 48px 8px 16px;font-size:14px;border-radius:2px;color:#fff;background:#f7f7f7;color:#495060}.i-alert.i-alert-with-icon{padding:8px 48px 8px 38px}.i-alert-info{color:#fff;background:#2db7f5}.i-alert-success{color:#fff;background:#19be6b}.i-alert-warning{color:#fff;background:#f90}.i-alert-error{color:#fff;background:#ed3f14}.i-alert-icon{position:absolute;top:9px;left:16px;font-size:14px}.i-alert-desc{font-size:12px}.i-alert-with-desc{padding:16px;position:relative}.i-alert-with-desc.i-alert-with-icon{padding:16px 16px 16px 69px}.i-alert-with-desc .i-alert-icon{top:50%;left:24px;margin-top:-21px;font-size:28px}.i-alert-close{font-size:12px;position:absolute;right:16px;top:8px;overflow:hidden;cursor:pointer} | |||||
| @@ -1,20 +0,0 @@ | |||||
| Component({ | |||||
| externalClasses: ['i-class'], | |||||
| properties: { | |||||
| // circle || square | |||||
| shape: { | |||||
| type: String, | |||||
| value: 'circle' | |||||
| }, | |||||
| // small || large || default | |||||
| size: { | |||||
| type: String, | |||||
| value: 'default' | |||||
| }, | |||||
| src: { | |||||
| type: String, | |||||
| value: '' | |||||
| } | |||||
| } | |||||
| }); | |||||
| @@ -1,3 +0,0 @@ | |||||
| { | |||||
| "component": true | |||||
| } | |||||
| @@ -1,4 +0,0 @@ | |||||
| <view class="i-class i-avatar i-avatar-{{ shape }} i-avatar-{{ size }} {{ src ? 'i-avatar-image' : '' }}"> | |||||
| <image src="{{ src }}" wx:if="{{ src !== '' }}"></image> | |||||
| <view class="i-avatar-string" wx:else><slot></slot></view> | |||||
| </view> | |||||
| @@ -1 +0,0 @@ | |||||
| .i-avatar{display:inline-block;text-align:center;background:#ccc;color:#fff;white-space:nowrap;position:relative;overflow:hidden;vertical-align:middle;width:32px;height:32px;line-height:32px;border-radius:16px;font-size:18px}.i-avatar .ivu-avatar-string{line-height:32px}.i-avatar-large{width:40px;height:40px;line-height:40px;border-radius:20px;font-size:24px}.i-avatar-large .ivu-avatar-string{line-height:40px}.i-avatar-small{width:24px;height:24px;line-height:24px;border-radius:12px;font-size:14px}.i-avatar-small .ivu-avatar-string{line-height:24px}.i-avatar-image{background:0 0}.i-avatar-square{border-radius:4px}.i-avatar>image{width:100%;height:100%} | |||||
| @@ -1,37 +0,0 @@ | |||||
| function getCtx (selector) { | |||||
| const pages = getCurrentPages(); | |||||
| const ctx = pages[pages.length - 1]; | |||||
| const componentCtx = ctx.selectComponent(selector); | |||||
| if (!componentCtx) { | |||||
| console.error('无法找到对应的组件,请按文档说明使用组件'); | |||||
| return null; | |||||
| } | |||||
| return componentCtx; | |||||
| } | |||||
| function Toast(options) { | |||||
| const { selector = '#toast' } = options; | |||||
| const ctx = getCtx(selector); | |||||
| ctx.handleShow(options); | |||||
| } | |||||
| Toast.hide = function (selector = '#toast') { | |||||
| const ctx = getCtx(selector); | |||||
| ctx.handleHide(); | |||||
| }; | |||||
| function Message(options) { | |||||
| const { selector = '#message' } = options; | |||||
| const ctx = getCtx(selector); | |||||
| ctx.handleShow(options); | |||||
| } | |||||
| module.exports = { | |||||
| $Toast: Toast, | |||||
| $Message: Message | |||||
| }; | |||||
| @@ -1,33 +0,0 @@ | |||||
| Component({ | |||||
| externalClasses: ['i-class'], | |||||
| relations: { | |||||
| '../cell/index': { | |||||
| type: 'child', | |||||
| linked () { | |||||
| this._updateIsLastCell(); | |||||
| }, | |||||
| linkChanged () { | |||||
| this._updateIsLastCell(); | |||||
| }, | |||||
| unlinked () { | |||||
| this._updateIsLastCell(); | |||||
| } | |||||
| } | |||||
| }, | |||||
| methods: { | |||||
| _updateIsLastCell() { | |||||
| let cells = this.getRelationNodes('../cell/index'); | |||||
| const len = cells.length; | |||||
| if (len > 0) { | |||||
| let lastIndex = len - 1; | |||||
| cells.forEach((cell, index) => { | |||||
| cell.updateIsLastCell(index === lastIndex); | |||||
| }); | |||||
| } | |||||
| } | |||||
| } | |||||
| }); | |||||
| @@ -1,3 +0,0 @@ | |||||
| { | |||||
| "component": true | |||||
| } | |||||
| @@ -1,3 +0,0 @@ | |||||
| <view class="i-class i-cell-group"> | |||||
| <slot></slot> | |||||
| </view> | |||||
| @@ -1,85 +0,0 @@ | |||||
| const warn = (msg, getValue) => { | |||||
| console.warn(msg); | |||||
| }; | |||||
| Component({ | |||||
| externalClasses: ['i-class'], | |||||
| options: { | |||||
| multipleSlots: true | |||||
| }, | |||||
| relations: { | |||||
| '../cell-group/index': { | |||||
| type: 'parent' | |||||
| } | |||||
| }, | |||||
| properties: { | |||||
| // 左侧标题 | |||||
| title: { | |||||
| type: String | |||||
| }, | |||||
| // 标题下方的描述信息 | |||||
| label: { | |||||
| type: String | |||||
| }, | |||||
| // 右侧内容 | |||||
| value: { | |||||
| type: String | |||||
| }, | |||||
| // 只有点击 footer 区域才触发 tab 事件 | |||||
| onlyTapFooter: { | |||||
| type: Boolean | |||||
| }, | |||||
| // 是否展示右侧箭头并开启尝试以 url 跳转 | |||||
| isLink: { | |||||
| type: null, | |||||
| value: '' | |||||
| }, | |||||
| // 链接类型,可选值为 navigateTo,redirectTo,switchTab,reLaunch | |||||
| linkType: { | |||||
| type: String, | |||||
| value: 'navigateTo' | |||||
| }, | |||||
| url: { | |||||
| type: String, | |||||
| value: '' | |||||
| } | |||||
| }, | |||||
| data: { | |||||
| isLastCell: true | |||||
| }, | |||||
| methods: { | |||||
| navigateTo () { | |||||
| const { url } = this.data; | |||||
| const type = typeof this.data.isLink; | |||||
| this.triggerEvent('click', {}); | |||||
| if (!this.data.isLink || !url || url === 'true' || url === 'false') return; | |||||
| if (type !== 'boolean' && type !== 'string') { | |||||
| warn('isLink 属性值必须是一个字符串或布尔值', this.data.isLink); | |||||
| return; | |||||
| } | |||||
| if (['navigateTo', 'redirectTo', 'switchTab', 'reLaunch'].indexOf(this.data.linkType) === -1) { | |||||
| warn('linkType 属性可选值为 navigateTo,redirectTo,switchTab,reLaunch', this.data.linkType); | |||||
| return; | |||||
| } | |||||
| wx[this.data.linkType].call(wx, {url}); | |||||
| }, | |||||
| handleTap () { | |||||
| if (!this.data.onlyTapFooter) { | |||||
| this.navigateTo(); | |||||
| } | |||||
| }, | |||||
| updateIsLastCell (isLastCell) { | |||||
| this.setData({ isLastCell }); | |||||
| } | |||||
| } | |||||
| }); | |||||
| @@ -1,3 +0,0 @@ | |||||
| { | |||||
| "component": true | |||||
| } | |||||
| @@ -1,16 +0,0 @@ | |||||
| <view bindtap="handleTap" class="i-class i-cell {{ isLastCell ? 'i-cell-last' : '' }} {{ isLink ? 'i-cell-access' : '' }}"> | |||||
| <view class="i-cell-icon"> | |||||
| <slot name="icon"></slot> | |||||
| </view> | |||||
| <view class="i-cell-bd"> | |||||
| <view wx:if="{{ title }}" class="i-cell-text">{{ title }}</view> | |||||
| <view wx:if="{{ label }}" class="i-cell-desc">{{ label }}</view> | |||||
| <slot></slot> | |||||
| </view> | |||||
| <view catchtap="navigateTo" class="i-cell-ft"> | |||||
| <block wx:if="{{value}}">{{ value }}</block> | |||||
| <block wx:else> | |||||
| <slot name="footer"></slot> | |||||
| </block> | |||||
| </view> | |||||
| </view> | |||||
| @@ -1 +0,0 @@ | |||||
| .i-cell{position:relative;padding:12px 15px;display:flex;background:#fff;align-items:center;line-height:1.4;font-size:14px;overflow:hidden}.i-cell::after{content:'';position:absolute;top:0;left:0;width:200%;height:200%;transform:scale(.5);transform-origin:0 0;pointer-events:none;box-sizing:border-box;border:0 solid #e9eaec;border-bottom-width:1px;left:15px;right:0}.i-cell-last::after{display:none}.i-cell-icon{margin-right:5px}.i-cell-icon:empty{display:none}.i-cell-bd{flex:1}.i-cell-text{line-height:24px;font-size:14px}.i-cell-desc{line-height:1.2;font-size:12px;color:#80848f}.i-cell-ft{position:relative;text-align:right;color:#495060}.i-cell-access .i-cell-ft{padding-right:13px}.i-cell-access .i-cell-ft::after{content:" ";display:inline-block;width:6px;height:6px;position:absolute;top:50%;right:2px;border-width:2px 2px 0 0;border-color:#dddee1;border-style:solid;transform:translateY(-50%) matrix(.71,.71,-.71,.71,0,0)} | |||||
| @@ -1,38 +0,0 @@ | |||||
| Component({ | |||||
| externalClasses: ['i-class'], | |||||
| relations: { | |||||
| '../checkbox/index': { | |||||
| type: 'child', | |||||
| linked() { | |||||
| this.changeCurrent(); | |||||
| }, | |||||
| linkChanged() { | |||||
| this.changeCurrent(); | |||||
| }, | |||||
| unlinked() { | |||||
| this.changeCurrent(); | |||||
| } | |||||
| } | |||||
| }, | |||||
| properties: { | |||||
| current: { | |||||
| type: Array, | |||||
| value: [], | |||||
| observer: 'changeCurrent' | |||||
| }, | |||||
| }, | |||||
| methods: { | |||||
| changeCurrent(val = this.data.current) { | |||||
| let items = this.getRelationNodes('../checkbox/index'); | |||||
| const len = items.length; | |||||
| if (len > 0) { | |||||
| items.forEach(item => { | |||||
| item.changeCurrent(val.indexOf(item.data.value) !== -1); | |||||
| }); | |||||
| } | |||||
| }, | |||||
| emitEvent(current) { | |||||
| this.triggerEvent('change', current); | |||||
| } | |||||
| } | |||||
| }); | |||||
| @@ -1,7 +0,0 @@ | |||||
| { | |||||
| "component": true, | |||||
| "usingComponents": | |||||
| { | |||||
| "i-cell-group": "../cell-group/index" | |||||
| } | |||||
| } | |||||
| @@ -1,3 +0,0 @@ | |||||
| <i-cell-group class="i-class"> | |||||
| <slot></slot> | |||||
| </i-cell-group> | |||||
| @@ -1,56 +0,0 @@ | |||||
| const prefixCls = 'i-checkbox'; | |||||
| Component({ | |||||
| externalClasses: ['i-class'], | |||||
| relations: { | |||||
| '../checkbox-group/index': { | |||||
| type: 'parent' | |||||
| } | |||||
| }, | |||||
| properties: { | |||||
| value: { | |||||
| type: String, | |||||
| value: '' | |||||
| }, | |||||
| checked: { | |||||
| type: Boolean, | |||||
| value: false | |||||
| }, | |||||
| disabled: { | |||||
| type: Boolean, | |||||
| value: false | |||||
| }, | |||||
| color: { | |||||
| type: String, | |||||
| value: '#2d8cf0' | |||||
| }, | |||||
| position: { | |||||
| type: String, | |||||
| value: 'left', //left right | |||||
| observer: 'setPosition' | |||||
| } | |||||
| }, | |||||
| data: { | |||||
| checked: true, | |||||
| positionCls: `${prefixCls}-checkbox-left`, | |||||
| }, | |||||
| attached() { | |||||
| this.setPosition(); | |||||
| }, | |||||
| methods: { | |||||
| changeCurrent(current) { | |||||
| this.setData({ checked: current }); | |||||
| }, | |||||
| checkboxChange() { | |||||
| if (this.data.disabled) return; | |||||
| const item = { current: !this.data.checked, value: this.data.value }; | |||||
| const parent = this.getRelationNodes('../checkbox-group/index')[0]; | |||||
| parent ? parent.emitEvent(item) : this.triggerEvent('change', item); | |||||
| }, | |||||
| setPosition() { | |||||
| this.setData({ | |||||
| positionCls: this.data.position.indexOf('left') !== -1 ? `${prefixCls}-checkbox-left` : `${prefixCls}-checkbox-right`, | |||||
| }); | |||||
| } | |||||
| } | |||||
| }); | |||||
| @@ -1,7 +0,0 @@ | |||||
| { | |||||
| "component": true, | |||||
| "usingComponents": | |||||
| { | |||||
| "i-cell": "../cell/index" | |||||
| } | |||||
| } | |||||
| @@ -1,8 +0,0 @@ | |||||
| <view class="i-class i-checkbox" catchtap="checkboxChange"> | |||||
| <i-cell i-class="i-checkbox-cell"> | |||||
| <label> | |||||
| <radio value="{{value}}" checked="{{checked}}" color="{{checked?color:''}}" disabled="{{disabled}}" class="i-checkbox-radio {{positionCls}}" /> | |||||
| <view class="i-checkbox-title">{{value}}</view> | |||||
| </label> | |||||
| </i-cell> | |||||
| </view> | |||||
| @@ -1 +0,0 @@ | |||||
| .i-checkbox-cell::after{display:block}.i-checkbox-checkbox-left{float:left}.i-checkbox-checkbox-right{float:right}.i-checkbox-radio{vertical-align:middle}.i-checkbox-title{display:inline-block;vertical-align:middle} | |||||
| @@ -1,46 +0,0 @@ | |||||
| Component({ | |||||
| externalClasses: ['i-class-content', 'i-class-title', 'i-class'], | |||||
| relations: { | |||||
| '../collapse/index': { | |||||
| type: 'parent', | |||||
| linked: function (target) { | |||||
| const options = { | |||||
| accordion: target.data.accordion | |||||
| } | |||||
| if (target.data.name === this.data.name) { | |||||
| options.showContent = 'i-collapse-item-show-content'; | |||||
| } | |||||
| this.setData(options); | |||||
| } | |||||
| } | |||||
| }, | |||||
| properties: { | |||||
| title: String, | |||||
| name: String | |||||
| }, | |||||
| data: { | |||||
| showContent: '', | |||||
| accordion: false | |||||
| }, | |||||
| options: { | |||||
| multipleSlots: true | |||||
| }, | |||||
| methods: { | |||||
| trigger(e) { | |||||
| const data = this.data; | |||||
| if (data.accordion) { | |||||
| this.triggerEvent('collapse', {name: data.name}, {composed: true, bubbles: true}); | |||||
| } else { | |||||
| this.setData({ | |||||
| showContent: data.showContent ? '' : 'i-collapse-item-show-content' | |||||
| }); | |||||
| } | |||||
| }, | |||||
| } | |||||
| }); | |||||
| @@ -1,7 +0,0 @@ | |||||
| { | |||||
| "component": true, | |||||
| "usingComponents": { | |||||
| "i-icon": "../icon/index" | |||||
| } | |||||
| } | |||||
| @@ -1,9 +0,0 @@ | |||||
| <view id="{{name}}" class="i-class i-collapse-item "> | |||||
| <view class="i-collapse-item-title-wrap" bindtap="trigger"> | |||||
| <i-icon size="16" type="enter" i-class="{{ showContent ? 'i-collapse-item-arrow-show' : 'i-collapse-item-arrow' }}"/> | |||||
| <text class="i-collapse-item-title i-class-title">{{title}}</text> | |||||
| </view> | |||||
| <view class="i-collapse-item-content {{showContent}} i-class-content"> | |||||
| <slot name="content"></slot> | |||||
| </view> | |||||
| </view> | |||||
| @@ -1 +0,0 @@ | |||||
| .i-collapse-item{padding:2px 8px;border-top:1px solid #dddee1}.i-collapse-item-title{vertical-align:middle}.i-collapse-item-title-wrap{padding:2px 0 0}.i-collapse-item-content{padding:6px;display:none}.i-collapse-item-show-content{display:block}.i-collapse-item-arrow{transition:transform .2s ease-in-out}.i-collapse-item-arrow-show{transition:transform .2s ease-in-out;transform:rotate(90deg)} | |||||
| @@ -1,31 +0,0 @@ | |||||
| Component({ | |||||
| externalClasses: ['i-class'], | |||||
| relations: { | |||||
| '../collapse-item/index': { | |||||
| type: 'child' | |||||
| } | |||||
| }, | |||||
| properties: { | |||||
| name: String, | |||||
| accordion: Boolean | |||||
| }, | |||||
| methods: { | |||||
| clickfn(e) { | |||||
| const params = e.detail; | |||||
| const allList = this.getRelationNodes('../collapse-item/index'); | |||||
| allList.forEach((item) => { | |||||
| if (params.name === item.data.name) { | |||||
| item.setData({ | |||||
| showContent: 'i-collapse-item-show-content' | |||||
| }); | |||||
| } else { | |||||
| item.setData({ | |||||
| showContent: '' | |||||
| }); | |||||
| } | |||||
| }); | |||||
| }, | |||||
| } | |||||
| }); | |||||
| @@ -1,3 +0,0 @@ | |||||
| { | |||||
| "component": true | |||||
| } | |||||
| @@ -1,4 +0,0 @@ | |||||
| <view class="i-class i-collapse" bindcollapse="clickfn"> | |||||
| <slot></slot> | |||||
| </view> | |||||
| @@ -1,90 +0,0 @@ | |||||
| Component({ | |||||
| properties: { | |||||
| target: Number, | |||||
| showDay: Boolean, | |||||
| callback: String, | |||||
| format: Array, | |||||
| clearTimer: Boolean | |||||
| }, | |||||
| externalClasses: ['countdown-class'], | |||||
| data: { | |||||
| time: '', | |||||
| resultFormat: [], | |||||
| changeFormat: false | |||||
| }, | |||||
| ready() { | |||||
| this.getFormat(); | |||||
| }, | |||||
| methods: { | |||||
| getFormat() { | |||||
| const data = this.data; | |||||
| const len = data.format.length; | |||||
| if (!data.showDay) data.resultFormat.push(''); | |||||
| if (len >= 3) { | |||||
| for (let i = 0; i < len; i++) { | |||||
| if (data.resultFormat.length >= 4) break; | |||||
| if (data.format[i]) { | |||||
| data.resultFormat.push(data.format[i].toString()); | |||||
| } | |||||
| } | |||||
| if (data.resultFormat.length >= 4) data.changeFormat = true; | |||||
| } | |||||
| this.getLastTime(); | |||||
| }, | |||||
| init() { | |||||
| const self = this; | |||||
| setTimeout(function () { | |||||
| self.getLastTime.call(self); | |||||
| }, 1000); | |||||
| }, | |||||
| getLastTime() { | |||||
| const data = this.data; | |||||
| const gapTime = Math.ceil((data.target - new Date().getTime()) / 1000); | |||||
| let result = ''; | |||||
| let time = '00:00:00'; | |||||
| let day = '00'; | |||||
| const format = data.resultFormat; | |||||
| if (gapTime > 0) { | |||||
| day = this.formatNum(parseInt(gapTime / 86400)); | |||||
| let lastTime = gapTime % 86400; | |||||
| const hour = this.formatNum(parseInt(lastTime / 3600)); | |||||
| lastTime = lastTime % 3600; | |||||
| const minute = this.formatNum(parseInt(lastTime / 60)); | |||||
| const second = this.formatNum(lastTime % 60); | |||||
| if (data.changeFormat) time = `${hour}${format[1]}${minute}${format[2]}${second}${format[3]}`; | |||||
| else time = `${hour}:${minute}:${second}`; | |||||
| if (!data.clearTimer) this.init.call(this); | |||||
| } else { | |||||
| this.endfn(); | |||||
| } | |||||
| if (data.showDay) { | |||||
| if (data.changeFormat) { | |||||
| result = `${day}${format[0]} ${time}`; | |||||
| } else { | |||||
| result = `${day}d ${time}`; | |||||
| } | |||||
| } else { | |||||
| result = time; | |||||
| } | |||||
| this.setData({ | |||||
| time: result | |||||
| }); | |||||
| }, | |||||
| formatNum(num) { | |||||
| return num > 9 ? num : `0${num}`; | |||||
| }, | |||||
| endfn() { | |||||
| this.triggerEvent('callback', {}); | |||||
| } | |||||
| } | |||||
| }); | |||||
| @@ -1,4 +0,0 @@ | |||||
| { | |||||
| "component": true | |||||
| } | |||||
| @@ -1,4 +0,0 @@ | |||||
| <text class="countdown-class"> | |||||
| {{time}} | |||||
| </text> | |||||
| @@ -1,25 +0,0 @@ | |||||
| Component({ | |||||
| externalClasses: ['i-class'], | |||||
| properties: { | |||||
| content: { | |||||
| type: String, | |||||
| value: '' | |||||
| }, | |||||
| height : { | |||||
| type: Number, | |||||
| value: 48 | |||||
| }, | |||||
| color : { | |||||
| type : String, | |||||
| value : '#80848f' | |||||
| }, | |||||
| lineColor : { | |||||
| type : String, | |||||
| value : '#e9eaec' | |||||
| }, | |||||
| size : { | |||||
| type: String, | |||||
| value: 12 | |||||
| } | |||||
| } | |||||
| }); | |||||
| @@ -1,3 +0,0 @@ | |||||
| { | |||||
| "component": true | |||||
| } | |||||
| @@ -1,19 +0,0 @@ | |||||
| <view class="i-divider i-class" style="{{parse.getStyle(color,size,height)}}"> | |||||
| <view class="i-divider-content" wx:if="{{content !== ''}}"> | |||||
| {{content}} | |||||
| </view> | |||||
| <view class="i-divider-content" wx:else> | |||||
| <slot></slot> | |||||
| </view> | |||||
| <view class="i-divider-line" style="background:{{lineColor}}"></view> | |||||
| </view> | |||||
| <wxs module="parse"> | |||||
| module.exports = { | |||||
| getStyle : function(color,size,height){ | |||||
| var color = 'color:' + color +';'; | |||||
| var size = 'font-size:' + size + 'px;'; | |||||
| var height = 'height:' + height+'px;' | |||||
| return color + size + height; | |||||
| } | |||||
| } | |||||
| </wxs> | |||||
| @@ -1 +0,0 @@ | |||||
| .i-divider{width:100%;text-align:center;font-size:12px;position:relative;display:flex;align-items:center;justify-content:center}.i-divider-line{position:absolute;left:0;width:100%;height:1rpx;background-color:#f7f7f7;top:50%}.i-divider-content{background:#fff;position:relative;z-index:1;display:inline-block;padding:0 10px} | |||||
| @@ -1,33 +0,0 @@ | |||||
| Component({ | |||||
| externalClasses: ['i-class'], | |||||
| properties: { | |||||
| visible: { | |||||
| type: Boolean, | |||||
| value: false | |||||
| }, | |||||
| mask: { | |||||
| type: Boolean, | |||||
| value: true | |||||
| }, | |||||
| maskClosable: { | |||||
| type: Boolean, | |||||
| value: true | |||||
| }, | |||||
| mode: { | |||||
| type: String, | |||||
| value: 'left' // left right | |||||
| } | |||||
| }, | |||||
| data: {}, | |||||
| methods: { | |||||
| handleMaskClick() { | |||||
| if (!this.data.maskClosable) { | |||||
| return; | |||||
| } | |||||
| this.triggerEvent('close', {}); | |||||
| } | |||||
| } | |||||
| }); | |||||
| @@ -1,3 +0,0 @@ | |||||
| { | |||||
| "component": true | |||||
| } | |||||
| @@ -1,6 +0,0 @@ | |||||
| <view class="i-class i-drawer {{ visible ? 'i-drawer-show' : '' }} {{ 'i-drawer-' + mode }}"> | |||||
| <view wx:if="{{ mask }}" class="i-drawer-mask" bindtap="handleMaskClick"></view> | |||||
| <view class="i-drawer-container"> | |||||
| <slot></slot> | |||||
| </view> | |||||
| </view> | |||||
| @@ -1 +0,0 @@ | |||||
| .i-drawer{visibility:hidden}.i-drawer-show{visibility:visible}.i-drawer-show .i-drawer-mask{display:block;opacity:1}.i-drawer-show .i-drawer-container{opacity:1}.i-drawer-show.i-drawer-left .i-drawer-container,.i-drawer-show.i-drawer-right .i-drawer-container{transform:translate3d(0,-50%,0)}.i-drawer-mask{opacity:0;position:fixed;top:0;left:0;right:0;bottom:0;z-index:6;background:rgba(0,0,0,.6);transition:all .3s ease-in-out}.i-drawer-container{position:fixed;left:50%;top:50%;transform:translate3d(-50%,-50%,0);transform-origin:center;transition:all .3s ease-in-out;z-index:7;opacity:0}.i-drawer-left .i-drawer-container{left:0;top:50%;transform:translate3d(-100%,-50%,0)}.i-drawer-right .i-drawer-container{right:0;top:50%;left:auto;transform:translate3d(100%,-50%,0)} | |||||
| @@ -1,10 +0,0 @@ | |||||
| Component({ | |||||
| externalClasses: ['i-class'], | |||||
| relations: { | |||||
| '../grid-item/index': { | |||||
| type: 'parent' | |||||
| } | |||||
| }, | |||||
| }); | |||||
| @@ -1,3 +0,0 @@ | |||||
| { | |||||
| "component": true | |||||
| } | |||||
| @@ -1 +0,0 @@ | |||||
| <view class="i-class i-grid-icon"><slot></slot></view> | |||||
| @@ -1 +0,0 @@ | |||||
| .i-grid-icon{display:block;width:28px;height:28px;margin:0 auto}.i-grid-icon image{width:100%;height:100%} | |||||
| @@ -1,16 +0,0 @@ | |||||
| Component({ | |||||
| externalClasses: ['i-class'], | |||||
| relations: { | |||||
| '../grid/index': { | |||||
| type: 'parent' | |||||
| }, | |||||
| '../grid-icon/index': { | |||||
| type: 'child' | |||||
| } | |||||
| }, | |||||
| data: { | |||||
| width: '33.33%' | |||||
| } | |||||
| }); | |||||
| @@ -1,3 +0,0 @@ | |||||
| { | |||||
| "component": true | |||||
| } | |||||
| @@ -1 +0,0 @@ | |||||
| <view class="i-class i-grid-item" style="width: {{ width }}"><slot></slot></view> | |||||
| @@ -1 +0,0 @@ | |||||
| .i-grid-item{position:relative;float:left;padding:20px 10px;width:33.33333333%;box-sizing:border-box;border-right:1rpx solid #e9eaec;border-bottom:1rpx solid #e9eaec} | |||||
| @@ -1,10 +0,0 @@ | |||||
| Component({ | |||||
| externalClasses: ['i-class'], | |||||
| relations: { | |||||
| '../grid-item/index': { | |||||
| type: 'parent' | |||||
| } | |||||
| }, | |||||
| }); | |||||
| @@ -1,3 +0,0 @@ | |||||
| { | |||||
| "component": true | |||||
| } | |||||
| @@ -1 +0,0 @@ | |||||
| <view class="i-class i-grid-label"><slot></slot></view> | |||||
| @@ -1 +0,0 @@ | |||||
| .i-grid-label{margin-top:5px;display:block;text-align:center;color:#1c2438;font-size:14px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden} | |||||
| @@ -1,50 +0,0 @@ | |||||
| Component({ | |||||
| externalClasses: ['i-class'], | |||||
| relations: { | |||||
| '../grid-item/index': { | |||||
| type: 'child', | |||||
| linked () { | |||||
| this.setGridItemWidth(); | |||||
| }, | |||||
| linkChanged () { | |||||
| this.setGridItemWidth(); | |||||
| }, | |||||
| unlinked () { | |||||
| this.setGridItemWidth(); | |||||
| } | |||||
| } | |||||
| }, | |||||
| methods: { | |||||
| setGridItemWidth () { | |||||
| const nodes = this.getRelationNodes('../grid-item/index'); | |||||
| // const len = nodes.length; | |||||
| // if (len < 3) { | |||||
| // nodes.forEach(item => { | |||||
| // item.setData({ | |||||
| // 'width': '33.33%' | |||||
| // }); | |||||
| // }); | |||||
| // } else { | |||||
| // const width = 100 / nodes.length; | |||||
| // nodes.forEach(item => { | |||||
| // item.setData({ | |||||
| // 'width': width + '%' | |||||
| // }); | |||||
| // }); | |||||
| // } | |||||
| const width = 100 / nodes.length; | |||||
| nodes.forEach(item => { | |||||
| item.setData({ | |||||
| 'width': width + '%' | |||||
| }); | |||||
| }); | |||||
| } | |||||
| }, | |||||
| ready () { | |||||
| this.setGridItemWidth(); | |||||
| } | |||||
| }); | |||||
| @@ -1,3 +0,0 @@ | |||||
| { | |||||
| "component": true | |||||
| } | |||||
| @@ -1 +0,0 @@ | |||||
| <view class="i-class i-grid"><slot></slot></view> | |||||
| @@ -1 +0,0 @@ | |||||
| .i-grid{border-top:1rpx solid #e9eaec;border-left:1rpx solid #e9eaec;overflow:hidden} | |||||
| @@ -1,32 +0,0 @@ | |||||
| Component({ | |||||
| externalClasses: ['i-class'], | |||||
| properties : { | |||||
| name : { | |||||
| type : String, | |||||
| value : '' | |||||
| } | |||||
| }, | |||||
| relations : { | |||||
| '../index/index' : { | |||||
| type : 'parent' | |||||
| } | |||||
| }, | |||||
| data : { | |||||
| top : 0, | |||||
| height : 0, | |||||
| currentName : '' | |||||
| }, | |||||
| methods: { | |||||
| updateDataChange() { | |||||
| const className = '.i-index-item'; | |||||
| const query = wx.createSelectorQuery().in(this); | |||||
| query.select( className ).boundingClientRect((res)=>{ | |||||
| this.setData({ | |||||
| top : res.top, | |||||
| height : res.height, | |||||
| currentName : this.data.name | |||||
| }) | |||||
| }).exec() | |||||
| } | |||||
| } | |||||
| }) | |||||
| @@ -1,3 +0,0 @@ | |||||
| { | |||||
| "component": true | |||||
| } | |||||
| @@ -1,11 +0,0 @@ | |||||
| <view class="i-index-item i-class"> | |||||
| <view class="i-index-item-header">{{name}}</view> | |||||
| <view class="i-index-item-content"> | |||||
| <slot></slot> | |||||
| </view> | |||||
| </view> | |||||
| <wxs module="parse"> | |||||
| module.exports = { | |||||
| } | |||||
| </wxs> | |||||
| @@ -1 +0,0 @@ | |||||
| .i-index-item-header{height:30px;line-height:30px;background:#eee;font-size:14px;padding-left:10px;width:100%;box-sizing:border-box}.i-index-item-content{font-size:14px} | |||||
| @@ -1,158 +0,0 @@ | |||||
| Component({ | |||||
| externalClasses: ['i-class'], | |||||
| properties : { | |||||
| height : { | |||||
| type : String, | |||||
| value : '300' | |||||
| }, | |||||
| itemHeight : { | |||||
| type : Number, | |||||
| value : 18 | |||||
| } | |||||
| }, | |||||
| relations : { | |||||
| '../index-item/index' : { | |||||
| type : 'child', | |||||
| linked(){ | |||||
| this._updateDataChange(); | |||||
| }, | |||||
| linkChanged () { | |||||
| this._updateDataChange(); | |||||
| }, | |||||
| unlinked () { | |||||
| this._updateDataChange(); | |||||
| } | |||||
| } | |||||
| }, | |||||
| data : { | |||||
| scrollTop : 0, | |||||
| fixedData : [], | |||||
| current : 0, | |||||
| timer : null, | |||||
| startTop : 0, | |||||
| itemLength : 0, | |||||
| currentName : '', | |||||
| isTouches : false | |||||
| }, | |||||
| methods : { | |||||
| loop(){}, | |||||
| _updateDataChange( ){ | |||||
| const indexItems = this.getRelationNodes('../index-item/index'); | |||||
| const len = indexItems.length; | |||||
| const fixedData = this.data.fixedData; | |||||
| /* | |||||
| * 使用函数节流限制重复去设置数组内容进而限制多次重复渲染 | |||||
| * 暂时没有研究微信在渲染的时候是否会进行函数节流 | |||||
| */ | |||||
| if (len > 0) { | |||||
| if( this.data.timer ){ | |||||
| clearTimeout( this.data.timer ) | |||||
| this.setData({ | |||||
| timer : null | |||||
| }) | |||||
| } | |||||
| this.data.timer = setTimeout(()=>{ | |||||
| const data = []; | |||||
| indexItems.forEach((item) => { | |||||
| if( item.data.name && fixedData.indexOf( item.data.name ) === -1 ){ | |||||
| data.push(item.data.name); | |||||
| item.updateDataChange(); | |||||
| } | |||||
| }) | |||||
| this.setData({ | |||||
| fixedData : data, | |||||
| itemLength : indexItems.length | |||||
| }) | |||||
| //组件加载完成之后重新设置顶部高度 | |||||
| this.setTouchStartVal(); | |||||
| },0); | |||||
| this.setData({ | |||||
| timer : this.data.timer | |||||
| }) | |||||
| } | |||||
| }, | |||||
| handlerScroll(event){ | |||||
| const detail = event.detail; | |||||
| const scrollTop = detail.scrollTop; | |||||
| const indexItems = this.getRelationNodes('../index-item/index'); | |||||
| indexItems.forEach((item,index)=>{ | |||||
| let data = item.data; | |||||
| let offset = data.top + data.height; | |||||
| if( scrollTop < offset && scrollTop >= data.top ){ | |||||
| this.setData({ | |||||
| current : index, | |||||
| currentName : data.currentName | |||||
| }) | |||||
| } | |||||
| }) | |||||
| }, | |||||
| getCurrentItem(index){ | |||||
| const indexItems = this.getRelationNodes('../index-item/index'); | |||||
| let result = {}; | |||||
| result = indexItems[index].data; | |||||
| result.total = indexItems.length; | |||||
| return result; | |||||
| }, | |||||
| triggerCallback(options){ | |||||
| this.triggerEvent('change',options) | |||||
| }, | |||||
| handlerFixedTap(event){ | |||||
| const eindex = event.currentTarget.dataset.index; | |||||
| const item = this.getCurrentItem(eindex); | |||||
| this.setData({ | |||||
| scrollTop : item.top, | |||||
| currentName : item.currentName, | |||||
| isTouches : true | |||||
| }) | |||||
| this.triggerCallback({ | |||||
| index : eindex, | |||||
| current : item.currentName | |||||
| }) | |||||
| }, | |||||
| handlerTouchMove(event){ | |||||
| const data = this.data; | |||||
| const touches = event.touches[0] || {}; | |||||
| const pageY = touches.pageY; | |||||
| const rest = pageY - data.startTop; | |||||
| let index = Math.ceil( rest/data.itemHeight ); | |||||
| index = index >= data.itemLength ? data.itemLength -1 : index; | |||||
| const movePosition = this.getCurrentItem(index); | |||||
| /* | |||||
| * 当touch选中的元素和当前currentName不相等的时候才震动一下 | |||||
| * 微信震动事件 | |||||
| */ | |||||
| if( movePosition.name !== this.data.currentName ){ | |||||
| wx.vibrateShort(); | |||||
| } | |||||
| this.setData({ | |||||
| scrollTop : movePosition.top, | |||||
| currentName : movePosition.name, | |||||
| isTouches : true | |||||
| }) | |||||
| this.triggerCallback({ | |||||
| index : index, | |||||
| current : movePosition.name | |||||
| }) | |||||
| }, | |||||
| handlerTouchEnd(){ | |||||
| this.setData({ | |||||
| isTouches : false | |||||
| }) | |||||
| }, | |||||
| setTouchStartVal(){ | |||||
| const className = '.i-index-fixed'; | |||||
| const query = wx.createSelectorQuery().in(this); | |||||
| query.select( className ).boundingClientRect((res)=>{ | |||||
| this.setData({ | |||||
| startTop : res.top | |||||
| }) | |||||
| }).exec() | |||||
| } | |||||
| } | |||||
| }) | |||||
| @@ -1,3 +0,0 @@ | |||||
| { | |||||
| "component": true | |||||
| } | |||||
| @@ -1,38 +0,0 @@ | |||||
| <view class="i-index i-class"> | |||||
| <scroll-view | |||||
| scroll-y | |||||
| style="{{parse.setScrollStyle(height)}}" | |||||
| bindscroll="handlerScroll" | |||||
| scroll-top="{{scrollTop}}"> | |||||
| <slot></slot> | |||||
| <view class="i-index-fixed" | |||||
| catchtouchstart="handlerTouchMove" | |||||
| catchtouchmove="handlerTouchMove" | |||||
| catchtouchend="handlerTouchEnd"> | |||||
| <view class="i-index-fixed-item" | |||||
| wx:for="{{fixedData}}" | |||||
| wx:key="{{index}}" | |||||
| data-index="{{index}}" | |||||
| catchtap="handlerFixedTap"> | |||||
| {{item}} | |||||
| </view> | |||||
| </view> | |||||
| <view class="i-index-tooltip" style="{{ isTouches ? 'display:block' : 'display:none' }}">{{currentName}}</view> | |||||
| </scroll-view> | |||||
| </view> | |||||
| <wxs module="parse"> | |||||
| module.exports = { | |||||
| setScrollStyle : function(height){ | |||||
| var units = ['%','px','rem','rpx','em','rem']; | |||||
| var hasUnits = false; | |||||
| for( var i = 0; i < units.length;i++ ){ | |||||
| var u = units[i]; | |||||
| if( height.indexOf( u ) > -1 ){ | |||||
| hasUnits = true; | |||||
| break; | |||||
| } | |||||
| } | |||||
| return 'height:'+ ( hasUnits ? height : height+'px' ); | |||||
| } | |||||
| } | |||||
| </wxs> | |||||
| @@ -1 +0,0 @@ | |||||
| .i-index{width:100%;height:100%}.i-index-line{position:absolute;left:0;width:100%;height:1rpx;background-color:#f7f7f7;top:50%}.i-index-content{background:#fff;position:relative;z-index:1;display:inline-block;padding:0 10px}.i-index-fixed{position:fixed;right:0;top:50%;z-index:10;padding-left:10px;transform:translateY(-50%)}.i-index-fixed-item{display:block;height:18px;line-height:18px;padding:0 5px;text-align:center;color:#2d8cf0;font-size:12px;border-radius:50%}.i-index-fixed-item-current{background:#2d8cf0;color:#fff}.i-index-tooltip{position:fixed;left:50%;top:50%;transform:translate3d(-50%,-50%,0);background:rgba(0,0,0,.7);color:#fff;font-size:24px;border-radius:50%;width:80px;height:80px;line-height:80px;text-align:center} | |||||
| @@ -1,101 +0,0 @@ | |||||
| function addNum (num1, num2) { | |||||
| let sq1, sq2, m; | |||||
| try { | |||||
| sq1 = num1.toString().split('.')[1].length; | |||||
| } | |||||
| catch (e) { | |||||
| sq1 = 0; | |||||
| } | |||||
| try { | |||||
| sq2 = num2.toString().split('.')[1].length; | |||||
| } | |||||
| catch (e) { | |||||
| sq2 = 0; | |||||
| } | |||||
| m = Math.pow(10, Math.max(sq1, sq2)); | |||||
| return (Math.round(num1 * m) + Math.round(num2 * m)) / m; | |||||
| } | |||||
| Component({ | |||||
| externalClasses: ['i-class'], | |||||
| properties: { | |||||
| // small || default || large | |||||
| size: String, | |||||
| value: { | |||||
| type: Number, | |||||
| value: 1 | |||||
| }, | |||||
| min: { | |||||
| type: Number, | |||||
| value: -Infinity | |||||
| }, | |||||
| max: { | |||||
| type: Number, | |||||
| value: Infinity | |||||
| }, | |||||
| step: { | |||||
| type: Number, | |||||
| value: 1 | |||||
| } | |||||
| }, | |||||
| methods: { | |||||
| handleChangeStep(e, type) { | |||||
| const { dataset = {} } = e.currentTarget; | |||||
| const { disabled } = dataset; | |||||
| const { step } = this.data; | |||||
| let { value } = this.data; | |||||
| if (disabled) return null; | |||||
| if (type === 'minus') { | |||||
| value = addNum(value, -step); | |||||
| } else if (type === 'plus') { | |||||
| value = addNum(value, step); | |||||
| } | |||||
| if (value < this.data.min || value > this.data.max) return null; | |||||
| this.handleEmit(value, type); | |||||
| }, | |||||
| handleMinus(e) { | |||||
| this.handleChangeStep(e, 'minus'); | |||||
| }, | |||||
| handlePlus(e) { | |||||
| this.handleChangeStep(e, 'plus'); | |||||
| }, | |||||
| handleBlur(e) { | |||||
| let { value } = e.detail; | |||||
| const { min, max } = this.data; | |||||
| if (!value) { | |||||
| setTimeout(() => { | |||||
| this.handleEmit(value); | |||||
| }, 16); | |||||
| return; | |||||
| } | |||||
| value = +value; | |||||
| if (value > max) { | |||||
| value = max; | |||||
| } else if (value < min) { | |||||
| value = min; | |||||
| } | |||||
| this.handleEmit(value); | |||||
| }, | |||||
| handleEmit (value, type) { | |||||
| const data = { | |||||
| value: value | |||||
| }; | |||||
| if (type) data.type = type; | |||||
| this.triggerEvent('change', data); | |||||
| } | |||||
| } | |||||
| }); | |||||
| @@ -1,3 +0,0 @@ | |||||
| { | |||||
| "component": true | |||||
| } | |||||
| @@ -1,5 +0,0 @@ | |||||
| <view class="i-class i-input-number i-input-number-size-{{ size }}"> | |||||
| <view class="i-input-number-minus {{ value <= min ? 'i-input-number-disabled' : '' }}" data-disabled="{{ value <= min }}" bindtap="handleMinus">-</view> | |||||
| <input class="i-input-number-text {{ min >= max ? 'i-input-number-disabled' : '' }}" type="number" value="{{ value }}" disabled="{{ min >= max }}" bindblur="handleBlur" /> | |||||
| <view class="i-input-number-plus {{ value >= max ? 'i-input-number-disabled' : '' }}" data-disabled="{{ value >= max }}" bindtap="handlePlus">+</view> | |||||
| </view> | |||||
| @@ -1 +0,0 @@ | |||||
| .i-input-number{color:#495060}.i-input-number view{display:inline-block;line-height:20px;padding:5px 0;text-align:center;min-width:40px;box-sizing:border-box;vertical-align:middle;font-size:12px;border:1rpx solid #dddee1}.i-input-number-minus{border-right:none;border-radius:2px 0 0 2px}.i-input-number-plus{border-left:none;border-radius:0 2px 2px 0}.i-input-number-text{border:1rpx solid #dddee1;display:inline-block;text-align:center;vertical-align:middle;height:30px;width:40px;min-height:auto;font-size:12px;line-height:30px}.i-input-number-disabled{border-color:#dddee1;color:#bbbec4;background:#f7f7f7} | |||||
| @@ -1,61 +0,0 @@ | |||||
| Component({ | |||||
| behaviors: ['wx://form-field'], | |||||
| externalClasses: ['i-class'], | |||||
| properties: { | |||||
| title: { | |||||
| type: String | |||||
| }, | |||||
| // text || textarea || password || number | |||||
| type: { | |||||
| type: String, | |||||
| value: 'text' | |||||
| }, | |||||
| disabled: { | |||||
| type: Boolean, | |||||
| value: false | |||||
| }, | |||||
| placeholder: { | |||||
| type: String, | |||||
| value: '' | |||||
| }, | |||||
| autofocus: { | |||||
| type: Boolean, | |||||
| value: false | |||||
| }, | |||||
| mode: { | |||||
| type: String, | |||||
| value: 'normal' | |||||
| }, | |||||
| right: { | |||||
| type: Boolean, | |||||
| value: false | |||||
| }, | |||||
| error: { | |||||
| type: Boolean, | |||||
| value: false | |||||
| }, | |||||
| maxlength: { | |||||
| type: Number | |||||
| } | |||||
| }, | |||||
| methods: { | |||||
| handleInputChange(event) { | |||||
| const { detail = {} } = event; | |||||
| const { value = '' } = detail; | |||||
| this.setData({ value }); | |||||
| this.triggerEvent('change', event); | |||||
| }, | |||||
| handleInputFocus(event) { | |||||
| this.triggerEvent('focus', event); | |||||
| }, | |||||
| handleInputBlur(event) { | |||||
| this.triggerEvent('blur', event); | |||||
| } | |||||
| } | |||||
| }); | |||||
| @@ -1,3 +0,0 @@ | |||||
| { | |||||
| "component": true | |||||
| } | |||||
| @@ -1,31 +0,0 @@ | |||||
| <view class="i-class i-cell i-input {{ error ? 'i-input-error' : '' }} {{ mode === 'wrapped' ? 'i-input-wrapped' : '' }}"> | |||||
| <view wx:if="{{ title }}" class="i-cell-hd i-input-title">{{ title }}</view> | |||||
| <textarea | |||||
| wx:if="{{ type === 'textarea' }}" | |||||
| auto-height | |||||
| disabled="{{ disabled }}" | |||||
| focus="{{ autofocus }}" | |||||
| value="{{ value }}" | |||||
| placeholder="{{ placeholder }}" | |||||
| maxlength="{{ maxlength }}" | |||||
| class="i-input-input i-cell-bd {{ right ? 'i-input-input-right' : '' }}" | |||||
| placeholder-class="i-input-placeholder" | |||||
| bindinput="handleInputChange" | |||||
| bindfocus="handleInputFocus" | |||||
| bindblur="handleInputBlur" | |||||
| ></textarea> | |||||
| <input | |||||
| wx:else | |||||
| type="{{ type }}" | |||||
| disabled="{{ disabled }}" | |||||
| focus="{{ autofocus }}" | |||||
| value="{{ value }}" | |||||
| placeholder="{{ placeholder }}" | |||||
| maxlength="{{ maxlength }}" | |||||
| class="i-input-input i-cell-bd {{ right ? 'i-input-input-right' : '' }}" | |||||
| placeholder-class="i-input-placeholder" | |||||
| bindinput="handleInputChange" | |||||
| bindfocus="handleInputFocus" | |||||
| bindblur="handleInputBlur" | |||||
| /> | |||||
| </view> | |||||
| @@ -1 +0,0 @@ | |||||
| .i-cell{position:relative;padding:12px 15px;display:flex;background:#fff;align-items:center;line-height:1.4;font-size:14px;overflow:hidden}.i-cell::after{content:'';position:absolute;top:0;left:0;width:200%;height:200%;transform:scale(.5);transform-origin:0 0;pointer-events:none;box-sizing:border-box;border:0 solid #e9eaec;border-bottom-width:1px;left:15px;right:0}.i-cell-last::after{display:none}.i-cell-icon{margin-right:5px}.i-cell-icon:empty{display:none}.i-cell-bd{flex:1}.i-cell-text{line-height:24px;font-size:14px}.i-cell-desc{line-height:1.2;font-size:12px;color:#80848f}.i-cell-ft{position:relative;text-align:right;color:#495060}.i-cell-access .i-cell-ft{padding-right:13px}.i-cell-access .i-cell-ft::after{content:" ";display:inline-block;width:6px;height:6px;position:absolute;top:50%;right:2px;border-width:2px 2px 0 0;border-color:#dddee1;border-style:solid;transform:translateY(-50%) matrix(.71,.71,-.71,.71,0,0)}.i-input{padding:7px 15px;color:#495060}.i-input-wrapped{margin:10px 15px;background-color:#fff}.i-input-wrapped::after{left:0;border-width:1px;border-radius:4px}.i-input-error{color:#ed3f14}.i-input-title{color:#495060;min-width:65px;padding-right:10px}.i-input-input{flex:1;line-height:1.6;padding:4px 0;min-height:22px;height:auto;font-size:14px}.i-input-placeholder{font-size:14px}.i-input-input-right{text-align:right}.i-input.i-input-wrapped::after{display:block}.i-input-wrapped.i-input-error::after{border-color:#ed3f14} | |||||
| @@ -1,14 +0,0 @@ | |||||
| Component({ | |||||
| externalClasses: ['i-class'], | |||||
| properties: { | |||||
| loading: { | |||||
| type: Boolean, | |||||
| value: true | |||||
| }, | |||||
| tip: { | |||||
| type: String, | |||||
| value: '' | |||||
| } | |||||
| }, | |||||
| }); | |||||
| @@ -1,3 +0,0 @@ | |||||
| { | |||||
| "component": true | |||||
| } | |||||
| @@ -1,8 +0,0 @@ | |||||
| <view class="i-class i-load-more {{ loading ? '' : 'i-load-more-line' }}"> | |||||
| <view class="i-load-more-loading" wx:if="{{ loading }}"></view> | |||||
| <view class="i-load-more-tip"> | |||||
| <view wx:if="{{ tip !== '' }}">{{ tip }}</view> | |||||
| <view wx:elif="{{ tip === '' && loading }}">正在加载</view> | |||||
| <view class="i-load-more-empty" wx:else></view> | |||||
| </view> | |||||
| </view> | |||||
| @@ -1 +0,0 @@ | |||||
| .i-load-more{width:65%;margin:1.5em auto;line-height:1.6em;font-size:14px;text-align:center}.i-load-more-loading{display:inline-block;margin-right:12px;vertical-align:middle;width:14px;height:14px;background:0 0;border-radius:50%;border:2px solid #e9eaec;border-color:#e9eaec #e9eaec #e9eaec #2d8cf0;animation:btn-spin .6s linear;animation-iteration-count:infinite}.i-load-more-tip{display:inline-block;vertical-align:middle;color:#495060}.i-load-more-line{border-top:1px solid #dddee1;display:flex;border-top:0}.i-load-more-line::before{position:relative;top:-1px;-webkit-box-flex:1;-webkit-flex:1;flex:1;content:'';border-top:1px solid #dddee1}.i-load-more-line::after{position:relative;top:-1px;-webkit-box-flex:1;-webkit-flex:1;flex:1;content:'';border-top:1px solid #dddee1}.i-load-more-line .i-load-more-tip{position:relative;top:-.9em;padding:0 .55em}.i-load-more-empty{width:4px;height:4px;border-radius:50%;background-color:#e5e5e5;display:inline-block;position:relative;vertical-align:0;top:-.16em}@keyframes btn-spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}} | |||||
| @@ -1,45 +0,0 @@ | |||||
| const default_data = { | |||||
| visible: false, | |||||
| content: '', | |||||
| duration: 2, | |||||
| type: 'default', // default || success || warning || error | |||||
| }; | |||||
| let timmer = null; | |||||
| Component({ | |||||
| externalClasses: ['i-class'], | |||||
| data: { | |||||
| ...default_data | |||||
| }, | |||||
| methods: { | |||||
| handleShow (options) { | |||||
| const { type = 'default', duration = 2 } = options; | |||||
| this.setData({ | |||||
| ...options, | |||||
| type, | |||||
| duration, | |||||
| visible: true | |||||
| }); | |||||
| const d = this.data.duration * 1000; | |||||
| if (timmer) clearTimeout(timmer); | |||||
| if (d !== 0) { | |||||
| timmer = setTimeout(() => { | |||||
| this.handleHide(); | |||||
| timmer = null; | |||||
| }, d); | |||||
| } | |||||
| }, | |||||
| handleHide () { | |||||
| this.setData({ | |||||
| ...default_data | |||||
| }); | |||||
| } | |||||
| } | |||||
| }); | |||||
| @@ -1,3 +0,0 @@ | |||||
| { | |||||
| "component": true | |||||
| } | |||||
| @@ -1,3 +0,0 @@ | |||||
| <view class="i-class i-message i-message-{{type}} {{ visible ? 'i-message-show' : '' }}"> | |||||
| {{ content }} | |||||
| </view> | |||||
| @@ -1 +0,0 @@ | |||||
| .i-message{display:block;width:100%;min-height:32px;line-height:2.3;position:fixed;top:0;left:0;right:0;background:#2d8cf0;color:#fff;text-align:center;font-size:14px;z-index:1010;opacity:0;-webkit-transform:translateZ(0) translateY(-100%);transition:all .4s ease-in-out}.i-message-show{-webkit-transform:translateZ(0) translateY(0);opacity:1}.i-message-default{background:#2d8cf0}.i-message-success{background:#19be6b}.i-message-warning{background:#f90}.i-message-error{background:#ed3f14} | |||||
| @@ -1,54 +0,0 @@ | |||||
| Component({ | |||||
| externalClasses: ['i-class', 'i-class-mask'], | |||||
| properties: { | |||||
| visible: { | |||||
| type: Boolean, | |||||
| value: false | |||||
| }, | |||||
| title: { | |||||
| type: String, | |||||
| value: '' | |||||
| }, | |||||
| showOk: { | |||||
| type: Boolean, | |||||
| value: true | |||||
| }, | |||||
| showCancel: { | |||||
| type: Boolean, | |||||
| value: true | |||||
| }, | |||||
| okText: { | |||||
| type: String, | |||||
| value: '确定' | |||||
| }, | |||||
| cancelText: { | |||||
| type: String, | |||||
| value: '取消' | |||||
| }, | |||||
| // 按钮组,有此值时,不显示 ok 和 cancel 按钮 | |||||
| actions: { | |||||
| type: Array, | |||||
| value: [] | |||||
| }, | |||||
| // horizontal || vertical | |||||
| actionMode: { | |||||
| type: String, | |||||
| value: 'horizontal' | |||||
| } | |||||
| }, | |||||
| methods: { | |||||
| handleClickItem ({ currentTarget = {} }) { | |||||
| const dataset = currentTarget.dataset || {}; | |||||
| const { index } = dataset; | |||||
| this.triggerEvent('click', { index }); | |||||
| }, | |||||
| handleClickOk () { | |||||
| this.triggerEvent('ok'); | |||||
| }, | |||||
| handleClickCancel () { | |||||
| this.triggerEvent('cancel'); | |||||
| } | |||||
| } | |||||
| }); | |||||
| @@ -1,9 +0,0 @@ | |||||
| { | |||||
| "component": true, | |||||
| "usingComponents": { | |||||
| "i-grid": "../grid/index", | |||||
| "i-grid-item": "../grid-item/index", | |||||
| "i-button": "../button/index", | |||||
| "i-icon": "../icon/index" | |||||
| } | |||||
| } | |||||
| @@ -1,40 +0,0 @@ | |||||
| <view class="i-modal-mask i-class-mask {{ visible ? 'i-modal-mask-show' : '' }}"></view> | |||||
| <view class="i-class i-modal {{ visible ? 'i-modal-show' : '' }}"> | |||||
| <view class="i-modal-main"> | |||||
| <view class="i-modal-content"> | |||||
| <view class="i-modal-title" wx:if="{{ title }}">{{ title }}</view> | |||||
| <view class="i-modal-body"><slot></slot></view> | |||||
| <view class="i-modal-actions" wx:if="{{ actions.length }}"> | |||||
| <block wx:if="{{ actionMode === 'horizontal' }}"> | |||||
| <i-grid i-class="i-modal-grid"> | |||||
| <i-grid-item i-class="{{ actions.length === (index + 1) ? 'i-modal-grid-item-last' : 'i-modal-grid-item' }}" wx:for="{{ actions }}" wx:key="{{ item.name }}"> | |||||
| <template is="button" data="{{ item, index }}"></template> | |||||
| </i-grid-item> | |||||
| </i-grid> | |||||
| </block> | |||||
| <block wx:else> | |||||
| <view class="i-modal-action-vertical" wx:for="{{ actions }}" wx:key="{{ item.name }}"> | |||||
| <template is="button" data="{{ item, index }}"></template> | |||||
| </view> | |||||
| </block> | |||||
| </view> | |||||
| <view class="i-modal-actions" wx:else> | |||||
| <i-grid i-class="i-modal-grid" wx:if="{{ showOk || showCancel }}"> | |||||
| <i-grid-item i-class="i-modal-grid-item" wx:if="{{ showCancel }}"> | |||||
| <i-button i-class="i-modal-btn-cancel" long type="ghost" bind:click="handleClickCancel">{{ cancelText }}</i-button> | |||||
| </i-grid-item> | |||||
| <i-grid-item i-class="i-modal-grid-item-last" wx:if="{{ showOk }}"> | |||||
| <i-button i-class="i-modal-btn-ok" long type="ghost" bind:click="handleClickOk">{{ okText }}</i-button> | |||||
| </i-grid-item> | |||||
| </i-grid> | |||||
| </view> | |||||
| </view> | |||||
| </view> | |||||
| </view> | |||||
| <template name="button"> | |||||
| <i-button long type="ghost" data-index="{{ index }}" bind:click="handleClickItem"> | |||||
| <view class="i-modal-btn-loading" wx:if="{{ item.loading }}"></view> | |||||
| <i-icon wx:if="{{ item.icon }}" type="{{ item.icon }}" i-class="i-modal-btn-icon"></i-icon> | |||||
| <view class="i-modal-btn-text" style="{{ item.color ? 'color: ' + item.color : '' }}">{{ item.name }}</view> | |||||
| </i-button> | |||||
| </template> | |||||
| @@ -1 +0,0 @@ | |||||
| .i-modal{position:fixed;overflow:auto;top:0;right:0;bottom:0;left:0;height:100%;z-index:1000;display:flex;outline:0;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;transform:translateZ(1px);opacity:0;visibility:hidden}.i-modal-show{visibility:visible;opacity:1}.i-modal-mask{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.7);z-index:1000;transition:all .2s ease-in-out;opacity:0;visibility:hidden}.i-modal-mask-show{opacity:1;visibility:visible}.i-modal-main{width:270px;position:relative}.i-modal-content{border-radius:7px;padding-top:15px;position:relative;background-color:#fff;border:0;background-clip:padding-box;text-align:center;height:100%;overflow:hidden}.i-modal-body{max-height:100px;margin-bottom:15px;font-size:14px;color:#80848f;height:100%;line-height:1.5;overflow:auto}.i-modal-title{padding:6px 15px 15px;margin:0;font-size:18px;line-height:1;color:#1c2438;text-align:center}.i-modal-actions{margin:0 1px}.i-modal-action-vertical{position:relative}.i-modal-action-vertical:after{content:'';position:absolute;top:0;left:0;width:200%;height:200%;transform:scale(.5);transform-origin:0 0;pointer-events:none;box-sizing:border-box;border:0 solid #e9eaec;border-top-width:1px}.i-modal-grid{border-radius:0 0 7px 7px;border-left:none}.i-modal-grid-item,.i-modal-grid-item-last{padding:0;border-bottom:none}.i-modal-grid-item-last{border-right:none}.i-modal-btn-ok{color:#2d8cf0!important}.i-modal-btn-loading{display:inline-block;vertical-align:middle;margin-right:10px;width:12px;height:12px;background:0 0;border-radius:50%;border:2px solid #e5e5e5;border-color:#666 #e5e5e5 #e5e5e5 #e5e5e5;animation:btn-spin .6s linear;animation-iteration-count:infinite}.i-modal-btn-text{display:inline-block;vertical-align:middle}.i-modal-btn-icon{font-size:14px!important;margin-right:4px}@keyframes btn-spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}} | |||||
| @@ -1,112 +0,0 @@ | |||||
| const VALID_MODE = ['closeable']; | |||||
| const FONT_COLOR = '#f60'; | |||||
| const BG_COLOR = '#fff7cc'; | |||||
| Component({ | |||||
| externalClasses: ['i-class'], | |||||
| properties: { | |||||
| closable: { | |||||
| type: Boolean, | |||||
| value: false | |||||
| }, | |||||
| icon: { | |||||
| type: String, | |||||
| value: '' | |||||
| }, | |||||
| loop: { | |||||
| type: Boolean, | |||||
| value: false | |||||
| }, | |||||
| // 背景颜色 | |||||
| backgroundcolor: { | |||||
| type: String, | |||||
| value: '#fefcec' | |||||
| }, | |||||
| // 字体及图标颜色 | |||||
| color: { | |||||
| type: String, | |||||
| value: '#f76a24' | |||||
| }, | |||||
| // 滚动速度 | |||||
| speed: { | |||||
| type: Number, | |||||
| value: 1000 | |||||
| } | |||||
| }, | |||||
| data: { | |||||
| show: true, | |||||
| wrapWidth: 0, | |||||
| width: 0, | |||||
| duration: 0, | |||||
| animation: null, | |||||
| timer: null, | |||||
| }, | |||||
| detached() { | |||||
| this.destroyTimer(); | |||||
| }, | |||||
| ready() { | |||||
| if (this.data.loop) { | |||||
| this.initAnimation(); | |||||
| } | |||||
| }, | |||||
| methods: { | |||||
| initAnimation() { | |||||
| wx.createSelectorQuery().in(this).select('.i-noticebar-content-wrap').boundingClientRect((wrapRect) => { | |||||
| wx.createSelectorQuery().in(this).select('.i-noticebar-content').boundingClientRect((rect) => { | |||||
| const duration = rect.width / 40 * this.data.speed; | |||||
| const animation = wx.createAnimation({ | |||||
| duration: duration, | |||||
| timingFunction: "linear", | |||||
| }); | |||||
| this.setData({ | |||||
| wrapWidth: wrapRect.width, | |||||
| width: rect.width, | |||||
| duration: duration, | |||||
| animation: animation | |||||
| }, () => { | |||||
| this.startAnimation(); | |||||
| }); | |||||
| }).exec(); | |||||
| }).exec(); | |||||
| }, | |||||
| startAnimation() { | |||||
| //reset | |||||
| if (this.data.animation.option.transition.duration !== 0) { | |||||
| this.data.animation.option.transition.duration = 0; | |||||
| const resetAnimation = this.data.animation.translateX(this.data.wrapWidth).step(); | |||||
| this.setData({ | |||||
| animationData: resetAnimation.export() | |||||
| }); | |||||
| } | |||||
| this.data.animation.option.transition.duration = this.data.duration; | |||||
| const animationData = this.data.animation.translateX(-this.data.width).step(); | |||||
| setTimeout(() => { | |||||
| this.setData({ | |||||
| animationData: animationData.export() | |||||
| }); | |||||
| }, 100); | |||||
| const timer = setTimeout(() => { | |||||
| this.startAnimation(); | |||||
| }, this.data.duration); | |||||
| this.setData({ | |||||
| timer, | |||||
| }); | |||||
| }, | |||||
| destroyTimer() { | |||||
| if (this.data.timer) { | |||||
| clearTimeout(this.data.timer); | |||||
| } | |||||
| }, | |||||
| handleClose() { | |||||
| this.destroyTimer(); | |||||
| this.setData({ | |||||
| show: false, | |||||
| timer: null | |||||
| }); | |||||
| } | |||||
| } | |||||
| }); | |||||
| @@ -1,7 +0,0 @@ | |||||
| { | |||||
| "component": true, | |||||
| "usingComponents": | |||||
| { | |||||
| "i-icon": "../icon/index" | |||||
| } | |||||
| } | |||||
| @@ -1,9 +0,0 @@ | |||||
| <view wx:if="{{ show }}" class="i-class i-noticebar" style="color: {{ color }}; background-color: {{ backgroundcolor }}"> | |||||
| <i-icon wx:if="{{ icon }}" type="{{ icon }}" size="24" color="{{color}}" class="i-noticebar-icon"></i-icon> | |||||
| <view class="i-noticebar-content-wrap"> | |||||
| <view class="i-noticebar-content {{loop?'i-noticebar-content-loop':''}}" animation="{{ animationData }}"> | |||||
| <slot></slot> | |||||
| </view> | |||||
| </view> | |||||
| <i-icon wx:if="{{closable}}" class="i-noticebar-operation" type="close" size="20" color="{{color}}" bindtap="handleClose"></i-icon> | |||||
| </view> | |||||
| @@ -1 +0,0 @@ | |||||
| .i-noticebar{display:flex;height:72rpx;line-height:72rpx;font-size:14px;color:#f76a24;background-color:#fefcec;overflow:hidden}.i-noticebar-icon{display:flex;margin-left:30rpx;align-items:center}.i-noticebar-icon+view{margin-left:10rpx}.i-noticebar-operation{display:flex;margin-right:16rpx;align-items:center}.i-noticebar-content-wrap{position:relative;flex:1;margin:0 30rpx;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.i-noticebar-content-wrap .i-noticebar-content{position:absolute;transition-duration:20s} | |||||
| @@ -1,42 +0,0 @@ | |||||
| Component({ | |||||
| externalClasses: ['i-class'], | |||||
| options: { | |||||
| multipleSlots: true | |||||
| }, | |||||
| properties: { | |||||
| // button || number || pointer | |||||
| mode: { | |||||
| type: String, | |||||
| value: 'button' | |||||
| }, | |||||
| current: { | |||||
| type: Number, | |||||
| value: 1 | |||||
| }, | |||||
| total: { | |||||
| type: Number, | |||||
| value: 0 | |||||
| }, | |||||
| // 是否隐藏数值 | |||||
| simple: { | |||||
| type: Boolean, | |||||
| value: false | |||||
| } | |||||
| }, | |||||
| methods: { | |||||
| handleChange (type) { | |||||
| this.triggerEvent('change', { | |||||
| type: type | |||||
| }); | |||||
| }, | |||||
| handlePrev () { | |||||
| this.handleChange('prev'); | |||||
| }, | |||||
| handleNext () { | |||||
| this.handleChange('next'); | |||||
| } | |||||
| } | |||||
| }); | |||||
| @@ -1,7 +0,0 @@ | |||||
| { | |||||
| "component": true, | |||||
| "usingComponents": | |||||
| { | |||||
| "i-button": "../button/index" | |||||
| } | |||||
| } | |||||
| @@ -1,14 +0,0 @@ | |||||
| <view class="i-class i-page"> | |||||
| <view class="i-page-prev" wx:if="{{ mode === 'button' }}"> | |||||
| <i-button i-class="i-page-button" type="ghost" bindclick="handlePrev" disabled="{{ current === 1 }}"><slot name="prev"></slot></i-button> | |||||
| </view> | |||||
| <view class="i-page-number" wx:if="{{ mode !== 'pointer' && !simple }}"> | |||||
| <view class="i-page-number-current">{{ current }}</view>/{{total}} | |||||
| </view> | |||||
| <view class="i-page-pointer" wx:if="{{ mode === 'pointer' }}"> | |||||
| <view class="i-page-pointer-dot {{ (index + 1) === current ? 'current' : '' }}" wx:for="{{ total }}" wx:key="index"></view> | |||||
| </view> | |||||
| <view class="i-page-next" wx:if="{{ mode === 'button' }}"> | |||||
| <i-button i-class="i-page-button" type="ghost" bindclick="handleNext" disabled="{{ current === total }}"><slot name="next"></slot></i-button> | |||||
| </view> | |||||
| </view> | |||||
| @@ -1 +0,0 @@ | |||||
| .i-page{display:block;width:100%;height:44px;overflow:hidden;box-sizing:border-box;position:relative}.i-page-prev{position:absolute;left:10px;top:0}.i-page-next{position:absolute;right:10px;top:0}.i-page-number{width:100%;height:44px;line-height:44px;margin:0 auto;text-align:center}.i-page-number-current{display:inline;color:#2d8cf0}.i-page-pointer{width:100%;height:44px;line-height:44px;margin:0 auto;text-align:center}.i-page-pointer-dot{display:inline-block;width:8px;height:8px;margin:0 2px;border-radius:50%;background:#bbbec4}.i-page-pointer-dot.current{background:#80848f}.i-page-button{display:inline-block;margin:0} | |||||