移除template组件标签,统一使用<anot-xx>自定义标签来声明
宇天
parent
5ecec460cb
commit
6ad4c35194
|
|
@ -3367,6 +3367,7 @@ const _Anot = (function() {
|
||||||
(attr.specified && !rnoCollect.test(name)) ||
|
(attr.specified && !rnoCollect.test(name)) ||
|
||||||
specifiedVars.includes(name)
|
specifiedVars.includes(name)
|
||||||
) {
|
) {
|
||||||
|
elem.removeAttribute(name)
|
||||||
if (name.indexOf(ronattr) === 0) {
|
if (name.indexOf(ronattr) === 0) {
|
||||||
name = attr.value.slice(6)
|
name = attr.value.slice(6)
|
||||||
ret[name] = elem[attr.value]
|
ret[name] = elem[attr.value]
|
||||||
|
|
@ -3386,7 +3387,6 @@ const _Anot = (function() {
|
||||||
} else {
|
} else {
|
||||||
ret[camelizeName] = parseData(attr.value)
|
ret[camelizeName] = parseData(attr.value)
|
||||||
}
|
}
|
||||||
elem.removeAttribute(name)
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -3902,17 +3902,9 @@ const _Anot = (function() {
|
||||||
globalHooks.componentWillMount.call(null, vmodel)
|
globalHooks.componentWillMount.call(null, vmodel)
|
||||||
|
|
||||||
var slots = null
|
var slots = null
|
||||||
var isTemplate = true
|
|
||||||
|
|
||||||
if (elem.content) {
|
if (elem.firstElementChild) {
|
||||||
if (elem.content.firstElementChild) {
|
slots = parseSlot(elem.children)
|
||||||
slots = parseSlot(elem.content.children)
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
isTemplate = false
|
|
||||||
if (elem.firstElementChild) {
|
|
||||||
slots = parseSlot(elem.children)
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
Anot.clearHTML(elem)
|
Anot.clearHTML(elem)
|
||||||
|
|
@ -3924,27 +3916,6 @@ const _Anot = (function() {
|
||||||
|
|
||||||
elem.innerHTML = html
|
elem.innerHTML = html
|
||||||
|
|
||||||
if (isTemplate) {
|
|
||||||
// 组件所使用的标签是template,所以必须要要用子元素替换掉
|
|
||||||
var child = elem.content.firstElementChild
|
|
||||||
var nullComponent = DOC.createComment('empty component')
|
|
||||||
elem.parentNode.replaceChild(child || nullComponent, elem)
|
|
||||||
|
|
||||||
// 空组件直接跳出
|
|
||||||
if (!child) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
child.msResolved = 1
|
|
||||||
var cssText = elem.style.cssText
|
|
||||||
var className = elem.className
|
|
||||||
elem = host.element = child
|
|
||||||
elem.style && (elem.style.cssText += ';' + cssText)
|
|
||||||
if (className) {
|
|
||||||
Anot(elem).addClass(className)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
hideProperty(vmodel, '$elem', elem)
|
hideProperty(vmodel, '$elem', elem)
|
||||||
|
|
||||||
Anot.fireDom(elem, 'datasetchanged', {
|
Anot.fireDom(elem, 'datasetchanged', {
|
||||||
|
|
@ -4013,9 +3984,6 @@ const _Anot = (function() {
|
||||||
function isWidget(el) {
|
function isWidget(el) {
|
||||||
//如果是组件,则返回组件的名字
|
//如果是组件,则返回组件的名字
|
||||||
var name = el.nodeName.toLowerCase()
|
var name = el.nodeName.toLowerCase()
|
||||||
if (name === 'template' && el.getAttribute('name')) {
|
|
||||||
return el.getAttribute('name')
|
|
||||||
}
|
|
||||||
if (/^anot-([a-z][a-z0-9\-]*)$/.test(name)) {
|
if (/^anot-([a-z][a-z0-9\-]*)$/.test(name)) {
|
||||||
return RegExp.$1
|
return RegExp.$1
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -3382,6 +3382,7 @@
|
||||||
(attr.specified && !rnoCollect.test(name)) ||
|
(attr.specified && !rnoCollect.test(name)) ||
|
||||||
specifiedVars.includes(name)
|
specifiedVars.includes(name)
|
||||||
) {
|
) {
|
||||||
|
elem.removeAttribute(name)
|
||||||
if (name.indexOf(ronattr) === 0) {
|
if (name.indexOf(ronattr) === 0) {
|
||||||
name = attr.value.slice(6)
|
name = attr.value.slice(6)
|
||||||
ret[name] = elem[attr.value]
|
ret[name] = elem[attr.value]
|
||||||
|
|
@ -3401,7 +3402,6 @@
|
||||||
} else {
|
} else {
|
||||||
ret[camelizeName] = parseData(attr.value)
|
ret[camelizeName] = parseData(attr.value)
|
||||||
}
|
}
|
||||||
elem.removeAttribute(name)
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -3917,17 +3917,9 @@
|
||||||
globalHooks.componentWillMount.call(null, vmodel)
|
globalHooks.componentWillMount.call(null, vmodel)
|
||||||
|
|
||||||
var slots = null
|
var slots = null
|
||||||
var isTemplate = true
|
|
||||||
|
|
||||||
if (elem.content) {
|
if (elem.firstElementChild) {
|
||||||
if (elem.content.firstElementChild) {
|
slots = parseSlot(elem.children)
|
||||||
slots = parseSlot(elem.content.children)
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
isTemplate = false
|
|
||||||
if (elem.firstElementChild) {
|
|
||||||
slots = parseSlot(elem.children)
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
Anot.clearHTML(elem)
|
Anot.clearHTML(elem)
|
||||||
|
|
@ -3939,27 +3931,6 @@
|
||||||
|
|
||||||
elem.innerHTML = html
|
elem.innerHTML = html
|
||||||
|
|
||||||
if (isTemplate) {
|
|
||||||
// 组件所使用的标签是template,所以必须要要用子元素替换掉
|
|
||||||
var child = elem.content.firstElementChild
|
|
||||||
var nullComponent = DOC.createComment('empty component')
|
|
||||||
elem.parentNode.replaceChild(child || nullComponent, elem)
|
|
||||||
|
|
||||||
// 空组件直接跳出
|
|
||||||
if (!child) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
child.msResolved = 1
|
|
||||||
var cssText = elem.style.cssText
|
|
||||||
var className = elem.className
|
|
||||||
elem = host.element = child
|
|
||||||
elem.style && (elem.style.cssText += ';' + cssText)
|
|
||||||
if (className) {
|
|
||||||
Anot(elem).addClass(className)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
hideProperty(vmodel, '$elem', elem)
|
hideProperty(vmodel, '$elem', elem)
|
||||||
|
|
||||||
Anot.fireDom(elem, 'datasetchanged', {
|
Anot.fireDom(elem, 'datasetchanged', {
|
||||||
|
|
@ -4028,9 +3999,6 @@
|
||||||
function isWidget(el) {
|
function isWidget(el) {
|
||||||
//如果是组件,则返回组件的名字
|
//如果是组件,则返回组件的名字
|
||||||
var name = el.nodeName.toLowerCase()
|
var name = el.nodeName.toLowerCase()
|
||||||
if (name === 'template' && el.getAttribute('name')) {
|
|
||||||
return el.getAttribute('name')
|
|
||||||
}
|
|
||||||
if (/^anot-([a-z][a-z0-9\-]*)$/.test(name)) {
|
if (/^anot-([a-z][a-z0-9\-]*)$/.test(name)) {
|
||||||
return RegExp.$1
|
return RegExp.$1
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -3367,6 +3367,7 @@ const _Anot = (function() {
|
||||||
(attr.specified && !rnoCollect.test(name)) ||
|
(attr.specified && !rnoCollect.test(name)) ||
|
||||||
specifiedVars.includes(name)
|
specifiedVars.includes(name)
|
||||||
) {
|
) {
|
||||||
|
elem.removeAttribute(name)
|
||||||
if (name.indexOf(ronattr) === 0) {
|
if (name.indexOf(ronattr) === 0) {
|
||||||
name = attr.value.slice(6)
|
name = attr.value.slice(6)
|
||||||
ret[name] = elem[attr.value]
|
ret[name] = elem[attr.value]
|
||||||
|
|
@ -3386,7 +3387,6 @@ const _Anot = (function() {
|
||||||
} else {
|
} else {
|
||||||
ret[camelizeName] = parseData(attr.value)
|
ret[camelizeName] = parseData(attr.value)
|
||||||
}
|
}
|
||||||
elem.removeAttribute(name)
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -3902,17 +3902,9 @@ const _Anot = (function() {
|
||||||
globalHooks.componentWillMount.call(null, vmodel)
|
globalHooks.componentWillMount.call(null, vmodel)
|
||||||
|
|
||||||
var slots = null
|
var slots = null
|
||||||
var isTemplate = true
|
|
||||||
|
|
||||||
if (elem.content) {
|
if (elem.firstElementChild) {
|
||||||
if (elem.content.firstElementChild) {
|
slots = parseSlot(elem.children)
|
||||||
slots = parseSlot(elem.content.children)
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
isTemplate = false
|
|
||||||
if (elem.firstElementChild) {
|
|
||||||
slots = parseSlot(elem.children)
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
Anot.clearHTML(elem)
|
Anot.clearHTML(elem)
|
||||||
|
|
@ -3924,27 +3916,6 @@ const _Anot = (function() {
|
||||||
|
|
||||||
elem.innerHTML = html
|
elem.innerHTML = html
|
||||||
|
|
||||||
if (isTemplate) {
|
|
||||||
// 组件所使用的标签是template,所以必须要要用子元素替换掉
|
|
||||||
var child = elem.content.firstElementChild
|
|
||||||
var nullComponent = DOC.createComment('empty component')
|
|
||||||
elem.parentNode.replaceChild(child || nullComponent, elem)
|
|
||||||
|
|
||||||
// 空组件直接跳出
|
|
||||||
if (!child) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
child.msResolved = 1
|
|
||||||
var cssText = elem.style.cssText
|
|
||||||
var className = elem.className
|
|
||||||
elem = host.element = child
|
|
||||||
elem.style && (elem.style.cssText += ';' + cssText)
|
|
||||||
if (className) {
|
|
||||||
Anot(elem).addClass(className)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
hideProperty(vmodel, '$elem', elem)
|
hideProperty(vmodel, '$elem', elem)
|
||||||
|
|
||||||
Anot.fireDom(elem, 'datasetchanged', {
|
Anot.fireDom(elem, 'datasetchanged', {
|
||||||
|
|
@ -4013,9 +3984,6 @@ const _Anot = (function() {
|
||||||
function isWidget(el) {
|
function isWidget(el) {
|
||||||
//如果是组件,则返回组件的名字
|
//如果是组件,则返回组件的名字
|
||||||
var name = el.nodeName.toLowerCase()
|
var name = el.nodeName.toLowerCase()
|
||||||
if (name === 'template' && el.getAttribute('name')) {
|
|
||||||
return el.getAttribute('name')
|
|
||||||
}
|
|
||||||
if (/^anot-([a-z][a-z0-9\-]*)$/.test(name)) {
|
if (/^anot-([a-z][a-z0-9\-]*)$/.test(name)) {
|
||||||
return RegExp.$1
|
return RegExp.$1
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -3382,6 +3382,7 @@
|
||||||
(attr.specified && !rnoCollect.test(name)) ||
|
(attr.specified && !rnoCollect.test(name)) ||
|
||||||
specifiedVars.includes(name)
|
specifiedVars.includes(name)
|
||||||
) {
|
) {
|
||||||
|
elem.removeAttribute(name)
|
||||||
if (name.indexOf(ronattr) === 0) {
|
if (name.indexOf(ronattr) === 0) {
|
||||||
name = attr.value.slice(6)
|
name = attr.value.slice(6)
|
||||||
ret[name] = elem[attr.value]
|
ret[name] = elem[attr.value]
|
||||||
|
|
@ -3401,7 +3402,6 @@
|
||||||
} else {
|
} else {
|
||||||
ret[camelizeName] = parseData(attr.value)
|
ret[camelizeName] = parseData(attr.value)
|
||||||
}
|
}
|
||||||
elem.removeAttribute(name)
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -3917,17 +3917,9 @@
|
||||||
globalHooks.componentWillMount.call(null, vmodel)
|
globalHooks.componentWillMount.call(null, vmodel)
|
||||||
|
|
||||||
var slots = null
|
var slots = null
|
||||||
var isTemplate = true
|
|
||||||
|
|
||||||
if (elem.content) {
|
if (elem.firstElementChild) {
|
||||||
if (elem.content.firstElementChild) {
|
slots = parseSlot(elem.children)
|
||||||
slots = parseSlot(elem.content.children)
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
isTemplate = false
|
|
||||||
if (elem.firstElementChild) {
|
|
||||||
slots = parseSlot(elem.children)
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
Anot.clearHTML(elem)
|
Anot.clearHTML(elem)
|
||||||
|
|
@ -3939,27 +3931,6 @@
|
||||||
|
|
||||||
elem.innerHTML = html
|
elem.innerHTML = html
|
||||||
|
|
||||||
if (isTemplate) {
|
|
||||||
// 组件所使用的标签是template,所以必须要要用子元素替换掉
|
|
||||||
var child = elem.content.firstElementChild
|
|
||||||
var nullComponent = DOC.createComment('empty component')
|
|
||||||
elem.parentNode.replaceChild(child || nullComponent, elem)
|
|
||||||
|
|
||||||
// 空组件直接跳出
|
|
||||||
if (!child) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
child.msResolved = 1
|
|
||||||
var cssText = elem.style.cssText
|
|
||||||
var className = elem.className
|
|
||||||
elem = host.element = child
|
|
||||||
elem.style && (elem.style.cssText += ';' + cssText)
|
|
||||||
if (className) {
|
|
||||||
Anot(elem).addClass(className)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
hideProperty(vmodel, '$elem', elem)
|
hideProperty(vmodel, '$elem', elem)
|
||||||
|
|
||||||
Anot.fireDom(elem, 'datasetchanged', {
|
Anot.fireDom(elem, 'datasetchanged', {
|
||||||
|
|
@ -4028,9 +3999,6 @@
|
||||||
function isWidget(el) {
|
function isWidget(el) {
|
||||||
//如果是组件,则返回组件的名字
|
//如果是组件,则返回组件的名字
|
||||||
var name = el.nodeName.toLowerCase()
|
var name = el.nodeName.toLowerCase()
|
||||||
if (name === 'template' && el.getAttribute('name')) {
|
|
||||||
return el.getAttribute('name')
|
|
||||||
}
|
|
||||||
if (/^anot-([a-z][a-z0-9\-]*)$/.test(name)) {
|
if (/^anot-([a-z][a-z0-9\-]*)$/.test(name)) {
|
||||||
return RegExp.$1
|
return RegExp.$1
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -123,78 +123,80 @@ Anot.ui.datepicker = '1.0.0'
|
||||||
|
|
||||||
export default Anot.component('datepicker', {
|
export default Anot.component('datepicker', {
|
||||||
render: function() {
|
render: function() {
|
||||||
return `<div
|
return `
|
||||||
class="do-datepicker do-fn-noselect"
|
<label class="date-input">
|
||||||
:class="{{props.size}}"
|
<input
|
||||||
:css="{width: props.width, height: props.height, 'line-height': props.height + 'px'}"
|
class="input"
|
||||||
:click="cancelBubble">
|
type="text"
|
||||||
|
readonly
|
||||||
|
:duplex="value"
|
||||||
|
:focus="onFocus"
|
||||||
|
:css="{'border-radius': props.radius}"
|
||||||
|
:attr-placeholder="props.placeholder || '请选择日期'"
|
||||||
|
:attr-disabled="disabled">
|
||||||
|
<i class="do-icon-calendar icon"></i>
|
||||||
|
</label>
|
||||||
|
|
||||||
<label class="date-input">
|
<dl
|
||||||
<input
|
class="calendar-box"
|
||||||
class="input"
|
:if="showCalendar">
|
||||||
type="text"
|
|
||||||
readonly
|
|
||||||
:duplex="value"
|
|
||||||
:focus="onFocus"
|
|
||||||
:css="{'border-radius': props.radius}"
|
|
||||||
:attr-placeholder="props.placeholder || '请选择日期'"
|
|
||||||
:attr-disabled="disabled">
|
|
||||||
<i class="do-icon-calendar icon"></i>
|
|
||||||
</label>
|
|
||||||
|
|
||||||
<dl
|
<dt class="contrl">
|
||||||
class="calendar-box"
|
<a class="do-icon-dbl-left" :click="turn(1, -1)"></a>
|
||||||
:if="showCalendar">
|
<a class="do-icon-left prev-month" :click="turn(0, -1)"></a>
|
||||||
|
<a class="do-icon-right next-month" :click="turn(0, 1)"></a>
|
||||||
<dt class="contrl">
|
<a class="do-icon-dbl-right next-year" :click="turn(1, 1)"></a>
|
||||||
<a class="do-icon-dbl-left" :click="turn(1, -1)"></a>
|
<span
|
||||||
<a class="do-icon-left prev-month" :click="turn(0, -1)"></a>
|
title="双击回到今天"
|
||||||
<a class="do-icon-right next-month" :click="turn(0, 1)"></a>
|
:dblclick="back2today"
|
||||||
<a class="do-icon-dbl-right next-year" :click="turn(1, 1)"></a>
|
:text="calendar.year + '-' + numberFormat(calendar.month)"></span>
|
||||||
<span
|
</dt>
|
||||||
title="双击回到今天"
|
<dd class="table">
|
||||||
:dblclick="back2today"
|
<section class="thead">
|
||||||
:text="calendar.year + '-' + numberFormat(calendar.month)"></span>
|
<span class="td">日</span>
|
||||||
</dt>
|
<span class="td">一</span>
|
||||||
<dd class="table">
|
<span class="td">二</span>
|
||||||
<section class="thead">
|
<span class="td">三</span>
|
||||||
<span class="td">日</span>
|
<span class="td">四</span>
|
||||||
<span class="td">一</span>
|
<span class="td">五</span>
|
||||||
<span class="td">二</span>
|
<span class="td">六</span>
|
||||||
<span class="td">三</span>
|
</section>
|
||||||
<span class="td">四</span>
|
<section class="tr do-fn-cl">
|
||||||
<span class="td">五</span>
|
<span class="td"
|
||||||
<span class="td">六</span>
|
:class="{weeken:el.weeken, disabled: el.disabled, selected: el.selected}"
|
||||||
</section>
|
:repeat="calendar.list"
|
||||||
<section class="tr do-fn-cl">
|
:click="pick(el)"
|
||||||
<span class="td"
|
:text="el.day"></span>
|
||||||
:class="{weeken:el.weeken, disabled: el.disabled, selected: el.selected}"
|
</section>
|
||||||
:repeat="calendar.list"
|
</dd>
|
||||||
:click="pick(el)"
|
<dd class="time" :if="props.showTime">
|
||||||
:text="el.day"></span>
|
<label>
|
||||||
</section>
|
<input type="text" :duplex-number="calendar.hour"> 时
|
||||||
</dd>
|
</label>
|
||||||
<dd class="time" :if="props.showTime">
|
<label>
|
||||||
<label>
|
<input type="text" :duplex-number="calendar.minute"> 分
|
||||||
<input type="text" :duplex-number="calendar.hour"> 时
|
</label>
|
||||||
</label>
|
<label>
|
||||||
<label>
|
<input type="text" :duplex-number="calendar.second"> 秒
|
||||||
<input type="text" :duplex-number="calendar.minute"> 分
|
</label>
|
||||||
</label>
|
<a href="javascript:;" class="now" :click="now">现在</a>
|
||||||
<label>
|
</dd>
|
||||||
<input type="text" :duplex-number="calendar.second"> 秒
|
<dt class="confirm">
|
||||||
</label>
|
<a :click="close" class="cancel">取消</a>
|
||||||
<a href="javascript:;" class="now" :click="now">现在</a>
|
<a :click="onConfirm" class="ok">确定</a>
|
||||||
</dd>
|
</dt>
|
||||||
<dt class="confirm">
|
<dd class="tips" :if="tips" :text="tips"></dd>
|
||||||
<a :click="close" class="cancel">取消</a>
|
</dl>`
|
||||||
<a :click="onConfirm" class="ok">确定</a>
|
|
||||||
</dt>
|
|
||||||
<dd class="tips" :if="tips" :text="tips"></dd>
|
|
||||||
</dl>
|
|
||||||
</div>`
|
|
||||||
},
|
},
|
||||||
__init__: function(props, state, next) {
|
__init__: function(props, state, next) {
|
||||||
|
this.classList.add('do-datepicker')
|
||||||
|
this.classList.add('do-fn-noselect')
|
||||||
|
this.classList.add(props.size || 'mini')
|
||||||
|
this.setAttribute(
|
||||||
|
':css',
|
||||||
|
"{width: props.width, height: props.height, 'line-height': props.height + 'px'}"
|
||||||
|
)
|
||||||
|
this.setAttribute(':click', 'cancelBubble')
|
||||||
// 日期格式化, 不显示时间时, 默认会调用过滤器的格式'Y-m-d H:i:s'
|
// 日期格式化, 不显示时间时, 默认会调用过滤器的格式'Y-m-d H:i:s'
|
||||||
if (!props.showTime && !props.format) {
|
if (!props.showTime && !props.format) {
|
||||||
props.format = 'Y-m-d'
|
props.format = 'Y-m-d'
|
||||||
|
|
|
||||||
|
|
@ -7,7 +7,7 @@
|
||||||
*/
|
*/
|
||||||
@import "var.scss";
|
@import "var.scss";
|
||||||
|
|
||||||
.do-datepicker { position:relative;width:100%; height:100%;color:nth($cgr, 1);font-size:14px;
|
.do-datepicker { position:relative;display:inline-block;width:100%; height:100%;color:nth($cgr, 1);font-size:14px;
|
||||||
|
|
||||||
&.mini {width:155px;height:30px;line-height:30px;}
|
&.mini {width:155px;height:30px;line-height:30px;}
|
||||||
&.medium {width:175px;height:35px;line-height:35px;}
|
&.medium {width:175px;height:35px;line-height:35px;}
|
||||||
|
|
|
||||||
|
|
@ -264,10 +264,20 @@ class MEObject {
|
||||||
|
|
||||||
Anot.component('meditor', {
|
Anot.component('meditor', {
|
||||||
__init__: function(props, state, next) {
|
__init__: function(props, state, next) {
|
||||||
|
this.classList.add('do-meditor')
|
||||||
|
this.classList.add('do-meditor__font')
|
||||||
|
|
||||||
|
this.setAttribute(':visible', 'editorVisible')
|
||||||
|
this.setAttribute(':css', '{height: height}')
|
||||||
|
this.setAttribute(':class', '{fullscreen: fullscreen, preview: preview}')
|
||||||
if (props.hasOwnProperty('$show')) {
|
if (props.hasOwnProperty('$show')) {
|
||||||
state.editorVisible = props.$show
|
state.editorVisible = props.$show
|
||||||
delete props.$show
|
delete props.$show
|
||||||
}
|
}
|
||||||
|
if (props.height && props.height > 180) {
|
||||||
|
state.height = props.height
|
||||||
|
delete props.height
|
||||||
|
}
|
||||||
next()
|
next()
|
||||||
},
|
},
|
||||||
render: function() {
|
render: function() {
|
||||||
|
|
@ -276,23 +286,18 @@ Anot.component('meditor', {
|
||||||
delete this.toolbar
|
delete this.toolbar
|
||||||
|
|
||||||
return `
|
return `
|
||||||
<div
|
<div class="tool-bar do-fn-noselect">${toolbar}</div>
|
||||||
class="do-meditor do-meditor__font"
|
<textarea
|
||||||
:visible="editorVisible"
|
ref="editor"
|
||||||
:class="{fullscreen: fullscreen, preview: preview}">
|
class="editor-body"
|
||||||
<div class="tool-bar do-fn-noselect">${toolbar}</div>
|
spellcheck="false"
|
||||||
<textarea
|
:attr="{disabled: disabled}"
|
||||||
ref="editor"
|
:duplex="plainTxt"></textarea>
|
||||||
class="editor-body"
|
<content
|
||||||
spellcheck="false"
|
ref="preview"
|
||||||
:attr="{disabled: disabled}"
|
class="md-preview do-marked-theme"
|
||||||
:duplex="plainTxt"></textarea>
|
:visible="preview"
|
||||||
<content
|
:html="htmlTxt"></content>
|
||||||
ref="preview"
|
|
||||||
class="md-preview do-marked-theme"
|
|
||||||
:visible="preview"
|
|
||||||
:html="htmlTxt"></content>
|
|
||||||
</div>
|
|
||||||
`
|
`
|
||||||
},
|
},
|
||||||
componentDidMount: function(vm, elem) {
|
componentDidMount: function(vm, elem) {
|
||||||
|
|
@ -360,6 +365,7 @@ Anot.component('meditor', {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
state: {
|
state: {
|
||||||
|
height: 180,
|
||||||
disabled: false, //禁用编辑器
|
disabled: false, //禁用编辑器
|
||||||
fullscreen: false, //是否全屏
|
fullscreen: false, //是否全屏
|
||||||
preview: true, //是否显示预览
|
preview: true, //是否显示预览
|
||||||
|
|
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -87,11 +87,14 @@ const tmpls = {
|
||||||
jumper: `<div class="input-box">前往
|
jumper: `<div class="input-box">前往
|
||||||
<input type="text" :duplex="inputPage" :keyup="setPage(null, $event)"> 页
|
<input type="text" :duplex="inputPage" :keyup="setPage(null, $event)"> 页
|
||||||
</div>`,
|
</div>`,
|
||||||
slot: `<slot name="extra" />`
|
slot: ''
|
||||||
}
|
}
|
||||||
|
|
||||||
export default Anot.component('pager', {
|
export default Anot.component('pager', {
|
||||||
__init__: function(props, state, next) {
|
__init__: function(props, state, next) {
|
||||||
|
this.classList.add('do-pager')
|
||||||
|
this.classList.add('do-fn-noselect')
|
||||||
|
this.setAttribute(':class', "{{classList.join(' ')}}")
|
||||||
props.theme = +props.theme || 1
|
props.theme = +props.theme || 1
|
||||||
if (props.simpleMode) {
|
if (props.simpleMode) {
|
||||||
props.theme = 1
|
props.theme = 1
|
||||||
|
|
@ -138,18 +141,13 @@ export default Anot.component('pager', {
|
||||||
layout = layout.map(it => {
|
layout = layout.map(it => {
|
||||||
if (it === 'slot') {
|
if (it === 'slot') {
|
||||||
if (slots && slots.extra) {
|
if (slots && slots.extra) {
|
||||||
return slots.extra
|
return slots.extra[0]
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
return tmpls[it] || ''
|
return tmpls[it] || ''
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
return `
|
return layout.join('\n')
|
||||||
<div
|
|
||||||
class="do-pager do-fn-noselect"
|
|
||||||
:class="{{classList.join(' ')}}">
|
|
||||||
${layout.join('\n')}
|
|
||||||
</div>`
|
|
||||||
},
|
},
|
||||||
componentWillMount: function() {
|
componentWillMount: function() {
|
||||||
const { currPage, totalPage, props } = this
|
const { currPage, totalPage, props } = this
|
||||||
|
|
|
||||||
|
|
@ -8,7 +8,7 @@
|
||||||
|
|
||||||
@import "var.scss";
|
@import "var.scss";
|
||||||
|
|
||||||
.do-pager {height:auto;text-align:center;font-size:14px;color: nth($cgr, 1);
|
.do-pager {display:block;height:auto;text-align:center;font-size:14px;color: nth($cgr, 1);
|
||||||
|
|
||||||
&.mini {line-height:30px;
|
&.mini {line-height:30px;
|
||||||
.button,.page {min-width:30px;height:30px}
|
.button,.page {min-width:30px;height:30px}
|
||||||
|
|
|
||||||
|
|
@ -41,41 +41,40 @@ export default Anot.component('tree', {
|
||||||
return null
|
return null
|
||||||
}
|
}
|
||||||
return `
|
return `
|
||||||
<ul class="do-tree" :if="list.size()">
|
<section class="do-tree__item" :repeat="list" :class="{open: el.open, dir: el[props.children]}">
|
||||||
<li :repeat="list" :class="{open: el.open, dir: el[props.children]}">
|
<em
|
||||||
<em
|
:class="{
|
||||||
:class="{
|
'do-icon-txt': !el.open && !el[props.children],
|
||||||
'do-icon-txt': !el.open && !el[props.children],
|
'do-icon-folder-close': el[props.children] && !el.open,
|
||||||
'do-icon-folder-close': el[props.children] && !el.open,
|
'do-icon-folder-open': el[props.children] && el.open,
|
||||||
'do-icon-folder-open': el[props.children] && el.open,
|
}"
|
||||||
}"
|
:click="__toggle(el)"></em>
|
||||||
:click="__toggle(el)"></em>
|
<span
|
||||||
<span
|
class="checkbox"
|
||||||
class="checkbox"
|
:class="{'do-icon-get': el.__checked__}"
|
||||||
:class="{'do-icon-get': el.__checked__}"
|
:if="multiCheck"
|
||||||
:if="multiCheck"
|
:click="__check(el, null, $event)"></span>
|
||||||
:click="__check(el, null, $event)"></span>
|
<span
|
||||||
<span
|
:click="__select(el)"
|
||||||
:click="__select(el)"
|
:class="{active: el[props.id] === currItem}"
|
||||||
:class="{active: el[props.id] === currItem}"
|
:text="el[props.label]"></span>
|
||||||
:text="el[props.label]"></span>
|
<anot-tree
|
||||||
<template
|
:attr="{
|
||||||
name="tree"
|
'multi-check': multiCheck,
|
||||||
:attr="{
|
list: el[props.children],
|
||||||
'multi-check': multiCheck,
|
'@onActive': props.onActive,
|
||||||
list: el[props.children],
|
'@onPick': __check,
|
||||||
'@onActive': props.onActive,
|
id: props.id,
|
||||||
'@onPick': __check,
|
label: props.label,
|
||||||
id: props.id,
|
parent: props.parent,
|
||||||
label: props.label,
|
children: props.children,
|
||||||
parent: props.parent,
|
}"></anot-tree>
|
||||||
children: props.children,
|
</section>
|
||||||
}"></template>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
`
|
`
|
||||||
},
|
},
|
||||||
__init__: function(props, state, next) {
|
__init__: function(props, state, next) {
|
||||||
|
this.classList.add('do-tree')
|
||||||
|
this.setAttribute(':if', 'list.size()')
|
||||||
props.id = props.id || 'id'
|
props.id = props.id || 'id'
|
||||||
props.label = props.label || 'label'
|
props.label = props.label || 'label'
|
||||||
props.parent = props.parent || 'parent'
|
props.parent = props.parent || 'parent'
|
||||||
|
|
|
||||||
|
|
@ -9,19 +9,22 @@
|
||||||
@import '../../css/var.scss';
|
@import '../../css/var.scss';
|
||||||
|
|
||||||
|
|
||||||
.do-tree {overflow:hidden;overflow-y:auto;position:relative;width:100%;height:100%;line-height:36px;font-size:15px;color:nth($cgr, 1);
|
.do-tree {overflow:hidden;overflow-y:auto;position:relative;display:inline-block;width:100%;height:100%;line-height:36px;font-size:15px;color:nth($cgr, 1);
|
||||||
|
|
||||||
ul {width:100%;height:auto;}
|
&__item {overflow:hidden; min-height:35px;margin:1px 0; white-space:nowrap; text-overflow:ellipsis;
|
||||||
li {overflow:hidden; min-height:35px;margin:1px 0; white-space:nowrap; text-overflow:ellipsis}
|
|
||||||
|
.do-tree {display:none;margin-left:20px;}
|
||||||
|
|
||||||
li ul {display:none;margin-left:20px;}
|
em,span {display:inline-block;cursor:pointer;color:nth($cgr, 2);}
|
||||||
li.open>ul {display:block;}
|
em {float:left;padding:0 5px;font-size:20px;}
|
||||||
|
|
||||||
li em,
|
span {
|
||||||
li span {display:inline-block;cursor:pointer;color:nth($cgr, 2);}
|
|
||||||
li em {float:left;padding:0 5px;font-size:20px;}
|
&:hover {color:nth($cgr, 2);}
|
||||||
li span:hover {color:nth($cgr, 2);}
|
&.active {color:nth($cgr, 3);font-weight:bold;}
|
||||||
li span.active {color:nth($cgr, 3);font-weight:bold;}
|
&.checkbox {float:left;position:relative;width:20px;height:20px;margin:8px 5px 8px 0;line-height:18px;border:1px solid nth($cgr, 1);border-radius:3px; font-size:20px;text-align:center;}
|
||||||
li span.checkbox {float:left;position:relative;width:20px;height:20px;margin:8px 5px 8px 0;line-height:18px;border:1px solid nth($cgr, 1);border-radius:3px; font-size:20px;text-align:center;
|
}
|
||||||
}
|
}
|
||||||
|
&__item.open>.do-tree {display:block;}
|
||||||
|
|
||||||
}
|
}
|
||||||
Reference in New Issue