Vue
Muizai
No code no bug.
幸灾乐祸才是乐,忙里偷闲才是闲。
展开
-
使用vscode插件du-i18n处理前端项目国际化翻译多语言
Du-i18n插件提供一键扫描中文、提取文案、文案回显、在线翻译、文案上传、拉取线上文案、翻译漏检、切换语言以及分析统计等功能。原创 2024-06-18 16:55:50 · 1032 阅读 · 11 评论 -
Vue将iconfont封装成全局组件,自定义类名
【代码】Vue将iconfont封装成全局组件,自定义类名。原创 2024-04-09 16:23:50 · 275 阅读 · 1 评论 -
前端vue实现手机号输入框下拉展示历史登录过的手机号码
需求:做一个登录页面,登录过的号码显示在下拉框,下次登录可以选择登录过的号码进行登录无需重新输入。样式就不附上了,记录下逻辑过程吧。因为点击的时候希望同时收起下拉框,如果用click的话,容易触发input的blur事件,会快一步把下拉框收起来以至于点不到我们想点的历史手机号码,这个涉及到click和mousedown的执行顺序。大概就是在输入号码点击登录的时候,localstorage记录下手机号码,每次打开登录页面的时候先取localstorage里面的手机号码作为历史手机号下拉框的内容。原创 2023-03-27 16:25:54 · 657 阅读 · 1 评论 -
vite.config.ts 基础配置
新建vue3+ts项目的vite.config.ts的初始配置如下:import { defineConfig } from 'vite'import vue from '@vitejs/plugin-vue'export default defineConfig({ plugins:[vue()]})设置 @ 指向 src 目录:import { defineConfig } from 'vite'import vue from '@vitejs/plugin-vue'import原创 2022-02-16 15:59:13 · 3113 阅读 · 1 评论 -
前端AES加解密
import CryptoJS from 'crypto-js';// 加密getAES (word) { let data = CryptoJS.enc.Utf8.parse(word); let key = CryptoJS.enc.Utf8.parse('秘钥'); let iv = CryptoJS.enc.Utf8.parse('偏移量'); let encrypted = CryptoJS.AES.encrypt(data, key, { iv: iv, mo原创 2021-11-02 14:52:56 · 184 阅读 · 0 评论 -
纯前端实现Excel文件下载
最近有个模板下载的需求,因为考虑到是静态文件,直接前端做不用后端再写接口,就把文件放在前端,前端实现下载了<template> <div> <button @click="downloadTemplate">下载模板</button> </div></template><script>export default{ methods:{ downloadTemplate(){ const ancho原创 2021-11-01 14:14:34 · 1047 阅读 · 2 评论 -
Vue配置每个页面对应不同的标题
在index.html配置一个固定的标题,用于加载完成前的过渡显示,比如你的网站叫 ASDN,那你就直接<!DOCTYPE html><html lang=""> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=devi原创 2021-10-18 10:26:20 · 551 阅读 · 0 评论 -
HbuilderX 安装后显示不全,无法拖动如何解决
这一下把我给看懵了,怎么拖也拖不动,连个关闭按钮也看不到,关了重启,卸载重装,关机重启,都不行,都这个样子,这不就逼死一个强迫症了吗终于在社区看到有别的小朋友也被坑了,然后大佬的回答,天呐。。。这可是2021年啊,现在还没有解决,也是绝了。。。。这不才像个人样吗。。。。。...原创 2021-08-31 14:58:22 · 1096 阅读 · 4 评论 -
关于Vue3 的一些变化
在组件中使用emit需要先进行定义,不然控制台会报警告信息,Vue对子组件调用父组件时的一种约束app.component("Counter", { props: ["count"], emits: ["add"], methods: { add() { this.$emit("add"); } }, template: ` {{ count }} <button @click="add">++</button&原创 2021-05-19 15:09:58 · 115 阅读 · 0 评论 -
安装@vue/cli遇到的坑以及相应的解决方法
当一个咸鱼级别的程序员,最难的往往不是写业务,最难的往往是各种环境问题,像我这种卤出来的咸鱼,就经常被环境问题绊倒在盐缸里,导致越来越咸鱼,莫得翻身。。。因为换了公司,需要重新装个@vue/cli,开开心心打开vue官网老老实实按步骤安装,最后竟然。。。。这很头疼,百度了一圈,很多方法,但是最终都以失败告终。。。。还好最好出现了一根救命稻草 @vue-cli的安装及vue项目创建简单梳理一下,就是需要添加一些环境变量,让系统在我们输入命令的时候知道去哪里找到对应执行的程序,步骤如下:① 首先要原创 2021-04-14 15:17:26 · 723 阅读 · 0 评论 -
vue-router在新窗口打开
1.组件式导航,router-link 有一个target的属性<router-link to="/b" target="_blank">新窗口</router-link>2.编程式导航<p @click="newPage">新窗口</p>methods:{ newPage(){ let routerUrl = this.$router.resolve({ path:'/b', query:{id:96}原创 2021-03-30 10:50:25 · 106 阅读 · 0 评论 -
关于vuex的一些总结
状态管理模式,采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化原创 2021-01-25 18:38:09 · 110 阅读 · 0 评论 -
vue常见面试题:computed和watch的区别是什么?
根据vue官方文档可以看到,computed叫做计算属性,而watch叫做侦听器。顾名思义,计算属性,是依赖其他变量计算出来得到的一个变量,也就是它受别的变量的影响,别的变量一变他就会变,比如<script> export default({ data(){ return{ num1:10, num2:20 } }, computed:{ total(){ return this.num1 + this.num2 // 当num原创 2021-01-25 18:26:50 · 2492 阅读 · 0 评论 -
关于vue-router的一些总结
1.动态路由const router = new VueRouter({ routes:[ {path:'/user/:id',component:User} ]})<router-link to='/user/123'></router-link><router-link to='/user/456'></router-link>//可通过this.$route.params.id获取到2.导航守卫 ( beforeRouteUpd原创 2021-01-21 17:51:50 · 230 阅读 · 1 评论 -
Vue 踩坑记录
beforeRouteUpdate(导航守卫),我们在面对多个id不同的用户的时候,我们会用同一个User组件去渲染他们,只是通过不同的id去请求对应的用户信息,通常我们会做成动态路由,使用动态路径参数来实现,像下面这样const router = new VueRouter({ routes:[ {path:'/user/:id',component:User} ]})这样子的话不管是id为12332432,还是id为787864的用户,都会映射到相同的路由(’/user/:id’),.原创 2021-01-19 18:45:07 · 140 阅读 · 0 评论 -
Computed property “total“ was assigned to but it has no setter.
当你想要在模板中多包含此处的翻转字符串时,或者是进行复杂的逻辑的时候,我们往往会在computer里面去处理。<span>{{total}}</span><script>data(){ return { num1:0, num2:10 }},computer:{ total() { return this.num1 + this.num2 }}</script>以上的例子total是依赖于num1和num2 的值,所以当我原创 2020-08-24 11:20:51 · 1562 阅读 · 0 评论 -
详解MVVM
MVVM 是 Model-View-ViewModel 的缩写。Model:代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑。View: 代表UI 组件,它负责将数据模型转化成UI 展现出来。ViewModel:监听模型数据的改变和控制视图行为、处理用户交互,简单理解就是一个同步View 和 Model的对象,连接Model和View。在MVVM架构下,View 和 Model 之间并没有直接的联系,而是通过ViewModel进行交互,Model 和 ViewModel 之间的交互.原创 2020-07-15 22:27:18 · 260 阅读 · 0 评论 -
vue-devtools 安装教程
你总是不知道明天和意外哪个会先到,是的,本来开开心心以为装个devtools不是什么难事,谁知道就半天就栽在这里了,真是扑街啊。。。刚开始是在 https://github.com/vuejs/vue-devtools.git 下载的下载完一步一步往下走:1.npm install 2.npm build 到build这里就卡住了...卡住了...vue-devtools@5.3.3 build: `cd packages/shell-chrome && cross-env N原创 2020-07-13 09:00:50 · 268 阅读 · 0 评论 -
Computed property "***" was assigned to but it has no setter.
bug就像是盒子里的巧克力糖,怎么回事,充满想象…你永远不知道当你开心地敲着代码的时候,什么时候bug就会爬出来,于是你开始心烦意乱…我用了element的Tabs 标签页,本来写在data里面是没问题的,但是实际情况是要根据不同页面而改变,所以改到computed了,于是就报错了…好像知道什么意思,又好像不知道什么意思,翻译一下先emm,再找找吧,哦对,看一下vue怎么说简单来...原创 2020-05-08 11:52:30 · 1585 阅读 · 1 评论 -
vue 实现 ctrl + enter 发送信息
<script>export default { created() { document.addEventListener("keydown", this.keyEnter, false); }, methods: { keyEnter(e) { if (e.keyCode == 13 && e.ctrlK...原创 2020-04-22 20:08:44 · 654 阅读 · 0 评论 -
element手动触发表单验证
触发对整个表单的验证:this.$refs.userForm.validate(); 触发对表单部分字段的验证:this.$refs.userForm.validateField("password");原创 2020-04-22 09:43:27 · 13093 阅读 · 2 评论 -
el-table中实现单选按钮
其实element本身是有提供单选这个功能的,只是效果不太明显…用色块表示…我比较俗…喜欢这种直截了当一眼就知道我选中它了的…所以就结合它本身的单选功能和el-radio拼一拼…上菜…哦不…上码 <el-table max-height="300" :data="list" highlight-current-row @row-click="rowClick"> <...原创 2020-01-15 15:28:43 · 22702 阅读 · 22 评论 -
vue生命周期图解
原创 2020-01-14 17:52:24 · 130 阅读 · 0 评论 -
vue里面左右布局,右边的高度随左边的高度而改变
左边的布局是一个二维数组渲染出来的,右边的高度要和左边数据渲染之后的高度一致。大概是下面这样的布局:<div> <div class="left" ref="leftList" style="float:left"> <div v-for="item in list"> <p v-for="child in item.children"&g...原创 2020-01-09 16:09:37 · 3449 阅读 · 0 评论 -
el-input输入11位手机号,边输入边验证手机号码格式
喉咙痛…不多说,直接上码den…gdeng…不对,喉咙痛和打字什么关系…哎…反正多写也无益,少写也许喉咙就好了呢…<template> <el-form :rules="rules" :model="data"> <el-form-column prop="phone"> <el-input @input="phoneChange" v-...原创 2019-12-06 14:25:30 · 5913 阅读 · 3 评论 -
vue项目中实现拖拽 vuedragger
心情有点烦躁,直接上码吧…npm i -S vuedraggable //首先先装一下vuedraggableimport draggable from "vuedraggable"export default{ data(){ return{ materialsList:[] } }, components:{ draggable }, methods:...原创 2019-12-04 16:21:29 · 2320 阅读 · 1 评论 -
解决element里面el-table中表头和内容错位
哎,element真是一个让人又爱又恨的东西,你用着很爽想华丽丽原地转圈的时候,它就会出来绊你一脚…怎么办,还没怎么办,填坑呗,没办法,就像寄人篱下,你只能忍气吞声…不扯,进主题吧,这个是一个el-table写的限制了宽度的可左右滚动的表格,这样看是挺正常的。但是往右滑的时候,笑容逐渐消失…???怎么回事,本来还为它是个直男而烦恼,但是想想直男总比渣男好,但是现在算什么,说歪(wan...原创 2019-11-25 18:18:50 · 7716 阅读 · 14 评论 -
element中el-input限制只能输入数字和小数点,且在非数字时清空input
这里用的是el-form做的,因为el-form有验证提示的功能,:οninput="addPro.priceSell=addPro.priceSell.replace(/[^\d.]/g,’’)"是在非数字时清空input<el-form label-width="100px" class="add-product-form" ref="addProF...原创 2019-11-13 14:14:34 · 2495 阅读 · 0 评论 -
element组件table表头\n换行
在项目中,我们有时候需要像上面截图这样,表头需要两行的样式,可能你们不需要,但是我用到了,这里记录一下,当是自己的一个笔记。<el-table :data="list" tooltip-effect="dark"> <el-table-column type="selection"></el-table-column> &l...原创 2019-11-12 10:19:31 · 3866 阅读 · 3 评论