layer组件增加iframe类型;优化meditor的表情插入
parent
775e5d6f66
commit
565db7ee12
|
@ -10,7 +10,7 @@
|
||||||
import 'drag/index'
|
import 'drag/index'
|
||||||
import './skin/default.scss'
|
import './skin/default.scss'
|
||||||
|
|
||||||
Anot.ui.layer = '1.0.0-base'
|
Anot.ui.layer = '1.0.0-normal'
|
||||||
|
|
||||||
let layerDom = {}
|
let layerDom = {}
|
||||||
let layerObj = {}
|
let layerObj = {}
|
||||||
|
@ -196,9 +196,26 @@ class __layer__ {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
//base版没有iframe类型
|
// iframe类型补一个自适应高度的方法
|
||||||
if (this.init.state.type === 4) {
|
if (this.init.state.type === 4) {
|
||||||
this.init.state.type = 7
|
this.init.methods.autoSize = function() {
|
||||||
|
let { layer, frame } = this.$refs
|
||||||
|
frame.onload = function() {
|
||||||
|
setTimeout(function() {
|
||||||
|
try {
|
||||||
|
let $body = frame.contentWindow.document.body
|
||||||
|
let { clientWidth, clientHeight } = $body
|
||||||
|
Anot(layer).css({
|
||||||
|
width: clientWidth,
|
||||||
|
height: clientHeight,
|
||||||
|
marginLeft: -clientWidth / 2,
|
||||||
|
marginTop: -clientHeight / 2
|
||||||
|
})
|
||||||
|
Anot(frame).css({ height: clientHeight })
|
||||||
|
} catch (err) {}
|
||||||
|
}, 500)
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
return this
|
return this
|
||||||
}
|
}
|
||||||
|
@ -226,6 +243,10 @@ class __layer__ {
|
||||||
layBox.classList.add('layer-box')
|
layBox.classList.add('layer-box')
|
||||||
layBox.classList.add('skin-' + state.skin)
|
layBox.classList.add('skin-' + state.skin)
|
||||||
|
|
||||||
|
if (state.extraClass) {
|
||||||
|
layBox.classList.add(state.extraClass)
|
||||||
|
delete state.extraClass
|
||||||
|
}
|
||||||
if (typeof state.shift === 'string') {
|
if (typeof state.shift === 'string') {
|
||||||
layBox.classList.add('__' + state.shift)
|
layBox.classList.add('__' + state.shift)
|
||||||
} else {
|
} else {
|
||||||
|
@ -376,6 +397,7 @@ class __layer__ {
|
||||||
}
|
}
|
||||||
|
|
||||||
show() {
|
show() {
|
||||||
|
let vm = this.vm
|
||||||
let { state, $id } = this.init
|
let { state, $id } = this.init
|
||||||
let container = state.container
|
let container = state.container
|
||||||
|
|
||||||
|
@ -498,7 +520,7 @@ class __layer__ {
|
||||||
}
|
}
|
||||||
|
|
||||||
const _layer = {
|
const _layer = {
|
||||||
alert: function(content, title, cb) {
|
alert(content, title, cb) {
|
||||||
let opt = { content, fixed: true }
|
let opt = { content, fixed: true }
|
||||||
|
|
||||||
if (typeof title === 'function') {
|
if (typeof title === 'function') {
|
||||||
|
@ -513,7 +535,7 @@ const _layer = {
|
||||||
}
|
}
|
||||||
return _layer.open(opt)
|
return _layer.open(opt)
|
||||||
},
|
},
|
||||||
confirm: function(content, title, yescb, nocb) {
|
confirm(content, title, yescb, nocb) {
|
||||||
let opt = { content, fixed: true, type: 2 }
|
let opt = { content, fixed: true, type: 2 }
|
||||||
|
|
||||||
if (typeof title === 'function') {
|
if (typeof title === 'function') {
|
||||||
|
@ -534,7 +556,17 @@ const _layer = {
|
||||||
}
|
}
|
||||||
return _layer.open(opt)
|
return _layer.open(opt)
|
||||||
},
|
},
|
||||||
toast: function(txt, type = 'info', timeout = 2500) {
|
frame(url, extra = {}) {
|
||||||
|
let opt = {
|
||||||
|
content: `<iframe ref="frame" class="frame-box" src="${url}"></iframe>`,
|
||||||
|
menubar: false,
|
||||||
|
maskClose: true,
|
||||||
|
type: 4,
|
||||||
|
...extra
|
||||||
|
}
|
||||||
|
return _layer.open(opt)
|
||||||
|
},
|
||||||
|
toast(txt, type = 'info', timeout = 2500) {
|
||||||
if (typeof type === 'number') {
|
if (typeof type === 'number') {
|
||||||
timeout = type
|
timeout = type
|
||||||
type = 'info'
|
type = 'info'
|
||||||
|
@ -569,7 +601,7 @@ const _layer = {
|
||||||
|
|
||||||
return _layer.open(opt)
|
return _layer.open(opt)
|
||||||
},
|
},
|
||||||
loading: function(style, container, cb) {
|
loading(style, container, cb) {
|
||||||
style = style >>> 0
|
style = style >>> 0
|
||||||
style = style < 1 ? 1 : style > 5 ? 5 : style
|
style = style < 1 ? 1 : style > 5 ? 5 : style
|
||||||
|
|
||||||
|
@ -595,7 +627,7 @@ const _layer = {
|
||||||
fixed: true
|
fixed: true
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
tips: function(content, container, opt = {}) {
|
tips(content, container, opt = {}) {
|
||||||
if (!(container instanceof HTMLElement)) {
|
if (!(container instanceof HTMLElement)) {
|
||||||
return Anot.error('layer "tips" require a DOM object')
|
return Anot.error('layer "tips" require a DOM object')
|
||||||
}
|
}
|
||||||
|
@ -617,7 +649,7 @@ const _layer = {
|
||||||
})
|
})
|
||||||
return _layer.open(opt)
|
return _layer.open(opt)
|
||||||
},
|
},
|
||||||
prompt: function(title, yescb) {
|
prompt(title, yescb) {
|
||||||
if (typeof yescb !== 'function') {
|
if (typeof yescb !== 'function') {
|
||||||
return console.error(
|
return console.error(
|
||||||
'argument [callback] requires a function, but ' +
|
'argument [callback] requires a function, but ' +
|
||||||
|
@ -636,7 +668,7 @@ const _layer = {
|
||||||
return _layer.open(opt)
|
return _layer.open(opt)
|
||||||
},
|
},
|
||||||
close: close,
|
close: close,
|
||||||
open: function(opt) {
|
open(opt) {
|
||||||
if (typeof opt === 'string') {
|
if (typeof opt === 'string') {
|
||||||
opt = 'layerwrap-' + opt
|
opt = 'layerwrap-' + opt
|
||||||
if (!layerObj[opt]) {
|
if (!layerObj[opt]) {
|
||||||
|
|
|
@ -74,6 +74,12 @@
|
||||||
&.type-3 {max-width:600px;min-width:300px;}
|
&.type-3 {max-width:600px;min-width:300px;}
|
||||||
|
|
||||||
|
|
||||||
|
&.type-4 {padding:0;
|
||||||
|
|
||||||
|
.layer-content {padding:0;}
|
||||||
|
.frame-box {width:100%;height:100%;margin:0;padding:0;border:0;resize: none;}
|
||||||
|
}
|
||||||
|
|
||||||
/* tips类弹层(type 5) */
|
/* tips类弹层(type 5) */
|
||||||
&.type-5 {visibility:hidden;position:fixed;z-index:65534;min-width:75px;max-width:600px;padding:10px;line-height:1.5;color:#fff;background:rgba(0,0,0,.5);box-shadow:none;
|
&.type-5 {visibility:hidden;position:fixed;z-index:65534;min-width:75px;max-width:600px;padding:10px;line-height:1.5;color:#fff;background:rgba(0,0,0,.5);box-shadow:none;
|
||||||
|
|
||||||
|
|
|
@ -245,7 +245,6 @@ const addon = {
|
||||||
</ul>`,
|
</ul>`,
|
||||||
insert: function(val) {
|
insert: function(val) {
|
||||||
that.insert(val, false)
|
that.insert(val, false)
|
||||||
this.close()
|
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
|
Reference in New Issue