随笔分类 - vue
摘要：好用的拖拽组件：Awe-dnd npm install awe-dnd --save 集成：main.js import VueDND from 'awe-dnd' Vue.use(VueDND) 使用： <!--your.vue--> <script> export default { data
阅读全文
摘要：对于前端导出数据，如果导出excel需要用一些第三方插件，还要安装插件，但是如果导出csv就很简单了。 代码示例： /** * arrayTocsv * arrays = [[张三]] * headers = ['姓名'] */ export function arrayTocsv(arrays,h
阅读全文
摘要：为保证数据的安全性，在做数据传输和渲染的时候，需要对数据字符串加密和解密： 一、安装 CryptoJS 库 npm install crypto-js 二、AES 加密解密函数 import CryptoJS from 'crypto-js'; // AES加密（ECB模式 + Pkcs7填充） e
阅读全文
摘要：在做表单修改的时候，如果使用的是vantui里面的三级联动，需要手动设置默认值： 这里可以用 setIndexes 来设置三级联动的默认选项。 具体实现：注意这里设置的 index 不是 value this.$refs.address.setIndexes([2,2,4]); 这里可以因为加载顺序
阅读全文
摘要：在做VUE项目开发的时候，有时候需要限制输入字符串的长度，且需要输入数字。常见的例如：input框只能输入11位电话号码。 如果将type设置为number，此时 设置maxlength就无效。 解决办法： <input type="text" pattern="[0-9]{1,4}" oninpu
阅读全文
摘要：在做VUE开发前台用户的时候，对于订单编号，合同编号，增加一个一键复制的功能，往往能够极大的提升用户体验。 第一步：安装 v-clipboard #使用npm安装： npm install --save v-clipboard #使用yarn安装 yarn add v-clipboard 第二步：全
阅读全文
摘要：在做网站开发的时候，经常会遇到使用特殊字体的设计稿，但是如果直接引入该下载的字体，会特别的大，在移动端显示或加载就会很慢。 以下是两种解决方案： 方案一：下载软件压缩字体 https://blog.csdn.net/g310773517/article/details/136465629 https
阅读全文
摘要：子父组件在做数据传值和通信中，通常都是父组件通过【:props】进行数据的传递，通常用于父组件通过传递不同的参数，改变子组件。 但是经常会遇到这样的场景： 需要父子组件进行数据通信，实现双向数据绑定，可以利用 v-modle 实现父子组件数据交互通信。 父组件： <template> <div> <
阅读全文
摘要：VUE更改VUEX状态：简单示例代码： import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); export default new Vuex.Store({ state: { count: 0 }, mutations: { i
阅读全文
摘要：我们在做VUE项目开发的时候，经常会遇到需要绑定多个判断条件，多个class，多个style的情况，下面就整理一下： 一、绑定多个判断条件 1、绑定一个判断条件 <div v-if="isActive"></div> <div v-if="condition 0"></div> <div v-if=
阅读全文
摘要：最近在开发项目，由于项目是使用模板开发的，而不是用前后端分离开发的。但是就目前来说，很少有一款能够在移动端体验比较好的JS框架，特别是在移动端的下拉选择，以及三级联动的处理。 想来想去，想到了有赞的UI框架，看是否支持html引入使用，经过测试是可行的： 文档地址：https://vant-cont
阅读全文
摘要：在用VUE开发项目的时候，有时候需要去gitee里面查看仓库的地址，或者是git下来的项目，有时候会忘记远程仓库的地址。 查看方法很简单：git remote -v git remote -v 然后就可以看到： 打完收工！
阅读全文
摘要：最近在用vue开发项目，使用Tinymce作为富文本编辑器，最开始用的时候，还是不错的。但是用了一年发现一个问题，就是这个编辑器加载的太慢了，有时候网速慢一点，可能就直接加载不出来。 下面是我亲测的解决方法： 首先说原因：加载 tinymce.min.js 加载不出来，以及这个js所需要加载的文件，
阅读全文
摘要：在做前端开发，使用一款优秀好用的UI框架，往往能够做到事半功倍的效果，下面推荐几款优秀的UI框架作为参考。 NutUi NutUI是京东风格的移动端组件库，使用 Vue 语言来编写可以在 H5，小程序平台上的应用，帮助研发人员提升开发效率，改善开发体验。 https://nutui.jd.com/
阅读全文
摘要：最近在开发一个使用VUE打印的功能，出现一个问题，就是点击打印，打印的文档不居中的问题： 具体问题如下： 为了方便预览打印文件，以及样式好看，通常会把打印的文档居中预览，特别是设计稿就是这个样子： 让打印的表格居中显示。 但是这样打印预览的结果是： 首先最重要的问题就是边距的问题，如图所示： 其次比
阅读全文
摘要：在对前端代码进行优化的时候，考虑到执行效率，不能将 v-if 和 v-for 放到一个DOM元素里面： v-if和v-for不能同时的原因: v-for的执行优先比v-if要高 <template> <div class="hello"> <div v-for="(item,index) in li
阅读全文
摘要：最近在优化一个前端开发框架，做好的系统，存在大量的图片上传，特别是富文本里面的图片，上传多个，很麻烦，运营说如果能够复制粘贴板的图片，就可以截图上传，就很方便了。 考虑到运营小姐姐的需求，我就花了半个小时开发了这样的一个功能。 第一步：配置粘贴【paste】具体配置项 tinymce.init({
阅读全文
摘要：最近在开发一些项目，前后端数据分离开发项目，涉及到数据的安全性，需要考虑： 1、前端提交数据，进行加密，后端解密。 2、前端渲染数据，进行解密，后端加密。 第一步：生成加密/解密公钥和私钥。 先生成解密用的私钥： openssl genrsa -out crypt.pem 2048 然后生成加密用的
阅读全文
摘要：最近在开发一些项目，需要手机端上传图片，然后优化了一个裁剪的功能，遇到了一些神奇的BUG，然后就自己弄了一个插件。 首先采用的技术实现方案是：vue-cropper 这个是一个比较不错的图片裁剪功能，实现简单的裁剪是没有问题的，但是存在一个BUG，图片放大后，将裁剪框滑动的边缘，则无法缩小。 出现B
阅读全文
摘要：在用VUE开发项目的时候，很多时候会遇到需要在路由守卫里面实现一些逻辑代码，以致于需要在路由守卫中通过【next】来传递参数，那么该怎么传递参数呢？ 常见使用场景： next({path:'/login'}) next({name:'bind'}) 如何传递参数呢？ next({ path: '/l
阅读全文
浙公网安备 33010602011771号