- 博客(53)
- 收藏
- 关注
RSS订阅原创 ES6中的导入导出
共三种：第一种 // 导出 (index.js) export default { userName: 'xxx', user: function(){ ... } } // 导入 import user from 'index.js'第二种 // 导出 (index.js) export const userName= 'xxx' export function user() { ... } //
2022-05-29 19:05:38
438
1
原创 对element的dialog对话框进行二次封装
子组件<template> <!-- 封装弹框 --> <div class="popup"> <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" :before-close="handleClose"> <slot> <p>弹框自定义的内容</p> </slot> <span slot="foote
2022-05-22 23:33:32
716
原创 vue消息订阅与发布
前端任意框架实现组件通信的一种方式一、安装消息与订阅库安装（这里使用的是 pubsub-js）npm install pubsub-js引入接收消息和发送消息的组件都需要引入这个库！！二、订阅与发布1.订阅2.发布...
2022-05-04 14:21:05
653
1
原创 vue 中修改 props接受的值
<!-- 子组件 --><template> <div> <h3>年龄{{ myAge }}</h3> <button @click="onClick">尝试修改props内容</button> </div></template><script>export default { props: ["age"], data() { retur.
2022-05-03 00:51:00
1384
原创 vue 展示实时时间
<div>{{time}}</div> data: { //显示时间 time: '', }, mounted() { this.dateShow(); }, created() { this.dateFormat();
2022-05-01 20:17:27
1261
原创 Vue父组件传给子组件的数组获取不到
子组件位置 <div class="chartBox"> <lineChart :visitBaData="visitBaData" /> </div>子组件接收的值需要通过watch监听处理才可以 props: { visitBaData: { type: Array, default: () => [], }, }, data() { return {
2022-04-15 09:25:29
1527
原创 修改element 的el-radio的选中样式变成对勾
::v-deep .el-radio__inner { border-radius: 2px; } ::v-deep .el-radio__input.is-checked .el-radio__inner::after { content: ""; width: 10px; height: 5px; border: 1px solid white; border-top: transparent; border-right: trans..
2022-04-07 11:15:28
1878
原创 ::v-deep的使用
在 vue 项目的开发过程，使用了 ElementUI 组件且样式 style 使用了 scoped 属性，当想要修改组件样式，发现直接修改不了，需去掉 scoped 属性或者使用深度选择器才能修改成功。去掉scoped的话又会影响全局样式，针对这种情况，可以使用深度作用选择器（即样式穿透）1、当项目中使用的 css 原生样式 ，需要使用 >>> 深度选择器来修改 外用第三方组件的样式<style lang="css" scoped> .el-button >
2022-03-31 15:51:35
20243
原创 vue使用防抖节流
1、封装防抖节流方法deTh.js/** * 闭包函数 * * 防抖：对于短时间内连续触发的事件（滚动事件、表单重复提交、页面resize事件，常见于需要做页面适配的时候），让某个时间期限内，事件处理函数只执行一次。 * 节流：对于短时间内大量触发同一事件（滚动事件、输入框实时搜索），那么在函数执行一次之后，该函数在指定的时间期限内不再工作，直至过了这段时间才重新生效 */ export default { // 防抖 debounce: function (fn, delay)
2022-03-31 11:33:34
2328
原创 vue中父元素点击事件与子元素点击事件冲突
在做vue项目的时候，遇到子元素有点击事件，父元素也有点击事件，当点击子元素时往往触发的是父元素的点击事件，产生冲突，怎样解决这个问题呢？这就用到vue事件中的事件修饰符官网地址https://cn.vuejs.org/v2/guide/events.html#%E4%BA%8B%E4%BB%B6%E4%BF%AE%E9%A5%B0%E7%AC%A6Vue.js 为 v-on 提供了事件修饰符 .stop、.prevent、.capture、.self、.once、.passive，我们要处理子元素
2022-03-28 09:41:51
9206
原创 vue截取video视频中的某一帧
<template> <div class="home"> <div> <video src="https://test-minio.hoolink.com/iot/project/373/202108/26144828-e6189322/100M.mp4" controls style="width:300px;" ></video> <img
2021-09-08 11:26:31
2177
原创 js对一个对象进行存取key和value值
进行存储操作：var obj = {};// 前面为key值, 后面为value值obj[key] = value;进行取出操作：// 打印的key为key值, obj[key]为该key对应的value值for(var key in obj){ console.log('key is ' + key +' and value is' + obj[key]);}...
2021-07-29 09:19:06
1420
原创 WebRTC + JsSIP + freeSWITCH一对一视频聊天
准备 JsSIP 库文件可以从 http://www.jssip.net/download/ 下载一个 min 版的 js 文件，我用的是 3.0.13 ，文件名是 jssip-3.0.13.min.js ，把它放在我们之前用 Node.js 建立的 https 服务器的 public/js 目录下，我们将在 html 文件内引用它。类似：<script src="js/jssip-3.0.13.min.js" type="text/javascript"></script>
2021-06-28 13:43:28
467
原创 js 遍历树结构数据改变数据中的key
deviceData = [];//绑定在树形控件的data res.data.data.map((item: any) => { let childLists: any = [] item.children.map((ele: any) => { childLists.push({ title: ele.deviceN...
2021-06-18 11:20:09
1004
原创 js数组去重
transferData: Array<any> = []; //全部 targetKeys: Array<any> = []; //选中的 certainPersonnel: Array<any> = [];//点击确认后选择的数据 let newArr: any = []; this.targetKeys.forEach((item: any) => { this.transferD..
2021-06-17 17:19:57
109
原创 js更改后端返回数据中的键名
后端给你的数据键名是这样的var data1 = [ {count:335, goods:'小球'}, {count:135, goods:'小刚'}, {count:225, goods:'小里'}, ]你想要的键名是这样的var data2 = [ {name: "小球", value: 335}, {name:
2021-06-16 17:58:11
988
4
原创 vue + ts写法
传统写法<script> export default { name: 'xx',// 组件名 components: {},// 组件 props: {},// 父组件传递来的值 data() { // 声明变量的位置 return {}; }, watch:{},// 监听器 computed:{}, // 计算属性
2021-06-11 14:00:52
1254
1
转载 flex布局中 justify-content: space-between方法最后一行排版问题
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do
2021-06-02 13:33:21
714
原创 flex布局采用justify-content:space-between时,当为两个内容时中间被空出的解决方案
我们在用flex布局的时候有时会用到justify-content:space-between属性，这个属性是让弹性容器内的元素向两端对齐。 <div class="box"> <div></div> <div></div> <div></div> <div></div> <div></div>
2021-06-02 13:23:14
2934
1
原创 js封装日期格式化函数
const date = new Date('1998-6-8 10:22:18'); function dateFormat(date,format = "YYYY-MM-DD HH:mm:ss"){ const config = { YYYY:date.getFullYear(), MM:date.getMonth(), DD:date.getDate(), HH:date.getHours(), mm:date.getMinutes(), ss:date.g.
2021-03-18 17:42:08
166
原创 element 输入框只能输入数字
<el-form :model="FindDailyCardItem.requestdata"> <el-form-item label="会员卡号(手机号):"> <el-input v-model="FindDailyCardItem.requestdata.cardCode" @input="FindDailyCardItem.requestdata.cardCode=FindDailyCar...
2021-03-17 10:35:37
604
1
原创 element 表单验证 单个input输入框（脱离表单的），添加校验
项目需求是要输入的面额不能大于原来的价格，由于每次循环导致取到最后一条数据的值来校验的，很显然是不行的在网上查了很多方法，也没有合适的，于是就用到了官方提供的Form-Item的属性 error注:用error的话，就不需要为el-form-item添加prop和rules了，直接在el-form-item标签上添加:error="scope.row.error"即可代码: <el-table-column label="优惠面额（元）">
2021-03-12 14:30:52
17811
4
原创 element 全选单选
<template> <div id="app"> <!-- <router-view /> --> <!-- <Footer v-show="$route.meta.showFooter" /> --> <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style=
2021-03-11 14:31:55
242
原创 element 全选/取消全选
项目需求：选择商品并添加到右侧代码 <template> <div class="app-container"> <div class="filter-container"> <el-form ref="newCouponForm" :model="newCouponForm" :rules="newCouponRules" label-width="120px"> <el-row>
2021-03-11 14:27:33
564
原创 npm 报错 Cannot find module ‘core-js/modules/es6.regexp.constructor‘
不识别es6语法安装：cnpm install core-js@2
2021-03-05 10:13:57
158
1
原创 element 在rules中的pattern中写正则表达式
<template> <el-form :model="unuseForm" label-position="top" :rules="dialogRules"> <el-form-item label="原因" prop="loseEfficacyReason"> <el-input type="textarea" v-model="unuseForm.loseEfficacyReason" auto-complete="off">&
2021-03-04 14:53:17
2822
1
原创 Vue 添加购物车并去重
从列表页添加到购物车并去重：addCart(val){ //添加购物车 let rel = true this.cart.map(item => { if (item.data.id == val.id) { item.num++ rel = false return } }) if(rel){ this.cart.push({ data:val, num:1
2021-02-26 14:15:21
605
原创 element ui级联选择器props的配置
为什么要配置el-cascader的props?如果配置了这个选项，请求回来的数据，根本不用你去递归处理，只需要把响应的数据赋值给数据源cascaderList代码如下: <el-cascader v-model="cascaderValue" :options="cascaderList" :props="cascaderProps" @change="cascaderHandleChange" />data中：data:{return{
2021-02-23 14:28:41
1920
4
原创 在vue中使用QRCode.js
一、什么是QRCode.jsQRCode.js是用于制作二维码的JavaScript库。QRCode.js支持在HTM中使用HTML5画布和表格标签进行交叉浏览。QRCode.js没有依赖关系二、vue里安装QRCode.js包 npm i qrcodejs2三、vue中引入qrcodejs2包import QRCode from 'qrcodejs2'四、创建DOM元素，存储二维码的位置<div id="qrcode" ref="qrcode"></div>五
2021-02-04 15:02:24
4011
原创 CSDN Markdown编辑器怎样插入多行多列的表格
像这样多行插入：1、点击自带的表格功能，会自动创建一个两行两列的表格2、在第一行和第二行添加 | 是英文状态下的 |然后就可以在 | | 中间添加内容了3、演示一下4、内容居中、居左、居右...
2021-01-27 10:10:02
1404
原创 在vue中使用Moment插件格式化时间
前言：时间格式原本是这样的那么现在来转成这样的格式使用npm命令安装momentnpm install moment --save在main.js文件里引用moment// The Vue build version to load with the `import` command// (runtime-only or standalone) has been set in webpack.base.conf with an alias.import Vue from 'vue'i
2021-01-26 17:27:33
886
原创 VSCode中的Prettier - Code formatter插件配置
一、安装Node.js、cnpm、webpack、vue-cli1. 安装Node.js：官网https://nodejs.org/en/download/选择.msi进行安装。安装成功后打开cmd，输入node -v和npm –v查看版本号。2. 安装cnpm（比npm快，因为使用淘宝的服务器做为的包源 ）：在cmd中，输入命令：npm install –g cnpm --registry=https://registry.npm.taobao.org。安装成功输入cnpm –v查看相关信息。3
2021-01-20 10:58:57
4450
原创 vue-cli创建的项目npm run dev运行很慢
vue-cli创建的项目npm run dev刚开始运行正常，之后突然运行要花很长时间。后来发现是cnpm的原因。有次npm i装包的时候失败了，于是就用了cnpm i来装包，装包后再跑项目就很慢了。解决方法：删除node_modules文件，cnpm i重新安装包。...
2021-01-20 10:20:07
3699
2
原创 如何将本地项目上传到码云
步骤：1、码云上新建一个项目 XXXX （项目名）2、本地创建一个文件夹E:/XXXX，然后使用git bash3、cd 到本地文件夹中E:/XXXX //如果是在创建的文件中git bash 则此步骤可省略4、使用 git init 命令 //初始化一个git 本地仓库此时会在本地创建一个 .git 的文件夹5、使用git remote add origin https://gitee.com/你的码云用户名/XXXX //添加远程仓库6、使用 git pull ori
2021-01-05 11:36:43
119
原创 npm 修改默认安装路径
本文借鉴于：https://lvsige.blog.csdn.net/?t=1需要重新安装node的情况：1、之前是默认安装到C:\Program Files2、node安装路径中存在中文1、如果之前安装的node在Program Files下，需要先把node卸载，然后安装到node到指定目录下，路径中不能有中文；eg: C:\nodejs在C盘也是可以的，但是不要放在Program Files下，在C盘新建一个文件夹：nodejs路径即 C:\nodejs (见图片)2、node安装成
2020-12-03 15:03:59
1581
原创 修改elementUI中分页器的背景色
elementUI中分页器设置background时的背景色默认是这样的：我想改成这样：修改样式如下：::v-deep { .el-pagination.is-background .el-pager li:not(.disabled) { background-color: #fff; // 进行修改未选中背景和字体 // color: #fff; } .el-pagination.is-background .el-pager li:not(.disabled).a
2020-11-26 10:09:27
3707
2
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人