- 博客(136)
- 收藏
- 关注
RSS订阅原创 vue，elementUI多表单同时提交，表单校验解决方案
1. 为每个组件设置ref，值分别为ref1，ref2，ref3，再为各个组件中的el-form设置独立的ref和rules，三个表单的ref值分别为form1，form2，form3.假设有一个页面，需要分三步填写三个表单，且每个表单位于独立的组件中，然后最后保存同时提交，如何进行表单必填项校验？2. 父级组件引入三个子组件。
2024-03-07 11:58:35
964
2
原创 uniapp开发app应用从创建到上架
通过uniapp官方开发文档，可以完成app开发，但开发过程中难免遇到疑难杂症，以下是本人开发过程中遇到的各种问题及应对方式，仅供参考。
2023-11-13 10:25:21
3883
原创 箭头函数和普通函数的区别
箭头函数1、只有一个参数的时候，参数可以不加小括号，没有参数或2个及以上参数的，必须加上小括号2、返回语句只有一条的时候可以不写{}和return，会自动加上return的，返回多条语句时必须加上{}和return...
2022-07-28 15:49:25
275
原创 pdf.js引入方式及初始化配置
官方下载地址：Getting StartedA general-purpose, web standards-based platform for parsing and rendering PDFs.http://mozilla.github.io/pdf.js/getting_started/#download 下载后解压缩文件，解压后文件目录如下： 将整个文件夹拷贝到项目public目录下的plugin文件夹下： 此时已经将pdf.js完全引入到项目中，然后在使用该功能的页面中写入：其中通过v-
2022-06-30 17:57:37
4760
5
原创 什么情况下使用Vue.use()方法
大前提：引入的插件提供了install方法，才能使用Vue.use方法，没有提供install方法的插件，是没有办法通过Vue.use使用的。1.引入的第三方插件，如果在某个页面中使用，那么需要在main.js中引入改插件，并使用Vue.use；如果是在页面内引入，可以在components属性中添加该引入的插件，入vant的按需引入，在页面内引入某个vant组件，在components中的写法如下：components: { [Button.name]: Button }这样就不
2022-01-10 13:56:38
1380
1
原创 通过CND方式引入elementui，vue，vuex，vue-router
首先在public目录下的index.html中引入对应第三方库的cdn地址：<link rel="stylesheet" href="https://unpkg.com/element-ui@2.15.1/lib/theme-chalk/index.css"><script src="https://cdn.bootcss.com/vue/2.6.11/vue.min.js"></script><script src="https://unpkg.com
2021-11-26 14:57:18
1246
原创 require.context()的用法
一般用于加载某个目录下的多个文件，如：const modules = require.context('./components/', false, /\.vue$/);require.context()接收三个参数，第一个参数是要加载的文件目录地址，第二个参数是true或false，表示是否需要加载子目录，第三个参数是个正则表达式，表示要加载哪些文件，上面代码表示要加载components目录下的.vue文件。modules得到的值是一个函数：ƒ webpackContext(req)
2021-09-26 18:02:29
925
原创 结合elementUI源码谈Vue.use的使用
官方解释Vue.use方法的使用：Vue.use( plugin ) 参数： {Object | Function} plugin 用法： 安装 Vue.js 插件。如果插件是一个对象，必须提供install方法。如果插件是一个函数，它会被作为 install 方法。install 方法调用时，会将 Vue 作为参数传入。 该方法需要在调用new Vue()之前被调用。 当 install 方法被同一个插件多次调用，插件将只会被安装一次。 画重点：如果插...
2021-09-16 16:21:44
1223
原创 el-tabs-pane组件在dialog窗口关闭卡死问题
终极解决方案：设置dialog中的属性：destroy-on-close为false；
2021-07-08 09:41:27
594
转载 简单通俗的理解Vue3.0中的Proxy
转自https://segmentfault.com/a/1190000021991591，作者是阿里巴巴的前端妹子https://segmentfault.com/u/funnycoderstarProxy什么是代理呢，可以理解为在对象之前设置一个“拦截”，当该对象被访问的时候，都必须经过这层拦截。意味着你可以在这层拦截中进行各种操作。比如你可以在这层拦截中对原对象进行处理，返回你想返回的数据结构。ES6 原生提供 Proxy 构造函数，MDN上的解释为：Proxy 对象用于定义基本操作的..
2021-07-05 13:55:57
1209
原创 vue引用/下载public目录下文件的方式
如需要下载public下的excel模板文件window.location.href = process.env.BASE_URL + 'template/数据模板.xlsx'qi'zhon
2021-06-04 17:06:15
3789
原创 terser-webpack-plugin删除代码注释、打印敏感信息等
1.安装插件（此插件可移除js和vue文件中的注释、打印等信息）npm installterser-webpack-plugin -D;2.在vue.config.js中进行配置const TerserPlugin = require("terser-webpack-plugin");configureWebpack: { optimization: { minimize: true, minimizer: [ new TerserPlug.
2021-05-17 16:04:27
3425
2
原创 vue-cli3配置webpack-bundle-analyzer的方法
1.安装webpack-bundle-analyzer；npm installwebpack-bundle-analyzer -D;2.在vue.config.js中配置：chainWebpack: config => { config.plugin('webpack-bundle-analyzer') .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin) },3.运行：npm run s.
2021-05-17 15:51:30
2678
1
原创 vue+vant国际化i18n用法
1.安装i18n npm installvue-i18n -S2.在src目录下创建一个lang文件夹，内建三个文件：index.js en_us.js zh_cn.jsen_us.js代码如下：export default { app: { hello: 'Hello,World' }}zh_cn.js代码如下：export default { app: { hello: '你好，世界！' }}index.j.
2021-05-17 15:43:09
2255
2
原创 ckeditor5图片上传功能的使用
如果想使用ckeditor5中的图片上传功能，就无法在项目中通过npm的方式来安装ckeditor，而是需要在https://ckeditor.com/ckeditor-5/online-builder/中先配置所需要的ckeditor的功能及插件，然后将代码下载下来，然后修改下载下来的代码内容，然后重新打包，单独将打包后的ckeditor.js引入到自己的项目中。在https://ckeditor.com/ckeditor-5/online-builder/中使用Classic模式（其它模式不保证..
2021-04-25 16:36:54
3396
原创 PC触摸屏滑动问题及禁止浏览器默认滑动行为
PC端触屏项目，滑动时会引发浏览器默认动作，比如左右滑动时，会触发浏览器的前进、后退行为，此外，浏览器还带有缩放行为，而一般情况下，项目中是不需要这些行为的，而单纯的禁用浏览器默认行为的代码，会影响浏览器的上下滚动等正当需求，因此需要对禁用默认行为的触发条件进行判断，代码如下：let box = document.querySelector(".app-main"); box.addEventListener("touchstart", function (e) { this.
2021-04-25 15:52:46
1817
原创 下拉框无法收回的解决方法：focus-outside使用方式
在开发过程中遇到过这样一种情况，当select下拉面板展开后，此时如果点击iframe或富文本编辑器的输入框，select的下拉面板没有收回，这是因为在iframe或富文本编辑器的点击没有触发select下拉面板的outside点击事件，所以需要通过focus-outside插件来解决。官方npm网站：https://github.com/txs1992/focus-outside/blob/master/docs/zh-cn.md#readme安装：npm install focus-outside
2021-04-01 11:35:42
1519
原创 js如何将后端返回的文件流下载成文件
if (res) { //res是后端返回的文件流 const blob = new Blob([res]); let url = window.URL.createObjectURL(blob); let link = document.createElement("a"); link.style.display = "none"; link.href = url; link.setAttribute( "download", .
2021-04-01 10:10:19
681
原创 ckeditor5快速使用
ckeditor官网提供了可以个人定制的方式，然后将地址好的包下载到本地，即可立即使用，定制方式如下：打开官网定制页面：https://ckeditor.com/ckeditor-5/online-builder/第一步：选择一个编辑器的类型，本人选择的是文件类型的编辑器：Decoupled document；第二步：选择编辑器中需要用到的工具及插件；第三步：选择工具栏中要显示的工具；第四步：选择默认的语言；第五步：开始build；第六步：下载build后的包
2021-04-01 09:59:20
1788
原创 获取字符串真实字符长度（一个汉字占两个字符）
getLength(str) { var realLength = 0, len = str.length, charCode = -1; for (var i = 0; i < len; i++) { charCode = str.charCodeAt(i); if (charCode >= 0 && charCode <= 128) realLength += 1; .
2021-03-18 09:38:34
319
转载 webpack中require.context的作用
在我们项目开发中，经常需要import或者export各种模块，那么有没有什么办法可以简化这种引入或者导出操作呢？答案是肯定的，下面就为大家介绍一下require.context我们会这样引入组件：import A from 'components/A'import B from 'components/B'import C from 'components/C'import D from 'components/D'// ...这样很蛋疼，因为每加一个组件，可能都要写这么一句，这样
2020-11-19 10:01:42
266
原创 如何搭建一个react项目？
使用react很长时间，写个搭建项目的文档，用于新项目的快速启动。本项目使用的技术栈：create-react-app react-router ant-design react-redux一、使用create-react-app创建项目npx create-react-app my-appcd my-appnpm start二、引入react-router，创建基础路由及页面cnpm install react-router-dom -S使用react-router
2020-11-12 10:51:44
2306
3
原创 koa2基础入门（新手快速上手）
安装koa2# 初始化package.jsonnpm init# 安装koa2 npm install koa新建index.jsconst Koa = require('koa')const app = new Koa()app.use( async ( ctx ) => { ctx.body = 'hello koa2'})app.listen(3000)console.log('[demo] start-quick is starting at port
2020-10-21 14:44:32
567
原创 react-router的基本用法
npm install react-router-domimport React from "react";import { BrowserRouter as Router, Switch, Route, Link} from "react-router-dom";export default function App() { return ( <Router> <div> <nav> .
2020-10-19 10:57:58
629
原创 vue-router常用配置
<script src="https://unpkg.com/vue/dist/vue.js"></script><script src="https://unpkg.com/vue-router/dist/vue-router.js"></script><div id="app"> <h1>Hello App!</h1> <p> <!-- 使用 router-link 组件来导航..
2020-10-16 22:19:49
299
原创 javascript基本概念
纯函数：只要输入的参数相同，那么函数返回的结果一定相同。并且函数内部不会对传入的参数做改变。作用域：变量或者函数的有效作用范围；作用域链：我们需要查找某个变量值，会先在当前作用域查找，如果找不到会往上一级查，如果找到的话，就返回停止查找，返回查找的值，这种向上查找的链条关系，叫作用域链；闭包：指的是能够访问另一个函数作用域的变量的函数。闭包就是一个函数，这个函数能够访问其他函数的作用域中的变量for(var i=0;i<5;i++){ (function(i){
2020-10-14 16:14:14
111
原创 js异步操作的方式
一、promise// resolve代表成功 reject失败 都是一个函数let p = new Promise(function(reslove,reject){ //reslove('成功') //状态由等待变为成功，传的参数作为then函数中成功函数的实参 reject('失败') //状态由等待变为失败，传的参数作为then函数中失败函数的实参})//then中有2个参数，第一个参数是状态变为成功后应该执行的回调函数，第二个参数是状态变为失败后应该执行的
2020-10-13 18:12:29
205
原创 webpack5.0基础
webpack.config.jsconst path = require('path');module.exports = { entry: './path/to/my/entry/file.js',//指定入口文件 output: { path: path.resolve(__dirname, 'dist'),//指定输出文件地址 filename: 'my-first-webpack.bundle.js'//指定输出文件名 }};path.resolve()
2020-10-10 15:22:05
1091
1
原创 redux-actions用法
redux-actions的产生，是为了简化redux的使用。createAction Methods createAction createAction(type) createAction(type, payloadCreator) createAction(type, payloadCreator, metaCreator) import { createAction } from '
2020-10-07 16:32:55
583
原创 less常见使用方法
1. 变量// Variables@link-color: #428bca; // sea blue@link-color-hover: darken(@link-color, 10%);// Usagea,.link { color: @link-color;}a:hover { color: @link-color-hover;}.widget { color: #fff; background: @link-color;}Selector
2020-10-06 13:54:59
486
原创 sass常见使用方法
1. 变量引用$highlight-color: #F90;.selected { border: 1px solid $highlight-color;}//编译后.selected { border: 1px solid #F90;}sass的变量名可以与css中的属性名和选择器名称相同，包括中划线和下划线。这完全取决于个人的喜好，有些人喜欢使用中划线来分隔变量中的多个词（如$highlight-color），而有些人喜欢使用下划线（如$highlight_color）。
2020-10-04 22:12:08
1076
原创 react易忘知识点
一、核心概念Babel 会把 JSX 转译成一个名为React.createElement()函数调用。以下两种示例代码完全等效：const element = ( <h1 className="greeting"> Hello, world! </h1>);const element = React.createElement( 'h1', {className: 'greeting'}, 'Hello, world!');..
2020-10-01 11:13:00
258
原创 redux知识点
安装npm install --save redux基本规则通过dispatch一个action来改变state简单例子：import { createStore } from 'redux';/** * 这是一个 reducer，形式为 (state, action) => state 的纯函数。 * 描述了 action 如何把 state 转变成下一个 state。 * * state 的形式取决于你，可以是基本类型、数组、对象、 * 甚至是 Immutabl
2020-09-20 22:09:20
196
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人