原生js封裝了一個(gè)插件集合(目前僅包含拖拽和創(chuàng)建自適應(yīng)文本框插件，顏色選擇器)

cheng10 發(fā)布于2019-08-29 18:37 / 2750人閱讀

摘要：一個(gè)基于原生而封裝的插件集合，目前包含創(chuàng)建自適應(yīng)的文本輸入框，拖拽支持移動(dòng)端和端的插件，顏色選擇器插件其它插件正在逐步添加中。在線(xiàn)創(chuàng)建自適應(yīng)文本框。鄙人創(chuàng)建了一個(gè)群，供大家學(xué)習(xí)交流，希望和大家合作愉快，互相幫助，交流學(xué)習(xí)，以下為群二維碼

ewplugins

一個(gè)基于原生js而封裝的插件集合，目前包含創(chuàng)建自適應(yīng)的文本輸入框，拖拽（支持移動(dòng)端和PC端）的插件，顏色選擇器插件,其它插件正在逐步添加中。

安裝與使用 安裝

  npm install ewplugins --save-dev

引入

拖拽插件配置如下:

  //自定義配置
  //參數(shù)為插件的配置對(duì)象
  var drag = new ewPlugins("drag",{
      el: document.getElementsByClassName("demo"),//拖動(dòng)元素
      designEL:".title",//或document.getElementByClassName("title),//指定拖拽區(qū)域
      isWindow: true,//是否限制在瀏覽器可見(jiàn)窗口內(nèi),如果為false，超出后出現(xiàn)滾動(dòng)條
      scopeEl:document.getElementsByClassName("box"),//如果和width與height同時(shí)設(shè)置了，則優(yōu)先執(zhí)行這個(gè)限制元素,設(shè)置了此屬性，則不能將isWindow屬性設(shè)置為false
      width: 400,//限制拖動(dòng)元素范圍寬，則不能將isWindow屬性設(shè)置為false
      height: 400//限制拖動(dòng)元素范圍高，則不能將isWindow屬性設(shè)置為false
      axis:"x" //或"y",限制在X軸或者y軸拖動(dòng)
      origin:true, //或false,是否在拖動(dòng)之后還原位置
      originSpeed:100,//還原速度,不超過(guò)拖拽的偏移量
      startCB:function(){},//拖動(dòng)開(kāi)始回調(diào)
      moveCB:function(){},//拖動(dòng)時(shí)回調(diào)
      endCB:function(){},//拖動(dòng)結(jié)束時(shí)回調(diào)
      dragDisabled:true,//或false，是否禁止拖拽
      disabledButton:".btn",//或document.getElementByClassName("btn"),//點(diǎn)擊按鈕禁止或啟用拖拽
      ani_transition:"transition:all .1s linear",//動(dòng)畫(huà)過(guò)渡效果或者以對(duì)象形式{"transition":"all .1s linear"}
      grid:[50,50] //網(wǎng)格規(guī)范拖動(dòng)
  });
  //其中el和scopeEl的值也可以是傳成字符串,如el:".demo",scopeEl:".box"
  //默認(rèn)配置(傳入拖拽元素的dom對(duì)象或者獲取dom對(duì)象的字符串)
  var drag = new ewPlugins("drag",".demo");
  //或var drag = new ewPlugins("drag",document.getElementByClassName("demo"))

創(chuàng)建一個(gè)自適應(yīng)文本框插件如下:

  //自定義配置
  var text = new ewPlugins("textarea",{
      el:".demo",//如果指定了此項(xiàng)，則后面兩項(xiàng)無(wú)效，指定此項(xiàng)就表示要將某個(gè)元素轉(zhuǎn)換成自適應(yīng)文本元素，也可以傳document.getElementByClassName("demo")
      mode:"auto",//創(chuàng)建的是textarea元素還是普通元素,auto或notAuto,auto即textarea元素，否則就是div元素
      container:".box" //或document.getElementByClassName(box)需要添加自適應(yīng)文本元素的元素
  })
  //默認(rèn)配置
  var text = new ewPlugins("textarea",".demo");
  或 var text = new ewPlugins("textarea","auto");
  或 var text = new ewPlugins("textarea",document.getElementByClassName("demo"));
  //也可以不用傳第二個(gè)參數(shù)
  var text = new ewPlugins("textarea")

顏色選擇器插件如下:

   //默認(rèn)配置
   var color = new ewPlugins("colorpicker",".demo");
   或 var color = new ewPlugins("colorpicker",document.getElementByClassName("demo"));
   //點(diǎn)擊確定
   color.config.sure = function(color){
       //返回顏色值
   }
   //點(diǎn)擊取消
   color.config.clear = function(defaultColor){
     //返回默認(rèn)顏色值
   }
   //自定義配置
   var color = new ewPlugins("colorpicker",{
      el:".demo2",//綁定選擇器的dom元素
      alpha:true,//是否開(kāi)啟透明度
      size:{
          width:100,
          height:50
      },//顏色選擇器類(lèi)型，有四個(gè)字符串值normal,medium,small,mini或者一個(gè)對(duì)象自定義寬高
      predefineColor:["#223456","rgba(122,35,77,.5)"],//預(yù)定義顏色是一個(gè)數(shù)組
      disabled:false,//是否禁止開(kāi)啟選擇器面板
      defaultColor:"#eeff22",//默認(rèn)顏色
      openPickerAni:"opacity",//或者"height"，開(kāi)啟顏色選擇器面板的動(dòng)畫(huà)
      sure:function(color){
          console.log(color);
      },//點(diǎn)擊確定按鈕的回調(diào)
      clear:function(){
          console.log(this)
      }//點(diǎn)擊清空按鈕的回調(diào)
  })

cdn引入

CDN:https://www.unpkg.com/ewplugi...

在組件中使用

   import ewPlugins from "ewplugins"

   var pluginName = new ewPlugins(type,option);//type為指定插件的類(lèi)型，option為配置對(duì)象，詳情見(jiàn)前述

   如果是在`vue`中使用，最好在`mounted`周期中實(shí)例化

更多詳情參閱文檔官網(wǎng)介紹ewPlugins;

在線(xiàn)拖拽demo。
在線(xiàn)創(chuàng)建自適應(yīng)文本框demo。
在線(xiàn)顏色選擇器示例。

github源碼,覺(jué)得不錯(cuò)的，望不吝嗇star,也歡迎fork。

鄙人創(chuàng)建了一個(gè)QQ群，供大家學(xué)習(xí)交流，希望和大家合作愉快，互相幫助，交流學(xué)習(xí)，以下為群二維碼：