![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue
文章平均质量分 51
wen_文文
每天进步一点点
展开
-
使用宝塔面板部署Node.js+Mysql服务和Vue3-Admin项目到云服务器上
使用宝塔面板将本地开发的Node.js+Mysql服务和Vue3-Admin项目部署到云服务器上步骤记录原创 2024-01-25 14:30:02 · 1574 阅读 · 0 评论 -
Nuxt中全局路由守卫的写法
1、在middleware中定义,全局middleware或布局middleware中;(server端执行)全局middleware中定义:a、在middleware文件夹下新建auth.js文件,在此文件中通过上下文对象context.route实现路由拦截;b、在nuxt.config.js文件的router配置项中引入该中间件;// auth.js文件:export default function ({store, route, $axios, redirect, req})原创 2022-04-24 10:26:24 · 5029 阅读 · 6 评论 -
Vue组件按需引入时v-if和v-show的区别
普通加载: 在父组件中先import子组件,然后在components模块中注册子组件,在进 入页面时,会随着加载当前页面的js文件就加载子组件的内容;子组件的内容和父组件的内容在同一个js文件;按需加载:子组件显示的时候,才会去加载子组件的内容;子组件内容和当前页面的js不是一个文件;v-if: 在条件为真时才去加载需要显示的组件;条件为真时元素才会渲染出来;v-show: 不管条件是否为真,在一进入页面就会去加载组件;且页面上元素已经渲染了,只是将其隐藏而已;组件引用时使用按原创 2021-12-02 15:19:15 · 1540 阅读 · 0 评论 -
iview中轮播图组件在loop自动播放时,添加的点击事件有时不触发
问题描述:使用iview中的Carousel组件并开启自动播放loop时,点击每个轮播图片时进行对应事件处理;但是轮播循环一周后,点击轮播图片时点击事件并没有触发;刚开始时点击事件添加在每个轮播块CarouselItem上;代码如下:<Carousel class="Carousel-list" :autoplay="getAuto" loop :radius-dot="false" :autoplay-speed="2500" arrow="always"> <Caro原创 2021-10-20 17:33:35 · 997 阅读 · 0 评论 -
将Vue项目打包时生成的chunk文件名中波浪线~替换为-
解决方案:webpack官网参考文档:https://webpack.js.org/plugins/split-chunks-plugin/#splitchunksautomaticnamedelimiteroptimization: { splitChunks: { // 指定用于生成名称的分隔符。 automaticNameDelimiter: '-' } }...原创 2021-08-10 17:50:26 · 556 阅读 · 0 评论 -
页面滚动时判断元素是否在可视区域内
/** * @description: 判断dom元素是否在可视区域内 * @param: el: Vuecomponnet对象 * @returns: true-在可视区域,false: 不在可视区域 */export const isElementInViewport = function(el) { let s = el.$el.offsetTop // 元素相对于页面顶部的距离 let x = el.$el.offsetHeight //元素自身高度 let.原创 2021-07-07 18:29:33 · 1142 阅读 · 0 评论 -
项目开发踩坑记:ElementUI的Radio组件change事件触发两次?
刚开始是一直在网上百度,说Radio标签解析后包含input和label标签,所以点击时一次是在input标签上,一次是在label标签上,所以是触发了两次,看了下控制台解析情况确实是这样,但是按照网上的解决方法试过之后都不行; 具体解决方法有: 1. 在点击事件上添加标签名的判断,确保只执行一次:if(e.target.tagName==='INPUT') return <el-radio v-model="test" :label="0" @click=...原创 2021-07-07 17:19:48 · 3776 阅读 · 0 评论 -
常用的几款富文本编辑器
1. tinymceGit配置操作文档兼容性: FireFox, Safar,Chrome,Edge,IE11+;安全性:经典编辑模式版本<=5.12时,会存在XSS攻击;可能需要自己想办法防止XSS攻击2. UEditorGit效果预览配置操作文档 缺点:组件较大,打包压缩后依旧不小,自带样式不美观,需要自己封装样式;官方现今已停止维护;优点:开发团队强大,在百度的多个产品中已实际使用兼容性:支持 IE6+、FireFox、Chrome3. wangEditor中文配置文档原创 2021-02-06 22:21:36 · 1251 阅读 · 0 评论 -
Vue中HTML的table标签表格合并
<div id="app"> <!-- 需求: 规格商品: 同一种商品可能有不同规格,需要将规格商品的不同规格费用和名称列在行方向上合并 --> <table border="1" cellpadding="0" cellspacing="0"> <thead> <tr> <th>商品名称</th> <th>商品编号&.原创 2020-11-30 00:31:38 · 777 阅读 · 0 评论 -
lowdb在Vue项目中的使用;
介绍:轻量级本地JSON数据库; 使用JSON为存储的数据结构,基于lodash(https://www.lodashjs.com/)开发;实际应用:Vue项目中Vuex存储数据,刷新页面时数据丢失的问题;此种情况下可用lowdb+LocalStorage适配器解决; 即在路由钩子函数 beforeEach中重新加载数据,从lowdb中获取数据,并将获取的数据重新放入Vuex的state对象中;每次更新state中的数据时, 同时也更新lowdb中存放的数据;...原创 2021-04-22 16:33:55 · 2851 阅读 · 0 评论