无知者无畏

原创 Vue封装组件并发布npm

install Vue的插件必须提供一个公开方法install，该方法会在你使用该插件，也就是 Vue.use(yourPlugin)时被调用。这样也就给Vue全局注入了你的所有的组件。你为什么要二次封装el组件?提供开发效率提供组件的复用性（组件逻辑较为复杂的时候，封装可以让下次复用更简单）第 1 章：组件封装使用方法如下：在项目 / main.jsimport ui2010 from 'ui-2010'; // 引入结构import 'ui-2010/styles/ui20

原创 项目中常用的数据处理方法：数组/对象/字符串

项目中常用的数据处理方法： // 数组中是否包含某个值：判断数组initArray里面的值是否在数组checkList中 var initArray = ['1', '41', '4', '3', '6']; var checkList = ['0'] var newArray = initArray.map(v => { return checkList.includes(v) }) con

原创 仿ele封装vue-ui 组件库

模仿element-ui封装vue组件库初始化项目–优化字体图标使用vue脚手架初始化一个项目：使用 vue created my-ui，创建一个名为my-ui的项目优化iconfont字体图标：方法：第一步：将选择好的字体图标，添加项目。第二步：然后点击更多操作，选择编辑项目第三步：修改FontClass/Symbol前缀 和 Font Family，统一修改为：vh-icon-第四步：将字体图标文件，复制粘贴到项目 iconfont.css将初始的iconfont类改为了[class*

原创 vuex基础

Vuex基础Vuex概述Vuex基本使用使用Vuex完成todo案例小范围内的数据共享组件之间共享数据的方式父向子传值：v-bind 属性绑定子向父传值：v-on 事件绑定兄弟组件之间共享数据： EventBus数据接收方通过 on 自定义接收事件 接收数据的那个组件数据发送方通过 emit 发送数据 发送数据的那个组件以上只适合，如果需要大范围的进行数据共享使用vuexVuex概述概念：Vuex是实现组件全局状态（数据）管理的一种机制，可以方便的实现组件之间的

原创 vue全局组件自动加载注册（重点）

全局组件自动加载注册（重点）官方文档在src / components / 新建global文件夹；（这个路径与components/index.js中的配置保存一致）第一步：global / test.vue（测试使用）第二步：在需要的页面以标签的形式使用即可。<base-test></base-test><template><div class="create">this is a test</div></templa

原创 npm run build 自动生成dist.zip

npm 自动打包dist.zip

原创 ts踩坑记录：即使在不同文件夹的ts文件，声明具有相同名称的类型时也会出现重复标识

ts踩坑记录：不同ts文件下，提示变量名重复

原创 ts踩坑记录：其目标缺少构造签名的 “new“ 表达式隐式具有 “any“ 类型

ts踩坑记录：其目标缺少构造签名的 "new" 表达式隐式具有 "any" 类型

原创 ts踩坑记录： suppressImplicitAnyIndexErrors is deprecated and will stop functioning in TypeScript 5.5.

ts踩坑记录

原创 谷歌浏览器版本116，点击下拉框没反应

浏览器兼容问题

原创 微信小程序WXS语法-时间格式化

原创 JavaScript中自增运算符(++)、自减运算符(--)的问题

本人“才疏学浅”，属于技术小白，下述内容均为学习过程中的笔记总结和个人感悟，若有错误之处敬请指正。之前学习过++--的问题，但是现在只记得口诀不知道怎么运算了，如果有相同困惑的小伙伴，赶紧跟随我学习起来吧！先说口诀：运算符在前，如：++a 先运算后输出。运算符在后，如：a++ 先输出后运算先来看个简单的例子var a = 1;console.log(a); // 结果 1console.log(a++); // 结果 1console.log(a); // 结果 2分析过程：a++根.

转载 .env前端配置多环境打包

.env前端环境变量配置参考资料：https://www.cnblogs.com/xiaohouzi6/p/14445570.htmlhttps://cli.vuejs.org/zh/guide/mode-and-env.html#%E6%A8%A1%E5%BC%8F项目有开发环境、测试环境、线上环境，里面的接口域名等是不同的。每次调试或者打包的时候手动改动各个变量，比较麻烦，也容易出错，所以用自动化方式直接配置的不同的环境变量。文件配置在项目根目录下添加文件，并配置变量.env

原创 react后台管理--路由demo

react后台管理系统代码演示效果1. 入口文件 indexindex.jsimport React from 'react'import ReactDOM from 'react-dom'import Router from './Router'ReactDOM.render(<Router></Router>, document.getElementById('root'))index.cssbody{ padding: 0px; mar

原创 todoList案例（创建组件的2种方法：class和function）

React Hooks - TodoListApp.jsimport React, { useState, useCallback,useEffect } from 'react';// 导入组件import TodoInput from './components/TodoInput';import TodoList from './components/TodoList';function App () { const [todoList, setTodoList] = useSt

转载 Vue-i18n 实现中英文切换

中英文切换先安装依赖npm install vue-i18n创建文件在根目录新建i18n文件langs/cn.jsmodule.exports = { home: { title: '首页' }}langs/en.jsmodule.exports = { home: { title: 'home' }}index.jsimport VueI18n from 'vue-i18n';import Vue from 'vue';Vue.use(VueI

原创 van-Circle 环形进度条

van-Circle 环形进度条涉及的功能点：圆形进度条：文本自定义样式大小颜色定制、大小定制、渐变色、宽度定制模拟断点续传<template> <div class="demo"> <div class="syn_data fcc pt20"> <van-circle class="syn_circle" v-model="currentRate" :rate="rate

原创 van-checkbox 复选框功能

van-checkbox 复选框功能涉及的功能点：动态设置弹出框的最大高度VUE点击遮罩层内功能区以外的地方，遮罩层关闭设置disabled，确定添加不可修改去除默认滚动条<template> <div class="hw_detail"> <div @click="isPop = true" class="btn"> <span>添加选项</span> </div> <di

原创 你不知道的CSS特效

文字两边添加中间线鼠标移除下拉箭头旋转鼠标移入图片放大鼠标移入-进度条扫描二维码页面底部走动的卡通热点新闻持续滚动速度曲线步长旋转木马美的导航搜索小米产品耳机按钮事件进度条炫酷盒子效果炫酷鼠标悬停效果炫酷气泡漂浮效果炫酷动态流线条按钮加载中Loading效果1. 文字两边添加中间线<!DOCTYPE htm...

原创 vant日期选择组件（默认选中当天日期）

vant日期选择组件vant组件库全局安装vant组件库，npm i vant -S。然后在main.js中：import Vant from 'vant';import 'vant/lib/index.css';Vue.use(Vant);使用用法<template> <div class="home"> <van-button type="primary" @click="showPopup">主要按钮</van-button&gt

转载 module.exports、exports和export、export default之间的区别

文章摘录自：https://www.jianshu.com/p/a7fce0200c68首先要知道前者和后者是两个不同的规范下的模块导出方式，我们来分别看一下：CommonJS模块规范CommonJS规范规定，每个模块内部，module变量代表当前模块对象。module的exports属性就是对外提供的接口，加载该模块时其实就是加载该模块的module.exports属性。let a = 10;let fn = ()+>{ return 1 + 2;}module.expor.

原创 计算属性computed

vue官方文档：计算属性计算属性和方法的区别第 1 章：计算属性的基本用法<template> <div class="computed"> <p>{{ number }}</p> <p>double: {{ double1 }}</p> <input type="text" v-model="double2" /> </div></template>&lt

原创 watch 侦听器

vue官方文档-watch讲解Vue中计算属性和watch的区别侦听字符串 和 侦听对象的属性 用法的区别第 1 章：watch 侦听器 基本用法侦听字符串 和 侦听对象的属性 用法的区别<template> <div class="watch"> <input type="text" v-model="name" /> <p>{{ name }}</p> <input type="text" v-mod

原创 watch 侦听器

vue官方文档-watch讲解侦听字符串 和 侦听对象的属性 的区别第 1 章：watch 侦听器 基本用法<template> <div class="watch"> <input type="text" v-model="name" /> <p>{{ name }}</p> <input type="text" v-model="info.age" /> <p>{{ info

原创 双飞翼布局（一般用于PC端网页布局）

双飞翼布局（一般用于PC端网页布局）1. 布局目的两侧内容宽度固定，中间内容宽度自适应三栏布局，中间一栏最先加载、渲染出来（主要内容）2. 实现方法：float + margin<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-sc

原创 圣杯布局（一般用于PC端网页布局）

圣杯布局（一般用于PC端网页布局）1. 圣杯布局目的两侧内容宽度固定，中间内容宽度自适应三栏布局，中间一栏最先加载、渲染出来（主要内容）2. 实现方法：float + margin<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-s

原创 vscode常用插件

vscode常用插件：版权声明：内容来源于技术胖博客地址：https://jspang.com通用插件：1.透明效果插件 windows opacity ；推荐：透明度：2302. vscode中打开浏览器，光明正大摸鱼Browser preview3. 迅速提升代码质量：booster4. 快速找到括号 Bracket pair colorizer5. VSCod...

原创 CSDN锚点跳转

学习锚点跳转跳转到footer处的锚点链接，点击即会跳转第一步 [跳转到footer处的锚点链接，点击即会跳转](#footer)第二步 <div id="footer"></div>跳转到这里---锚点所指定的位置标记---名字为“footer”内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域

原创 Vue中v-if和v-for为何不能连用

Vue中v-if和v-for为何不能连用？<div v-for="(item, index) in list" :key="index" v-if="flag">{{ item }}</div>原因分析v-for 会比 v-if优先执行，当一个标签上面同时存在：v-for 和 v-if 的时候，会先执行v-for循环，然后去看循环出来的每个div上面flag的值，是真还是假。如果flag为true，就显示 ，否则就不显示这样就造成了不必要的性能浪费解决方案v-f

转载 HTML5 Canvas 圆形进度条并显示数字百分比

HTML5 Canvas 圆形进度条并显示数字百分比原文链接：https://www.cnblogs.com/moqiutao/p/6430079.html效果图：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>HTML5 Canvas 圆形进度条并显示数字百分比</title> <style>

转载 【H5】解决ios禁止缩放失效的方法（亲测有效）

【H5】解决ios禁止缩放失效的方法 <script> window.onload=function () { document.addEventListener('touchstart',function (event) { if(event.touches.length>1){ event.preventDefault(); } }); var la

转载 js去除数组中空值的方案

js方法去除数组中的空值splice方法 /* 方法一：splice方法 缺点：不适用字符串中包含空格 如：array = [1, 2, 3, ' ']，调用该方法，结果：[1, 2, 3, ' '] */ var array = [1, 2, 3, ''] console.log(trimSpace(array)); //打印结果： [1, 2, 3] function tr

转载 基于vue实现可拖动弹框

基于vue实现可拖动弹框el-dialog弹框拖拽在 utils 中新建 directives.js 文件import Vue from 'vue'// 自定义元素实现弹框拖拽[重点]Vue.directive('draw', { inserted: function (el, binding, vNode) { el.setAttribute('style', 'position: fixed; z-index: 9999') }, bind: function (el

原创 function经典面试题

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>function经典面试题</title></head><body> <script>

原创 数组去重的方案

第 1 章：数组去重1.1 单个元素去重1.1-1 利用ES6 Set去重function unique(arr) { return Array.from(new Set(arr))}var arr = [1, 2, 3, 4, 5, 2, 1, 9, 0, 5]console.log(unique(arr));//=>[1, 2, 3, 4, 5, 9, 0]1.1-2 利用filter去重var r;var arr = [1, 2, 3, 4, 5, 2, 1, 9

转载 页面刷新vuex的state数据丢失这么办~

vue单页面应用刷新网页后vuex的state数据丢失的解决方案首先感谢各位博主的分享，参考文章：https://blog.csdn.net/guzhao593/article/details/81435342https://blog.csdn.net/gitchatxiaomi/article/details/1089140881. 刷新页面，vuex的state数据丢失的原因？js代码是运行在内存中的，代码运行时的所有变量、函数也都是保存在内存中的。进行刷新页面的操作，以前申请的内存被释放，

原创 微信小程序：封装微信原生方法

封装微信原生方法封装请求：utils / index.js// 封装请求方法function request(method, url, data) { return new Promise((resolve, reject) => { wx.showLoading({ title: '加载中', }) wx.request({ method, url, data, success: res =>

原创 vue父子兄弟之间的组件通信

vue组件通信的方式父子组件通信父组件：father.vue<template> <div class="father"> <h1>父组件</h1> <!-- 父组件 接收 子组件的数据 --> <p :style="{ fontSize: fontsize + 'px', color: setColor }"> 改变颜色和字体大小 </p> <!-

转载 文件 或者 图片 与 base64 之间的转换

1. 字符串与base64互转 // var base64 = window.btoa(window.encodeURIComponent(str)) // 简写：字符串转base64 var str = '读取文件' //字符串转base64 function encode(str) { // 对字符串进行编码 var encode = encodeURI(str); // 对编码的字符串转化base64 v

原创 微信小程序

微信小程序主要目录和文件的作用？文件作用project.config.json项目配置文件，用得最多的就是配置是否开启 https 校验App.js设置一些全局的基础数据等App.json底部 tab, 标题栏和路由等设置App.wxss公共样式，引入 iconfont 等pages里面包含一个个具体的页面index.json配置当前页面标题和引入组件等index.wxml页面结构index.wxss页面样式表index.