- 博客(17)
- 收藏
- 关注
RSS订阅原创 关于 vue3 + antd design + vite配置按需加载问题记录
使用 babel-plugin-import 进行按需加载,安装所需插件yarn add vite-plugin-imp babel-plugin-import -Sornpm install vite-plugin-imp babel-plugin-import -S配置 vite.config.js 文件import vitePluginImp from 'vite-plugin-imp';export default defineConfig({ plugins: [ .
2022-03-15 17:34:04
1985
原创 关于 vue 富文本编辑器 Tinymce 踩坑日记
作为踩坑过 vue-quill-editor 富文本编辑器，以及 wangEditor 编辑器来说，个人感觉还是 Tinymce 功能更加强大跟齐全一些。说一下体验感，wangEditor 编辑器太年轻了，功能上缺乏很多东西，比如说上传图片无法方便的添加图片的 alt 信息，git issue上也有人提意见，功能目前还在计划中。而 vue-quill-editor 这款编辑器是根据 quill 编辑器为基础做的二次加工，功能上来说，感觉没有 Tinymce 增加功能方便简洁，而且为了一些特定化需求，.
2021-07-09 12:23:24
1600
转载 TinyMce 中文资源包
tinymce.addI18n('zh_CN',{"Redo": "\u91cd\u505a","Undo": "\u64a4\u9500","Cut": "\u526a\u5207","Copy": "\u590d\u5236","Paste": "\u7c98\u8d34","Select all": "\u5168\u9009","New document": "\u65b0\u6587\u4ef6","Ok": "\u786e\u5b9a","Cancel": "\u53d6\u6
2021-07-09 12:21:22
6487
原创 nuxt.js 使用 ngrok 可以让外网访问本地开发环境的地址
文档中是这样介绍的：ngrok将创建一个http-https-tcp隧道。请查看ngrok npm软件包以获取更多详细信息。当Nuxt服务器正在侦听时，我们需要能够连接到ngrok端口。获得公共URL后，我们希望将其打印到Nuxt CLI，以便我们可以轻松地单击它以打开并共享它。然后觉得动手尝试了一下，操作步骤非常简单，实现起来也很快。就是有外网访问存在限制，一分钟限制访问多少次我也忘了，反正次数不会很多，但是适合手机与电脑不在同一局域网下环境用来查看效果。直接开干吧，首先在项目里的开发环境下 下一个依
2020-12-03 18:18:50
495
原创 关于element-ui分页器 设置current-page为初始化值为 1 时的问题
分页的代码逻辑是当 total > pageSize 才会有后面的第 2，3，4，5…等等页面出现。我的需求是页码分页会携带在 url 中，每次页面跳转就相当于刷新页面，所以，会有一个初始化 pageNum 代码操作，但是，由于数据未请求回来之前，数据里因为是路由的改变，相当于页面的刷新，total被初始化为了0，所以就会遇到一个无论怎么跳转，当前页码数一直处于1的状态 。所以我想到了一个简单粗暴的方案，就是初始时拿到 Url 中的 pageNum,数据请求回来之后，再次将 pageNum 赋值给 c
2020-11-04 11:36:32
2629
原创 关于vue 单选框选中与取消解决方案
在网上找了很久也没有找到自己想要的解决方案，于是乎自己便想了一个简单粗暴的解决方案。首先考虑radio是单选框，且vue的v-model赋值速度非常的快，取消选择又不会触发 radio 的 change 事件，使用click事件去单纯的修改值会导致选中值瞬间勾选与取消了勾选。达不到想要的效果，可以考虑这种情形，因为radio的双向绑定，值是瞬间变化的，所以可以用一个 oldValue去保留上一次点击选中的值，这样去勾选时就不会影响到 oldValue ，保留拿到了oldValue值后，用 oldValue
2020-11-03 18:15:25
7436
原创 nuxt.js 多重动态路由嵌套，路由变化，页面不变化问题
本人的业务逻辑场景为`` `/list/category-b/category-sub-b/page-4` `/list/category-a/category-sub-a/page-2` /list/category-a/category-sub-a/page-1 => `/list/category-a/category-sub-b/page-1` `/list/category-b/categ
2020-11-03 15:28:16
2922
原创 Nuxt.js项目是antd 按需加载笔记
/* ** Build configuration ** See https://nuxtjs.org/api/configuration-build/ */ build: { // 配置 按需加载功能 需 babel-plugin-import 支持 transpile: ["ant-design-vue"], babel: { plugins: [ [ "import", {
2020-08-28 14:22:11
1305
2
原创 react antd 自动按需加载配置过程笔记
首先运行 npm run eject 将 package.json中的 babel配置释放出来。若遇上报错，则说明在运行前修改删除过项目文件，此时，则需去将隐藏的 .git 文件删除，重新 npm run eject。释放出来后如下：配置结束后，直接引用组件就可以实现了。如下...
2020-08-06 11:11:30
336
原创 nuxt.js添加工具块 / js代码。Statcounter 分析器案例
在业务需求中，有一个需求是要添加SEO的网站点击分析器。选中了Statcounter分析器，但是由于官方给的代码形式案例如下<script type="text/javascript"> var sc_project = 12363289; var sc_invisible = 1; var sc_security = "93f97f25"; var sc_https = 1;</script><script type="text/javascript"
2020-08-04 10:06:48
518
原创 整理了一些CSS自定义加载动画效果，可与遮罩层一起使用
在这里整理了一些PC端的loading动画效果，个人感觉还可以，所以就整理了一下。转载于原文，因为我用的是 Nuxt.js ，所以整理的也是vue组件。先上效果图，我只整理了原链接的第 1 ，4，5，6，7，8种动画效果。解释一下为什么未收录第2，3种动画，是因为这种动画效果的实现是需要背景色 background-color 存在且不能为透明色的背景色，为透明色的无法遮盖住动画轨迹，而这里遮罩层是需要透明色，所以未采用这两种效果，如果有背景色存在且不透明的童鞋可以考虑添加进来，组件源码就在下面&.
2020-05-29 18:10:15
852
原创 Linux 系统 关于docker + jenkins发布 Nuxt.js 前端项目简单构建笔记
不亲手弄一把，不知道会流多少的辛酸泪。话不多说，先简单说一下项目搭建要求，本人安装的是CentOs docker ，我是参照别人的文档进行安装的，但是自己摸索毕竟会走一些弯路。前端项目的配置很简单。所以参考这个文档，把 docker 和 Jenkins 安装好就可以了，剩下的就可以不用参考了，安装好Jenkins之后，需要下载一些必要的插件 比如： Localization: Chinese (Simplified) 、Nodejs、Publish Over SSH、Gitee(这个插件根据自己的代码.
2020-05-28 19:12:03
367
原创 关于 element ui 更换主题色手记
官方提供了几种更换主题的方案选择，在线主题编辑器，选择好了主题进行下载，会得到一个 主题的 zip 包，解压，找到项目的node_modules中的 thyme-chalk 文件中的 fonts 文件进行替换，这样可以成功更换你想要的主题了，但是会产生一个问题，那便是其他人在 clone 项目时，他们的 ui 主题依然还是原来那一个 默认主题色。每次 npm i 重新安装依赖包时也会产生这个问题，那么，这时候，就可以选择使用官方提供的 在项目中改变 SCSS 变量 方法，在assets 文件中新建一个 x.
2020-05-15 14:18:59
239
原创 router-link / nuxt-link 事件点击无效解决方法
有时候，需要在 router-link 上不止是跳转路由，还想要在跳转的同时进行一些操作，之前的方法是将 nuxt-link 换成普通的 div 进行 this.$router.push('/') 的方法跳转，觉得这样也可以，不影响其他问题，但是有一个问题存在，就是不能对选中的链接进行鼠标右键在新窗口打开页面，小小的问题，影响不大，如果用 v-on:click.native 方法就可以解决此类问题，既可以跳转，也可以在跳转的同时触发事件，做一些其他的事情。比如跳转时将触发的条件传给后台，分析用户行为。.
2020-05-15 11:05:56
3843
原创 el-autocomplete 配合 @keyup.enter.native 使用时，无法关闭搜索建议弹框问题解决方案
el-autocomplete 配合 @keyup.enter.native 使用时，无法关闭搜索建议弹框问题解决方案使用场景，本人使用element ui 时由于业务需求，需要用到一个搜索业务，看着 el-autocomplete 这个组件感觉蛮适合的，于是便踩入这个坑中。因为需要同时存在搜索建议列表和点击enter跳转搜索结果页需求，使用enter点击跳转后，无法在跳转完成时隐藏掉之前的搜索建议，通过鼠标点击其他元素却可以关闭，开始以为是因为 input 的 focus 问题，便写了一个隐藏的inp
2020-05-13 18:32:32
3804
3
原创 Nuxt.js 中使用Swiper Animate
Vue Nuxt.js 中使用Swiper Animate废话不多说，咱就单刀直入。废话不多说，咱就单刀直入。首先安装在 vue 中使用的 Swiper npm i vue-awesome-swiper --save。安装完成后，在 plugins 文件夹下新建一个 swiper.js 文件。js文件内容如下import Vue from 'vue'import VueAwesomeS...
2020-01-13 16:38:25
1491
3
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人