前端源-CSDN博客

原创前端UI框架整理

1.TDesign腾讯最近刚刚公开的一套UI框架，个人感觉不错，下面是官网介绍：TDesign 是什么TDesign 是腾讯各业务团队在服务业务过程中沉淀的一套企业级设计体系。TDesign 具有统一的设计价值观，一致的设计语言和视觉风格，帮助用户形成连续、统一的体验认知。在此基础上，TDesign 提供了开箱即用的 UI 组件库、设计指南和相关设计资产，以优雅高效的方式将设计和研发从重复劳动中解放出来，同时方便大家在 TDesign 的基础上扩展，更好的的贴近业务需求。为什么会有 TDe

2022-01-05 12:02:27 3032

原创 node调用python脚本做一个简易demo

python脚本部分命令参数是小说目录网址加任务号不适用其他网站，根据测试的网站所写# _*_coding:utf8_*_from requests_html import HTMLSessionimport sysimport ossession = HTMLSession()# 字符串切分，筛选出域名和地址array = sys.argv[1].split('/')reId = sys.argv[2]baseHost = array[0]+"//"+array[2]bookUrl

2021-03-24 16:17:32 364

原创 default-checked-keys 父节点选中子节点全选解决方式

解决方式一：check-strictlycheck-strictly默认为 false,严格的遵循父子不互相关联的做法，设置为true子节点就不会被全部选中缺点：失去父子关联，没有半选状态，如果需要半选状态请用方式二<el-tree :data="data" show-checkbox default-expand-all node-key="id" check-strictly="true" ref="tree" highlight-current :props

2021-03-24 15:25:56 1741

原创 vue-qr 二维码批量导出

参考Vue批量生成二维码并打包下载首先我们需要安装三个插件"jszip"//zip打包"file-saver"//文件保存"vue-qr"//二维码完整代码如下:src/components/QRcode/index.vue<template> <div> <div v-for="(item, index) in qrCodeData" :key="index"> <vue-qr :id_name="'qco

2020-11-24 15:46:42 1585

原创 js 小数（浮点数）计算

在js中计算浮点数有精度丢失的问题如下33.3*100//3329.99999999999950.1+0.2//0.300000000000000040.3/0.1//2.99999999999999960.4-0.1//0.30000000000000004为了精确计算，我们需要先把浮点数转成整数计算//浮点数乘法计算，用于转换整数export const integer = (arg1, arg2) => { let m = 0, s1 = arg1.toString(), s

2020-11-24 14:56:20 1430

原创 element-plus 一个vue3.xUI框架（element-ui的3.x 版初体验）

突然发现已经半年没更新的element-ui更新了更新了什么还不清楚，但是告知了基于vue3.x版本的 element-plus 已经出来了。先来上手体验一下首先安装一个最新的@vue-cli，搭建一个vue3.x的项目，脚手架创建流程已经很简洁了，这里就不多说了。建好之后，直接开始安装吧npm i element-plus 为了方便，直接采取全部引入的方式src/plugins/element.tsimport ElementPlus from 'element-plus'impor

2020-11-04 13:17:05 166637 46

原创 react-router 4.0之后路由守卫的功能实现

react-router 4.0之前有onEnter，要实现路由守卫功能，也十分相似。在Route的render函数中，做判定拦截，这里举一个简单的例子const RouteWithSubRoutes = (route) => { return <Route path={route.path} exact={route.path === '/'} render={(props) => { let isLogin = window.sessionSt

2020-09-07 14:58:37 650

转载（长期搬运）es6 ~ 更新至 es2021 新增特性

ES20201. 类的私有变量类的主要目的之一是将代码包含到可重用的模块中。你创建一个在许多不同地方使用的类，你可能不希望它内部的所有内容都是全局可用的。现在，通过在变量或函数前面添加一个简单的哈希符号，我们可以将它们完全保留为类内部使用。class Message { // 定义一个私有变量 #message = "Howdy" greet() { console.log(this.#message) }}const greeting = new Message()// 通

2020-09-07 11:31:57 1015

原创 js/ts 可选链操作符 ?. 跟空值合并操作符 ?? 运算符的使用，简化三元语句默认值与防止对象空值引用

写js代码的时候经常会遇到下面这种情况if(a&&a.b&&a.b.c)其实想要判断的值明明只有a.b.c一个却因为防止空值报错不得不一个一个判断，这个时候就可以用 .? 来代替if(a.?b.?c)还有传值的时候为了保证数据格式的准确，经常会加一个默认值c = a?a:b这种情况下用 ?? 就可以实现同样的效果c = a??b...

2020-09-03 13:44:21 1492

原创 vue 内置动画组件 transition介绍

vue官方介绍vue的内置组件，可以给任意元素包裹并且添加离开进入的动画效果，官方文档已经介绍的很详细了，这里就简单举个例子在routerView中用transition包裹，实现页面切换动画效果<transition name="fade-transform" mode="out-in"> <router-view></router-view></transition>动画样式/* fade-transform */.fade-transf

2020-08-13 15:33:41 2318

原创通过less或者scss 定义变量实现 vue主题切换

最近做一个主题切换功能，查了一下网上的实现方式，找到的都不是我想要的效果，于是我便按照自己的想法做了一套方案。 style.less //定义颜色等主题变量并全局引入 factory.js //定义修改变量值的方法 vuex //管理动态变更主题样式单一值 model.js //存放固定方案主题样式首先我们要全局引入一个style.less文件，这样可以在项目中直接调用style.less中的变量，为了实现这个功能我们需要借助插件。npm i style-resources-loade

2020-08-13 15:13:45 4538 23

原创 vuecli 官方文档配置整理 vue.config

根据官方文档，整理了一份配置文件module.exports = { devServer:{ host:'0.0.0.0',//会被命令行参数覆写 port:3000,//会被命令行参数覆写 https:false,//会被命令行参数覆写 proxy: { '/api': { //反向代理配置所以以/api开头的请求，请求地址会被改写为target所写的地址 target: '<url>', ws: true,

2020-08-04 16:16:49 655

原创利用Element.scrollIntoView()简单快速的实现目录、锚点、定位等类似功能

利用原生方法我们可以做类似目录导航一类的锚点功能Element.scrollIntoView() 方法让当前的元素滚动到浏览器窗口的可视区域内。案例var box = document.getElementById("box");box.scrollIntoView();box.scrollIntoView(false);如果使用vue或者react，推荐用ref做动态标记用来捕获元素scrollIntoView默认可视区顶部alignToTop可选一个Boolean值：如果为tru

2020-07-28 15:13:56 1280 2

原创 vuecli4 搭建页面空格```& n b s p；```换行不显示被压缩

最近升级了一个老项目，发现页面样式改变，在模板中无论输入多少个 &nbsp；页面都只显示一个空格。排查了一下原因，发现是在vue2.6版本升级之后页面template中的换行和空格都被过滤了。于是我就去看了一下官方文档preserveWhitespace默认为 true。这意味着编译好的渲染函数会保留所有 HTML 标签之间的空格。如果设置为 false，则标签之间的空格会被忽略。这能够略微提升一点性能但是可能会影响到内联元素的布局。本来以为到这就可以结束了，结果发现并没有生效，想了很

2020-07-27 15:42:59 1328 14

空·之·音