Suk__的博客

平时我们使用组件都是import xxx from 'xxx';然后components里面注册,最后template中使用,这样一套流程下来略麻烦,有没有一种方式能像ElementUI的弹窗组件一样代码调用呢?组件目录结构大概就是这样。

需求背景: 因为图表的图例处要用富文本加上一个箭头图片,但是图片路径找不到,所以将路径改成通过import转成base64显示

最近有个需求为只展示一个字段变更前和变更后变化的部分,新增为红色,删除的灰色加上删除线展示,最终效果如下:其实本质上就是两个文本的diff,找到新增的和删除的然后加上样式,这里用的库为diff_match_patch1.installnpm idiff_match_patch -S2.初始化这个库提供了一个构造函数diff_match_patch,返回一个diff实例供我们使用他的api,官方有很多方法,这里需求只用到了它的字符串对比:diff_main方法提供了两...

v-viewer是一个基于viewerjs封装的vue图片预览组件,有预览缩放拉伸旋转切换拖拽等等功能,支持配置化.非常强大,这里记录一下使用过程:首先v-viewer的中文文档传送门:Vue图片浏览组件v-viewer，支持旋转、缩放、翻转等操作 | Mirari's Bloginstall:npm i v-viewer -Simport VueViewer, { directive as viewerDirective } from 'v-viewer';import 'vi.

之前写过一篇关于el-upload单文件自定义上传文章:axios+elementui的upload使用http-request自定义文件上传_Suk_阿硕的博客-优快云博客_http-request自定义文件上传<!-- 关于组件的部分属性: action:上传的地址,和axios没关系,elementui自己发请求 :show-file-list:是否显示上传的文件列表 :on-success:上传成功的回调 :on-error:上传失败的回调 :before-upload:上传之前的回调，可.

这里使用的是用map映射id和自身然后遍历通过parentid找父级的方法源扁平数据:{ "code": 200, "message": "操作成功", "data": [ { "functionId": 10000, "parentFunctionId": 0, "functionName": "安全检测" }, { "funct

我们在做新增和编辑共用一个弹窗时,弹窗关闭后需要重置el-form的数据并清空提示,如果是先编辑关闭的,那么resetFields方法会把编辑的数据做为初始化的数据,所以在打开新增时就会看到数据状态并没有清空,校验提示也在,解决方法:onClose() { this.$refs.form.resetFields(); Object.assign(this.formData, this.$options.data().formData);},在el-dialog关闭的回调里

首先上问题图:除了高度超出和没有内部滚动条之外,表头也没有固定直接滚动上去了,我想要的效果是表头固定只有数据滚动,table外面的layout盒子也不滚动,只是表格内容区滚动,并且表格高度刚好和分页条触底,整个表格都在首屏目标效果图:解决方法:首先高度问题我们可以在el-table外面套一层盒子,高度用calc减去其它的高度给到这个盒子,然后el-table上加上一个props: height="100%" 即可至于固定表头的做法就是写了height这个props就会自.

chainWebpack: (config) => { config.module.rule('fonts') .use('url-loader') .loader('url-loader') .options({}) .end(); config.module.rule('images') .use('url-loader') .loader('url-loader') .options({}) .

我们都知道v-model是value属性和input事件两者的语法糖,这里说一下2和3的变化vue2的v-model:子组件中接收的prop必须key为value,修改value的事件中只做一件事:emit('input',value),将要修改的值通知给父组件vue3的v-model:子组件中接收的prop的key由value改成了modelValue,修改value的事件中触发的自定义事件名改为了emit('update:modelValue',modelValue)vue3中v.

Aside.vue:<template> <section class="aside"> <el-menu text-color="#686a6e" active-text-color="#1a8aff" router :default-active="$route.path" :collapse="isCollapse" > <MenuList v-model:men

一开始用踩了一堆坑,provide怎么写都不行,官网对其响应式的描述原话:意思就

setup:对外暴露数据,等同于vue2的data ref:生成响应式基本类型数据(字符串.布尔值,数字等) reactive:生成引用类型数据(对象,数组等) toRefs:结构响应式对象中的属性 computed:计算属性,是一个方法,和以前用法差不多 watch:只能监听响应式对象 watchEffect:能监听对象的某个具体属性...

解决方法:在beforeEach中重新初始化router:// 在describe外面定义routerlet router = new VueRouter();// 在beforeEach中重新初始化 beforeEach写在describe里面 beforeEach(() => { // 测试跳转时共用同一个对象会产生点击次数叠加,每个测试用例之间的跳转次数不独立导致结果不准确 // 执行每个测试用例之前重新初始化一次router,保证jest.spyOn/jest.f

我们在使用elementUI的$confirm弹窗时经常用来删除确认,写单测的时候我们并模拟不了用户点了是或否,弹窗是在body外面的,所以使用wrapper.find在组件内也拿不到弹窗中的确定或者取消按钮,模拟真实用户点击就行不通了,单测中也没有document对象查询不了body,所以这里为了执行到点是后面的逻辑,写单测时直接将确定这一步跳过,自己mock掉这个过程,只保留确定后的删除逻辑:组件中:this.$confirm('确认删除吗?', '警告', { confirm

import { shallowMount,} from '@vue/test-utils';import Component from '@/components/Component';// 导入vuex和你的store实例import Vuex from 'vuex';import store from '@/store/index.js';/** * @author Sukyi * @priority P0 * @casetype unit */describe('测试Co.

组件上:@click="clickHandler($event,myParam)"方法:clickHandler($event,myParam)// 事件对象放第一个,自定义参数往后按顺序放 当然方法里事件对象接收时的形参名可以取别的,比如clickHandler(e,myParam)扩展:如果单独只接收自定义参数:组件上:@click="clickHandler(myParam)"方法:clickHandler(myParam)如果单独只接收事件对象:组件上:@cl..

这里要用visible-change事件记录下拉框当前是打开还是关闭状态,只有打开的时候才进行去重,否则删除层后其他的label会对不上就只显示value了

微信小程序后面改版后不能通过js的方式拉起授权弹窗,需要通过button组件触发调用:<!-- open-type为开放接口的类型,这里为获取用户信息 @getuserinfo即为获取用户信息的事件回调 --><button open-type="getUserInfo" @getuserinfo="login" class="btn2"><text>直接登录＞</text></button><script> //

vuex中用户信息中的权限列表import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)const store = new Vuex.Store({ state: { userInfo: { name: 'Suk', roles: ['add', 'delete'] // 管理员有哪些权限 } }, mutations: {}, actions: {}, getters: {},

vue.config.js:const path = require('path')module.exports = { configureWebpack: { mode: 'production',// 打包时模式就要切换成生产模式 }, // publicPath生产模式采用相对路径,不然文件放到服务器指定目录下会找不到,开发模式用绝对路径 publicPath: process.env.NODE_ENV === 'production' ? '.

// 导入momentjsimport moment from 'moment'export default { install: Vue => { // 将日期格式化过滤器注册成全局 // 格式化到time Vue.filter('formatTime', str => { return moment(str).format('YYYY-MM-DD HH:mm:ss') }) // 格式化到date Vue.filter('.

首先后端要返回的数据格式为文件流的形式响应头为:Content-Type:application/octet-stream这是请求后端返回的信息:前端axios请求:// 下载模板const exportAlterExcelTemplate = () => { return _ajax({ url: '/admin/vocabulary_manager/export_alter_excel_template', responseType: 'blob.

<!-- 关于组件的部分属性: action:上传的地址,和axios没关系,elementui自己发请求 :show-file-list:是否显示上传的文件列表 :on-success:上传成功的回调 :on-error:上传失败的回调 :before-upload:上传之前的回调，可以在这里检测文件类型和大小，还可以给额外参数赋值要带到服务器的数据 i...

父子组件渲染顺序:父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted父子组件更新顺序父beforeUpdate->子beforeUpdate->子updated->父updated父子组件销毁顺序父beforeDestroy->子beforeDestroy->子destr

beforeCreate () { // 创建前,还不能访问data与methods window.console.log(this.xxx) }, created () { this.intervalTime = setInterval(() => { window.console.log(123) }) // 创建后,可以访问data与methods,但是还不能访问vue渲染后的dom window.console.log('c.

页面适配amfe-flexible:可以自动给页面中的 html 标签设置字体大小，以此设置 rem 的基本值使用步骤:1.安装lib-flexiblenpm i -S amfe-flexible2.在main.js种引入import 'amfe-flexible'postcss-pxtorem:设计稿中的测量出来的长度都是 px, 无法自动适应设备，如果自己手写 px 转换 rem 太麻烦了，可以使用postcss-pxtorem来自动设置使用步骤:1.安装post

通过点击次数或者时间戳实现都行:判断条件:在300秒内有两次连续单击事件触发就是双击,否则就是单击export default { data () { return { clickCount: 0, time: 0 } }, methods: { dblclick () { //使用点击次数实现,如果双击了就重置计数器进入下一次双击判断 // this.clickCount++ // if (this.

我们都知道页面刷新后 vuex的数据会丢失,因为页面刷新会重新执行js脚本,数据是存在内存中的,页面刷新后这块空间自然就释放了没有了,可以使用vuex-persistedstate这个插件来将vuex的数据持久化到localstorage中,它会监听页面刷新事件,将数据存入本地存储,页面加载时再取出到vuex中,这样就解决了state丢失的问题,那么下面直接讲怎么用这个插件1.首先安装vuex-persistedstate:npm install --save vuex-persistedstat

首先上图给大家看看实现效果:然后直接上核心代码: <!-- 左侧菜单栏 --> <div class="aside"> <el-menu class="menu" :default-active="$route.path" @open="handleOpen" @close="handleClose" router

1.创建混入的文件2.抽取混入的代码// 将分页的公用代码抽取出来 规定查询数据的方法名为fetchData,重新回显的方法名为reloadData,页面中统一调用export default { data() { return { total: 0, // 总记录数 currentPage: 1, // 当前页码 layout: 'total, sizes, prev, pager, next,

当我们在删除最后一页的最后一条数据时,我们想要的效果是回到上一页,查询处上一页的数据显示出来,当前页码变成上一页,而真正删除的时候显示出来是个空的,而且页码也还在当前页这时我们就需要去判断当前删除的是否为最后一页的最后一条数据,如果是,我们删除后要将当前页码-1再查询,这样页码回到了上一页,查询出来的也是上一页的数据了,话不多说下面爷直接上代码:// template模板<el-table-column label="操作"> <template slot-scope=

this.$refs.form.resetFields()首先我们要知道这个方法是做了什么事,下面是elementui官网给出的解释:由此可知,这个方法是重置表单为初始值,相信大家和我一样对这个初始值有歧义,其实这个初始值并不是指data中定义的字段值,而是第一次字段被赋值的时候下面还原博主的问题:当我页面加载完成数据渲染好后,我先点击修改,弹出框会回显当前行数据,然后关闭窗口我在beforeclose事件中进行了resetFields,等我再点击新增分类时,表单并没有被重置,回显了