js库总结

夜空孤狼啸

已于 2024-05-27 10:05:29 修改

阅读量741

点赞数 1

分类专栏： nodejs Vue React 文章标签： javascript vue.js 开发语言 react 前端

于 2023-04-13 09:57:03 首次发布

夜空孤狼啸

本文链接：https://blog.csdn.net/qq_43940789/article/details/130123137

版权

Vue 同时被 3 个专栏收录

39 篇文章 1 订阅

订阅专栏

React

21 篇文章 0 订阅

订阅专栏

nodejs

8 篇文章 0 订阅

订阅专栏

js库总结

“amfe-flexible”: “^2.2.1” //响应式
“@vueuse/core”: “^10.3.0” //封装了大量的常用方法
“html2canvas”: “^1.4.1”,//jspdf和html2canvas导出pdf文件
“jspdf”: “^2.5.1”,//jspdf和html2canvas导出pdf文件
“html-to-image”: “^1.6.2”, //将dom节点下载成png图片
“moment”: “^2.29.1”, // 时间格式化处理
“node-scp”: “^0.0.22”, // 局域网内使用scp命令复制文件（支持账号密码）
“node-xlsx”: “^0.21.0”,//使用nodejs读取xlsx文件内容
“nprogress”: “^0.2.0”,//页面顶部的进度条
“papaparse”: “^5.3.0”,//导出csv文件
“vue-i18n”: “^9.2.0-beta.13”, //语言转换翻译
“vue3-contextmenu”: “^0.2.12”, //右键菜单 vue-contextmenujs的使用
“vue-count-to”: “1.0.13”,//自动判断加计数或减计数
“element-china-area-data”,//地区多级联动，支持vue2/vu3(可以从这里获取数据)

vue3-print-nb 打印页面

vue3-print-nb 和 vue-print-nb 一个是vue3的，一个是vue2 的
github链接

<a-button v-print="printObj">vue3-print-nb</a-button>

//引入
import print from 'vue3-print-nb';
//自定义指令，这里是用的setup语法
const vPrint = print;
//或者
directives: {
    print   
}

const printObj = reactive({
  id: 'test', //这里的id就是上面我们的打印区域id，实现指哪打哪
  popTitle: '测试pdf', // 打印配置页上方的标题
  extraHead: '', // 最上方的头部文字，附加在head标签上的额外标签，使用逗号分割
  preview: false, // 是否启动预览模式，默认是false
  previewTitle: '预览的标题', // 打印预览的标题
  previewPrintBtnLabel: '预览结束，开始打印', // 打印预览的标题下方的按钮文本，点击可进入打印
  zIndex: 20002, // 预览窗口的z-index，默认是20002，最好比默认值更高
  previewBeforeOpenCallback() {
    console.log('正在加载预览窗口！');
  }, // 预览窗口打开之前的callback
  previewOpenCallback() {
    console.log('已经加载完预览窗口，预览打开了！');
  }, // 预览窗口打开时的callback
  beforeOpenCallback() {
    console.log('开始打印之前！');
  }, // 开始打印之前的callback
  openCallback() {
    console.log('执行打印了！');
  }, // 调用打印时的callback
  closeCallback() {
    console.log('关闭了打印工具！');
  }, // 关闭打印的callback(无法区分确认or取消)
  clickMounted() {
    console.log('点击v-print绑定的按钮了！');
  },
});

富文本编辑器

mavon-editor

适用于：vue2、vue3
github地址

wangEditor 富文本编辑支持vue2/3、react、html

wangEditor官网
不同语言安装稍微有些区别，看官网，这里以vue3为例

安装

yarn add @wangeditor/editor
# 或者 npm install @wangeditor/editor --save

yarn add @wangeditor/editor-for-vue@next
# 或者 npm install @wangeditor/editor-for-vue@next --save

安装好后，package.josn：

    "@wangeditor/editor": "^5.1.23",
    "@wangeditor/editor-for-vue": "^5.1.12",

具体代码：

<template>
  <div class="test">
    <div style="border: 1px solid #ccc">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef"
        :defaultConfig="toolbarConfig"
        :mode="mode"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml"
        :defaultConfig="editorConfig"
        :mode="mode"
        @onCreated="handleCreated"
      />
    </div>
    <a-button type="primary" @click="getCon">content</a-button>
  </div>
</template>

<script lang="ts" setup>
import '@wangeditor/editor/dist/css/style.css'; // 引入 css

import { onBeforeUnmount, ref, shallowRef, onMounted } from 'vue';
import { Editor, Toolbar } from '@wangeditor/editor-for-vue';
// import { i18nChangeLanguage } from '@wangeditor/editor'
// // 切换语言 - 'en' 或者 'zh-CN'
// i18nChangeLanguage('en')

const editorRef = shallowRef();
const mode = ref('simple');
// 内容 HTML
const valueHtml = ref('');

// 模拟 ajax 异步获取内容
// onMounted(() => {
//   setTimeout(() => {
//     valueHtml.value = '<p>模拟 Ajax 异步设置内容</p>';
//   }, 1500);
// });

const toolbarConfig = {};
const editorConfig = { placeholder: '请输入内容...' };

// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
  const editor = editorRef.value;
  if (editor == null) return;
  editor.destroy();
});

const handleCreated = (editor) => {
  editorRef.value = editor; // 记录 editor 实例，重要！
};

const getCon = () => {
  console.log(valueHtml.value);
};
</script>

<style lang="less" scoped>
.test {
  width: 80%;
  margin: 10% auto;
  border: 1px solid red;
  // height: 100%;
}
</style>

quill

参考地址

“vite-perfect-console-plugin”: “^1.0.2”,

vite-perfect-console-plugin：适用于 vite 项目

babel-plugin-perfect-console：适用于 webpack 项目

控制台console.log 打印更清晰明了

“@kjgl77/datav-vue3”: “^1.6.1”,

大屏可视化页面用的，加快开发速度

“radash”: “^12.1.0”

"radash"比lodash更好用
Radash是下一个你不能没有的库。首先，也是最重要的，它很强大。有了这些强大的函数，你就可以得到强大的类型和零依赖性。如果你能踏出一点信心，尝试一下这些函数，我毫不怀疑你会发现自己爱上了它。
官网：https://radash-docs.vercel.app/docs/getting-started

“lodash-es”: “^4.17.21”,

unocss

四个一起使用

"@unocss/preset-attributify": "^0.58.3",
"@unocss/preset-icons": "^0.58.3",
"@unocss/preset-uno": "^0.58.3",
"unocss": "^0.58.3",

“animate.css”: “^4.1.1”,

两个一起配合使用：

"animate.css": "^4.1.1",
"wow.js": "^1.2.2",

“amfe-flexible”: “^2.2.1”,

两个一起配合使用：
“postcss-pxtorem”: “^6.1.0”,
“amfe-flexible”: “^2.2.1”,

@vueuse/core

npm i @vueuse/core

vueuse 官网文档
在这里插入图片描述

html2canvas

jspdf和html2canvas导出pdf文件

jspdf

jspdf和html2canvas导出pdf文件

html-to-image

将dom节点下载成各种图片（png，svg，jpeg，）
github链接

import * as htmlToImage from 'html-to-image';

    const downloadImage = () => {
		//需要获取document对象
      htmlToImage.toBlob(document.getElementById('lineChart') as any).then((blob: any) => {
        window.saveAs(blob, '序列Q值.png');
      });
    }

moment

时间格式化处理

'use strict'
let moment = require('moment');
//获取当前时间
var now = moment().toDate();//Mon Jul 06 2020 13:50:51 GMT+0800 (中国标准时间)
console.log(now)
 
//格式化当前时间
now = moment().format('YYYY-MM-DD');//2020-07-06
console.log(now);
 
//其它几种格式化方法
now = moment().format('L') // 10/22/2016 
console.log(now);
 
now = moment().format('LL') // October 22, 2016
console.log(now);
 
//格式化当前时间
now = moment().format('YYYY-MM-DD:HH:MM:SS');
console.log(now);
 
//获取这个月初时间
let startMonth = moment().startOf('month').toDate();
console.log(startMonth);
 
//获取今天开始的时间
let dayOfStart = moment().startOf('day').toDate();
console.log(dayOfStart);
 
//获取今天结束的时间
let dayOfEnd = moment().endOf('day').toDate();
console.log(dayOfEnd);
 
 
//获取＋n小时
let lateHour = moment().add(2,'hour').toDate();
console.log(lateHour);
 
//获取＋n小时
console.log('//获取-n小时')
let beforeHour = moment().subtract(2,'hour').toDate();
console.log(beforeHour);
 
 
//获取＋n天
let lateDay = moment().add(+5,'day').toDate();
console.log(lateDay);
 
//获取-n天
let beforeDay = moment().add(-5,'day').toDate();
console.log(beforeDay);
//也可以表示为
beforeDay = moment().subtract(5,'day').toDate();
console.log(beforeDay);
 
console.log('//获取＋n月')
let lateMonth = moment().add(2,'month').toDate();
console.log(lateHour);
 
//获取＋n月
let beforeMonth = moment().subtract(2,'month').toDate();
console.log(lateHour);
 
 
 
//获取星期
let week = moment().format('dddd');
console.log(week);
 
//获取到现在的年限 如果不满一年显示出具体几个月
let years = moment('2020-12-31').fromNow();
console.log(years);

node-scp

局域网内使用scp命令复制文件（支持账号密码）
官网：https://www.npmjs.com/package/node-scp 点击去官网

const { Client } = require('node-scp')

	let  p.host = 192.168.1.121;
	let p.username = 'root';
	let p.password= '123456';


    Client({
      host: p.host, //需要连接的电脑的ip地址
      port: 22,
      username: p.username,//需要连接的电脑的账号
      password: p.password,//需要连接的电脑的密码
    }).then((client) => {
      console.log('suc');
      clientIntance = client
      event.sender.send('npdeScpConnectSuc', 'suc');

      if (p.type == 'uploadFile') {

        // 上传文件
        client.uploadFile(
          p.localPath,//本地文件路径
          p.serverPath, //远端要上传的位置路径（注意后面要拼接上要上传文件的名字）
        ).then((response) => {
          client.close() // remember to close connection after you finish
          event.sender.send('npdeScpUploadFile', 'suc');

        }).catch((error) => {
          message.error('上传失败')
          event.sender.send('npdeScpUploadFile', 'fail');
        })

      } else if (p.type == 'uploadDir') {

        // 上传文件夹
        client.uploadDir(
          p.localPath,//本地文件路径
          p.serverPath, //远端要上传的位置路径（注意后面要拼接上要上传文件的名字）
        ).then((response) => {
          client.close() // remember to close connection after you finish
          event.sender.send('npdeScpUploadDir', 'suc');

        }).catch((error) => {
          message.error('上传失败')
          event.sender.send('npdeScpUploadDir', 'fail');
        })

      } else if (p.type == 'downloadFile') {

        // 下载文件
        client.downloadFile(
          p.localPath,//本地文件路径
          p.serverPath, //远端要上传的位置路径（注意后面要拼接上要上传文件的名字）
        ).then((response) => {
          client.close() // remember to close connection after you finish
          event.sender.send('npdeScpDownloadFile', 'suc');

        }).catch((error) => {
          message.error('下载失败')
          event.sender.send('npdeScpDownloadFile', 'fail');
        })


      } else if (p.type == 'downloadDir') {

        // 下载文件夹
        client.downloadDir(
          p.localPath,//本地文件路径
          p.serverPath, //远端要上传的位置路径（注意后面要拼接上要上传文件的名字）
        ).then((response) => {
          client.close() // remember to close connection after you finish
          event.sender.send('npdeScpDownloadDir', 'suc');

        }).catch((error) => {
          message.error('下载失败')
          event.sender.send('npdeScpDownloadDir', 'fail');
        })

      }

    }).catch((e) => {
      console.log('连接失败');
      event.sender.send('npdeScpConnectSuc', 'fail');

    })

node-xlsx

使用nodejs读取xlsx文件内容


//引入
let xlsx = require('node-xlsx');

//读取
let sheets = xlsx.parse(‘文件所在绝对路径’);//获取到所有sheets

// sheets 是个数组，里面是所有表，拿到的如下图所示，拿到数据后面，怎么处理就好说了

nprogress

页面顶部的进度条
import NProgress from “nprogress”; // 导入 nprogress模块
import “nprogress/nprogress.css”; // 导入样式，否则看不到效果（或者在main.ts里面引入）
NProgress.configure({ showSpinner: false }); // 显示右上角螺旋加载提示 papaparse
NProgress.start(); //开启进度条
NProgress.done(); //完成进度条

//继续，在下面声明完router(const router = new VueRouter({......}))后面写上路由钩子函数如下所示。

router.beforeEach((to, from, next) => {

NProgress.start(); //开启进度条

//中间写其他的项目中所需要的一些代码，例如有些网页只有登录了才能进，在这里可以做出判断，判断完了满足要求后就可以放行 next()

next();

});

router.afterEach(() => {

NProgress.done(); //完成进度条

});

//这个呢，基本上会这几个api就足够了，我们用的最多的就是这几个，NProgress.start()开启进度条，NProgress.done()完成进度条，如果我们想改变进度条的颜色，可以进入App.vue里，在style中加上下面这样几行代码即可。

#nprogress .bar {

  background: blue !important;    //这里可以随便写颜色

}

导出csv文件

vue-i18n

语言转换翻译
参考大佬的博客

vue3-contextmenu

右键菜单 vue-contextmenujs的使用

vue-count-to vue3-count-to

vue-countTo 是一个无依赖的轻量级 vue 组件，可以自己覆盖 easingFn。可以设置 startVal 和 endVal ，它会自动判断加计数或减计数。

参考地址： https://github.com/search?q=vue-count-to

<template>
  <count-to :start-val="0" :end-val="13600" :duration="3600" class="card-panel-num" />
</template>

<script>
import CountTo from 'vue-count-to'

export default {
  components: {
    CountTo
  },

}
</script>

<style lang="scss" scoped></style>

element-china-area-data

github地址：github地址

这个代码可能会用得到

 		const test = () => {
            // console.log(testoptions);
            let data = testoptions.map(item => {
                return {
                    value: item.label,
                    label: item.label,
                    children: item.children.map(res => {
                        return { value: res.label, label: res.label }
                    })
                }
            })
            console.log(data);
        }

在这里插入图片描述

js-cookie

设置账号密码，存cookie
官网：npm参考地址

vue 汉字转拼音字母 js-pinyin

<script>
let pinyin = require('js-pinyin');

export default {
 data(){
     return{
         
     }
 },
 mounted(){
    console.log(pinyin.getFullChars('博客'));//BoKe
    console.log(pinyin.getCamelChars('博客'));//BK
    console.log(pinyin.getCamelChars('12博客34'));//12BK34
    console.log(pinyin.getCamelChars('a博客b'));//aBKb
 }
};
</script>

夜空孤狼啸

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
js库总结

"html2canvas": "^1.4.1",//jspdf和html2canvas导出pdf文件 "jspdf": "^2.5.1",//jspdf和html2canvas导出pdf文件 "html-to-image": "^1.6.2", //将dom节点下载成png图片 "moment": "^2.29.1", // 时间格式化处理 "node-scp": "^0.0.22", // 局域网内使用scp命令复制文件（支持账号密码） "node-xlsx": "
复制链接

扫一扫