@@ -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} |