优化路由;优化layer & mediotr在移动端适配;
宇天
parent
d689025bb7
commit
7d7afb03ca
|
|
@ -8,7 +8,7 @@
|
|||
'use strict'
|
||||
|
||||
import 'drag/index'
|
||||
import './skin/default.scss'
|
||||
import './skin/normal.scss'
|
||||
|
||||
Anot.ui.layer = '1.0.0-normal'
|
||||
|
||||
|
|
@ -18,7 +18,6 @@ let unique = null // 储存当前打开的1/2/3类型的弹窗
|
|||
let lid = 0
|
||||
let defconf = {
|
||||
type: 1, // 弹窗类型
|
||||
skin: 'default', // 默认主题
|
||||
background: '#fff',
|
||||
mask: true, // 遮罩
|
||||
maskClose: false, // 遮罩点击关闭弹窗
|
||||
|
|
@ -143,7 +142,6 @@ class __layer__ {
|
|||
'area',
|
||||
'shift',
|
||||
'offset',
|
||||
'skin',
|
||||
'mask',
|
||||
'maskClose',
|
||||
'container',
|
||||
|
|
@ -245,7 +243,7 @@ class __layer__ {
|
|||
}
|
||||
|
||||
layBox.classList.add('layer-box')
|
||||
layBox.classList.add('skin-' + state.skin)
|
||||
layBox.classList.add('skin-normal')
|
||||
|
||||
if (state.extraClass) {
|
||||
layBox.classList.add(state.extraClass)
|
||||
|
|
@ -605,7 +603,7 @@ const _layer = {
|
|||
|
||||
return _layer.open(opt)
|
||||
},
|
||||
loading(style, container, cb) {
|
||||
load(style, container, cb) {
|
||||
style = style >>> 0
|
||||
style = style < 1 ? 1 : style > 5 ? 5 : style
|
||||
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@
|
|||
&.scale {transform:scale(1.02);transition:transform .1s linear;}
|
||||
|
||||
/* 默认皮肤 */
|
||||
&.skin-default {padding:15px 10px;border-radius:3px;color:#666;font-size:14px;box-shadow:0 5px 20px rgba(0,0,0,.3);
|
||||
&.skin-normal {padding:15px 10px;border-radius:3px;color:#666;font-size:14px;box-shadow:0 5px 20px rgba(0,0,0,.3);
|
||||
|
||||
|
||||
/* 弹层标题栏 */
|
||||
|
|
@ -243,3 +243,10 @@
|
|||
|
||||
|
||||
|
||||
@media screen and (max-width:480px) {
|
||||
.do-layer {
|
||||
.layer-box {
|
||||
&.type-1,&.type-2,&.type-3,&.type-4,&.type-7 {width:90%;}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -233,10 +233,21 @@ function html2md(str) {
|
|||
function tool(name) {
|
||||
name = (name + '').trim().toLowerCase()
|
||||
name = '|' === name ? 'pipe' : name
|
||||
let event = name === 'pipe' ? '' : `:click="onToolClick('${name}', $event)"`
|
||||
|
||||
let title = TOOLBAR[name]
|
||||
let extra = ''
|
||||
switch (name) {
|
||||
case 'preview':
|
||||
extra = ':class="{active: preview}"'
|
||||
break
|
||||
case 'fullscreen':
|
||||
extra = ':class="{active: fullscreen}"'
|
||||
break
|
||||
default:
|
||||
break
|
||||
}
|
||||
return `
|
||||
<span title="${title}" class="do-meditor__icon icon-${name}" ${event}></span>`
|
||||
<span title="${title}" class="do-meditor__icon icon-${name}" data-name="${name}" ${extra}></span>`
|
||||
}
|
||||
|
||||
class MEObject {
|
||||
|
|
@ -290,7 +301,7 @@ Anot.component('meditor', {
|
|||
delete this.props.toolbar
|
||||
|
||||
return `
|
||||
<div class="tool-bar do-fn-noselect">${toolbar}</div>
|
||||
<div class="tool-bar do-fn-noselect" :click="onToolClick">${toolbar}</div>
|
||||
<textarea
|
||||
ref="editor"
|
||||
class="editor-body"
|
||||
|
|
@ -376,7 +387,7 @@ Anot.component('meditor', {
|
|||
height: 180,
|
||||
disabled: false, //禁用编辑器
|
||||
fullscreen: false, //是否全屏
|
||||
preview: true, //是否显示预览
|
||||
preview: window.innerWidth > 768, //是否显示预览
|
||||
htmlTxt: '', //用于预览渲染
|
||||
value: '', //纯md文本
|
||||
addon // 已有插件
|
||||
|
|
@ -457,8 +468,12 @@ Anot.component('meditor', {
|
|||
return dom.value.slice(startPos, endPos)
|
||||
}
|
||||
},
|
||||
onToolClick: function(name, ev) {
|
||||
if (this.disabled) {
|
||||
onToolClick: function(ev) {
|
||||
if (ev.target.tagName.toLowerCase() !== 'span') {
|
||||
return
|
||||
}
|
||||
let name = ev.target.dataset.name
|
||||
if (this.disabled || name === 'pipe') {
|
||||
return
|
||||
}
|
||||
if (this.addon[name]) {
|
||||
|
|
|
|||
|
|
@ -25,11 +25,11 @@
|
|||
&::after {position:absolute;left:0;top:0;z-index:100;width:100%;height:100%;content:"";background:rgba(255, 182, 24, 0.07);}
|
||||
}
|
||||
|
||||
.tool-bar {overflow:hidden;position:absolute;top:0;left:0;z-index:99;width:100%;height:41px;padding:0 3px;line-height:40px;border-bottom:1px solid nth($cp, 1);background:#fff;color:nth($cd, 1);text-align:center;font-size:24px;
|
||||
.tool-bar {overflow:hidden;position:absolute;top:0;left:0;z-index:99;width:100%;height:41px;line-height:40px;border-bottom:1px solid nth($cp, 1);background:#fff;color:nth($cd, 1);text-align:center;font-size:24px;
|
||||
|
||||
span {float:left;width:40px;height:40px;
|
||||
|
||||
&:hover {background:#f7f8fb;}
|
||||
&:hover,&.active {background:#f7f8fb;}
|
||||
&.icon-pipe {width:28px;background:#fff;color:nth($cp, 3);}
|
||||
}
|
||||
}
|
||||
|
|
@ -154,3 +154,15 @@
|
|||
}
|
||||
|
||||
|
||||
@media screen and (max-width:768px) {
|
||||
.do-meditor {
|
||||
.tool-bar {
|
||||
span {display:none;
|
||||
|
||||
&.icon-quote,&.icon-bold,&.icon-italic,&.icon-through,&.icon-preview {display:inline-block;}
|
||||
}
|
||||
}
|
||||
.md-preview {width:100%;border:0;background:#fafafa;}
|
||||
&.preview .editor-body {display:none;}
|
||||
}
|
||||
}
|
||||
|
|
@ -26,7 +26,6 @@ function targetIsThisWindow(targetWindow) {
|
|||
const DEFAULT_OPTIONS = {
|
||||
mode: 'hash', // hash | history
|
||||
prefix: /^(#!|#)[\/]?/, //hash前缀正则
|
||||
historyOpen: true, //是否开启hash历史
|
||||
allowReload: true //连续点击同一个链接是否重新加载
|
||||
}
|
||||
const RULE_REGEXP = /(:id)|(\{id\})|(\{id:([A-z\d\,\[\]\{\}\-\+\*\?\!:\^\$]*)\})/g
|
||||
|
|
@ -34,7 +33,7 @@ const RULE_REGEXP = /(:id)|(\{id\})|(\{id:([A-z\d\,\[\]\{\}\-\+\*\?\!:\^\$]*)\})
|
|||
class Router {
|
||||
constructor(options) {
|
||||
Anot.hideProperty(this, 'table', [])
|
||||
Anot.hideProperty(this, 'history', null)
|
||||
Anot.hideProperty(this, 'last', '')
|
||||
Anot.hideProperty(this, 'path', '')
|
||||
Anot.hideProperty(this, 'noMatch', null)
|
||||
Anot.hideProperty(
|
||||
|
|
@ -50,9 +49,6 @@ class Router {
|
|||
if (Anot.router) {
|
||||
throw new Error('不允许重复创建Router实例...')
|
||||
}
|
||||
if (!options.allowReload) {
|
||||
options.historyOpen = true
|
||||
}
|
||||
|
||||
Anot.router = new this(options)
|
||||
return Anot.router
|
||||
|
|
@ -71,14 +67,14 @@ class Router {
|
|||
this.go(path)
|
||||
// hash模式要手动触发一下路由检测
|
||||
if (mode === 'hash') {
|
||||
this.__check__()
|
||||
this.__check__(path)
|
||||
}
|
||||
} else {
|
||||
// 因为pushState不会触发popstate事件,
|
||||
// 所以这里只在hash模式或有ev.state的情况下才会主动触发路由检测
|
||||
this.path = path.replace(/^[/]+?/, '')
|
||||
path = path.replace(/^[/]+?/, '')
|
||||
if (mode === 'hash' || ev.state) {
|
||||
this.__check__()
|
||||
this.__check__(path)
|
||||
}
|
||||
}
|
||||
})
|
||||
|
|
@ -115,12 +111,10 @@ class Router {
|
|||
return
|
||||
}
|
||||
|
||||
// hash地址,只管修正前缀即可, 会触发popstate事件
|
||||
if (prefix.test(href)) {
|
||||
this.path = href.replace(prefix, '').trim()
|
||||
} else {
|
||||
// 非hash地址,则阻止默认事件, 产并主动触发跳转
|
||||
// 并强制清除hash
|
||||
// hash地址,只管修正前缀即可, 会触发popstate事件,所以这里只处理非hash的情况
|
||||
if (!prefix.test(href)) {
|
||||
// 非hash地址,则需要阻止默认事件
|
||||
// 并主动触发跳转, 同时强制清除hash
|
||||
ev.preventDefault()
|
||||
this.go(href, true)
|
||||
}
|
||||
|
|
@ -168,18 +162,17 @@ class Router {
|
|||
}
|
||||
|
||||
// 路由检测
|
||||
__check__() {
|
||||
let { allowReload, historyOpen } = this.options
|
||||
if (!allowReload && this.path === this.history) {
|
||||
__check__(path) {
|
||||
let { allowReload } = this.options
|
||||
if (!allowReload && path === this.last) {
|
||||
return
|
||||
}
|
||||
|
||||
if (historyOpen) {
|
||||
this.history = this.path
|
||||
}
|
||||
this.last = this.path
|
||||
this.path = path
|
||||
|
||||
for (let i = 0, route; (route = this.table[i++]); ) {
|
||||
let args = this.path.match(route.regexp)
|
||||
let args = path.match(route.regexp)
|
||||
if (args) {
|
||||
args.shift()
|
||||
return route.callback.apply(route, args)
|
||||
|
|
@ -199,15 +192,17 @@ class Router {
|
|||
return
|
||||
}
|
||||
location.hash = '!/' + path
|
||||
this.path = path
|
||||
} else {
|
||||
let hash = forceCleanHash ? '' : location.hash
|
||||
let search = forceCleanHash ? '' : location.search
|
||||
path = path.replace(/^[/]+?/, '')
|
||||
window.history.pushState({ path }, null, `/${path + search + hash}`)
|
||||
this.path = path
|
||||
if (forceCleanHash) {
|
||||
window.history.pushState({ path }, null, `/${path + search + hash}`)
|
||||
} else {
|
||||
window.history.replaceState({ path }, null, `/${path + search + hash}`)
|
||||
}
|
||||
// pushState不会触发popstate事件,所以要手动触发路由检测
|
||||
this.__check__()
|
||||
this.__check__(path)
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Reference in New Issue