* 属性说明:
* isbind:是否绑定vue属性，true/false
* bindattr：绑定的属性名称，isbind="true"时有效
* callback：切换下拉框后的回调，默认无
* 也可以使用jquery获取select的值获取属性值
*/
function initSelect(_that) {
$(".selectIptFxd").unbind('click').bind("click", function(event) {
if(!$(this).hasClass("disabled")) {
$(".selectOpt").slideUp();
$(".selectIptFxd").not($(this)).removeClass("open");
$(".selectOptFxd").hide().remove();
clkElJQ=$(this);
clkElJS=$(this)[0];
if($(this).hasClass("open")) {
$(this).removeClass("open");
$(".selectOptFxd").hide().remove();
} else {
$(this).addClass("open");
initOptions();
setPosition();
initOptionEvent(_that);
}
event.stopPropagation();
}
})
}
/*
* 初始化新版选项框中值，页面初始化使用
* _that：当前vue对象
* el: jquery选择器，string
*/
export function initSelectValue(_that, el) {
$(el + " .selectIptFxd").each(function() {
var obj = $(this);
var isbind = obj.attr('isbind');
var value = '';
if (isbind == 'true') {
var attr = obj.attr('bindattr');
if (attr) {
var attrs = attr.split('.');
var temp = _that;
for (var i = 0; i < attrs.length - 1; i++) {
temp = temp[attrs[i]];
}
value = temp[attrs[attrs.length - 1]];
}
}
var text = obj.find('option[value=' + value + ']').text();
obj.children("[type=text]").val(text);
});
}
/*
* 初始化选项
* _that：当前vue对象
*/
function initOptions(_that) {
var opts = [];
var optsLi = "";
for(var i = 0; i < clkElJQ.find("option").length; i++) {
//opts[i]=clkElJQ.find("option")[i].text();
var text = clkElJQ.find("option").eq(i).text().replace(//g, '>');
optsLi = optsLi + "
" + text + " ";
}
var optsEl = "
";
$("body").append(optsEl);
}
/*
* 设置位置
*/
function setPosition() {
if (!clkElJS) {
return;
}
var top = clkElJS.getBoundingClientRect().top;
var height = clkElJS.getBoundingClientRect().height;
var left = clkElJS.getBoundingClientRect().left;
var width = clkElJS.getBoundingClientRect().width;
if(top - height > $(window).height() / 2) {
if(clkElJQ.find("option").length * 30 + 2 > ($(window).height() - top - height)) {
$(".selectOptFxd").css({"left": left + "px", "top": "auto", "bottom": $(window).height() - top - 2 + "px", "width": width + "px"});
if(clkElJQ.find("option").length * 30 + 2 > top) {
console.log("topOverflow");
$(".selectOptFxd").css({"left": left + "px", "top": "0px", "bottom": $(window).height() - top - 2 + "px", "width": width + "px"});
} else {
$(".selectOptFxd").css({"left": left + "px","top": "auto", "bottom": $(window).height() - top - 2 + "px", "width": width + "px"});
}
} else {
$(".selectOptFxd").css({"left": left + "px", "top": top + height - 2 + "px", "bottom": "auto", "width": width + "px"})
}
} else {
if(clkElJQ.find("option").length * 30 + 2 > ($(window).height() - top - height)) {
$(".selectOptFxd").css({"left": left + "px", "top": top + height - 2 + "px", "bottom": "0px", "width": width + "px"})
} else {
$(".selectOptFxd").css({"left": left + "px", "top": top + height - 2 + "px", "bottom": "auto", "width": width + "px"})
}
}
}
/*
* 初始化li上事件
*/
function initOptionEvent(_that) {
$('.selectOptFxd li').unbind('click').bind('click', function(event) {
var title = $(this).attr("title");
var value = $(this).attr("val");
clkElJQ.children("select").val(value);
clkElJQ.children("[type=text]").val(title);
clkElJQ.removeClass("open");
clkElJQ.children("select").find('option').attr('selected', false);
clkElJQ.children("select").find('option[value="' + value + '"]').attr('selected', true);
console.log(clkElJQ.children("select").parent().html())
$(".selectOptFxd").hide().remove();
var isbind = clkElJQ.attr('isbind');
if (isbind == 'true') {
var attr = clkElJQ.attr('bindattr');
if (attr) {
var attrs = attr.split('.');
var obj = _that;
for (var i = 0; i < attrs.length - 1; i++) {
obj = obj[attrs[i]];
}
obj[attrs[attrs.length - 1]] = value;
}
}
var callback = clkElJQ.attr('callback');
if (callback) {
eval('_that.' + callback + '(event)');
}
//setTimeout(function(){$(window).trigger("resize")},300)
event.stopPropagation();
})
}
使用技巧：
{{$t('message.cloudset.main.display.alwayssave')}}
{{$t('message.cloudset.main.display.circlesave7')}}
{{$t('message.cloudset.main.display.circlesave30')}}
{{$t('message.cloudset.main.display.circlesave365')}}
{{$t('message.cloudset.main.display.custom')}}
1、格式必须相同
2、
