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

fengxiuping 發布于2019-08-23 16:55 / 3216人閱讀

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

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群，供大家學習交流，希望和大家合作愉快，互相幫助，交流學習，以下為群二維碼：

云服務器 GPU云服務器 js文本框拖拽插件 js文件選擇框插件 js 創建一個文本框 js拖拽插件

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/103519.html

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

摘要：一個基于原生而封裝的插件集合，目前包含創建自適應的文本輸入框，拖拽支持移動端和端的插件，顏色選擇器插件其它插件正在逐步添加中。在線創建自適應文本框。鄙人創建了一個群，供大家學習交流，希望和大家合作愉快，互相幫助，交流學習，以下為群二維碼 ewplugins 一個基于原生js而封裝的插件集合，目前包含創建自適應的文本輸入框，拖拽（支持移動端和PC端）的插件，顏色選擇器插件,其它插件正在逐...

cheng10 2019-08-29 18:37 評論0 收藏0
原生js封裝了一個插件集合(目前僅包含拖拽和創建自適應文本框插件，顏色選擇器)

摘要：一個基于原生而封裝的插件集合，目前包含創建自適應的文本輸入框，拖拽支持移動端和端的插件，顏色選擇器插件其它插件正在逐步添加中。在線創建自適應文本框。鄙人創建了一個群，供大家學習交流，希望和大家合作愉快，互相幫助，交流學習，以下為群二維碼 ewplugins 一個基于原生js而封裝的插件集合，目前包含創建自適應的文本輸入框，拖拽（支持移動端和PC端）的插件，顏色選擇器插件,其它插件正在逐...

CatalpaFlat 2019-08-02 16:13 評論0 收藏0
javascript功能插件大集合前端常用插件 js常用插件

摘要：轉載來源包管理器管理著庫，并提供讀取和打包它們的工具。能構建更好應用的客戶端包管理器。一個整合和的最佳思想，使開發者能快速方便地組織和編寫前端代碼的下一代包管理器。很棒的組件集合。隱秘地使用和用戶數據。轉載來源：https://github.com/jobbole/aw... 包管理器管理著 javascript 庫，并提供讀取和打包它們的工具。?npm – npm 是 javasc...

netmou 2019-08-23 12:28 評論0 收藏0
javascript功能插件大集合前端常用插件 js常用插件

摘要：轉載來源包管理器管理著庫，并提供讀取和打包它們的工具。能構建更好應用的客戶端包管理器。一個整合和的最佳思想，使開發者能快速方便地組織和編寫前端代碼的下一代包管理器。很棒的組件集合。隱秘地使用和用戶數據。轉載來源：https://github.com/jobbole/aw... 包管理器管理著 javascript 庫，并提供讀取和打包它們的工具。?npm – npm 是 javasc...

Hydrogen 2019-08-02 11:46 評論0 收藏0
javascript功能插件大集合，寫前端的親們記得收藏

摘要：一個專注于瀏覽器端和兼容的包管理器。一個整合和的最佳思想，使開發者能快速方便地組織和編寫前端代碼的下一代包管理器。完全插件化的工具，能在中識別和記錄模式。健壯的優雅且功能豐富的模板引擎。完整的經過充分測試和記錄數據結構的庫。【導讀】：GitHub 上有一個 Awesome – XXX 系列的資源整理。awesome-javascript 是 sorrycc 發起維護的 JS 資源列表...

cfanr 2019-08-20 10:34 評論0 收藏0