随笔分类 - Vue
摘要：需求 有的时候我们导出的数据量很大，如果在主进程中操作的话可能会导致页面卡顿的问题 代码 App.vue <template> <div class="app"> <button @click="exportExcel">导出Excel</button> </div> </template> <sc
阅读全文
摘要：背景 有的时候我们需要向后端发送多个网络请求，如果全部在主线程中操作的话页面会变得非常卡顿，我们可以使用webwoker来发送网络请求，一旦服务响应结果，我们再从子线程给主线程发送消息 步骤 默认情况下vue2是不支持webwoker。 安装worker-loader npm i -D worker
阅读全文
摘要：需求 有的情况，我们需要给我们的网页添加水印。我们可以使用第三方库Watermark Design。官方地址：https://watermark-design.github.io/watermark/zh/ 效果 示例代码 入口文件main.js import WatermarkDesign fro
阅读全文
摘要：最终效果 场景 有的时候我们需要根据服务端返回的数据来导出excel表格 优化一：设置单元格样式 比如：可以调节背景色、字体样式、border xlsx基础库不提供样式设置，可以使用xlsx-js-style库，这个库是xlsx库的fork版本，并添加了样式定义 详细样式可以查看https://gi
阅读全文
摘要：效果 背景 在大屏或者其他需要对数字设置千分位的分隔符（比如：151234数字展示成 151,234）或者 数字在变化时进行滚动的变化。 使用 安装 npm i vue-count-to demo <template> <div class="app"> <h1> 当前数值: <countTo :s
阅读全文
摘要：效果图 未转换前： 转换后： 背景 平常开发的时候使用px作为样式单位，但是在不同的屏幕尺寸下不能自适应，我们希望项目中所有使用到的px单位都转换成vw单位 使用步骤 安装 npm i postcss-px-to-viewport -D 在项目根目录下创建postcss.config.js modu
阅读全文
摘要：链接 https://zhuanlan.zhihu.com/p/585757686
阅读全文
摘要：# App.vue ```vue ``` # nodes.js ```js const nodes = [ { id: "a", text: "a", data: { pic: "https://dss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2308340537,46
阅读全文
摘要：背景 svg作为矢量图，放大不失真，但是如果在vue文件中直接引入svg的话会导致vue文件过长，不友好。想要在组件中使用的时候使用下面的方式来引入svg // svg-name的值就是svg图片的名称 <svg-icon svg-name="xueren" /> 步骤 在components下创建
阅读全文
摘要：# 背景 开发中我们常用`px`作为网页的单位，但是`px`在不同屏幕下不会自适应，这样会导致网页元素在小屏幕下的话会变得相对比较大，在大屏幕下会变得相对比较小 # 解决方案 https://juejin.cn/post/7217999296263553081 https://vant-contri
阅读全文
摘要：步骤 创建 language文件夹 在src同级的目录下新建language文件夹,新增三个文件，代码如下 index.js import Vue from 'vue' import VueI18n from 'vue-i18n' Vue.use(VueI18n) // 引入各个语言配置文件 imp
阅读全文
摘要：背景 在管理系统中我们需要经常使用表单组件来收集用户的一些数据，如果按照官网的示例一个个表单项去填写不仅代码会变得很长而且麻烦，所以我们有必要去对组件进行再次的封装 需求 需求1：表单项通过配置文件配置 表单的类型、key、label、是否必填 示例 MyForm.vue <template> <d
阅读全文
摘要：背景 有的时候我们需要在表单中携带一些上传的附件传给服务器 搭建基本表单结构 <template> <div> <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleF
阅读全文
摘要：方式1：使用base64编码加载 使用require或者import。 <img :src="imgUrl" alt="" /> <script> import Logo from '@/assets/logo.png' export default { data() { return { // i
阅读全文
摘要：背景 有的时候我们在使用vue脚手架开发完项目后想在本地的服务器上运行进行调试，因为有的时候开发时和打包后的效果有些许差异。 步骤 安装express npm install express -save 新增app.js 在与src文件夹同级新增server文件夹，并在server文件夹下新增app
阅读全文
摘要：背景 后端只返回用户的角色名，由前端去定义角色下使用到哪些页面。 思路 思路1：将所有的路由组件像平常一样进行统一注册，然后在获取了用户角色后，在路由的beforeEach钩子中判断所请求的路由对于当前用户是否有对应的权限，如果有就放行。 下面实现的效果： 管理员可以访问所有的路由，其他角色只能访问
阅读全文
摘要：背景 有的时候我们做的项目需要支持切换多国语言，那么我们就需要使用到vue-i18n插件 使用步骤 注意：下面操作是基于vue2的版本 实现功能： 在vue单文件组件中如何使用 模版中使用{{ $t('xxx') }} 点击"切换语言" 修改挂载在vue实例的$i18n的locale 安装依赖 np
阅读全文
摘要：安装 npm i handsontable 基本使用 Test.vue <template> <div id="hansontable"> <hot-table :data="data" :settings="hotSettings" ref="hotTableRef" ></hot-table>
阅读全文
摘要：背景 后台管理系统可以有不同的角色进行登录，我们希望对不同角色进行页面访问控制。 比如： 用户a为普通用户，只能访问home路由、访问其他路由的话则显示not-found 用户b为管理员，可以访问所有的路由 实现 环境 "vue": "^2.6.14", "vue-router": "^3.5.1"
阅读全文
摘要：背景 在我们上传文件后我们希望点击文件实现预览效果进行确认或者其他操作。 方式1：可以使用element-ui的upload组件+dialog+image组件解决,示例代码如下： <el-upload action="http://127.0.0.1:8888/api/private/v1/uplo
阅读全文
