前端常用插件记录

最新推荐文章于 2022-06-23 01:08:33 发布

原创最新推荐文章于 2022-06-23 01:08:33 发布 · 511 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #css #html5 #前端

前端同时被 2 个专栏收录

33 篇文章

订阅专栏

插件

5 篇文章

订阅专栏

本文介绍了一系列常用的Web前端插件，包括FormData用于表单数据收集，jeDate时间插件，tinyMCE富文本编辑器，bootstrap分页插件，bootstrap模态框，jquery懒加载插件，jquery瀑布流插件，vue2-editor富文本编辑器，以及ElementUI的照片墙组件。这些插件丰富了Web应用的功能，提高了开发效率。

FormData

jeDate时间插件

tinyMCE富文本插件

bootstrap paginator分页插件

FormData

FormData官网：https://developer.mozilla.org/zh-CN/docs/Web/API/FormData

FormData主要用于收集表单的数据，通过原生js获取表单元素，作为ajax的参数进行传输，自带文本类型，不能自己序列化参数，本身可以传递文件数据file。

FormData基本使用

let formdata = new FormData(elm);//获取的是原生表单元素

FormData追加参数：

formdata.append(key,value);//追加参数

以FormData作为参数传递给ajax时，需要ajax做一些简单的配置：

contentType:false,//不设置ajax文本类型
processData:false,//需要ajax序列化参数data

例如：

jeDate时间插件

jeDate V6.5.0 是一款原生JS开发的 不依赖任何第三方库 大众化的日期控件

jeDate官网：http://www.jemui.com/uidoc/jedate.html

jeDate的引入：

引入css和js

jedate/css/jedate.css
jedate/js/jedate.js

jeDate基本使用：

html代码：

<input type="text" name="date" id="date" value="" class="form-control">

js代码：

jeDate('#date',{
   trigger:"click", 
   isinitVal:true,
   format:"YYYY-MM-DD",
   theme:{bgcolor:"#00A680",pnColor:"#00DDAA"}
})

效果：

tinyMCE富文本插件

tinyMCE中文手册：http://tinymce.ax-z.cn/configure/integration-and-setup.php

使用需引入js文件：tinymce/tinymce.min.js

基本使用

html代码：

<textarea cols="60" rows="8" id="textarea"></textarea>

js代码：

tinymce.init({
        selector: '#textarea',
        width:'80%',
        language: 'zh_CN',
        branding:false,//清除插件品牌
        // 工具栏
        toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | code",
        plugins: [//工具栏中插件
            "advlist autolink lists link image charmap print preview anchor",
            "searchreplace visualblocks code fullscreen",
            "insertdatetime media table contextmenu paste imagetools wordcount",
            "code"
        ]
    });

获取tinyMCE编辑器中的内容：

tinymce.activeEditor.getContent();

回显内容：

需要把内容回显给编辑器，则只需要给到相应的文本域

$('#textarea').val(res.data.content);//赋值给文本域，则会把内容回显到编辑器中

效果：

bootstrap paginator分页插件

bootstrap paginator网站：https://v3.bootcss.com/components/#pagination

引入文件：

/bootstrap/css/bootstrap.min.css

/bootstrap/js/bootstrap.min.js

/bootstrap-paginator.min.js

基本使用：

html代码：

<!-- 因为我们的bootstrap是3.3.7，所以对应的分页结构是ul -->
<ul class="pagination"></ul>

js代码：

/**
     * bootstrap 分页插件
     * @param pageCurrent 当前所在页:pageNum
     * @param pageSum 总页数
     * @param callback 调用ajax
     */
    function setPage(pageSum) {
        $(".pagination").bootstrapPaginator({
            //设置版本号
            bootstrapMajorVersion: 3,
            // 当前所在页,最明显的特点是添加一个单独的样式
            currentPage: pageNum,
            // 总页数
            totalPages: pageSum,
            //当单击操作按钮（页码）的时候, 执行该函数, 调用ajax渲染页面
            onPageClicked: function (event, originalEvent, type, page) {
                // 把当前点击的页码赋值给currentPage, 调用ajax,渲染页面
                // page就是你当前单击的页码的值,这个page就是接下ajax请求中所需要传递的pageNum
                console.log(page);
                pageNum = page;
                articlePage();//列表加载方法
            }
        })
    }

例如：

// 文章分页列表
    articlePage();
    function articlePage(){
        $.ajax({
            type:'get',
            url:bigNews.article_query+'?'+$('#frm').serialize() + '&page='+pageNum,
            dataType:'json',
            success:function(res){
                if(res.code == 200){
                    $('tbody').html(template('contentTpl',res.data));
                    if(res.data.totalPage > 1){
                        // 渲染分页结构  totalPage:直接返回了总页数
                        setPage(res.data.totalPage);
                    }else{
                        // 如果一页都没有，就默认一页
                        setPage(1);
                    }
                }
            }
        });
    }

效果：

bootstrap模态框

传送门：https://v3.bootcss.com/javascript/#modals

引入文件：

<!-- 使用bootstrap需要导入三个文件 -->
<script src="./bootstrap/js/jquery-1.12.4.min.js"></script>
<script src="./bootstrap/js/bootstrap.min.js"></script>
<link href="./bootstrap/css/bootstrap.min.css" rel="stylesheet">

基本使用：

html代码：

<!-- 模态框 -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="exampleModalLabel">新增分类</h4>
                </div>
                <div class="modal-body">
                    <form id="form">
                        <div class="form-group">
                            <label for="recipient-name" class="control-label">分类名称:</label>
                            <input type="text" class="form-control" id="recipient-name" name="name">
                        </div>
                        <div class="form-group">
                            <label for="message-text" class="control-label">分类别名:</label>
                            <input class="form-control" id="message-text" name="slug">
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default cancel">取消</button>
                    <button type="button" class="btn btn-primary confirm">确认</button>
                </div>
            </div>
        </div>
    </div>

    <a href="javascript:void(0);" class="btn btn-success btn-xs" id="xinzengfenlei"data-toggle="modal" data-target="#myModal">新增分类</a>
    <a href="javascript:void(0);" data-toggle="modal" data-target="#myModal" class="btn btn-info btn-xs">编辑</a>

js代码：

<script>
        //1.模态框出现之前
        $('#myModal').on('show.bs.modal', function (e) {
            //获取模态框事件触发源
            var target = e.relatedTarget;
            console.log(e.relatedTarget);
            if (target == $('#xinzengfenlei')[0]) {
                    //执行新增分类逻辑
                    alert('你点击了新增按钮');
                    //(1)设置按钮文本为新增
                    $('#myModal .confirm').text('新增');
                } else {
                    //执行编辑分类逻辑
                    alert('你点击了编辑按钮');
                    //(1)设置按钮文本为编辑
                    $('#myModal .confirm').text('编辑');
                }
        });


        //2.取消按钮点击事件
        $('#myModal .cancel').on('click', function (e) {
                // do something...
            //隐藏模态框
            $('#myModal').modal('hide')
        });

        //3.确认按钮点击事件
        $('#myModal .confirm').on('click', function (e, a) {
                // do something...
                if ($(this).text() == '新增') {
                    alert('新增成功');
                    //刷新页面
                    window.location.reload();
                } else {//编辑
                    alert('编辑成功');
                    //刷新页面
                    window.location.reload();
                }
            });

    </script>

jquery懒加载插件

图片延迟加载

传送门：http://www.jq22.com/jquery-info11629

引入文件：

<script src="js/jquery.min.js"></script>
<script src="./js/EasyLazyload.js"></script>

基本使用：

将需懒加载的图片src 替换为 data-lazy-src

<img data-lazy-src="..." />

例如：

调用全局方法lazyLoadInit():

<script>
        //调用全局方法
        lazyLoadInit();
        lazyLoadInit({
            coverColor:"white",//覆盖的颜色
            coverDiv:"<h1>test</h1>",//覆盖字体
            offsetBottom:0,
            offsetTopm:0,
            showTime:1100,
            onLoadBackEnd:function(i,e){
                console.log("onLoadBackEnd:"+i);
            }
            ,onLoadBackStart:function(i,e){
                console.log("onLoadBackStart:"+i);
            }
        });
</script>

jquery瀑布流插件

传送门：http://www.jq22.com/jquery-info5644

引入文件：

<link rel="stylesheet" type="text/css" href="css/default.css">
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/pinterest_grid.js"></script>

基本使用：

<script type="text/javascript">
		$(function(){
			$("#gallery-wrapper").pinterest_grid({
				no_columns: 5,
                padding_x: 20,
                padding_y: 20,
                margin_bottom: 50,
                single_column_breakpoint: 700
			});
			
		});
</script>

vue2-editor富文本编辑器

该编辑器是一个编辑器基于vue的封装，在vue里能比较简便的进行使用，但如果需要自定义功能，很大程度上还是依赖原编辑器的使用文档

传送门：https://www.vue2editor.com/

安装

 npm install vue2-editor  -S

引入与注册组件（该编辑器在vue中以组件注册的方式引入）

import { VueEditor } from "vue2-editor";
export default {
    components: {
        VueEditor
    },
    .......其他代码

渲染使用，用v-model双向绑定编辑器内容

<vue-editor 
  v-model="content"
></vue-editor>

配置图片上传处理

点击编辑器工具栏的图片图标，选择图片上传后，图片会自动插入到富文本当中

代码：

定义上传的函数，手动上传图片

<!-- :useCustomImageHandler="true" 使用自定义图片处理器 -->
<!-- @image-added="imgUpload" 声明图片选择完毕后的处理函数-->
:useCustomImageHandler="true"
@image-added="imgUpload"

在组件上的代码呈现：

<vue-editor 
	v-model="content"
	:useCustomImageHandler="true"
	@image-added="imgUpload"
></vue-editor>

这时需要编写图片处理函数imgUpload

通过formdata传参到后台

注意：该富文本本身可以通过将图片转为base64放到编辑器内容中，但base64字符串过大，数据库不便存储，故经常使用自定义方式

     imgUpload(file, Editor, cursorLocation, resetUploader){
               // 这里是富文本框选择完图片会触发的函数
               // 带有四个参数 file, Editor, cursorLocation, resetUploader
               // file 选中的图片
               // Editor 是当前编辑器实例对象
               // cursorLocation 当前光标所在位置
               // resetUploader 这是上传完图片用来重新初始化上传功能的函数
               let formdata = new FormData();
               formdata.append('file',file);
               this.$axios({
                    url:'/upload',
                    method:'post',
                    data:formdata
               }).then(res => {
                    // Editor.insertEmbed() 这是编辑器自带函数, 可以往编辑框内放入内容
                    // 三个参数 位置 / 类型 / 内容
                    Editor.insertEmbed(cursorLocation, 'image', this.$axios.defaults.baseURL + res.data.data.url);
                    // 将图片插入到富文本框之后还要重置上传功能
                    resetUploader();
               })
          }

回显富文本数据到编辑器，直接将从后台获取到的富文本数据传给编辑器v-model绑定的值。

自定义工具栏配置

工具栏例子 https://www.kancloud.cn/liuwave/quill/1409378

各种格式的列表 https://www.kancloud.cn/liuwave/quill/1409367

使用自定义工具栏

<vue-editor 
	v-model="form.content"
	:useCustomImageHandler="true"
	@image-added="imgUpload"
	:editorToolbar="customToolbar"
></vue-editor>

例如：

[
	["bold", "italic", "underline"],
	[{ list: "ordered" }, { list: "bullet" }],
	["image", "code-block"]
]

效果：

ElementUI 照片墙组件

element图片上传将ajax一同封装，所以不需要手动处理ajax进行传输；在组件上字节带上headers用以设置请求头的内容

               <!-- list-type 类型固定式照片墙 -->
               <!-- action 是上传接口地址 -->
               <el-upload
                    :action="$axios.defaults.baseURL + '/upload'"
                    :headers="{
                         Authorization: 'Bearer ' + token
                    }"
                    :on-success="coverSuccess"
                    :on-remove="coverRemove"
                    :file-list="form.cover"
                    list-type="picture-card">
                    <i class="el-icon-plus"></i>
               </el-upload>

action中是上传图片的后台接口

on-success ：每次添加一个图片触发的函数

on-remove ：每次删除一个图片触发的函数

这里每添加一个都放到this.form.cover数组中，删除时直接把照片墙的fileList传给cover数组

          coverSuccess(res, file){
               // 上传组件成功上传可以接受三个参数
               // res 请求结果
               // file 文件本身
               // fileList 文件列表
               // 1. 需要将 file 文件放入 this.form.cover 数组里面
               // 2. 我们的封面需要 id 这个 id 是从服务器传回来的
               file.id = res.data.id;
               console.log(file);
               this.form.cover.push(file);
          },
          coverRemove(file,fileList){
               this.form.cover = fileList;
          }

回显图片时，直接将图片数组回显给file-list绑定的值