摘要:一个基于原生而封装的插件集合,目前包含创建自适应的文本输入框,拖拽支持移动端和端的插件,颜色选择器插件其它插件正在逐步添加中。在线创建自适应文本框。鄙人创建了一个群,供大家学习交流,希望和大家合作愉快,互相帮助,交流学习,以下为群二维码
ewplugins
一个基于原生js而封装的插件集合,目前包含创建自适应的文本输入框,拖拽(支持移动端和PC端)的插件,颜色选择器插件,其它插件正在逐步添加中。
安装与使用 安装npm install ewplugins --save-dev引入
拖拽插件配置如下:
//自定义配置 //参数为插件的配置对象 var drag = new ewPlugins("drag",{ el: document.getElementsByClassName("demo"),//拖动元素 designEL:".title",//或document.getElementByClassName("title),//指定拖拽区域 isWindow: true,//是否限制在浏览器可见窗口内,如果为false,超出后出现滚动条 scopeEl:document.getElementsByClassName("box"),//如果和width与height同时设置了,则优先执行这个限制元素,设置了此属性,则不能将isWindow属性设置为false width: 400,//限制拖动元素范围宽,则不能将isWindow属性设置为false height: 400//限制拖动元素范围高,则不能将isWindow属性设置为false axis:"x" //或"y",限制在X轴或者y轴拖动 origin:true, //或false,是否在拖动之后还原位置 originSpeed:100,//还原速度,不超过拖拽的偏移量 startCB:function(){},//拖动开始回调 moveCB:function(){},//拖动时回调 endCB:function(){},//拖动结束时回调 dragDisabled:true,//或false,是否禁止拖拽 disabledButton:".btn",//或document.getElementByClassName("btn"),//点击按钮禁止或启用拖拽 ani_transition:"transition:all .1s linear",//动画过渡效果或者以对象形式{"transition":"all .1s linear"} grid:[50,50] //网格规范拖动 }); //其中el和scopeEl的值也可以是传成字符串,如el:".demo",scopeEl:".box" //默认配置(传入拖拽元素的dom对象或者获取dom对象的字符串) var drag = new ewPlugins("drag",".demo"); //或var drag = new ewPlugins("drag",document.getElementByClassName("demo"))
创建一个自适应文本框插件如下:
//自定义配置 var text = new ewPlugins("textarea",{ el:".demo",//如果指定了此项,则后面两项无效,指定此项就表示要将某个元素转换成自适应文本元素,也可以传document.getElementByClassName("demo") mode:"auto",//创建的是textarea元素还是普通元素,auto或notAuto,auto即textarea元素,否则就是div元素 container:".box" //或document.getElementByClassName(box)需要添加自适应文本元素的元素 }) //默认配置 var text = new ewPlugins("textarea",".demo"); 或 var text = new ewPlugins("textarea","auto"); 或 var text = new ewPlugins("textarea",document.getElementByClassName("demo")); //也可以不用传第二个参数 var text = new ewPlugins("textarea")
颜色选择器插件如下:
//默认配置 var color = new ewPlugins("colorpicker",".demo"); 或 var color = new ewPlugins("colorpicker",document.getElementByClassName("demo")); //点击确定 color.config.sure = function(color){ //返回颜色值 } //点击取消 color.config.clear = function(defaultColor){ //返回默认颜色值 } //自定义配置 var color = new ewPlugins("colorpicker",{ el:".demo2",//绑定选择器的dom元素 alpha:true,//是否开启透明度 size:{ width:100, height:50 },//颜色选择器类型,有四个字符串值normal,medium,small,mini或者一个对象自定义宽高 predefineColor:["#223456","rgba(122,35,77,.5)"],//预定义颜色是一个数组 disabled:false,//是否禁止开启选择器面板 defaultColor:"#eeff22",//默认颜色 openPickerAni:"opacity",//或者"height",开启颜色选择器面板的动画 sure:function(color){ console.log(color); },//点击确定按钮的回调 clear:function(){ console.log(this) }//点击清空按钮的回调 })cdn引入
CDN:https://www.unpkg.com/ewplugi...
在组件中使用import ewPlugins from "ewplugins" var pluginName = new ewPlugins(type,option);//type为指定插件的类型,option为配置对象,详情见前述 如果是在`vue`中使用,最好在`mounted`周期中实例化
更多详情参阅文档官网介绍ewPlugins;
在线拖拽demo。
在线创建自适应文本框demo。
在线颜色选择器示例。
github源码,觉得不错的,望不吝啬star,也欢迎fork。
鄙人创建了一个QQ群,供大家学习交流,希望和大家合作愉快,互相帮助,交流学习,以下为群二维码:
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/54882.html
摘要:一个基于原生而封装的插件集合,目前包含创建自适应的文本输入框,拖拽支持移动端和端的插件,颜色选择器插件其它插件正在逐步添加中。在线创建自适应文本框。鄙人创建了一个群,供大家学习交流,希望和大家合作愉快,互相帮助,交流学习,以下为群二维码 ewplugins 一个基于原生js而封装的插件集合,目前包含创建自适应的文本输入框,拖拽(支持移动端和PC端)的插件,颜色选择器插件,其它插件正在逐...
摘要:一个基于原生而封装的插件集合,目前包含创建自适应的文本输入框,拖拽支持移动端和端的插件,颜色选择器插件其它插件正在逐步添加中。在线创建自适应文本框。鄙人创建了一个群,供大家学习交流,希望和大家合作愉快,互相帮助,交流学习,以下为群二维码 ewplugins 一个基于原生js而封装的插件集合,目前包含创建自适应的文本输入框,拖拽(支持移动端和PC端)的插件,颜色选择器插件,其它插件正在逐...
摘要:转载来源包管理器管理着库,并提供读取和打包它们的工具。能构建更好应用的客户端包管理器。一个整合和的最佳思想,使开发者能快速方便地组织和编写前端代码的下一代包管理器。很棒的组件集合。隐秘地使用和用户数据。 转载来源:https://github.com/jobbole/aw... 包管理器管理着 javascript 库,并提供读取和打包它们的工具。•npm – npm 是 javasc...
摘要:转载来源包管理器管理着库,并提供读取和打包它们的工具。能构建更好应用的客户端包管理器。一个整合和的最佳思想,使开发者能快速方便地组织和编写前端代码的下一代包管理器。很棒的组件集合。隐秘地使用和用户数据。 转载来源:https://github.com/jobbole/aw... 包管理器管理着 javascript 库,并提供读取和打包它们的工具。•npm – npm 是 javasc...
摘要:一个专注于浏览器端和兼容的包管理器。一个整合和的最佳思想,使开发者能快速方便地组织和编写前端代码的下一代包管理器。完全插件化的工具,能在中识别和记录模式。健壮的优雅且功能丰富的模板引擎。完整的经过充分测试和记录数据结构的库。 【导读】:GitHub 上有一个 Awesome – XXX 系列的资源整理。awesome-javascript 是 sorrycc 发起维护的 JS 资源列表...
阅读 2639·2021-11-11 16:54
阅读 3598·2021-08-16 10:46
阅读 3409·2019-08-30 14:18
阅读 2964·2019-08-30 14:01
阅读 2685·2019-08-29 14:15
阅读 1969·2019-08-29 11:31
阅读 3041·2019-08-29 11:05
阅读 2549·2019-08-26 11:54