时光在等一个人-CSDN博客

原创 vue-contextmenujs 实现鼠标右键弹出菜单列表

效果安装npm install vue-contextmenujs || yarn add vue-contextmenujs使用// main.jsimport Contextmenu from 'vue-contextmenujs'Vue.use(Contextmenu)示例<template> <el-table :data="tableData" border highlight-current-row he.

2022-05-26 14:00:12 2385

原创 element ui 中 select组件绑定值为对象时的处理

问题描述：在有些使用场景中需要同时用到对象中的多个参数，这时就想到希望可以绑定整个item对象来满足业务需求，这时需要使用el-select定义的参数value-key参数配置。<el-select v-model="arrDiagosis" size="mini" clearable class="lineSelect" multiple value-key="code" placeholder="请选择术前诊断"> <el-option .

2022-02-18 11:39:08 1655

原创 element-ui 下拉框实现拼音搜索

安装pinyin-match插件yarn add pinyin-match应用 <el-select v-model="name" filterable :filter-method="handlePinYinSearch"> <el-option v-for="str in qxList" :key="str.name" :value="str.name" :label="str.name" &g.

2021-12-15 14:02:29 1665 1

原创 vue之keep-alive(路由内使用)

router-view 也是一个组件，直接包在 keep-alive 里面，所有路径匹配到的视图组件都会被缓存： <keep-alive> <router-view :key="key" /> </keep-alive>如果只想 router-view 里面某个组件被缓存使用 include/exclude增加 router.meta 属性// 组件Aexport default { name: 'A', // name.

2021-11-25 13:39:59 959

原创 Vue轮播/走马灯组件：vue-slick-carousel

简介vue-slick-carousel是一个支持SSR的Vue光滑轮播组件，继承了备受推崇的Slick Carousel的功能。vue-slick-carousel将其完全重写为Vue组件，提供了可变宽度、延迟加载或垂直滑块等各种功能。vue-slick-carousel支持多种模式：简单模式、居中模式、多项显示模式、多行显示模式、可变宽度、垂直模式、懒加载、同步播放等。安装// npmnpm i vue-slick-carousel// yarnyarn add vue-slic

2021-10-29 09:16:58 3295 1

原创 Element UI el-cascader 级联选择器样式修改

问题描述：解决：自定义浮层类名：popper-class <el-cascader v-model="emerOperList.mzWay" @change="handleMzfsChange" :show-all-levels="false" :options="mzfsList" :props="{ multiple: true }" collapse-tags clearable popper-class="mzfs-cascader"

2021-10-12 11:33:44 7562 2

原创 vue .sync 修饰符

.sync修饰符可以实现子组件与父组件的双向绑定，并且可以实现子组件同步修改父组件的值。<template> <div class="child"> {{title}} <button @click="$emit('update:title', 'javaScript')"> <span>我是标题</span> </button> </div&gt

2021-09-06 11:01:43 124

原创 form-create-designer

1、简介form-create-designer 是基于 @form-create/element-ui实现的表单设计器组件。可以通过拖拽的方式快速创建表单，提高开发者对表单的开发效率，节省开发者的时间。2、文档地址：http://designer.form-create.com/guide3、核心功能内置22个常用的表单组件和布局组件通过 JSON 生成表单双向数据绑定方便扩展事件扩展，事件注入数据验证栅格布局内置组件4、安装yarn add @form-create/

2021-08-04 15:05:10 5676 1

原创 ES9：正则表达式新特性--命名捕获组

2021-07-12 15:06:42 317

原创 vue3中父子组件通信

<child-component ref="myChild" :count="countNum" @add="handleClick "></child-component>/* 父组件 */<script>import ChildComponent from './ChildComponent.vue'imort { reactive, toRefs } from 'vue'export default { comp

2021-07-01 15:05:15 663

原创 vue项目中使用CDN加载

了解依赖关系我们可以借助 webpack-bundle-analyzer 将打包后的内容展示为方便交互的树状图，可以很直观的看到有哪些比较大的模块，然后做针对性优化。yarn add webpack-bundle-analyzer || npm install --save-dev webpack-bundle-analyzerconst BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin

2021-06-16 10:50:29 6237

原创 element table跨分页多选并保存已经选中的数据

问题描述：切换到第二页以后导致第一页选中的数据取消了解决方法：<el-table border :header-cell-style="{ background: '#ebf8f8' }" height="250" size="small" @selection-change="handleSelectionChange" :row-key="getRowKeys"> <el-table-column type="selec

2021-05-21 11:16:18 1912 1

原创 vue3中router路由和vuex的store使用方法

1.路由<script>import { useRouter, useRoute } from 'vue-router'export default { setup() { const router = useRouter() // 组件内路由 const route = useRoute() // 组件内路由信息 }}</script>2.vuex创建storeimport { createStore } from 'vuex'imp

2021-05-08 09:55:08 5714 1

原创 vue3.0 新特性

Setupsetup函数是Composition API逻辑组织的入口。<template> <div>{{ title }}</div></template><script>export default ( setup() { const title = 'vue' return { title } })</script>Reactivereactive 相当于 Vue 2

2021-04-21 11:29:55 2815

原创 Element-ui el-table 根据数据变化展示不同的样式

/* 可以做到在table组件数据变化时，动态绑定class */ <el-table border height="420" :header-cell-style="{ background: '#ebf8f8' }" :data="specList" size="small" :row-class-name="row => (row.row.checked ? 'check-row' : '.

2021-04-14 09:38:56 1814

原创 Echarts 实现动态数据时间轴

<div id="totalFlowRate" style="height:620px;" ></div> handleData(id) { const date = [] const timestr = this.startTime const fiveMinutes = 300 * 1000 // 五分钟 let startTime = +new Date(timestr) - fiveMinutes .

2021-04-01 13:38:06 7837

原创 element ui 中 table 排序 sortable失效问题

sortable效果：（不生效） <el-table-column width="89" align="center" label="患者姓名" sortable> <template slot-scope="scope"> {{ scope.row.name }} </template> </el-table-column>结果点击上图上下箭头毫无反应，在el-table-column中加上prop="name

2021-03-24 09:44:20 8917 4

原创 vue 动态渲染多个不同的组件

vue动态组件<component :is="iscomponent"></component>import recordIn from './record-in'import recordMove from './record-move' import recordUse from './record-use' export default { components: { recordIn, recordMove, recordUse, },

2021-03-16 11:20:06 1645

原创 vue刷新当前页面，重载页面数据

1.场景在执行完，增，删，改，操作的时候。我们需要刷新一下页面，重载数据。2.遇到的问题用vue-router重新路由到当前页面，页面是不进行刷新的采用window.reload()，或者router.go(0)刷新时，整个浏览器进行了重新加载，闪烁，体验不好3.解决方法provide / inject 组合作用：允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。4. 代码// APP.vue<template&

2021-03-15 13:49:26 4539

原创 Vue中组件生命周期调用顺序

组件的调用顺序都是先父后子,渲染完成的顺序是先子后父。组件的销毁操作是先父后子，销毁完成的顺序是先子后父。

2021-03-10 13:49:31 394

原创一些CSS技巧

1、相邻兄弟选择器之常用场景 <div class="list"> <div class="list__item" v-for="item of 3" :key="item"> {{ item }} </div> </div>.list { width: 200px; margin: auto; border: 1px solid rgb(26, 82, 4); &__item + &__i

2021-03-04 13:49:14 94

原创分享一道题目~~

function getPersonInfo(one, two, three) { console.log(one) console.log(two) console.log(three)}const person = 'Lydia'const age = 21getPersonInfo`${person} is ${age} years old` 输出结果：如果使用标记模板字面量，第一个参数的值总是包含字符串的数组。其余的参数获取的是传递的表达式的值！...

2021-03-01 11:10:31 275

原创 css 预处理语言 -- Scss篇

基础语法一、变量$mainColor:#0aacae;.header { color : $mainColor;}二、继承.prev { font-size: 16px; color: #606266; cursor: pointer;}.prev { &--inactive { @extend .prev; color: #c0c4cc; }}三、混合@mixin/* 使用方法： @include */@mixin demo

2021-02-24 09:58:37 217

原创 css 预处理语言 -- Less篇

了解Less它是一门CSS预处理，扩充了CSS，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充，Less也可以运行在 Node 或浏览器端。总结：让CSS更具维护性、主题性、扩展性！一、变量/* 语法：@变量名：值 */@color: #00c; /* 蓝色 */#header { border: 1px solid @color; /* 蓝色边框 */}生成css代码：#header { border: 1px solid #00

2021-02-22 14:42:56 147 1

原创 js事件循环

为什么javaScript是单线程？单线程意思就是说同一个时间只能做一件事。那这样的话效率不是很低？也没有啦，其实javascript的单线程特点是跟他的用途有关的。作为浏览器脚本语言，JavaScript的主要用途是与用户互动，以及操作DOM。假如不是单线程的话，在一个线程当我们在给某个DOM节点增加内容的时候，另一个线程正在删除这个DOM节点的内容，那不是乱套了吗。所以javascript只能是单线程。同步和异步同步同步任务指的是，在主线程上排队执行的任务，只有前一个任务执行完毕，才

2021-02-19 17:39:32 192 1

原创 vue 使用element-ui中的Notification自定义按钮并实现关闭功能及如何处理多个通知

如何关闭通知？exprot default { data() { return { //使用userNotifyId作为弹窗的key，用来获取弹窗的实例，以对对应弹窗进行操作 notifications: {} } }, methods: { // 打开一个新的通知 openNotify(userNotification) { // userNotification 中的userNotifyId是唯一的 c

2021-01-28 09:57:46 7136 1

原创 vue3.0初体验

创建项目// 最好将vue脚手架工具升级到最新的cli 4.x,在cli3.x的上执行vue add vue-next会报错。npm install -g @vue/cli vue create 项目名cd 项目名vue add vue-next // 重点执行这行,会把2.0代码改为3.0的, vue-router, vuex会变成4.0的npm run servemain.js文件的变化// vue3.0import { createApp } from "vue";import

2021-01-20 13:40:38 231

原创理解vue 3.0中的 proxy

ProxyProxy可以理解为在对象之前设置一个“拦截”，当该对象被访问的时候，都必须经过这层拦截。意味着你可以在这层拦截中进行各种操作。比如你可以在这层拦截中对原对象进行处理，返回你想返回的数据结构。使用 Proxy：const p = new Proxy(target, handler)target：要代理的原始对象handler：定义哪些操作将被拦截以及如何重新定义被拦截的操作的对象const p = new Proxy({}, { get(target, propKe

2021-01-15 09:50:17 1415

原创 Array.prototype.reduce()

语法arr.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])reducer 函数接收4个参数:Accumulator (acc) (累计器)Current Value (cur) (当前值)Current Index (idx) (当前索引)Source Array (src) (源数组)initialValue可选作为第一次调用 callback函数时的第一个参数的值。如果没有

2021-01-12 10:53:44 129

原创 ES6中的Map和Set

简介Map和Set都是ES6新增的数据结构Map 类似于对象，key值不限于字符串，成员值唯一。Set 类似于数组，成员值唯一。MapMap 数据结构。它类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。const map = new Map([ ['name', '测试'], ['title', 'ES']]);map.size // 2map.get('name') // "测试"map.get('title') // "

2021-01-11 11:20:52 221 1

原创 javaScript 字符串实用方法

1.填充一个字符串到指定的长度可以使用padStart和SpadEnd方法，选择哪种方法取决于是在字符串的开头还是结尾填充字符串。// 在开头添加 "0"，直到字符串的长度为 8。const a = '1'.padStart(8, '0')console.log(a) // "00000001"//在末尾添加“ *”，直到字符串的长度为5。const b= "2".padEnd(5, "*")console.log(b) // "2****"2.字符串拆分为字符数组有多种方法可以将字符

2021-01-08 10:54:45 264

原创 React Hooks

Hook是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。State Hookimport React, { useState } from 'react';function Example() { // 声明一个新的叫做 “count” 的 state 变量 const [count, setCount] = useState(0); return ( <div> ...

2021-01-07 10:13:16 191

原创 axios封装，使用拦截器统一处理接口

1. axios封装import axios from 'axios'import store from '@/store'import router from '@/router'import { Message } from 'element-ui'/** * 将一个普通对象序列化 * @param {Object} obj 普通的对象, 就是只有一层的键值对, 并且值仅为基本类型, 如果后面值可能为数组或者其他, 需要修改哟 */const objToQueryStr =

2021-01-06 14:18:41 630

原创 js 深拷贝与浅拷贝

记个笔记~~~如何区分深拷贝与浅拷贝简单来说就是：假设B复制了A，当修改A/B时，看A/B是否会发生变化，如果A/B也跟着变了，说明是浅拷贝，如果A/B没变，那是深拷贝。深拷贝与浅拷贝出现的根源就在于引用数据类型、内存地址。首先说下基本数据类型和引用数据类型1.变量类型分为两类:基本数据类型：number，string，boolean，null，undefined，symbol引用数据类型：统称为Object类型，细分的话，有：Object，Array，Date，Function等。

2021-01-04 10:22:45 96

原创拖拽排序组件Vue-Slicksort

发现一个功能比较强大的自由拖拽排序组件VueSlicksort，分享一下1. 安装 npm i vue-slicksort -S || yarn add vue-slicksort 2. 使用效果图： <div class="root1"> <SlickList :lockToContainerEdges="true" axis="x" lockAxis="x" v-model="items" cl.

2020-12-31 09:49:07 1195 1

原创 vue 自定义指令

2.x 语法bind - 指令绑定到元素后发生。只发生一次。inserted - 元素插入父 DOM 后发生。update - 当元素更新，但子元素尚未更新时，将调用此钩子。componentUpdated - 一旦组件和子级被更新，就会调用这个钩子。unbind - 一旦指令被移除，就会调用这个钩子。也只调用一次。例如：<p v-highlight="yellow">高亮显示此文本亮黄色</p>Vue.directive('highlight', {

2020-12-30 09:49:00 112 1

原创 vue的model属性

2.x语法允许一个自定义组件在使用 v-model 时定制 prop 和 event。默认情况下，一个组件上的 v-model 会把 value 用作prop 且把 input 用作 event，但是一些输入类型比如单选框和复选框按钮可能想使用 value prop 来达到不同的目的。使用 model 选项可以回避这些情况产生的冲突。<ChildComponent v-model="pageTitle" /><ChildCompo

2020-12-28 14:58:21 4741 1

原创 vue 实现打印功能

下载插件到本地插件地址：https://github.com/xyl66/vuePlugs_printjs在src下新建文件夹prints,将下载好的print.js放入prints文件夹下，然后操作如下<template><div ref="print"> 打印内容 <div class="no-print">不要打印我</div></div></template>import Print from '@/pr.

2020-12-25 14:30:21 379

原创 v-if和v-for一起使用的正确方法

我们可能需要会想到将v-for和v-if同时使用：选择性地渲染列表，例如根据某个特定属性来决定是否渲染 <div v-for="item in itemList" v-if="item.isShow">{{item.value}}</div>避免渲染本该隐藏的列表项<div v-for="item in itemList" v-if="shouldShowItem">{{item.value}}</div>v-for的优先级是高于v-if

2020-12-24 10:01:07 28459 3

原创 js获取本周、上一周(可无限)、下一周（可无限）

1. 获取本周 // 本周 getCurrentWeek() { //获取当前时间 const currentDate = new Date() //返回date是一周中的某一天 const week = currentDate.getDay() //一天的毫秒数 const millisecond = 1000 * 60 * 60 * 24 //减去的天数 const minusDay = w

2020-12-23 09:57:30 3265

空空如也

空空如也