github
/
layui
mirror of https://github.com/layui/layui
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

添加 `lay.options()` 方法使用的安全提示注释

pull/1424/head
贤心 1 year ago
parent
5895e84785
commit
be5c58ef6f
1 changed files with 71 additions and 67 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 138
      src/modules/lay.js

138
src/modules/lay.js
Unescape View File

@ -3,18 +3,18 @@
;!function(window){ // gulp build: lay-header
"use strict";
var MOD_NAME = 'lay'; // 模块名
var document = window.document;
/**
* 元素查找
* @param {string | HTMLElement | JQuery} selector
* @param {string | HTMLElement | JQuery} selector
*/
var lay = function(selector){
var lay = function(selector){
return new Class(selector);
};
// 构造器
var Class = function(selector){
var that = this;
@ -45,11 +45,11 @@
});
return rst;
};
/*
lay 对象操作
*/
Class.fn = Class.prototype = [];
Class.fn.constructor = Class;
@ -86,7 +86,7 @@
}
return args[0];
};
/**
* IE 版本
* @type {string | boolean} - 如果是 IE 返回版本字符串，否则返回 false
@ -97,12 +97,12 @@
(agent.match(/msie\s(\d+)/) || [])[1] || '11' // 由于 ie11 并没有 msie 的标识
) : false;
}();
/**
/**
* 获取 layui 常见方法，以便用于组件单独版
*/
lay.layui = layui || {};
lay.getPath = layui.cache.dir; // 获取当前 JS 所在目录
lay.stope = layui.stope; // 中止冒泡
@ -134,7 +134,7 @@
}
return num < Math.pow(10, length) ? str + num : num;
};
/**
* 创建元素
* @param {string} elemName - 元素的标签名
@ -156,7 +156,7 @@
/**
* 当前页面是否存在滚动条
* @returns {boolean} 是否存在滚动条
* @example
* @example
* ```
* lay.hasScrollbar() // true 或 false
* ```
@ -180,7 +180,7 @@
* color: green;
* }
* </style>
*
*
* lay.getStyleRules($('#test')[0], function(rule, index){
* if(rule.selectorText === '.lay-card'){
* console.log(index, rule.cssText) // 0 '.lay-card{color: #000}'
@ -211,14 +211,14 @@
* @param {string | HTMLElement | JQuery} [options.target] - 目标容器，指定后会将样式追加到目标容器
* @param {string} [options.id] - 样式元素的 id，默认自增
* @param {string} options.text - 样式内容
* @returns {HTMLStyleElement} 返回创建的样式元素
* @returns {HTMLStyleElement} 返回创建的样式元素
* @example
* ```html
* <div id="targetEl">
* <!-- 样式追加到目标容器 -->
* <style id="LAY-STYLE-DF-0">.card{color: #000}</style>
* </div>
*
*
* lay.style({
* target: '#targetEl',
* text: '.card{color: #000}'
@ -231,9 +231,9 @@
var style = lay.elem('style');
var styleText = options.text || '';
var target = options.target;
if (!styleText) return;
// 添加样式
if ('styleSheet' in style) {
style.setAttribute('type', 'text/css');
@ -241,7 +241,7 @@
} else {
style.innerHTML = styleText;
}
// ID
style.id = 'LAY-STYLE-'+ (options.id || function(index) {
lay.style.index++;
@ -257,7 +257,7 @@
return style;
};
/**
* 将元素定位到指定目标元素附近
* @param {HTMLElement} target - 目标元素
@ -277,13 +277,13 @@
* <li>菜单1</li>
* <li>菜单2</li>
* </ul>
*
*
* // 下拉菜单将被定位到按钮附近
* lay.position(
* $('#targetEl')[0],
* $('#contentEl')[0],
* $('#targetEl')[0],
* $('#contentEl')[0],
* {
* position: 'fixed',
* position: 'fixed',
* align: 'center'
* }
* )
@ -292,7 +292,7 @@
lay.position = function(target, elem, opts){
if(!elem) return;
opts = opts || {};
// 如果绑定的是 document 或 body 元素，则直接获取鼠标坐标
if(target === document || target === lay('body')[0]){
opts.clickType = 'right';
@ -310,13 +310,13 @@
}() : target.getBoundingClientRect();
var elemWidth = elem.offsetWidth; // 控件的宽度
var elemHeight = elem.offsetHeight; // 控件的高度
// 滚动条高度
var scrollArea = function(type){
type = type ? 'scrollLeft' : 'scrollTop';
return document.body[type] | document.documentElement[type];
};
// 窗口宽高
var winArea = function(type){
return document.documentElement[type ? 'clientWidth' : 'clientHeight']
@ -324,7 +324,7 @@
var margin = 'margin' in opts ? opts.margin : 5;
var left = rect.left;
var top = rect.bottom;
// 相对元素居中
if(opts.align === 'center'){
left = left - (elemWidth - target.offsetWidth) / 2;
@ -338,7 +338,7 @@
}
// 左侧是否超出边界
if(left < margin) left = margin;
// 判断底部和顶部是否超出边界
if(rect.bottom + elemHeight + margin > winArea()){ // 底部超出边界
@ -366,11 +366,11 @@
}
}
*/
// 定位类型
var position = opts.position;
if(position) elem.style.position = position;
// 设置坐标
elem.style.left = left + (position === 'fixed' ? 0 : scrollArea(1)) + 'px';
elem.style.top = top + (position === 'fixed' ? 0 : scrollArea()) + 'px';
@ -387,7 +387,7 @@
}
}
};
/**
* 获取元素上的属性配置项
* @param {string | HTMLElement | JQuery} elem - HTML 元素
@ -396,14 +396,14 @@
* @example
* ```js
* <div id="testEl" lay-options="{color:red}" lay-toc="{hot: true}"></div>
*
*
* var elem = $('#testEl')
* lay.options(elem) // {color:red}
* lay.options(elem[0]) // {color:red}
* lay.options('#testEl') // {color:red}
* lay.options('#testEl', {attr: 'lay-toc'}) // {hot: true}
* lay.options('#testEl', 'lay-toc') // {hot: true}
*
*
* $('#testEl').attr('lay-toc') // '{hot: true}'
* ```
*/
@ -417,16 +417,20 @@
var attrValue = othis.attr(attrName);
try {
/**
* 请注意: 开发者在使用 lay-options="{}" 配置组件选项时，需确保属性值不来自于网页用户,
* 即属性值必须在网页开发者自身的可控范围内，否则请勿在 HTML 标签属性中获取组件选项。
*/
return new Function('return '+ (attrValue || '{}'))();
} catch(ev) {
layui.hint().error(opts.errorText || [
attrName + '="'+ attrValue + '"',
attrName + '="'+ attrValue + '"',
'\n parseerror: '+ ev
].join('\n'), 'error');
return {};
}
};
/**
* 元素是否属于顶级元素（document 或 body）
@ -485,7 +489,7 @@
elem.style.opacity = '0';
elem.style.top = '0px';
elem.style.left = '0px';
document.body.appendChild(elem);
elem.select();
@ -505,7 +509,7 @@
/*
* lay 元素操作
*/
// 追加字符
Class.addStr = function(str, new_str){
@ -518,7 +522,7 @@
});
return str.replace(/^\s|\s$/, '');
};
// 移除值
Class.removeStr = function(str, new_str){
str = str.replace(/\s+/, ' ');
@ -531,7 +535,7 @@
});
return str.replace(/\s+/, ' ').replace(/^\s|\s$/, '');
};
// 查找子元素
Class.fn.find = function(selector){
var that = this;
@ -539,7 +543,7 @@
var isObject = typeof selector === 'object';
this.each(function(i, item){
var children = isObject && item.contains(selector)
var children = isObject && item.contains(selector)
? selector
: item.querySelectorAll(selector || null);
@ -550,24 +554,24 @@
return lay(elem);
};
// 元素遍历
Class.fn.each = function(fn){
return lay.each.call(this, this, fn);
};
// 添加 className
Class.fn.addClass = function(className, type){
return this.each(function(index, item){
item.className = Class[type ? 'removeStr' : 'addStr'](item.className, className)
});
};
// 移除 className
Class.fn.removeClass = function(className){
return this.addClass(className, true);
};
// 是否包含 css 类
Class.fn.hasClass = function(className){
var has = false;
@ -578,7 +582,7 @@
});
return has;
};
// 添加或获取 css style
Class.fn.css = function(key, value){
var that = this;
@ -591,9 +595,9 @@
typeof key === 'object' ? lay.each(key, function(thisKey, thisValue){
item.style[thisKey] = parseValue(thisValue);
}) : item.style[key] = parseValue(value);
});
});
};
// 添加或获取宽度
Class.fn.width = function(value){
var that = this;
@ -601,9 +605,9 @@
if(that.length > 0) return that[0].offsetWidth; // 此处还需做兼容
}() : that.each(function(index, item){
that.css('width', value);
});
});
};
// 添加或获取高度
Class.fn.height = function(value){
var that = this;
@ -611,9 +615,9 @@
if(that.length > 0) return that[0].offsetHeight; // 此处还需做兼容
}() : that.each(function(index, item){
that.css('height', value);
});
});
};
// 添加或获取属性
Class.fn.attr = function(key, value){
var that = this;
@ -621,16 +625,16 @@
if(that.length > 0) return that[0].getAttribute(key);
}() : that.each(function(index, item){
item.setAttribute(key, value);
});
});
};
// 移除属性
Class.fn.removeAttr = function(key){
return this.each(function(index, item){
item.removeAttribute(key);
});
};
// 设置或获取 HTML 内容
Class.fn.html = function(html){
var that = this;
@ -640,7 +644,7 @@
item.innerHTML = html;
});
};
// 设置或获取值
Class.fn.val = function(value){
var that = this;
@ -650,23 +654,23 @@
item.value = value;
});
};
// 追加内容
Class.fn.append = function(elem){
return this.each(function(index, item){
typeof elem === 'object'
typeof elem === 'object'
? item.appendChild(elem)
: item.innerHTML = item.innerHTML + elem;
});
};
// 移除内容
Class.fn.remove = function(elem){
return this.each(function(index, item){
elem ? item.removeChild(elem) : item.parentNode.removeChild(item);
});
};
// 事件绑定
Class.fn.on = function(eventName, fn){
return this.each(function(index, item){
@ -676,24 +680,24 @@
}) : item.addEventListener(eventName, fn, false);
});
};
// 解除事件
Class.fn.off = function(eventName, fn){
return this.each(function(index, item){
item.detachEvent
? item.detachEvent('on'+ eventName, fn)
item.detachEvent
? item.detachEvent('on'+ eventName, fn)
: item.removeEventListener(eventName, fn, false);
});
};
// export
window.lay = lay;
// 输出为 layui 模块
if(window.layui && layui.define){
layui.define(function(exports){
exports(MOD_NAME, lay);
});
}
}(window, window.document); // gulp build: lay-footer

Write Preview
Loading…
Cancel
Save