优化路由;优化layer组件的按钮
parent
9f3ded27ad
commit
fc957104ff
|
@ -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>
|
||||||
|
|
|
@ -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);}
|
||||||
|
|
||||||
|
|
|
@ -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
|
||||||
|
|
Reference in New Issue