原生vue封装elemen表格

2024-08-29

vue封装element中table组件

后台系统,table被用的次数比较多,所以决定提出来作为组件 1.新建一个Table.vue文件  <template> <div class="table"> <el-table id="iTable" v-loading.iTable="options.loading" :data="list" :stripe="op

原生js封装table表格操作，获取任意行列td，任意单行单列方法

V1.001更新增加findTable-min.js 本次更新,优化了代码性能方面,增加了部分新功能,可以获取多个table表格批量操作. 考虑到本人后面的项目中可能涉及到大量的表格操作,提前先封了一个简单的操作方法,日后再加完善,但对于小页面需求是完全够用的.该方法很强大. f(elm,boolean).getTableXY(x,y,type) elm传入表格选择器如果不传,默认查找table标签, 使用的是querySelector()和querySelectorAll()选择器请注

vue+element-ui+slot-scope或原生实现可编辑表格(日历)

你们公司的产品是不是还在做一个可编辑表格功能? 1.前言咱开发拿到需求大多数是去网上找成型的组件,找不到再看原生的方法能否实现,大牛除外哈,大牛一般喜欢封装组件框架. 2.思路可编辑表格在后台管理系统还是比较常用的,因为比较流行框架element,iview都没有这个应用,所以考虑了两种方法,下面我简单说哈我的两种方法:vue+element实现表格跨行或跨列合并 3.方法一: 直接通过element的table组件中的cell-click和cell-dbclick监听表格事件,回调函数有四

原生js封装十字参考线插件(一)

需求来源: 拓扑图之机房平面图,显示机房长宽比例尺,房间内标注各种设备间距不易实现,特在机房平面图上层加一个十字参考线横竖两条线垂直,在鼠标指针处交叉,显示鼠标指针坐标(相对机房平面图的坐标,不是相对于浏览器) 在需要时开启,用完关闭项目用的是vue,并未引入jQuery,所以直接原生js封装的,部分代码用到ES6语法效果如图: 关闭状态开启状态封装后,开放三个参数功能: 开关按钮:开启参考线父级div: 参考线颜色:color:"#ff0000",默认红色调用方法参数

原生JS封装Ajax插件(同域&&jsonp跨域)

抛出一个问题,其实所谓的熟悉原生JS,怎样的程度才是熟悉呢? 最近都在做原生JS熟悉的练习... 用原生Js封装了一个Ajax插件,引入一般的项目,传传数据,感觉还是可行的...简单说说思路,如有不正确的地方,还望指正^_^ 一.Ajax核心,创建XHR对象 Ajax技术的核心是XMLHttpRequest对象(简称XHR),IE5是第一款引入XHR对象的浏览器,而IE5中的XHR对象是通过MSXML库中的一个ActiveX对象实现的,因此在IE中可能有3个版本,即MSXML2.XMLHttp.

原生js封装ajax：传json，str，excel文件上传表单提交

由于项目中需要在提交ajax前设置header信息,jquery的ajax实现不了,我们自己封装几个常用的ajax方法. jQuery的ajax普通封装 var ajaxFn = function(uri, data, cb) { $.ajax({ url: uri, type: 'POST', dataType: 'json', data: data, }) .done(cb) .fail(function() { console.log("error"); }) .always(f

用jQuery基于原生js封装的轮播

我发现轮播在很多网站里面都用到过,一个绚丽的轮播可以为网页增色不少,最近闲来无事,也用原生js封装了一个轮播,可能不像网上的插件那么炫,但是也有用心去做.主要用了闭包的思想.需要传递的参数有:图片地址的数组,图片宽度,上一页,下一页的id,图片列表即ul的id(这儿使用无序列表排列的图片),自动轮播间隔的时间.功能:实现了轮播的自动轮播,可以点击上一页,下一页进行切换. 下面是html中的代码,只需要把存放的容器写好,引入jquery即可: <!DOCTYPE px;"> </

原生JS封装简单动画效果

原生JS封装简单动画效果一致使用各种插件,有时候对原生JS陌生了起来,所以决定封装一个简单动画效果,熟悉JS原生代码 function animate(obj, target,num){ if(obj.timer) { //判断定时器是否存在,决定是否清空 clearInterval(obj.timer); } obj.timer = setInterval(function() { var leader = obj.offsetLeft; var step = num;//num为你移动一步

原生javascript封装ajax和jsonp

在我们请求数据时,完成页面跨域,利用原生JS封装的ajax和jsonp: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <script> //ajax 和jsonp 跨域的封装 var $={ //封装a

原生Js封装的弹出框-弹出窗口-页面居中-多状态可选

原生Js封装的弹出框-弹出窗口-页面居中-多状态可选实现了一下功能: 1.title可自定义可拖拽 2.width height可以自定义 3.背景遮罩和透明度可以自定义 4.可以自己编辑弹出框里的html 5.确定取消按钮可选调用方法: 1 Prompt.add();//生成遮罩和弹出div 2 3 4 5 Prompt.init({ //修改参数 6 title : "我是个alert弹出框", 7 shade : true, 8 opacity : 20, 9 wid

原生JS封装创建多级菜单函数

手写一个使用原生JS封装的多级菜单的函数,满足以下几点需求. 子类层级不确定,可根据数据自动生成多级菜单. 操作便捷,只需传入一个HTML标签. 缺点: 需要满足特定的数据结构废话不多说,展示代码.先展示数据代码,注意,使用此封装函数需要满足此数据结构. var data = [{ id: 1, address: "安徽", parent_id: 0 }, { id: 2, address: "江苏", parent_id: 0 }, { id: 3, addre

原生ajax封装，包含post、method方式

原生ajax封装,包含post.method方式 function ajax(method, url, data, success) { var xhr = null; try { xhr = new XMLHttpRequest(); } catch (e) { xhr = new ActiveXObject('Microsoft.XMLHTTP'); } //get时,且数据存在,URL需要用?连接 if (method == 'get' && data) { url += '?' +

React-Native开发之原生模块封装（Android)升级版

本文主题:如何实现原生代码的复用,即如何将原生模块封装. (尊重劳动成果,转载请注明出处:http://blog.csdn.net/qq_25827845/article/details/52862892) 有时候我们的应用需要进行访问原生平台系统的API接口,但是React Native可能还没有封装相应功能组件.还有可能我们需要去复用一些原生java代码而不是让JavaScript重新去实现一遍.或者我们可能需要些一些更加高级的功能代码,所线程相关的.例如: 图片处理,数据库以及一些高级

vue封装插件并发布到npm上

vue封装插件并发布到npm上项目初始化首先,要创建项目,封装vue的插件用webpack-simple很合适,vue init webpack-simple 项目名称此命令创建我们的项目的目录,创建文件夹和文件,最后结构是这样的然后根据需求,实现具体功能,这里我封装了一个轮播图组件mini-sliders,主要功能写在lib/slider.vue组件中功能写好后,我们要写index.js来封装组件 import VueComment from './VueComment.vue' c

基于原生JS封装数组原型上的sort方法

基于原生JS封装数组原型上的sort方法最近学习了数组的原型上内置方法的封装,加强了用原生JS封装方法的能力,也进一步理解数组方法封装的过程,实现的功能.虽然没有深入底层,了解源码.以下解法都是基于个人理解用纯原生JS实现的功能.如有不对的地方,可以评论告诉我哟首先,我们先来看一下sort方法的作用.参数.以及方法的返回值,原有数组是否发生改变 sort方法主要用于数组的排序参数分为两种: 一种:传的参数是函数. (排序主要看函数的返回值) 另一种:传的不是函数.或者不传(只要传的不是函数

原生JavaScript 封装ajax

原生JavaScript 封装ajax function myajax(options){ //新建一个局部对象用来存放用户输入的各种参数 var opt={ type:options.type||"get",//获取用户输入的传输方法,可选,不写为get data:options.data||"",//获取用户输入的数据 dataType:options.dataType||"",//获取用户输入的数据类型比如json 或者xml url

echars vue 封装全局组件曲线柱状图同v-chars绿色系配置样式

Echars vue封装 ,曲线图 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Co

原生Js封装的动画类

算法用的是Tween类,需要研究的参考这篇文章: http://www.cnblogs.com/cloudgamer/archive/2009/01/06/Tween.html 网页里常用的动画放大缩小位置移动透明度改变效果预览:http://jsfiddle.net/dtdxrk/WnACG/embedded/result/ <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type

vue封装一些常用组件loading、switch、progress

vue封装一些常用组件loading.switch.progress github文档https://github.com/zengjielin/vue-component-library loading组件条形进度条圆形进度条 switch组件

用原生js封装轮播图

原生js封装轮播图对于初学js的同学来说,轮播图还是一个难点,尤其是原生js封装轮播图代码,下面是我之前做的一个轮播图项目中封装好的一些代码,有需要的同学可以看一下,有什么不懂的可以看注释,注释看不懂的可以直接私信我 slide.js /* * 轮播图 */ function Slide(elem, ms, d, ind){ this.el = elem; this.w = parseInt(getStyle(elem, "width")); this.h = parseInt(ge

使用原生JS封装一个动画函数

最近一直在忙项目,很少有时间回顾之前的知识,今天刚好要做一个轮播,因为对兼容性有一定的要求,使用了各种插件和库中的轮播,效果都不是很理想,一怒之下,使用原生JS封装了一个轮播组件,其中重要的功能就是一个动画,看了一下以前封装的函数,千疮百孔,又进行了重新封装,先上代码,有详细的备注. function animate(el, target, step, dtime) { /** * 参数说明: * - el 表示操作的元素对象 * - target 表示移动的目标距离单位 px * - ste

原生vue封装elemen表格

热门专题