原生js封装了一个插件集合(目前仅包含拖拽和创建自适应文本框插件，颜色选择器)

cheng10 发布于2019-08-29 18:37 / 2589人阅读

摘要：一个基于原生而封装的插件集合，目前包含创建自适应的文本输入框，拖拽支持移动端和端的插件，颜色选择器插件其它插件正在逐步添加中。在线创建自适应文本框。鄙人创建了一个群，供大家学习交流，希望和大家合作愉快，互相帮助，交流学习，以下为群二维码

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群，供大家学习交流，希望和大家合作愉快，互相帮助，交流学习，以下为群二维码：

超融合服务器 idc机房托管 js文本框拖拽插件 js文件选择框插件 js 创建一个文本框 js拖拽插件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/114456.html

原生js封装了一个插件集合(目前仅包含拖拽和创建自适应文本框插件，颜色选择器)

摘要：一个基于原生而封装的插件集合，目前包含创建自适应的文本输入框，拖拽支持移动端和端的插件，颜色选择器插件其它插件正在逐步添加中。在线创建自适应文本框。鄙人创建了一个群，供大家学习交流，希望和大家合作愉快，互相帮助，交流学习，以下为群二维码 ewplugins 一个基于原生js而封装的插件集合，目前包含创建自适应的文本输入框，拖拽（支持移动端和PC端）的插件，颜色选择器插件,其它插件正在逐...

CatalpaFlat 2019-08-02 16:13 评论0 收藏0
原生js封装了一个插件集合(目前仅包含拖拽和创建自适应文本框插件，颜色选择器)

摘要：一个基于原生而封装的插件集合，目前包含创建自适应的文本输入框，拖拽支持移动端和端的插件，颜色选择器插件其它插件正在逐步添加中。在线创建自适应文本框。鄙人创建了一个群，供大家学习交流，希望和大家合作愉快，互相帮助，交流学习，以下为群二维码 ewplugins 一个基于原生js而封装的插件集合，目前包含创建自适应的文本输入框，拖拽（支持移动端和PC端）的插件，颜色选择器插件,其它插件正在逐...

fengxiuping 2019-08-23 16:55 评论0 收藏0
javascript功能插件大集合前端常用插件 js常用插件

摘要：转载来源包管理器管理着库，并提供读取和打包它们的工具。能构建更好应用的客户端包管理器。一个整合和的最佳思想，使开发者能快速方便地组织和编写前端代码的下一代包管理器。很棒的组件集合。隐秘地使用和用户数据。转载来源：https://github.com/jobbole/aw... 包管理器管理着 javascript 库，并提供读取和打包它们的工具。•npm – npm 是 javasc...

Hydrogen 2019-08-02 11:46 评论0 收藏0
javascript功能插件大集合前端常用插件 js常用插件

摘要：转载来源包管理器管理着库，并提供读取和打包它们的工具。能构建更好应用的客户端包管理器。一个整合和的最佳思想，使开发者能快速方便地组织和编写前端代码的下一代包管理器。很棒的组件集合。隐秘地使用和用户数据。转载来源：https://github.com/jobbole/aw... 包管理器管理着 javascript 库，并提供读取和打包它们的工具。•npm – npm 是 javasc...

netmou 2019-08-23 12:28 评论0 收藏0
javascript功能插件大集合，写前端的亲们记得收藏

摘要：一个专注于浏览器端和兼容的包管理器。一个整合和的最佳思想，使开发者能快速方便地组织和编写前端代码的下一代包管理器。完全插件化的工具，能在中识别和记录模式。健壮的优雅且功能丰富的模板引擎。完整的经过充分测试和记录数据结构的库。【导读】：GitHub 上有一个 Awesome – XXX 系列的资源整理。awesome-javascript 是 sorrycc 发起维护的 JS 资源列表...

cfanr 2019-08-20 10:34 评论0 收藏0