85 lines
2.2 KiB
JavaScript
85 lines
2.2 KiB
JavaScript
|
//类名定义， :class="xx:yy" :class="{xx: yy}" :class="xx" :class="{{xx}}"
|
||
|
|
Anot.directive('class', {
|
||
|
|
init: function(binding) {
|
||
|
|
var expr = []
|
||
|
|
if (!/^\{.*\}$/.test(binding.expr)) {
|
||
|
|
expr = binding.expr.split(':')
|
||
|
|
expr[1] = (expr[1] && expr[1].trim()) || 'true'
|
||
|
|
var arr = expr[0].split(/\s+/)
|
||
|
|
binding.expr =
|
||
|
|
'{' +
|
||
|
|
arr
|
||
|
|
.map(function(it) {
|
||
|
|
return it + ': ' + expr[1]
|
||
|
|
})
|
||
|
|
.join(', ') +
|
||
|
|
'}'
|
||
|
|
} else if (/^\{\{.*\}\}$/.test(binding.expr)) {
|
||
|
|
binding.expr = binding.expr.slice(2, -2)
|
||
|
|
}
|
||
|
|
|
||
|
|
if (binding.type === 'hover' || binding.type === 'active') {
|
||
|
|
//确保只绑定一次
|
||
|
|
if (!binding.hasBindEvent) {
|
||
|
|
var elem = binding.element
|
||
|
|
var $elem = Anot(elem)
|
||
|
|
var activate = 'mouseenter' //在移出移入时切换类名
|
||
|
|
var abandon = 'mouseleave'
|
||
|
|
if (binding.type === 'active') {
|
||
|
|
//在聚焦失焦中切换类名
|
||
|
|
elem.tabIndex = elem.tabIndex || -1
|
||
|
|
activate = 'mousedown'
|
||
|
|
abandon = 'mouseup'
|
||
|
|
var fn0 = $elem.bind('mouseleave', function() {
|
||
|
|
$elem.removeClass(expr[0])
|
||
|
|
})
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
var fn1 = $elem.bind(activate, function() {
|
||
|
|
$elem.addClass(expr[0])
|
||
|
|
})
|
||
|
|
var fn2 = $elem.bind(abandon, function() {
|
||
|
|
$elem.removeClass(expr[0])
|
||
|
|
})
|
||
|
|
binding.rollback = function() {
|
||
|
|
$elem.unbind('mouseleave', fn0)
|
||
|
|
$elem.unbind(activate, fn1)
|
||
|
|
$elem.unbind(abandon, fn2)
|
||
|
|
}
|
||
|
|
binding.hasBindEvent = true
|
||
|
|
}
|
||
|
|
},
|
||
|
|
update: function(val) {
|
||
|
|
if (this.type !== 'class') {
|
||
|
|
return
|
||
|
|
}
|
||
|
|
var obj = val
|
||
|
|
if (!obj || this.param)
|
||
|
|
return log(
|
||
|
|
'class指令语法错误 %c %s="%s"',
|
||
|
|
'color:#f00',
|
||
|
|
this.name,
|
||
|
|
this.expr
|
||
|
|
)
|
||
|
|
|
||
|
|
if (typeof obj === 'string') {
|
||
|
|
obj = {}
|
||
|
|
obj[val] = true
|
||
|
|
}
|
||
|
|
|
||
|
|
if (!Anot.isPlainObject(obj)) {
|
||
|
|
obj = obj.$model
|
||
|
|
}
|
||
|
|
|
||
|
|
var $elem = Anot(this.element)
|
||
|
|
for (var i in obj) {
|
||
|
|
$elem.toggleClass(i, !!obj[i])
|
||
|
|
}
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
'hover,active'.replace(rword, function(name) {
|
||
|
|
directives[name] = directives['class']
|
||
|
|
})
|