el-table在指定行添加弹窗
分析需求我们在一个vue3的工程上引入了element-plus插件,用来简化我们的代码,其中element-plus中有一个标签名叫el-table用于展示多条结构类似的数据, 可对数据进行排序、筛选、对比或其他自定义操作,可以有效的使得代码编写更加的简洁。
但是我们发现,官网的代码示例,是基于一个简单的组件来写成的,并没有提及到如何给el-table中的元素添加相关的提示框。
解决方案官网代码:使用Tooltip文字提示
12345678910111213141516<template> <el-tooltip :visible="visible"> <template #content> <span>Content</span> </template> <el-button @mouseenter="visible = true" @mouseleave="visible = false"> Hov ...
git提交分支——同时提交冲突
报错提示Need to specify how to reconcile divergent branches
123456789101112131415 * branch tooltipPromptTime -> FETCH_HEADhint: You have divergent branches and need to specify how to reconcile them.hint: You can do so by running one of the following commands sometime beforehint: your next pull:hint: hint: git config pull.rebase false # mergehint: git config pull.rebase true # rebasehint: git config pull.ff only # fast-forward onlyhint: hint: You can replace "git con ...
轻量级框架Cookie使用方法
安装相关插件的命令在JavaScript中,js-cookie 是一个简单的、轻量级的处理 cookies 的库,它可以帮助开发者更容易地在浏览器中管理 cookies。以下是如何在 JavaScript 中使用 js-cookie 的一个基本示例:
1234//bash安装npm install js-cookie --save//或者yarn add js-cookie
引入相关的包1import Cookies from 'js-cookie';
增删改查Cookie然后,在您的 JavaScript 代码中,您可以使用以下方式来设置、获取和删除 cookies:
123456789101112// 设置一个 cookieCookies.set('name', 'value');// 获取一个 cookielet value = Cookies.get('name'); // => 'value'// 获取所有的 cookieslet allCookies = Coo ...
taken增删改查操作
右键检查—应用—cookie—Taken
增删改查视频
大型项目的登录验证方法
写表单组件部分一般这个文件写在views或pages文件的login.vue文件中。
一般使用elementplus中的el-form表单标签,可以写上ruler等属性帮助后期验证。
然后再标签中有各个小组件el-form-item构成表单的每一项,在每一项中可以添加prop属性进行命名帮助后期在script标签中使用rules进行验证匹配。
在每一项中再写入想要的输入标签el-input。
简单登录框架
12345678910<template> <div> <el-form ref="loginRef" :model="loginForm" :rules="rules"> <!-- 表单字段 --> </el-form> <button @click="handleSubmit">提交</button> </div></template>
高级点的
1234567 ...
axios的使用方法
将axios引入到相关的包引入相关的包到axios.js文件中;或者一些比较大点的项目都会有自己的公共文件,在src中名叫utils里面会有一个request.js文件用来处理相关的axios请求。
1import axios from 'axios'
创建axios实例一般创建的方法
123const service = axios.creat({ baseURL:"http://....."})
高级创建方法
123456789const service = axios.creat({ //axios中请求配置有baseURL选项。表示请求URL公共部分 //代码可能会有多种环境,在不同的开发环境下,会有不同的路径 //如代码在.env.development开发环境或 .env.production生产文件中 //这种方法可以让Vite进行环境管理,让VITE_APP_BASE_API在不同环境下具有不同的值 baseURL:import.meta.env.VITE_AP ...
vue3与js的router基本使用方式
第一步快捷引入的别名使用路由需要大量在src文件中引用所需要的地址,并且组件中也需要很多的包的引用,将快速跳转到src这一文件的步骤进行简化操作是非常有必要的。
在vite.config.js文件中就可以帮助构成。一般将./取别名为~(可直接调用同级文件名),将./src取别名为@
12345678910111213141516//第一步内置模块用来配置路径import path from 'path'export default defineConfig({ resolve:{ //需要用到的插件数组 plugins:[vue()] alias: { //设置路径(两个下划线) //./当前同级目录+其他文件名 '~':path.resolve(__dirname,'./'), //@直接走到src文件目录下 '@': ...
微信小程序调用到接口数据
第一步:构建组件大致框架很多时候我们要了解到界面设计中到底包含了哪些元素,数据,以及div盒子的大致构成,从而先进行了简单的页面搭建,将组建初步设计好。
如以下页面,大致由三部分组成:每个部分有还有自己的构成
第二步:编写请求文档请求属性赋值与是否成功判定通常会写一个公用的请求文档,里面包含了各种页面发来的各种情况。一般会是有一个公用的后端数据接口前缀baseUrl与你所需要的数据的地址后缀url来拼接组成后端数据接口地址(这里可以体现文档重要性)。以下代码是对这个后端接口数据的响应情况处理,说明访问成功和访问不成功的各种情况。
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475// 公用的请求const baseUrl = "https://meituan.thexxdd.cn/api/"// 获取token//npm instal ...
vue3组件通信方式
常见通信方式总和
父子相互都能通信Props父子相互通信概述:props是使用频率最高的一种通信方式,常用与 :父 ↔ 子。
若 父传子:属性值是非函数。
若 子传父:属性值是函数。
注意:props可以让子直接拿到父亲传过来的属性,儿子使用**defineProps([父亲方法与属性的数组])**,
但是父亲不可以直接去拿儿子的属性,要要拿要遵循以下步骤
1.自己定义一个有属性的方法,变成绑定事件传递给儿子组件。
2.儿子组件定义触发事件,传入父亲想要的属性
父组件:
1234567891011121314151617181920<template> <div class="father"> <h3>父组件,</h3> <h4>我的车:{{ car }}</h4> <h4>儿子给的玩具:{{ toy }}< ...





