- 博客(32)
- 收藏
- 关注
RSS订阅原创 vuex使用
一、Vuex:是用于存储公共数据的仓库属性：state：定义初始值getters：相当于computed计算，会将state的值派生出一个新值返回所需格式；试用于多组件用同一个属性要不同的值mutions: 逻辑处理只能在mutions改变数据。页面通过commit，this.$store.commit(‘mutions里的方法名’，入参)actions: 页面调用action用 ： this.$store.dispatch(‘action方法名’, 入参)同步：不需要进行接口的调
2022-05-13 14:46:37
146
原创 时间戳转日期型、标准日期转时间戳
1、标准时间转时间戳new Date() //标准时间Math.round(new Date()/1000)2、时间戳转各种日期格式 //格式化时间 const fmtDate = (date, fmt) => { let o = { 'M+': date.getMonth() + 1, // 月份 'd+': date.getDate(), // 日 'h+': date.getHours(), // 小时 'm+': date.getMinut
2022-04-19 14:27:36
7008
原创 vue element-ui日期时间组件点击清除按钮报错
描述： element-ui 日期时间组件选择日期点击清除按钮后console报错TypeError: Cannot read property ‘0’ of null 。原因:大概是初始化时定义的timeRange的值为 [ ] 而清除以后timerange的值为null解决办法： watch: { "queryParams.timeRange"(newVal) { if (newVal == null) { this.queryParams.timeRan
2022-02-14 15:56:16
1059
原创 js 取出数组的某一项并用逗号分割成字符串
array: [ { id: 1, name: "中国" }, { id: 2, name: "韩国" }, { id: 3, name: "法国" }, ],方法一 this.text = this.array .map((item, index) => { return item.name; }) .join(","); 方法二let text=[]...
2022-01-19 15:54:51
3331
原创 vue 控制弹框的显示隐藏--传值
创建弹框组件:<template> <el-drawer title="详情" :visible.sync="openDialog" :size="800"> <div>{{data.pointNum}}</div> </el-drawer></template><script>export default { name: 'pointDetail', props: { //父组件传递过来
2021-12-09 15:46:57
1811
原创 在vue中使用json格式的动效文件
在项目中有一个写动画效果前端实现起来很复杂而且效果不好；可以直接找UI设计好效果转换成json 格式的文件；使用方法：1、安装web-lottiecnpm i web-lottie2、在assets 文件中新建一个lottie 文件夹，并将json文件放入；将ui 给到的这个images动效文件放入到public下(images一定要放到pubilc下，不然图片路径找不到)。pulic/images3、新建一个lottie组件<template> <div id="l
2021-12-09 15:21:13
2373
原创 在vue项目中使用外部字体
1、去网上下载需要的 ttf 字体文件放入项目中；2、在styles文件夹下新建一个font.css(font.scss)文件；并编辑@font-face { font-family: number; //用法：font-family:number src: url("./number.ttf"); //字体文件路径 font-weight: bold; font-style: normal;}3、将font.scss直接引入main.js文件中;或者直接在对应
2021-12-09 15:03:47
718
原创 Promise.all 用法
使用场景：多个表单提交做校时。更多用法：Promise.all和Promise.race的区别和使用 - 简书//提交按钮操作submitForm(){letp1=newPromise((resolve,reject)=>{this.$refs['form1'].validate(valid=>{if(valid){resolve()...
2021-11-19 16:43:02
455
原创 后端传递的是base64位图片前端处理方式
<img :src="`data:image/jpg;base64,${(item.picUrlBase64)}`"/>格式：data:image/jpg;base64,(图片地址)
2021-10-28 14:49:25
641
原创 vue tab切换
方法一： <template> <div> <ul> <li v-for="(item,index) in tabsData" :key="index" :class="{active:tabIndex==index}" @click="handleTabs(index)" >{{item}}
2021-09-16 15:31:35
131
原创 vue父子组件传值，父组件还没拿到数据传递给就传递给子组件了
问题：父组件向子组件传递值时，发现子组件没有渲染，在子组件中打印时发现获取到的值是空。原因：父组件加载页面时就开始传值了，但是数据请求走的慢，没有拿到数据解决：在子组件中加个布尔值默认值为false, 获取数据前置为false; 数据获取成功后置为true。<div> <child v-if="flag" :point="list"/><div> default export { data(){ list:[] // fl
2021-09-16 15:04:48
3307
2
原创 vue Hook Event
什么是Hook Event?hook event 相当于是监听vue 生命周期、通过Hook Event 可以从组件外部位组件注入额外的生命周期方法例：模拟数据请求过程加载数据<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta n
2021-09-07 11:46:18
122
原创 axios请求封装
vue axios封装：1、项目环境分为三种：开发环境测试环境线上环境2、基础用法：安装axios在页面中引入 import axios form 'axios"get请求： axios.get("http://www.baidu.com",params:{pageNum:1,pageSize:10},header:{}).catch(error=>{console.log(error)})最终生成的url:http://www.baidu.com/api?pageSize=
2021-09-06 18:43:56
997
原创 js 手机号、邮箱、中文、等各种正则校验
正则校验各种规则账号名称校验：（账号不能低于4位，且必须由小写字母开头+数字组合）//vue + element用法 <el-form ref="form" :model="form" :rules="rules" label-width="100px"> <el-form-item label="账号信息"></el-form-item> <el-form-item label="用户账号" prop="userName"
2021-07-30 18:02:11
1007
原创 钉钉小程序-打开外部链接（文件链接）
1、使用npm安装dingtalk-jsapi扩展模块，npm install dingtalk-jsapi --save2、在js文件中引入import * as ddcop from "dingtalk-jsapi"; 3、使用他的方法ddcop.biz.util.openLink({ url: URL, //要打开链接的地址 onSuccess: function (result) { dd.navigateTo({ url: `/pag..
2021-07-15 17:34:54
12541
原创 1.51.7新版vscode配置bash终端
1、打开vscode编辑器2、找到设置按钮-设置-搜索settings.json3、打开settings.json文件4、加入代码~~~新版本：{ "terminal.integrated.profiles.windows": { "Git-Bash":{ "path":"D:\\MySoftware\\Git\\bin\\bash.exe", //git 安装目录 "args":[] }, "PowerShell -NoProfile":{
2021-07-12 10:59:21
551
原创 vue 匿名插槽、具名插槽、作用域插槽的使用
1、在公用组件中：<slot name = "inputs"><template> <div class="search-title-wrapper"> <div class="search-title-header"> <div>{{searchTitle}}</div> <div> <slot name="handleTitle" /> &
2021-04-22 11:58:16
221
原创 本地项目第一次提交到gitlab
公司的gitlab账号提交忘了密码只有自己配置ssh了。接下来都是界面操作截图。第一步：登录自己的gitlab账号新建project第二步：输入项目名称点击创建按钮第三步：创建ssh（如果知道密码不需要这一步）cd ~/.ssh/mkdir ~/.ssh (没有ssh文件夹就自己创建一个.ssh文件夹)git config --global user.name “胡晶晶” （配置全局的name和email）git config --global user.email “hu.ji
2020-09-04 14:16:00
830
原创 react-router路由跳转
话不多说第一步创建react项目npm install -g create-react-appcreate-react-app demo-appcd demo-app安装路由： cnpm i react-router-dom --save设计到路由的跳转肯定是有多页面，在src目录下创建page文件夹新建两个组件 home.js, about.js这里我创建了两个页面，ok,接下去在根目录的APP.js文件里面引入我们的路由，和路由页面。话不多说上代码。到这一步路由是可以跳转了bu
2020-05-26 20:52:59
5471
原创 webpack——webpack bash: webpack: command not found解决方法
准备学习一下基于react框架手动配置一下webpack。经过了下面操作之后开始报错1. 运行npm init -y 快速初始化项目2. 在根目录创建一个src 源代码目录和dist产品目录3. 在src目录下创建一个index.html4. 安装webpack ： cnpm i webpack -D5. 安装webpack-cli : cnpm i webpack-cli -D给大家看一下我的报错截图：这个报错的意思呢就是webpack找不到。。。。因为webp
2020-05-20 14:31:50
828
1
原创 类数组转为数组的方法
首先我们要了解一下什么是类数组，什么是数组，他们具有哪些特性？其次我们要想一下为什么要把类数组转换为伪数组？类数组（伪数组）：1. 拥有length属性，可以使用下标来访问元素，这两点和数组相同。2. 不能使用数组的方法，他们不能使用Array的方法。3. 其中ES5中arguments就是一个类数组，但是在ES6中是没有这个属性。类数组转换为数组的方法：1： Array.prototype.slice.call(likeArray)；利用slice的返回新数组以及call改变thi
2020-05-09 12:19:24
529
原创 cookie 缓存封装 与用法
//新建一个utils.js//在cookie.js中引入cookieimport Cookie from 'js-cookie'export function setStorage (key, value) {//设置cookie if (window.localStorage) { window.localStorage.setItem(key, typeof value =...
2020-03-13 10:41:25
115
原创 时间戳封装
在做订单查询时后端返回给我订单交易的时间但是接收到的是一串数字需要前端对这个数字做一定的处理之后才能渲染成时间的格式：1.新建一个data.js文件/*** lib/date.js */// date原型链对象添加format方法，用于format日期格式Date.prototype.Format = function (fmt) { var o = { 'M+'...
2020-03-13 10:11:02
294
原创 基于vue-cli3的路径别名配置
1.在项目在外层新建一个vue.config.js文件代码如下：var path=require('path')//引入path模块function resolve(pathUrl){//设置绝对路径 return path.resolve(__dirname,pathUrl)}module.exports={ configureWebpack: (config) => {...
2020-03-13 09:55:33
201
原创 基于vue-cli3的多页面配置
1.在项目最外层目录新建一个vue.config.js文件2.在vue.config.js中配置多页面下面代码为例：3.多页面的目录结构下图为例：module.exports={ pages:{ index:{//其他页面 entry: 'src/pages/index/main.js', template: 'publ...
2020-03-13 09:41:26
170
原创 用 vue-route 的 beforeEach 实现导航守卫（路由跳转前验证登录）
基于vue的商城网站需要在用户购买商品时进行判断是否登录在app.vue中的created钩子中去监听路由需要判断是否要登录的页面router.beforeEach((to, from, next) => { if(!getStorage("access_token")){ //跳到登录页面 设定哪些页面 暂定购买 if(to.path.indexOf('...
2020-03-12 17:38:31
649
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人