-
Notifications
You must be signed in to change notification settings - Fork 81
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
dmego
committed
Dec 3, 2017
1 parent
43e797a
commit 8870730
Showing
45 changed files
with
3,098 additions
and
667 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,135 @@ | ||
import Component from '../component' | ||
|
||
export default { | ||
/** | ||
* 默认参数 | ||
*/ | ||
setDefaults() { | ||
return { | ||
className: undefined, | ||
position: `bottomRight`, | ||
backdrop: !1, | ||
buttons: [], | ||
buttonClicked() {}, | ||
callback() {}, | ||
} | ||
}, | ||
/** | ||
* 默认数据 | ||
*/ | ||
data() { | ||
return [ | ||
{ | ||
type: `topLeft`, | ||
className: `speed-dial-top-left`, | ||
}, | ||
{ | ||
type: `topRight`, | ||
className: `speed-dial-top-right`, | ||
}, | ||
{ | ||
type: `bottomLeft`, | ||
className: `speed-dial-bottom-left`, | ||
}, | ||
{ | ||
type: `bottomRight`, | ||
className: `speed-dial-bottom-right`, | ||
} | ||
] | ||
}, | ||
/** | ||
* 浮动按钮组件 | ||
* @param {Object} opts 配置项 | ||
* @param {String} id 唯一标识 | ||
* @param {String} opts.className 自定义类名 | ||
* @param {String} opts.position 按钮的位置,可选值 topLeft、topRight、bottomLeft、bottomRight | ||
* @param {Boolean} opts.backdrop 是否显示透明蒙层 | ||
* @param {Array} opts.buttons 按钮 | ||
* @param {String} opts.buttons.className 按钮的类名 | ||
* @param {String} opts.buttons.label 按钮的文字 | ||
* @param {String} opts.buttons.icon 按钮的图标 | ||
* @param {Function} opts.buttonClicked 按钮点击事件 | ||
* @param {Function} opts.callback 监听状态变化的回调函数 | ||
*/ | ||
init(id, opts = {}) { | ||
const options = Object.assign({ | ||
animateCss: undefined, | ||
visible: !1, | ||
}, this.setDefaults(), opts) | ||
|
||
const BUTTON_TYPES = this.data() | ||
|
||
// 判断提示类型,显示对应的位置 | ||
BUTTON_TYPES.forEach((value, key) => { | ||
if (value.type === options.position) { | ||
options.className = options.className ? `${value.className} ${options.className}` : value.className | ||
} | ||
}) | ||
|
||
// 切换状态 | ||
const toggle = (vm, opened = !1) => { | ||
vm.setData({ | ||
[`$wux.button.${id}.opened`]: opened | ||
}) | ||
if (typeof options.callback === `function`) { | ||
options.callback(vm, opened) | ||
} | ||
} | ||
|
||
// 实例化组件 | ||
const component = new Component({ | ||
scope: `$wux.button.${id}`, | ||
data: options, | ||
methods: { | ||
/** | ||
* 隐藏 | ||
*/ | ||
hide() { | ||
if (this.removed) return !1 | ||
this.removed = !0 | ||
this.setHidden() | ||
}, | ||
/** | ||
* 显示 | ||
*/ | ||
show() { | ||
if (this.removed) return !1 | ||
this.setVisible() | ||
}, | ||
/** | ||
* 关闭 | ||
*/ | ||
close () { | ||
if (!this.opened) return !1 | ||
this.opened = !1 | ||
toggle(this, !1) | ||
}, | ||
/** | ||
* 打开 | ||
*/ | ||
open () { | ||
if (this.opened) return !1 | ||
this.opened = !0 | ||
toggle(this, !0) | ||
}, | ||
/** | ||
* 按钮点击事件 | ||
*/ | ||
buttonClicked (e) { | ||
const index = e.currentTarget.dataset.index | ||
if (options.buttonClicked(index, options.buttons[index]) === true) { | ||
this.close() | ||
} | ||
}, | ||
/** | ||
* 切换状态 | ||
*/ | ||
toggle (e) { | ||
!this.opened ? this.open() : this.close() | ||
}, | ||
}, | ||
}) | ||
component.show() | ||
return component | ||
}, | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,15 @@ | ||
<template name="button"> | ||
<view class="weui-mask_transparent" wx:if="{{ backdrop && opened }}"></view> | ||
<view class="speed-dial {{ className }} {{ animateCss }} {{ opened ? 'speed-dial-opened' : '' }}" data-opened="{{ opened }}" bindtap="{{ toggle }}" wx:if="{{ visible }}"> | ||
<view class="floating-button" hover-class="active-state"> | ||
<text class="speed-dial-icon"></text> | ||
</view> | ||
<view class="speed-dial-buttons" wx:if="{{ buttons.length }}"> | ||
<block wx:for="{{ buttons }}" wx:key=""> | ||
<view class="speed-dial-button {{ item.className }}" data-index="{{ index }}" data-label="{{ item.label }}" catchtap="{{ buttonClicked }}" hover-class="active-state"> | ||
<image class="speed-dial-icon" src="{{ item.icon }}" /> | ||
</view> | ||
</block> | ||
</view> | ||
</view> | ||
</template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,164 @@ | ||
/** | ||
* 模块化组件 | ||
* @param {Object} options 配置项 | ||
* @param {String} options.scope 组件的命名空间 | ||
* @param {Object} options.data 组件的动态数据 | ||
* @param {Object} options.methods 组件的事件函数 | ||
*/ | ||
class Component { | ||
constructor(options = {}) { | ||
Object.assign(this, { | ||
options, | ||
}) | ||
this.__init() | ||
} | ||
|
||
/** | ||
* 初始化 | ||
*/ | ||
__init() { | ||
this.page = getCurrentPages()[getCurrentPages().length - 1] | ||
const setData = this.page.setData.bind(this.page) | ||
|
||
// 检查版本库是否高于或等于 1.5.0,setData 方法才有回调函数,否则采用 setTimeout 模拟 | ||
const checkSDKVersion = () => { | ||
let has = false | ||
|
||
try { | ||
const res = wx.getSystemInfoSync() | ||
const SDKVersion = res.SDKVersion.split('.') | ||
has = Number(SDKVersion[0]) > 1 || Number(SDKVersion[1]) >= 5 | ||
} catch (e) {} | ||
|
||
return has | ||
} | ||
|
||
// 重写 setData 方法,支持回调,兼容低版本 | ||
this.setData = (obj = {}, cb = () => ({})) => { | ||
const fn = () => { | ||
if (typeof cb === 'function') { | ||
cb() | ||
} | ||
} | ||
|
||
if (checkSDKVersion()) { | ||
setData(obj, fn) | ||
} else { | ||
setData(obj) | ||
setTimeout(fn, 0) | ||
} | ||
} | ||
|
||
this.__initState() | ||
} | ||
|
||
/** | ||
* 初始化组件状态 | ||
*/ | ||
__initState() { | ||
this.options.data && this.__initData() | ||
this.options.methods && this.__initMethods() | ||
} | ||
|
||
/** | ||
* 绑定组件动态数据 | ||
*/ | ||
__initData() { | ||
const scope = this.options.scope | ||
const data = this.options.data | ||
|
||
this._data = {} | ||
|
||
// 筛选非函数类型,更改参数中函数的 this 指向 | ||
if (!this.isEmptyObject(data)) { | ||
for (let key in data) { | ||
if (data.hasOwnProperty(key)) { | ||
if (typeof data[key] === `function`) { | ||
data[key] = data[key].bind(this) | ||
} else { | ||
this._data[key] = data[key] | ||
} | ||
} | ||
} | ||
} | ||
|
||
// 将数据同步到 page.data 上面方便渲染组件 | ||
this.page.setData({ | ||
[`${scope}`]: this._data, | ||
}) | ||
} | ||
|
||
/** | ||
* 绑定组件事件函数 | ||
*/ | ||
__initMethods() { | ||
const scope = this.options.scope | ||
const methods = this.options.methods | ||
|
||
// 筛选函数类型 | ||
if (!this.isEmptyObject(methods)) { | ||
for (let key in methods) { | ||
if (methods.hasOwnProperty(key) && typeof methods[key] === `function`) { | ||
this[key] = methods[key] = methods[key].bind(this) | ||
|
||
// 将 methods 内的方法重命名并挂载到 page 上面,否则 template 内找不到事件 | ||
this.page[`${scope}.${key}`] = methods[key] | ||
|
||
// 将方法名同步至 page.data 上面,方便在模板内使用 {{ method }} 方式绑定事件 | ||
this.setData({ | ||
[`${scope}.${key}`]: `${scope}.${key}`, | ||
}) | ||
} | ||
} | ||
} | ||
} | ||
|
||
/** | ||
* 获取组件的 data 数据 | ||
*/ | ||
getComponentData() { | ||
let data = this.page.data | ||
let name = this.options.scope && this.options.scope.split(`.`) | ||
|
||
name.forEach((n, i) => { | ||
data = data[n] | ||
}) | ||
|
||
return data | ||
} | ||
|
||
/** | ||
* 判断 object 是否为空 | ||
*/ | ||
isEmptyObject(e) { | ||
for (let t in e) | ||
return !1 | ||
return !0 | ||
} | ||
|
||
/** | ||
* 设置元素显示 | ||
*/ | ||
setVisible(className = `weui-animate-fade-in`) { | ||
this.setData({ | ||
[`${this.options.scope}.animateCss`]: className, | ||
[`${this.options.scope}.visible`]: !0, | ||
}) | ||
} | ||
|
||
/** | ||
* 设置元素隐藏 | ||
*/ | ||
setHidden(className = `weui-animate-fade-out`, timer = 300) { | ||
this.setData({ | ||
[`${this.options.scope}.animateCss`]: className, | ||
}) | ||
setTimeout(() => { | ||
this.setData({ | ||
[`${this.options.scope}.visible`]: !1, | ||
}) | ||
}, timer) | ||
} | ||
} | ||
|
||
export default Component |
Oops, something went wrong.