- 博客(164)
- 收藏
- 关注
RSS订阅原创 vue项目门店官网页面, 根据视口大小自动跳转页面逻辑(pc --＞ mobile / mobile --＞pc)
在app.html文件添加以下代码逻辑。mobile -->pc逻辑与上面相似。
2023-11-27 10:50:08
194
原创 html- a标签包裹img标签, 点击图片无法跳转问题记录及解决方法
这里的解决方式通过把a标签跟img标签的结构改成同级, 然后样式中对a标签添加绝对定位, 并且保证a标签的z-index为当前最高层级。首先明确我们的目标, 就是a标签包裹的内容, 都能点击后以后直接跳转。
2023-10-24 17:39:20
1044
原创 el-form表单动态校验(场景: 输入框根据单选项来动态校验表单 没有选中的选项就不用校验)
关键点: 跟正常校验流程不同的是, el-form-item标签内的required和rules都要加上判断条件。场景: 输入框根据单选项来动态校验表单。没有选中的选项就不用校验。正题部分-表单动态校验。
2023-09-07 14:17:35
2095
原创 el-date-picker回显问题解决记录
偶然性解决问题, 还存在很多疑点, 由于项目比较赶, 已解决问题为目的做个记录, 以后回来筛查原因。回显事件赋值时无法回显, 数据都能拿到但是视图没有变化, 实际显示的是空时间。
2023-08-02 14:39:22
2022
原创 vue2 element el-date-picker报错TypeError: e.getHours is not a function
错误出现场景:1.编辑回显数据时2.时间组件由v-if控制并且为隐藏状态时3.时间组件v-model接受接口返回的数据为null时4.这时候时间组件v-if为true展示时就出现了标题报错。
2023-06-26 14:39:38
1104
原创 vue3中在箭头函数和普通函数中使用async awit调用接口
方法二: 在普通函数中使用async awit。方法一:在箭头函数中使用async awit。
2023-06-13 16:06:33
1198
原创 element-plus的messageBox样式丢失，main.js重新引入el样式后设置的主题色失效
main.js重新引入element样式，本人项目使用自动按需引入的方法使用element+ui，并结合使用scss。引入后发现定制的主题色被新引入的样式覆盖了,下面修改了引入的文件, 完美解决。
2023-05-23 16:06:02
533
1
原创 vue3切换页面路由再返回swiper失效
问题描述：在vue3项目使用swiper插件时，进入页面swiper轮播图能正常运行，但是在切换了页面再返回有轮播的页面，轮播图就停留在第一张， 并且轮播进度指示点只有一个
2023-04-04 16:22:08
277
原创 vue2项目-request配置put请求Content-Type为x-www-form-urlencoded
当发起put请求时, headers里的Content-Type的值需要改为application/x-www-form-urlencoded
2023-03-14 11:24:18
2861
原创 vant ui progress进度条组件样式调整
组件api: pivot-text- 进度文字内容 string 百分比。区分效果一没有用flex布局, 用了定位样式。这里把pivot-text的值设置为空。效果二是文字在进度条内部。
2023-02-01 10:14:59
2317
原创 vue2-vant组件库-van-search获取焦点方法
注意: 直接通过this.$refs.name.focus是不能获取到input的dom元素, 需要通过querySelector()方法查找到input元素,2.在进入页面时或点击历史记录时, 输入框input触发获取焦点事件–focus。1.通过在van-search组件标签通过ref获取输入框的dom元素。1.进入搜索页时, 搜索输入框自动获取焦点;2.点击历史记录, 搜索输入框自动获取焦点。2.进入页面时获取焦点。点击历史记录时获取焦点。
2022-12-27 14:34:19
4187
原创 el-date-picker时间组件封装 需求 开始的时间都是00：00：00 结束的时间是23：59：59 后端需要传递的两个参数 开始时间和结束时间
el-date-picker时间组件封装 需求 开始的时间都是00：00：00 结束的时间是23：59：59 后端需要传递的两个参数 开始时间和结束时间
2022-09-14 18:39:30
1787
4
原创 element-ui 切换分页条数，触发两次请求-bug记录, 分页组件封装
total不要与page-size 混淆，在没有指定current-page的情况下组件自动依据total(数据总条目数)进行分页(前提得指定page-size并且指定数量不能大于total)，如果混淆会导致没有进行分页或者数据总条目数不准确。对当前页数据显示个数进行配置（以数组形式进行配置，例：[10, 20, 30, 40]）page-size，文档所指为每页显示条目个数，支持 .sync 修饰符；total，文档所指为总条目数，显示接口返回的数据总条目数。1.先手动计算要跳转的最大页数。
2022-09-11 23:36:21
1950
原创 js-includes()方法
includes() 方法用来判断一个数组是否包含一个指定的值，根据情况，如果包含则返回 true，否则返回 false。在查找数组对象的时候, 要通过JSON.stringify()方法相对要查找的数组进行转换。includes()方法很强大，字符串，数组，对象均可使用，返回一个布尔值,“一” ‘[{“a”:1}]’
2022-09-07 13:59:16
3283
原创 elementui- Select 选择器-案例: 在v-for循环的多个下拉列表选择后需要传递对应的名字和id
场景 多个下拉框由v-for循环得到, 下拉框选项也是通过循环得到。用了find的方法进行绑定对应的名字。
2022-09-05 20:05:23
2313
1
原创 element-ui日期选择器el-date-picker, 案例:填写有效期和选择开始时间后, 自动生成结束时间, datetime时间转换
两种场景(1.先输入有效期后选择开始时间;2.先选择开始时间, 后输入有效期)都能触发自动生成结束时间的逻辑。以下代码可能偏长, 建议一步一步console.log打印出来每一步的效果, 避免出现数据没拿到或者方法用错的情况。
2022-09-05 18:55:00
2580
2
原创 Element-UI关于弹窗表单提交时表单数据丢失的问题记录
问题记录:Element-UI关于弹窗表单提交时表单数据丢失出错原因:在el-dialog标签绑定了属性 解决方法改成
2022-06-14 10:24:01
822
2
原创 vue基础-侦听器watch
侦听器watch1.作用侦听data/计算属性中声明的变量的值的变化2.语法watch: { 被侦听的属性名(newVal, oldVal)){ newVal: 表示修改后的值 oldVal: 表示修改前的值 } }<template> <div> // 注意: watch是和计算属性computed同级的 <input type="text" v-model="name" />
2022-05-26 21:55:17
170
原创 vue基础-computed计算属性
computed计算属性1. 计算属性用途例如购物车, 总价是依赖商品价格算出来的当你需要依赖一些变量计算出来结果的时候, 就可以使用计算属性注: 计算属性不能和data里的数据重名2. 代码示例<template> <div> <p>商品1: <input type="number" v-model.number="product1" /></p> <p>商品2: <input type="n
2022-05-26 21:36:14
256
原创 vue基础-filter过滤器
filter过滤器1. 作用转换格式, 把变量或者表达式转换出来 -2. 语法:{{ 表达式 | 方法名 }}3. 代码示例<template> <div> <h1>价格: {{ price }}</h1> <h1>{{ price | rmb }}</h1> <h1>{{ price | dollar }}</h1> <h1>{{ price | o
2022-05-26 21:26:45
81
原创 vue基础-动态设置样式class和style
动态设置样式class和style一. :class语法:class="{类名: 布尔值, 类名2: 布尔值}"作用: 动态设置class代码示例<template> <div> <button :class="{ grey: isOn === true, white: isOn === false }" @click="isOn = !isOn" > 开关 &l
2022-05-26 21:19:30
613
原创 vue基础-实现控制元素显示隐藏 v-show与v-if,以及v-if-else
v-show与v-if作用一.v-show控制元素显示, 通过display: none控制显示语法: v-show=“变量或者表达式”如果变量或者表达式为true, 会显示标签, 否则隐藏二. v-ifv-if控制标签显示语法: v-if=“变量或者表达式”v-if通过控制标签是否删除显示 , v-if有性能优势三. 代码示例<template> <div> <h1 v-show="age >= 18">年满18岁才能看到以下内容&
2022-05-26 21:03:07
3633
原创 vue基础v-moder修饰符( number, trim, lazy )
v-moder修饰符一. v-model修饰符语法法: v-model.修饰符="变量"二.这里只列举v-model修饰符在表单中的作用number修饰符: 把数据转换为数字类型并赋值给变量trim修饰符: 去掉字符串首尾空格lazy修饰符: 等表单失去焦点, 才把值赋予给Vue数据变量三. 代码示例<template> <div> <p>年龄: <input type="number" v-model.number="age" /
2022-05-26 20:49:16
1208
原创 vue基础-v-on的修饰符
v-on的修饰符一. 事件修饰符的语法:@事件名.修饰符="..."注: @是v-on的简写形式二.prevent修饰符作用: 阻止事件默认行为代码示例:<a href="https://www.baidu.com" @click.prevent="done">去百度</a>这里绑定了点击事件, 点击事件默认行为就是点击交互, 所以这里的按钮为禁用状态三. stop修饰符作用阻止事件冒泡代码示例:<template> <
2022-05-26 20:14:34
476
原创 vuex基础
vuex介绍作用方便组件通信, 状态管理模式(管理共享数据用的)Vuex是采用集中式管理组件依赖的共享数据的一个工具， 可以解决不同组件数据共享的问题项目当中引入 vuex下载包 npm i vuex@3根据vue版本下载对应版本的vuex, 最新版的vuex仅支持vue3配置项目 main.jsimport Vue from 'vue'import App from './App.vue'Vue.config.productionTip = false// 引入 v
2022-05-24 20:35:25
150
原创 vue侦听器watch
vue侦听器watch一. 侦听器watch的用途可以侦听data/computed属性值改变侦听一个属性变化基本语法:watch:{ "被侦听的属性名"(newVal, oldVal){ } }二.侦听器完整例子<template> <div> <input type="text" v-model="name"> </div></template><script>export defa
2022-05-23 19:49:45
164
原创 vue计算属性computed
vue计算属性computed一. 计算属性computed用途和语法例如购物车，当你需要根据一些变量计算出来结果的时候语法: computed: { "计算属性名" () { return "值" } }注意:依赖的变量变化的时候会重新计算计算属性不能和data里的数据重名二. 计算属性computed示例<template> <div> <p>{{ num }}</p&g
2022-05-23 19:44:28
125
原创 Vue过滤器属性filter
vue属性过滤器filter一. 过滤器filter作用作用是转换格式, 把变量或者表达式转换出来Vue中的过滤器场景全局定义字母都大写的过滤器字母转大写, 输入"hello", 输出"HELLO"局部定义字符串翻转的过滤器字符串翻转, “输入hello, world”, 输出"dlrow ,olleh"二. 过滤器filter语法:全局注册的语法:Vue.filter(“过滤器名”, (值) => {return “返回处理后的值”})局部注册的语法:
2022-05-23 19:38:22
1006
原创 Vue组件和组件通信
Vue组件和组件通信一.Vue组件概念, 创建注册使用; 封装组件概念 :组件是可复用的 Vue 实例, 封装标签, 样式和JS代码 — 一个vue文件就是一个组件组件化 ：封装的思想，把页面上 可重用的部分 封装为 组件，从而方便项目的开发和维护一个页面，可以拆分成一个个组件，一个组件就是一个整体, 每个组件可以有自己独立, 互不影响口诀: 哪部分标签复用, 就把哪部分封装到组件内组件内template只能有一个根标签组件内data必须是一个函数, 独立作用域
2022-05-17 19:10:00
402
原创 js[面试题]箭头函数和普通的区别
箭头函数与普通函数的区别1、外形不同：箭头函数使用箭头定义，普通函数中没有。2、箭头函数全都是匿名函数：普通函数可以有匿名函数，也可以有具名函数3、箭头函数不能用于构造函数：普通函数可以用于构造函数，以此创建对象实例。4、箭头函数中 this 的指向不同： 在箭头函数中不会创建自己的this，只会从自己的作用域链的上一层继承this。（注意其中对象不构成作用域） 在普通函数中，this 总是指向调用它的对象，如果用作构造函数，它指向创建的对象实例。5、箭头函数不具有 arguments 对象：
2022-05-15 19:14:34
1391
原创 vue通过设置代理解决跨域(适合初学vue测试学习阶段使用)
vue通过设置代理解决跨域此方式适合适合初学vue测试学习阶段使用, 使用的是vue2的版本步骤1通过vue脚手架创建好项目, 没有脚手架请先行安装vue脚手架.创建vue项目命令vue create 项目名// 规范命名, 小写字母开头这里使用的是vue2的版本步骤二打开项目根目录创建vue.config.js文件里面配置代码module.exports = { devServer: { // 设置代理 port: 3009, // 自定义端口号 o
2022-05-11 10:44:15
264
原创 Vue基础(笔记)
一.Vue基础概念是渐进式javascript框架, 一套拥有自己规则的语法渐进式步骤:声明式渲染→组件系统→客户端路由→大规模状态管理→构建工具框架: 拥有自己的规则和元素, 比库强大库: 封装属性和方法作用提升开发效率MVVM设计模式设计模式:一类问题的通用解决方案MVVM: 数据(模型)视口 视口模型二. Vue-脚手架vue/cli脚手架概念: Vue官方提供的一个全局模块板, 此包用于创建脚手架项目好处: 开箱即用,0配置webpack, 支持
2022-05-09 22:17:08
229
原创 Vue-面试题:单项数据流
单项数据流从父到子的数据流向,vue规定了props中的变量"只读"(也就是只能拿来渲染, 不能修改)在vue中需要遵循单向数据流原则1. 父组件的数据发生了改变，子组件会自动跟着变2. 子组件不能直接修改父组件传递过来的props props是只读的如果父组件传给子组件的是一个对象，子组件修改对象的属性，是不会报错的，对象是引用类型, 互相更新...
2022-05-05 22:28:27
395
原创 vue项目中引入moment依赖方式(配置显示年月日时间格式)
vue项目中引入moment依赖方式(配置国内时间显示格式)效果格式展示: 2022-05-04显示操作步骤:一. 在项目根目录下, 下载moment依赖下载命令npm i moment二. 在想要引入的.vue文件下,进行引入在scripti标签中引入momentimport moment from "moment"三. 在script标签中配置过滤器filters中的函数addProduct注: 过滤器filters与与data同级, 用逗号隔开export default
2022-05-04 14:27:08
6197
原创 js-webapi-消息提示功能案例(鼠标移入移除事件)
消息提示功能需求思路：1.弹出，2秒自动消失2.如果鼠标进入，不消失3.如果鼠标移开，32秒之后消失<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="w
2022-05-01 17:11:32
439
原创 JS-webapi-通过 userAgent 检测浏览器的版本及平台
// 检测 userAgent（浏览器信息） !(function () { const userAgent = navigator.userAgent; // 验证是否为Android或iPhone const android = userAgent.match(/(Android);?[\s\/]+([\d.]+)?/); const iphone = userAgent.match(/(iPhone\sOS)\s([\d_]+)/);
2022-05-01 15:37:32
431
1
原创 webpack用法操作[笔记]
一. 项目初始化:npm init -y 下载webpack 和webpack-cli二. 配置package.json文件需要在"scripts:{}里添加"build": “webpack”{ "name": "public", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" &
2022-04-30 20:15:10
236
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人