diff --git a/src/js/layer/index.js b/src/js/layer/index.js
index 89e17f9..1a6c058 100644
--- a/src/js/layer/index.js
+++ b/src/js/layer/index.js
@@ -292,7 +292,9 @@ class __layer__ {
${repeat(
style === 1
? ''
- : style === 2 ? '' : '',
+ : style === 2
+ ? ''
+ : '',
this.dot[style]
)}
@@ -323,7 +325,7 @@ class __layer__ {
} else {
let html = ''
let btns = `
- 1) {
btns =
`
-
diff --git a/src/js/layer/skin/default.scss b/src/js/layer/skin/default.scss
index 4ebec21..1c2ed6b 100644
--- a/src/js/layer/skin/default.scss
+++ b/src/js/layer/skin/default.scss
@@ -55,7 +55,7 @@
/* 弹层按钮部分 */
.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);}
diff --git a/src/js/router/index.js b/src/js/router/index.js
index d3247d6..dcdf350 100644
--- a/src/js/router/index.js
+++ b/src/js/router/index.js
@@ -33,10 +33,15 @@ const RULE_REGEXP = /(:id)|(\{id\})|(\{id:([A-z\d\,\[\]\{\}\-\+\*\?\!:\^\$]*)\})
class Router {
constructor(options) {
- this.table = []
- this.history = null
- this.path = ''
- this.options = Object.assign({}, DEFAULT_OPTIONS, options)
+ Anot.hideProperty(this, 'table', [])
+ Anot.hideProperty(this, 'history', null)
+ Anot.hideProperty(this, 'path', '')
+ Anot.hideProperty(this, 'noMatch', null)
+ Anot.hideProperty(
+ this,
+ 'options',
+ Object.assign({}, DEFAULT_OPTIONS, options)
+ )
this.__listen__()
}
@@ -53,6 +58,7 @@ class Router {
return Anot.router
}
+ // 事件监听
__listen__() {
let { mode, prefix } = this.options
@@ -63,10 +69,13 @@ class Router {
if (ev.type === 'load') {
this.go(path)
+ // hash模式要手动触发一下路由检测
if (mode === 'hash') {
this.__check__()
}
} else {
+ // 因为pushState不会触发popstate事件,
+ // 所以这里只在hash模式或有ev.state的情况下才会主动触发路由检测
this.path = path.replace(/^[/]+?/, '')
if (mode === 'hash' || ev.state) {
this.__check__()
@@ -98,6 +107,10 @@ class Router {
let href =
target.getAttribute('href') || target.getAttribute('xlink:href')
+ if (!href) {
+ return
+ }
+
// hash地址,只管修正前缀即可, 会触发popstate事件
if (prefix.test(href)) {
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 w = '([\\w.-]'
if (p1 || p2) {
@@ -137,7 +150,7 @@ class Router {
__add__(rule, callback) {
// 特殊值"!", 则自动作非匹配回调处理
if (rule === '!') {
- this.notMatch = callback
+ this.noMatch = callback
return
}
if (rule.charAt(0) !== '/') {
@@ -147,9 +160,10 @@ class Router {
rule = rule.replace(/^[\/]+|[\/]+$|\s+/g, '')
let opts = { rule, callback }
- Anot.Array.ensure(this.table, this._getRegExp(rule, opts))
+ Anot.Array.ensure(this.table, this.__parseRule__(rule, opts))
}
+ // 路由检测
__check__() {
let { allowReload, historyOpen } = this.options
if (!allowReload && this.path === this.history) {
@@ -158,9 +172,6 @@ class Router {
if (historyOpen) {
this.history = this.path
- if (Anot.ls) {
- Anot.ls('lastPath', this.path)
- }
}
for (let i = 0, route; (route = this.table[i++]); ) {
@@ -170,7 +181,7 @@ class Router {
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') {
path = path.trim().replace(prefix, '')
+ // 页面刷新时, 不主动添加空hash, 避免执行2次noMatch回调
+ if (!path && path === location.hash) {
+ return
+ }
location.hash = '!/' + path
this.path = path
} else {
@@ -186,6 +201,7 @@ class Router {
path = path.replace(/^[/]+?/, '')
window.history.pushState({ path }, null, `/${path + hash}`)
this.path = path
+ // pushState不会触发popstate事件,所以要手动触发路由检测
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 ''
+ },
+ state: {
+ link: ''
+ },
+ props: {
+ label: '',
+ click: Anot.PropsTypes.isFunction()
+ },
+ methods: {
+ onClick() {
+ if (typeof this.props.click === 'function') {
+ this.props.click()
+ }
+ }
+ }
+})
+
export default Router