vue
文章平均质量分 68
呀呀音
吃好喝好,长生不老
展开
-
Vue3响应式系统
响应式系统介绍,核心方法reactive / ref / toRefs / computed的实现原创 2022-02-09 13:07:31 · 865 阅读 · 0 评论 -
规范化Git提交日志(Commitizen + husky + Git hooks )
commit message 应该清晰明了,说明本次提交的目的,但是很多人在提交git信息的时候,为了图方便,大多都会简单的写一下,开发一时爽,维护火葬场。清晰且统一的提交风格,有利于团队的协作和后期的维护,本文分享了我们如何通过限制代码提交的规范。一、配置自己的提交规范// 安装commitizennpm install -g commitizen// commitizen根据不同的`adapter`配置commit messagenpm install -g cz-conventiona.原创 2021-12-06 19:42:48 · 2051 阅读 · 0 评论 -
vue源码解析
1、准备知识1、[].slice.call(lis):将为数组转换成真数组(1)、什么是伪数组?具有length属性;按索引方式存储数据;不具有数组的push、pop等方法;例子:<body> <ul> <li>Vue</li> <li>React</li> <li>Flutter</li> </ul></bod原创 2021-05-24 22:23:48 · 176 阅读 · 1 评论 -
vue+ Ant Design Vue实现拖拽树形图
vue+ Ant Design Vue实现拖拽树形图,当前节点高亮;默认选中第一个节点;添加自定义图标;自定义图标居右原创 2021-03-18 14:47:58 · 4573 阅读 · 2 评论 -
vite.config.ts文件的配置
import { defineConfig } from 'vite'import vue from '@vitejs/plugin-vue'import path from 'path'// https://vitejs.dev/config/export default defineConfig({ plugins: [vue()], // 注册插件 server: { open: true }, resolve: { alias: { // 如果原创 2021-03-16 13:40:27 · 8132 阅读 · 0 评论 -
使用vite+vue3+antd+less搭建基础项目
1、项目的创建项目的创建在上一篇文章中已经讲过了。可以查看这篇文章vite+vue3.0创建项目这篇文章中关于最后的问题antd的使用,这里暂时不做解决,因为vite对于vue3周边的支持还不是非常好。我们暂时还在main.ts里引入antd的css文件进行使用。2、引入vue-router和vuexyarn add vue-router@next -Syarn add vuex@next -S配置main.tsimport { createApp } from 'vue'imp原创 2021-03-16 11:22:00 · 6914 阅读 · 2 评论 -
vite中引入less,修改组件样式
vite使用less报错[@vue/compiler-sfc] ::v-deep usage as a combinator has been deprecated. Use :deep(<inner-selector>) instead原创 2021-03-12 13:48:13 · 7410 阅读 · 0 评论 -
vue3学习——vite+vue3.0创建项目
vite+vue3.0+antd+less创建项目并配置原创 2021-03-05 16:07:01 · 1765 阅读 · 3 评论 -
element-ui表格样式错乱调整方式
在vue中封装了element-ui表格,然后使用插槽,fixed定位等,导致样式出现了错乱,以下提供几种错乱方式的解决方法1、线没有对齐在全局样式中写下这样的代码/* Element-UI 的table 组件出现表格线条不对齐的问题 */body .el-table th.gutter { display: table-cell !important}2、fixed固定导致的高度问题全局样式中写如下代码.el-table__fixed-right{ height: 10原创 2020-12-29 11:07:52 · 4575 阅读 · 0 评论 -
vue3.0引入矢量图标,封装组件
一、在阿里粑粑矢量图标库选择图标并下载压缩包,解压后放在项目中二、引入css文件在项目的总文件(App.vue)或者是入口文件里引入(因为全局都要用到)1、App.vue@import url("./assets/iconFont/iconfont.css");2、main.jsimport "./assets/iconFont/iconfont.css";三、封装组件组件代码<template> <div :class="['iconfont', i原创 2020-08-13 21:57:06 · 626 阅读 · 0 评论 -
element-ui的树形图父节点选中子节点未选中(对懒加载之后的数据做处理)
需求是:某一个父节点下的所有子节点都选中,父节点不一定选中,但是父节点选中的,子节点都要选中。开始采用了父子组件不关联的做法,因为实现过程中有问题,具体看上一篇文章element-ui的树状图default-checked-keys默认却勾选了所有的子节点但是这种实现方式会造成父节点选中的情况子节点未选中,解决方式如下:1、这个是上一篇文章,评论里给的答复,没有尝试,但是按理应该可以2、自己写的比较麻烦的方式在loadNode的懒加载子节点的方法里,第一步let checkedKeys =原创 2020-08-12 18:36:22 · 1924 阅读 · 0 评论 -
Vue+Element中Table树形数据懒加载删除后数据动态更新
Vue+Element中Table树形数据懒加载删除后数据动态更新直接将参考的文章搬过来了截图如下,使用的是方法2,亲测有效,原作者棒!!!原文链接https://www.jianshu.com/p/85141cdad1aa原创 2020-08-05 15:43:35 · 3643 阅读 · 1 评论 -
vue单页面浏览器title动态变化
https://www.jianshu.com/p/d44c11f1cd88标签的国际化原创 2020-07-29 17:49:43 · 334 阅读 · 0 评论 -
vue页面拖拽改变大小
要实现这样一个功能,拖拽那条线,下面的上下内容分区的比例会改变,类似于我们打开了开发者工具拖动控制台的效果废话不多说直接上代码<div ref="topDom" class="containorOuter">上面</div><div id="line" ref="moveDom" class="dragLine" /> // 拖拽的线<div ref="bottomDom" >下面</div> mounted() { t.原创 2020-07-27 12:13:44 · 5276 阅读 · 6 评论 -
element-ui+vue实现懒加载的树形图选择器
在,开发的过程中,有这样一个需求需要选择资源,并且是多选,但是资源是放在文件夹里的,并且未知层数,因此需要树状图展示,并且树状图的选中的节点需要展示在select选择器的input框内实现效果如下代码:<el-form-item id="specialItem" label="资源" class="resource-select"> <el-select v-model="nodeForm.resourceList" multiple filt原创 2020-07-22 16:59:46 · 1042 阅读 · 2 评论 -
自己收藏的常用技术博客
1、不使用 ESLint 语法检查的注释https://blog.csdn.net/u013362969/article/details/81215336原创 2020-01-29 10:46:39 · 172 阅读 · 0 评论 -
vue监听页面快捷键(保存,复制)
1、createdcreated() { document.addEventListener('click', this.handleKeyClick) document.addEventListener('keydown', this.handleKeyDown) document.addEventListener('keyup', this.handleKeyUp) },2、methodshandleKeyClick(e) { if (e.target.c原创 2020-07-16 18:00:50 · 2644 阅读 · 2 评论 -
vue复制文本到剪切板
实现方式一、1、新建一个copy.js文件const copy = { executeCopy(textValue) { const input = document.createElement('textarea') document.body.appendChild(input) input.value = textValue input.select() document.execCommand('Copy') input.remove()原创 2020-07-16 17:40:54 · 465 阅读 · 0 评论 -
element-ui刷新当前树下的节点
需求:element-ui的数状图懒加载,对树状图中的数据进行添加和删除之后需要重新刷新该树状图解决方法:刷新更改的树节点下的子节点,通过loaded// 刷新当前节点下的数据(新增、删除树节点后需要用到) refreshNodeBy(id) { const node = this.$refs.tree.getNode(id) node.loaded = false // 主动调用展开节点方法,重新查询该节点下的所有子节点 node.expand(原创 2020-07-16 15:51:00 · 1983 阅读 · 0 评论 -
修改element-ui的Transfer组件无数据样式
废话不多说,直接说需求上代码默认穿梭框无数据的样式设计稿要求的样式修改方法:官方没有修改无数据默认样式的API,因此需要css修改默认样式加上背景颜色// transfer.el-transfer-panel .el-transfer-panel__empty{ height: 100px !important; line-height: 190px !important; width: 88px !important; background: url('../assets原创 2020-07-08 11:57:05 · 2715 阅读 · 6 评论 -
vue+echart图表自适应屏幕大小、点击侧边栏展开收缩图表自适应大小resize
开发中用到了echart图表,需要图表自适应大小resize,一开始使用的方法是:window.onresize = function () { this.myChart.resize();};但是又遇到一个问题,点击侧边栏的展开收起的时候,图表的大小没有自适应(因为窗口的大小没有变化)这里参考vue+element+admin的框架写的自适应一、index.vue的文件引入chart图表``这里是数据chartData: { title: {原创 2020-07-03 15:03:21 · 6769 阅读 · 2 评论