原生js封裝了一個插件集合(目前僅包含拖拽和建立自適應文本框插件，顏色選擇器插件,其它插件添加中)

ewplugins

一個基於原生js而封裝的插件集合，目前包含建立自適應的文本輸入框，拖拽（支持移動端和PC端）的插件，顏色選擇器插件，其它插件正在逐步添加中中。

安裝與使用

安裝

npm install ewplugins --save-dev

複製代碼

引入

<script src="./release/ewPlugins.min.js"></script>
  
複製代碼

拖拽插件配置以下:

//自定義配置
  //參數爲插件的配置對象
  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:www.unpkg.com/ewplugins@1…

在組件中使用

import ewPlugins from 'ewplugins'

   var pluginName = new ewPlugins(type,option);//type爲指定插件的類型，option爲配置對象，詳情見前述

   若是是在`vue`中使用，最好在`mounted`週期中實例化
   
複製代碼

更多詳情參閱文檔官網介紹ewPlugins;

在線拖拽demo。 在線建立自適應文本框demo。 在線顏色選擇器示例。

github源碼,以爲不錯的，望不吝嗇star,也歡迎fork。