丶扁扁的糖是扁的 的博客

这里示例el-table导出为excel：

因为el-select原生就可以实现下拉列表的选项禁用，指定项不可添加。那么想要实现设置默认值并且不可编辑，只要实现默认值不可删除即可。关闭按钮有着它自己的className：el-tag__close。那么只要将默认值的el-tag__close图标全部隐藏掉，就能实现设置默认值不可删除效果。具体指令如下： 在el-select中的应用：...

跳转的方式Vue因为由vue-router的关系，提供了页面携带参数跳转的方式1、提供 <router-link> 元素，点击直接跳转<router-link :to="{ path: 'path', query: { key: '扁扁的糖是扁的' } }"> 跳转页面</router-link>2、提供 this.$router.push 方法跳转this.$router.push({ name: 'name',

指令方式时定义背景色、文字、icon：<div v-loading.fullscreen.lock="loading" element-loading-text="加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)"/>自定义loading动画：.el-loading-spinner { height: 40px; ..

创建iframe 设置基础属性，并添加onload事件，捕获iframe的加载完成进行回调。/** * @description: 配置及引入iframe * @return void */setNewIframe() { let iframe = document.createElement('iframe') iframe.src = '' iframe.height = 500 iframe.width = '100%' iframe.id = 'doc_if..

<el-tree ref="leftTree" :check-strictly="true" @check-change="checkChange"/>/** * @description: 重写勾选逻辑 * @param node 选中的数据 * @param checked 是否选中 * @return void */checkChange(node, checked) { //全部取消/选择 const setChecked = (arr, i...

原来的在用的方法是直接截取谷歌浏览器版本的前两位版本号，今天突然有用户反馈说报浏览器版本过低，一看发现谷歌浏览器已经发布了100+版本，更换取版本号的逻辑在此记录。获取浏览器版本信息const appVersion = navigator.appVersion //获取浏览器版本信息获取以谷歌浏览器信息开始的字符串const index = appVersion.indexOf('Chrome/') //谷歌浏览器的版本信息位置const ChromeStr = app.

富文本内图片点击实现放大器效果，要在不改变<img /> 标签且不添加自定义指令的前提下放大图片，找了下没有找到合适的插件，就自己动手写一个图片放大器组件。设计思路：富文本里的图片，最终应该是呈现这样的状态：<div> <img src="……" /> <div class="content">扁扁的糖是扁的</div></div>给富文本标签添加点击事件；<div @click="preview

JS获取当前选中文字：/** * @description: 获取当前选择的文字 * @return String */getSelected() { if (window.getSelection) { //ie9以上及其他主流浏览器 return window.getSelection().toString() } else { //ie9以下 const selection = document.selection?.createRange()

所需传参如下：传入中心线左侧元素、右侧元素和外侧元素的className,实现拖拽改变左右元素的宽度* @Props: classNames:{ box String 外侧容器className left String 左侧容器className @right String 右侧容器className } -->这里要确保左右和外侧的元素className唯一，也可以自己改成查找i...

这是关于webpack的版本信息："webpack": "^5.37.0","webpack-bundle-analyzer": "^4.5.0","webpack-cli": "^4.9.0","webpack-dev-server": "^3.11.2","webpack-merge": "^5.7.3","webpackbar": "^5.0.0-3"在webpack.dev.conf.js已经配置了 hot:true，但是热更新依旧无效：devServer: { .

大致思路就是，创建一个计时器， 2 秒后执行函数，如果2 秒内点击事件被完全触发，就清除计时器，当作一个普通的点击事件，如果计时器没有在 2 秒内清除，则判定为一次长按，执行传入的函数。import Vue from 'vue';Vue.directive('longpress', { bind: function (el, binding, vNode) { if (typeof binding.value !== 'function') { throw '.

注意：标签拖拽(指令拖拽会有个点击事件，同时有点击事件和拖拽事件的不能使用)import Vue from 'vue';// v-domDrag: 标签拖拽(指令拖拽会有个点击事件，同时有点击事件和拖拽事件的不能用)Vue.directive('domDrag', { bind(el, binding, vnode, oldVnode) { //el即为当前元素 el.style.cursor = 'move' // 获取原有属性 ie dom元素.currentSt

el-table数据刷新后会重新定位至表格头的位置，想要更新数据后任处于之前操作的位置，就要在操作时记录下当前表格滚动条的位置，数据更新后设置表格位置为刚才记忆的位置。记忆上次位置： /** * @description: 获取表格滚动条位置 * @param ifMemory 有没有ifMemory决定了该函数是保存位置还是跳转位置 * @return void */ getTableScrollTop( ifMemory = false

首先给标签赋值 :style<div :style="cssVar" />computed中定义刚才赋值的变量 computed:{ cssVar(){ const _site = { '--left': 10, '--top': 20, } return _site }, },最后在 <style> 中使用var()函数读取变量即可，该函数可以使用第二个参数，表示变量的默认值。@k

由于 webpack5 需要 node 版本>=10.13.0，请先将 node版本 升级， npm版本 用node自带的就可以了。官方最新的node版本好像不兼容下面的webpack5配置，建议升级成 LTS版本 ，这里我升级的是v14.18.1的LTS版本，可以完美兼容。配置代码我怕各种不兼容你们拿去不能用，索性全部贴出来，用到什么参考下我的版本，这些版本间的兼容性一言难尽，不要问我为什么不用最新的，不是最新的就是最好（它不兼容啊），但是不够新一定不行。webpack5 相关的配置就.

一般情况下computed计算属性无法直接进行传参，只能获取data中的值：computed: { ifAchieve({ classA, classAM, classB, classC, notClass, notAsses }) { return classA || classAM || classB || classC || notClass || notAsses }}需要时可以使用 闭包函数 传参数computed: { ifAchieve({ class.

vue-virtual-scroll-list是vue的一个虚拟滚动组件，通过不渲染可视区域以外的内容，显示虚拟的滚动条来提升页面性能首先是安装插件npm install vue-virtual-scroll-list --save页面使用<div> <virtual-list style="height: 360px; overflow-y: auto;" //样式可以通过style写 class='' //样式也可以通过class写

通过js给el-dialog添加拖拽效果import Vue from 'vue';// v-dialogDrag: 弹窗拖拽Vue.directive('dialogDrag', { bind(el, binding, vnode, oldVnode) { const dialogHeaderEl = el.querySelector('.el-dialog__header'); const dragDom = el.querySelector('.el-dialog');

首先明确需要传入组件的属性：* @Props: dialogVisible Number 非0打开 allowDrag Boolean 是否可以拖拽 noFoot Boolean 是否显示按钮行 @submit Function 点击提交按钮的回调 -->设计组件的组成部分，这里简单的加了一个遮罩，只有遮罩层和弹窗主体。用到了h5的drag属性https://www.ru...

基于el-table的表格组件实现表格拖拽功能这里用到的是Sortable.js安装 npm install sortablejs --save引入Sortable.jsimport Sortable from "sortablejs";具体使用：//获取需要添加拖拽的组件const el = document.querySelector(".el-table__body-wrapper tbody"); //设置拖拽的参数const ops = { animat.

页面加载慢的时候想加一个动态进度条。难不难？好引吗？用起来简单吗？装它：npm install nprogress引它（哪里需要哪里引）：import NProgress from 'nprogress'import 'nprogress/nprogress.css'用它：//开始读条NProgress.start();//结束读条NProgress.done();自定义进度条样式？#nprogress .bar { background: green ..