- 博客(91)
- 资源 (2)
- 收藏
- 关注
RSS订阅原创 el-form 表单的校验
文章目录rules 绑定对象校验数组校验rules 中的关键字说明Typerequiredpatternmin/maxLenenumwhitespacetransformfieldsmessagevalidatorrules 绑定绑定到el-form<template> <el-form ref="form" :model="form" :rules="rules" label-width="100px"> <el-form-item labe
2021-12-03 17:48:42
20604
2
原创 xterm.js 使用及问题【新】
xterm.js 使用及问题【新】版本xterm：4.15.0xterm-addon-fit：0.5.0问题如果初始化的时候就使用fit，那么屏幕缩小小于初始的宽度。issues3564在初始化的时候不能使用fit mounted() { this.term = this.initTerm() this.onTerminalResize() this.onTerminalKeyPress() }, methods:{ initTerm() {
2021-11-29 13:46:32
8305
7
原创 element-plus 源码学习——rate
ratehtml<template> <!-- 最外层 可以通过tab 进行切换，通过 上下左右键 进行数值的加减 --> <div class="el-rate" role="slider" :aria-valuenow="currentValue" :aria-valuetext="text" aria-valuemin="0" :aria-valuemax="max" tabindex="0"
2021-07-07 17:10:45
839
原创 element-plus 源码学习——pagination
pagination分页组件是有多个组件组成的sizes`, `prev`, `pager`, `next`, `jumper`, `->`, `total`, `slot除了-> 、slot 其余都是组件->的使用，使其右浮动。<el-pagination background layout="prev, ->, pager, next" :total="1000" />render函数render() { co
2021-07-07 17:07:11
2524
原创 element-plus 源码学习——switch
switch结构<div class="el-switch"> <input class="el-switch__input"> <!-- 前面文字描述 --> <span></span> <!-- 开关 --> <span class="el-switch__core"></span> <!-- 后面文字描述 --> <span></span&g
2021-04-14 17:18:36
1318
原创 element-plus 源码学习——input-number
input-number结构<div class='el-input-number'> <!-- 减号 --> <span class="el-input-number__decrease"></span> <!-- 加号 --> <span class="el-input-number__increase"></span> <!-- el-input -->
2021-04-14 11:30:19
1400
原创 element-plus 源码学习——input
input结构<template> <div ...> <!-- 非textarea --> <template v-if="type !== 'textarea'"> <!-- 前置元素 --> <div class="el-input-group__prepend" v-if="$slots.prepend"> <slot name="prepend">
2021-04-12 16:53:23
3085
原创 element-plus 源码学习——checkbox
checkboxLabel<label class="el-checkbox"> <!-- 复选框 --> <span class="el-checkbox__input"></span> <!-- 文字部分 --> <span class="el-checkbox__label"></span></label>选中样式.el-checkbox__inner {//???? 复
2021-04-07 14:02:53
1485
原创 element-plus 源码学习——radio
radiolabel放在最外层的作用是扩大鼠标点击范围，无论是点击在文字还是input上都能够触发响<label class="el-radio"> <!-- 单选框 --> <span class="el-radio__input"></span> <!-- 文字部分 --> <span class="el-radio__label"></span></label><temp
2021-04-07 13:57:59
1475
1
原创 element-plus 源码学习——layout
文章目录LayoutgutterProvide/injecth函数fix gutter bugLayout涉及到的组件row col源码内容省略guttergutter的作用是让row里面的col产生出间隔来，但是注意容器的最左和最右侧是没有间隔的上图就是最终示意图，黑框就是<el-row>的宽度范围，里面是<el-col>组件，这个组件的宽度其实按<el-row>百分比来计算，而且box-sizing是border-box,注意gutter属性是
2021-04-07 11:15:17
1112
原创 chroem 89 + 打开新标签 sessionStorage 失效
问题使用 <a> 链接打开新标签时，页面跳转到了登录页。原因检查后发现新标签的 sessionStorage 是空的多个浏览器测试，发现应该是 chrome 的版本问题链接原来 chrome 89 版本修改了打开新标签时 sessionStorage 的处理逻辑，这其实涉及到<a> 标签的 rel 属性，我们举例来说明一下修改前后的区别：比方说我们从 A 标签通过 a 链接打开了一个新的 B 标签，之前浏览器的处理逻辑：当 a 标签的 target="_b..
2021-03-31 11:31:35
448
原创 git规范性提交
title: git规范性提交date: 2020-09-22sidebar: ‘auto’sidebarDepth: 2categories:工具tags:工具Commitizen全局安装npm install -g commitizencz-conventional-changelog项目内安装commitizen init cz-conventional-changelog --save --save-exact如果当前已经有其他适配器被使用，则会报以下错误，.
2020-09-25 14:01:36
705
1
原创 vue滚动到指定位置
vue 滚动到指定位置<div class="box1"> <div v-for="i in 50" :key="'a' + i" :ref="'a' + i">{{ i }}</div></div>⚠️ refs 当与v-for使用时，要加[0]1.Element.scrollIntoViewMDN scrollIntoViewscroll(pos) { // 不受定位影响 ，但是水平及垂直方向无法自定义数值，只能 "start"
2020-09-14 15:34:37
3104
原创 vue项目使用github actions自动部署
文章目录1.Personal access tokens2.项目设置3. 配置项目路径4. 配置文件最后1.Personal access tokens将token复制下来，下一步会用到。2.项目设置将名字保存下，后面会用到3. 配置项目路径package.json 配置 homepage//"homepage": "https://[用户名].github.io/[仓库名称]","homepage": "https://xiaolannuoyi.github.io/vue-r
2020-09-14 14:19:46
1489
1
原创 vue3源码学习——computed
文章目录vue3源码学习——computed基础修改effect 函数解决问题代码执行过程图computed是在上篇文章vue3源码学习——响应式reactive的基础上实现的。看完后再来看这篇吧。vue3源码学习——computed基础基本html代码 <h1>打开控制台，进行调试</h1> <h2></h2> <button onclick="change()">Click me</button>
2020-08-19 18:01:47
1011
原创 element upload 只上传单个文件，并覆盖，获取文件的文本内容
element upload 只上传单个文件，并覆盖<template> <div style="width:500px"> <el-upload class="upload-demo" drag action="" multiple :file-list="fileList" :auto-upload="false" :on-change="handleChange"
2020-08-18 11:58:28
2033
原创 vue3源码学习——响应式reactive
文章目录拦截基础版避免对象重复proxy避免proxy对象再次被proxy对象中对象监听监听函数删除补充完整完整代码拦截基础版原理如何监听数据变化的？Proxy、Reflectfunction reactive(target) { return new Proxy(target, handle)}const handle = { get, set };function get(target, propKey, receiver) { // console.log('g
2020-08-14 16:27:26
1927
原创 vue页面传参
文章目录路由1.动态路由2.query3.路由解偶sessionStorage、localStorage页面刷新，丢失数据问题1. 路由+sessionStorage2. vuex+sessionStorage+路由拦截路由1.动态路由路由配置{ path: '/user/:userId', name: 'user', component: User}路由跳转方式this.$router.push('/user/123')this.$router.push({path: '/
2020-07-27 16:56:50
535
原创 组件通信-进阶
基础父子组件父组件引用子组件父组件给子组件传值(props)子组件触发父组件方法($emit）props双向数据绑定(.sync)父组件调用子组件方法和值(ref)子组件使用父组件的值和方法（$parent）兄弟组件子——>父——>子（通过上面的父子组件传递的方法）vuexevent-bus组件通信-基础 文章地址文章目录基础进阶（跨级通信）2. `$attrs`/`$listeners`3.派发与广播（dispatch/broadcast）4. 找到任意组件实
2020-07-21 14:39:56
334
原创 vue-running在线运行 .vue文件
文章目录vue-running实现方法vue-running在线运行 .vue文件，支持element-ui、iview。参考iview-run用到了iview split面板分割组件、vue-codemirror插件实现方法使用了vue的构造器extend与手动挂载$mount将代码进行切割（html，js，css）extend 构造的实例通过$mount 渲染后，挂载到了组件唯一的一个节点上。（new Function,extend, $mount ）组件销毁时，手动销毁 e
2020-06-07 19:56:45
4085
1
原创 vue多表单的合成设计与实现
文章目录vue多表单的合成设计与实现基本功能情景1vue多表单的合成设计与实现不会起名字，先叫这个吧????项目中是否会遇到很多个表单（十几个，几十个那种），这时候如何实现。一个个去写么？肯定不是的。基本功能通过遍历表单项来实现 <el-form ref="form" :model="form" label-position="top" size="mini"> <template v-for="(item, index) in formModel.para
2020-06-03 15:10:56
1982
原创 vue项目axios封装使用
文章目录axios 封装使用判断是否为`Promise`项目封装拦截器axios 封装使用判断是否为PromiseAxios.get() instanceof Promise返回值是true所以在封装axios时，不要在写成以下方式了getuser(params) { return new Promise((resolve, reject) => { axios...
2020-04-10 00:46:51
875
原创 el-popover 弹出框 不放在body中
文章目录1. 不放在body中1. 不放在body中el-popover默认将弹窗放到body中，但是在此项目中，当el-popover的高度超出了父级div的宽度时，会造成body的滚动，而不是其父级的滚动。所以要将el-popover放入到父级div中<el-popover class="add-step-popover" ref="add-step-popove...
2020-04-07 20:58:04
12550
2
原创 组件props传对象的的坑
文章目录问题测试代码数据不更新情况，如下1.当父组件为空对象时2.当对象初始化数据与异步数据一致时3. 使用v-if 当拿到值后再渲染组件问题对象传递，但是数据更新但页面不更新问题测试代码父组件<template> <div> <h1>父组件{{object}}</h1> <child :obj="object"&...
2020-01-10 14:49:23
3755
2
原创 vue中文版Dash文档
文章目录准备开始导入准备node环境homebrew[homebrew地址]https://brew.sh/index_zh-cnbrew install wgetwget --mirror -p --convert-links -P [本地路径] [要扒的网址]开始新建一个目录,用来存放本项目,并用vscode打开.初始化项目npm init修改packgae.json{...
2019-12-03 23:08:18
4006
4
原创 我的图床配置 PicGo + gitee + typora
文章目录PicGo其他配置PicGoPicGo下载地址下载插件 github-plus设置插件配置(要现在gitee 上创建一个公有仓库)customUrl 一般不用配置origin选giteegitee设置token其他配置自动复制上传完成后图片返回的URL地址。安装picgo-plugin-autocopy,在插件设置中搜索就行.配...
2019-12-02 11:32:41
895
原创 element 封装分页组件,搜索组件,table分页时排序、保留select选中状态、索引排序
文章目录场景场景开发时,经常见到这样的页面后台将所欲数据传过来,前端进行分页、搜索、排序等功能
2019-11-17 01:00:05
989
原创 vue element 项目引入iconfont图标
将下载好的字体图标放在项目中在iconfont.css 中添加样式[class^="my-icon"],[class*=" my-icon"]/*这里有空格*/ { font-family: "iconfont" !important; speak: none; font-style: normal; font-weight: 400; font-...
2019-10-31 16:08:34
1507
原创 elementui input focus取消占位
element的input,focus时,不会取消占位.现需要focus时,取消占位<aui-input v-model="form.username" :placeholder="placeholder1" @focus="focushandle" @blur="blurhandle" prefix-icon="aui-icon-search"><...
2019-10-31 10:55:04
1211
原创 element upload 只传一张图片样式,和表单一起提交
只传一张图片样式<template> <div> <el-upload action="https://jsonplaceholder.typicode.com/posts/" :class="{ disabled: uploadDisabled }" list-type="picture-ca...
2019-10-26 00:34:55
2427
1
原创 vue培训
环境node安装cnpm并设置淘宝镜像npm install -g cnpm --registry=https://registry.npm.taobao.orgcnpm -vvscodegit代码拉取代码
2019-10-25 15:44:44
894
原创 用vue-cli3搭建ui库(仿elementUI)
文章目录用vue-cli3初始化项目修改项目结构先写个测试demo1. packages下新建文件夹test,结构如下:2. examples进行测试examples展示markdown文件用vue-cli3初始化项目css 选了sasslint 选了ESLint + Prettiervscode 可下载eslint插件,配置保存自动格式化代码个人配置如下(首选项–>设置)...
2019-10-11 15:08:09
2646
2
原创 vue2 父子组件间的双向数据绑定 (el-dialog问题)
先推荐下自己的另一篇文章vue父子组件传值，兄弟组件传值涉及到里面相关的内容为3. 子组件触发父组件方法($emit）4.props双向数据绑定(.sync)问题描述二次封装dialog,关闭时须将关闭的状态返回给父组件.(父子组件传值)代码实现父组件<template> <div class="parent"> <h1>我是父组件,我...
2019-08-31 21:44:06
4528
原创 element-ui el-table与el-form同用,并校验
文章目录基本结构添加校验自己写校验方法其他校验基本结构<template> <div> <el-form ref="form" :model="form"> <el-table ref="table" :data="form.tableData" empty-text='暂无数据'> <el-ta...
2019-08-28 00:03:10
19657
12
原创 axios post params(post像get一样使用params传参)
今天有一个接口是/create?name=***&age=****,但是是一个post请求,我只见过get的这种请求.找了好久…解决方法:发表的axios签名是axios.post(url[, data[, config]])。所以你想在第三个参数中发送params对象：.post(`/create`, null, { params: { name:name, age:...
2019-08-15 17:14:53
23801
5
原创 vue-cli3 图片路径
文章目录引入图片的方式项目目录public/static `绝对路径`引用1. 使用相对路径`static/logo.png`2. 使用绝对路径`/static/logo.png`何时使用 public 文件夹src/assets `相对路径`引用1. 相对路径 `../../../assets/logo.png`2. 相对路径 `@/assets/logo.png` 或者`~@/assets...
2019-08-14 17:43:54
13427
8
原创 vue-cli3 本地预览打包代码
本地预览打包代码servedist 目录需要启动一个 HTTP 服务器来访问 (除非你已经将 publicPath 配置为了一个相对的值)，所以以 file:// 协议直接打开 dist/index.html 是不会工作的。在本地预览生产环境构建最简单的方式就是使用一个 Node.js 静态文件服务器npm install -g serve# -s 参数的意思是将其架设在 Single...
2019-08-14 14:23:38
1372
原创 Cannot read property 'classList' of null
今天前端项目突然遇到这种报错，原来也没有这种问题。突然出现，找了好久的原因。原来是我安装的谷歌插件的问题。给大家提个醒，不经常使用的插件,一定要修改下配置,因为默认 是可读取和更改网站数据-> 在所有网站上,改成 当你点击此扩展程序时...
2019-07-25 15:20:16
11470
1
原创 根据官网例子一步步实现vueSSR(详细)
根据 官网例子一步步实现vue ssr所用标题对应官网标题基本用法新建一个文件夹 ssrcd ssrnpm init -ynpm install vue vue-server-renderer express --save 或者yarn add vue vue-server-renderer express --save新建文件server.jsserver.js//...
2019-07-12 14:57:07
5949
13
CSS揭秘彩色版
2019-01-18
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人