随笔分类 - vue
摘要：uni-app开发微信小程序实现文件预览 首先要在小程序后台配置 downloadFile 合法域名 然后使用 uni.downloadFile 实现文件预览，代码如下 uni.downloadFile({ url: "你要预览的文件地址", success: (res) => { if (res.
阅读全文
摘要：
实现需求：将客户一样拜访次数列合并成一行展示。如图 实现代码 <template> <div> <el-table :data="tableData" :span-method="objectSpanMethod" border style="width: 100%; margin-top: 20p
阅读全文
实现需求：将客户一样拜访次数列合并成一行展示。如图 实现代码 <template> <div> <el-table :data="tableData" :span-method="objectSpanMethod" border style="width: 100%; margin-top: 20p
阅读全文
摘要：首先开局一张图 需求说明，如图所示，表格中的每一行是一个复选框，点击表头的复选框，需要吧每一行中的复选框选中，当行中的复选框全部选中时自动勾选上表头的。 在UI框架中只提供了给第一列添加多选的功能，无法实现上面的功能。所以特此写下此篇博客以供有类似需求的小伙伴借鉴。 要想实现上面功能，这里用到了El
阅读全文
摘要：Echarts开发小技巧 格式化数字，三个数字一个逗号 export function parseNumber(num) { try { let newNum = parseInt(num) return newNum.toLocaleString() } catch (error) { retur
阅读全文
摘要：当给表格添加 fixed="right" 后，切换页签重新获取数据时会出现下面的问题 在获取数据后添加下面的代码即可解决 // 重新布局表格 this.$nextTick(() => { this.$refs.multipleTable.doLayout(); // el-table加ref="mu
阅读全文
摘要：使用百度地图查询地址 首先申请一个 ak，详情点击这里 之后根据官方文档我们调用如下接口 https://api.map.baidu.com/place/v2/search?query=中南大学湘雅医院®ion=全国&output=json&ak=您的ak //GET请求 调用成功后返回的数据
阅读全文
摘要：安装,vue-cropper - npm (npmjs.com) npm install vue-cropper --save 组件内引入 import { VueCropper } from 'vue-cropper' components: { VueCropper } 封装成组件 <templ
阅读全文
摘要：<style> /* 表格鼠标悬浮时的样式（高亮） */ .el-table--enable-row-hover .el-table__body tr:hover { background-color: rgba(255, 255, 255, 0); } /*表格鼠标悬停的样式（背景颜色）*/ .e
阅读全文
摘要：
vue + ElementUI 搭建后台管理系统记录 本文档记录了该系统从零配置的完整过程 项目源码请访问：https://gitee.com/szxio/vue2Admin，如果感觉对你有帮助，请点一个小星星，O(∩_∩)O 新建项目 vue create vueadmin 安装 less-loa
阅读全文
vue + ElementUI 搭建后台管理系统记录 本文档记录了该系统从零配置的完整过程 项目源码请访问：https://gitee.com/szxio/vue2Admin，如果感觉对你有帮助，请点一个小星星，O(∩_∩)O 新建项目 vue create vueadmin 安装 less-loa
阅读全文
摘要：//你的文档地址 let file = path + "?" + new Date().getTime(); // 预览文档服务器地址 let xurl = "https://view.xdocin.com/view?src="; //传入文档地址 xurl += encodeURIComponen
阅读全文
摘要：this.previewUrl = `${officeapps}${path}` + "?" + new Date().getTime(); 图片地址后面增加一个日期，可以保证每次请求的图片地址都是不一样的，以达到实时更新的功能
阅读全文
摘要：公众号H5页面接入微信登录流程 源码地址 https://gitee.com/szxio/h5_weixin 起步 首先创建一个项目，我们采用uni-app来作为我们的前端框架 环境安装 全局安装vue-cli npm install -g @vue/cli 创建uni-app 使用正式版（对应HB
阅读全文
摘要：源码地址 点击查看演示源码 Vue2父子传参：props 首先在父组件中引入子组件，然后以属性的方式将数据传递给子组件 父组件： <template> <div class="home"> <!-- 在子组件中使用 :变量名=value 的方式向子组件传递数据，子组件通过 props 接收--> <
阅读全文
摘要：作为一名前端开发人员，在日常开发中，不可避免的会和后端联调接口，但是有时候前端页面做完了，后端接口没写完，这样就导致前端的工作无法进一步进行。因此，我们往往会自己造一些数据，来模拟后台请求，将前端的逻辑提前一步写完，等待后端接口写好之后，替换一下地址就行了。下面我们一起从0搭建mock数据服务器 首
阅读全文
摘要：Vite 是一个 web 开发构建工具，由于其原生 ES 模块导入方法，它允许快速提供代码。 通过在终端中运行以下命令，可以使用 Vite 快速构建 Vue 项目。 $ npm init vite-app <project-name> $ cd <project-name> $ npm instal
阅读全文
摘要：基于vuecli + elementui 实现的自定义表单系统，通过拖拽的方式快速设计出表单页面，全程无需代码操作，让表单开发变得简单高效。以下是自定义表单系统使用截图。 末尾附源码，仅供学习，禁止商业用途。 体验地址：https://szxio.gitee.io/cform/#/ 源码地址：htt
阅读全文
摘要：首先了解一下什么是axios Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。 这是axios官网给出的解释。 其次封装后提供了那些功能 1、接口超时处理 2、接口请求时拦截 3、接口响应后拦截4、不同状态码判断 接着开始走入正题，首先安装axios
阅读全文
摘要：前言 我们再使用vue脚手架开发项目时，不可避免的涉及到多个环境来回切换接口调用地址的问题，在开发环境中可能会通过 ip 来访问后台接口，但是当项目上线后就要把对用的接口地址换成生产环境的地址，肯定不能再用 ip 来调用，因此我们每次打包发布的时候都要更改相关配置，非常痛苦，今天我们一起来通过代码的
阅读全文
摘要：Vue 最独特的特性之一，是其非侵入性的响应式系统。数据模型仅仅是普通的 JavaScript 对象。而当你修改它们时，视图会进行更新。这使得状态管理非常简单直接 如何追踪变化 当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项，Vue 将遍历此对象所有的 prope
阅读全文
摘要：上一篇我们已经封装好了cookie方法，登录成功之后也可以吧用户信息存到cookie中，接下来需要在router/index.js中引入一下cookie.js文件 然后继续添加以下代码 /* * beforeEach:从一个页面跳转到另外一个页面时触发 * to:要跳转的页面 * from:从哪个页
阅读全文
