This repository has been archived on 2023-08-30. You can view files and clone it, but cannot push or open issues/pull-requests.
bytedo
/
wcui
Archived
1
0
Fork 0

优化路由;优化layer组件的按钮

old
宇天 2018-06-01 21:56:52 +08:00
parent 9f3ded27ad
commit fc957104ff
3 changed files with 66 additions and 15 deletions

View File

@ -292,7 +292,9 @@ class __layer__ {
${repeat( ${repeat(
style === 1 style === 1
? '<i class="do-icon-loading"></i>' ? '<i class="do-icon-loading"></i>'
: style === 2 ? '<i class="do-icon-app2"></i>' : '<i></i>', : style === 2
? '<i class="do-icon-app2"></i>'
: '<i></i>',
this.dot[style] this.dot[style]
)} )}
</span> </span>
@ -323,7 +325,7 @@ class __layer__ {
} else { } else {
let html = '' let html = ''
let btns = ` let btns = `
<a href="javascript:;" class="action-yes" <a class="action-yes"
:click="handleConfirm" :click="handleConfirm"
tabindex="-1" tabindex="-1"
:text="btns[0]" :text="btns[0]"
@ -332,7 +334,7 @@ class __layer__ {
if (type > 1) { if (type > 1) {
btns = btns =
` `
<a href="javascript:;" class="action-no" <a class="action-no"
:click="handleCancel" :click="handleCancel"
:text="btns[1]" :text="btns[1]"
></a> ></a>

View File

@ -55,7 +55,7 @@
/* 弹层按钮部分 */ /* 弹层按钮部分 */
.layer-ctrl {width:100%;height:40px;padding:5px 0;line-height:30px;font-size:14px;color:#454545;text-align:right; .layer-ctrl {width:100%;height:40px;padding:5px 0;line-height:30px;font-size:14px;color:#454545;text-align:right;
a {overflow:hidden;position:relative;display:inline-block;width:auto;min-width:60px;height:30px;margin-left:5px;padding:0 10px;color:nth($ct, 1);text-align:center; a {overflow:hidden;position:relative;display:inline-block;width:auto;min-width:60px;height:30px;margin-left:5px;padding:0 10px;color:nth($ct, 1);text-align:center;cursor:pointer;
&::before {position:absolute;left:-50%;top:-50%;z-index:-1;display:block;width:200%;height:200%;border-radius:50%;background:nth($cp, 2); content:"";opacity:0;transform: scale(0, .0); transition:opacity 1.3s cubic-bezier(0.23, 1, 0.32, 1),transform 1.3s cubic-bezier(0.23, 1, 0.32, 1);} &::before {position:absolute;left:-50%;top:-50%;z-index:-1;display:block;width:200%;height:200%;border-radius:50%;background:nth($cp, 2); content:"";opacity:0;transform: scale(0, .0); transition:opacity 1.3s cubic-bezier(0.23, 1, 0.32, 1),transform 1.3s cubic-bezier(0.23, 1, 0.32, 1);}

View File

@ -33,10 +33,15 @@ const RULE_REGEXP = /(:id)|(\{id\})|(\{id:([A-z\d\,\[\]\{\}\-\+\*\?\!:\^\$]*)\})
class Router { class Router {
constructor(options) { constructor(options) {
this.table = [] Anot.hideProperty(this, 'table', [])
this.history = null Anot.hideProperty(this, 'history', null)
this.path = '' Anot.hideProperty(this, 'path', '')
this.options = Object.assign({}, DEFAULT_OPTIONS, options) Anot.hideProperty(this, 'noMatch', null)
Anot.hideProperty(
this,
'options',
Object.assign({}, DEFAULT_OPTIONS, options)
)
this.__listen__() this.__listen__()
} }
@ -53,6 +58,7 @@ class Router {
return Anot.router return Anot.router
} }
// 事件监听
__listen__() { __listen__() {
let { mode, prefix } = this.options let { mode, prefix } = this.options
@ -63,10 +69,13 @@ class Router {
if (ev.type === 'load') { if (ev.type === 'load') {
this.go(path) this.go(path)
// hash模式要手动触发一下路由检测
if (mode === 'hash') { if (mode === 'hash') {
this.__check__() this.__check__()
} }
} else { } else {
// 因为pushState不会触发popstate事件,
// 所以这里只在hash模式或有ev.state的情况下才会主动触发路由检测
this.path = path.replace(/^[/]+?/, '') this.path = path.replace(/^[/]+?/, '')
if (mode === 'hash' || ev.state) { if (mode === 'hash' || ev.state) {
this.__check__() this.__check__()
@ -98,6 +107,10 @@ class Router {
let href = let href =
target.getAttribute('href') || target.getAttribute('xlink:href') target.getAttribute('href') || target.getAttribute('xlink:href')
if (!href) {
return
}
// hash地址,只管修正前缀即可, 会触发popstate事件 // hash地址,只管修正前缀即可, 会触发popstate事件
if (prefix.test(href)) { if (prefix.test(href)) {
this.path = href.replace(prefix, '').trim() this.path = href.replace(prefix, '').trim()
@ -112,7 +125,7 @@ class Router {
}) })
} }
_getRegExp(rule, opts) { __parseRule__(rule, opts) {
let re = rule.replace(RULE_REGEXP, function(m, p1, p2, p3, p4) { let re = rule.replace(RULE_REGEXP, function(m, p1, p2, p3, p4) {
let w = '([\\w.-]' let w = '([\\w.-]'
if (p1 || p2) { if (p1 || p2) {
@ -137,7 +150,7 @@ class Router {
__add__(rule, callback) { __add__(rule, callback) {
// 特殊值"!", 则自动作非匹配回调处理 // 特殊值"!", 则自动作非匹配回调处理
if (rule === '!') { if (rule === '!') {
this.notMatch = callback this.noMatch = callback
return return
} }
if (rule.charAt(0) !== '/') { if (rule.charAt(0) !== '/') {
@ -147,9 +160,10 @@ class Router {
rule = rule.replace(/^[\/]+|[\/]+$|\s+/g, '') rule = rule.replace(/^[\/]+|[\/]+$|\s+/g, '')
let opts = { rule, callback } let opts = { rule, callback }
Anot.Array.ensure(this.table, this._getRegExp(rule, opts)) Anot.Array.ensure(this.table, this.__parseRule__(rule, opts))
} }
// 路由检测
__check__() { __check__() {
let { allowReload, historyOpen } = this.options let { allowReload, historyOpen } = this.options
if (!allowReload && this.path === this.history) { if (!allowReload && this.path === this.history) {
@ -158,9 +172,6 @@ class Router {
if (historyOpen) { if (historyOpen) {
this.history = this.path this.history = this.path
if (Anot.ls) {
Anot.ls('lastPath', this.path)
}
} }
for (let i = 0, route; (route = this.table[i++]); ) { for (let i = 0, route; (route = this.table[i++]); ) {
@ -170,7 +181,7 @@ class Router {
return route.callback.apply(route, args) return route.callback.apply(route, args)
} }
} }
this.notMatch && this.notMatch(this.path) this.noMatch && this.noMatch(this.path)
} }
// 跳转到路由 // 跳转到路由
@ -179,6 +190,10 @@ class Router {
if (mode === 'hash') { if (mode === 'hash') {
path = path.trim().replace(prefix, '') path = path.trim().replace(prefix, '')
// 页面刷新时, 不主动添加空hash, 避免执行2次noMatch回调
if (!path && path === location.hash) {
return
}
location.hash = '!/' + path location.hash = '!/' + path
this.path = path this.path = path
} else { } else {
@ -186,6 +201,7 @@ class Router {
path = path.replace(/^[/]+?/, '') path = path.replace(/^[/]+?/, '')
window.history.pushState({ path }, null, `/${path + hash}`) window.history.pushState({ path }, null, `/${path + hash}`)
this.path = path this.path = path
// pushState不会触发popstate事件,所以要手动触发路由检测
this.__check__() this.__check__()
} }
} }
@ -202,4 +218,37 @@ class Router {
} }
} }
Anot.component('link', {
construct(props, state) {
let { mode } = Anot.router.options
if (!props.to) {
return
}
if (mode === 'hash') {
state.link = '#!' + props.to
} else {
state.link = props.to
}
delete props.to
},
render() {
return '<a :attr-href="link" :text="props.label" :click="onClick"></a>'
},
state: {
link: ''
},
props: {
label: '',
click: Anot.PropsTypes.isFunction()
},
methods: {
onClick() {
if (typeof this.props.click === 'function') {
this.props.click()
}
}
}
})
export default Router export default Router