- 博客(27)
- 收藏
- 关注
RSS订阅
原创 工具模块 && 组件
对象空值清空 let obj = { a: 1, b: '', c: null, d: { a: 3, b: '', c: null, e: undefined, d: { a: 4,
2021-04-08 15:47:25
179
原创 修改el-tree背景色，字体色，单行多行超出省略号
// *设置树形最外层的背景颜色为none，字体颜色为白色*/.eL-tree { background: none; color: #fff;}// *设置三角图标的颜色*/.eL-tree-node__expand-icon { color: #fff;}// *设置节点鼠标悬浮三角图标鼠标悬浮的颜色*/.el-tree-node__content:hover .el-tree-node__expand-icon { color: #000;}.el-tree-node
2022-02-10 14:09:43
2026
原创 echarts封装组件，修改筛选条件重新渲染图标
以一个曲线图为例父组件<template> <AreaChart chartId="areaChart1" :echartData="weekCount" ref="areaChart1" :defaultProps="weekDefProps" ></AreaChart></template>import AreaChart from "./components/areaChart.vue";export d
2021-12-13 14:35:39
1666
原创 自定义消息提示vue（仿vant Notify 消息提示)
1、创建myMsg文件夹 目录结构如下2、 myNotify.vue<!-- myNotify.vue --><template> <transition name="slide-fade"> <div class="my-notify" v-if="notifyFlag"> <div class="notify success" v-if="type == 'success'"> <!--
2021-11-30 14:24:24
862
原创 长按指令（vue自定义指令）
1、创建longPress.js文件let longPress = { bind: function (el, binding, vNode) { if (typeof binding.value !== "function") { const compName = vNode.context.name; let warn = [ `longpress:`, ]`provided expression '${binding.expressio
2021-11-30 09:45:59
710
原创 上划取消，松开发送，移动端移动
模仿微信语音功能，没有录音效果，上划取消，松开发送的动作showModel控制模态框显示隐藏modelIndex控制显示的效果，取消，发送的样式文字提示等 initEvent() { var btnElem = document.getElementById("messageBtn"); //获取ID var posStart = 0; //初始化起点坐标 var posEnd = 0; //初始化终点坐标 var posMove = 0; //初始化
2021-11-19 10:47:27
1277
转载 vue实现瀑布流（定位）
<template> <div class="v-waterfall-content" ref="v-waterfall" id="v-waterfall"> <div v-for="(img, i) in waterfallList" :key="i" class="v-waterfall-item" :style="{ top: img.top + 'px', left: img.l
2021-11-12 15:23:34
226
原创 全局使用scss变量
// vue.config.jsmodule.exports = { css: { loaderOptions: { scss: { prependData: `@import "@/assets/css/mainTheme.scss";`, //这样就可以全局使用mainTheme的变量，不用每个页面引入 }, }, },};sass-loader版本不同，loaderOptions中additionalData的键名也不同s
2021-11-03 11:56:55
638
原创 vue项目调用微信到码，获取扫码信息
// 扫描 scanning() { this.scanQRCodeByWX(); } // 调用微信扫码功能 async scanQRCodeByWX() { // 先配置微信数据 this.scanQRCodeConfig(); /* eslint-disable */ const _this = this; window.wx.scanQRCode({ needResult: 1..
2021-11-02 11:46:19
903
原创 vue自定义指令（拖拽）
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录创建并使用指令一、拖拽创建并使用指令在src中创建指令文件夹directives，在main.js找那个引入指令文件 drag.js，并创建全局指令import drag from '@/directives/drag.js'Vue.directive('drag', drag)一、拖拽创建拖拽文件，drag.jslet drag = { // 指令的定义 bind: function (el) {
2021-10-25 11:10:04
141
原创 picture-card图片上传
<template> <div class="dialog-module"> <el-upload :action="upload.url" list-type="picture-card" :headers="upload.headers" :class="{ hide: hideUpload }" :file-list="fileList" .
2021-10-20 13:38:13
221
原创 eslint配置
vscode 下载 ESlint，vetur，Prettier - Code formatter打开配置 Settings.json文件{// 代码文件头部注释 "fileheader.customMade": { "Descripttion": "js", "Version": "1.0", "Author": "name", "Date": "Do not edit", "LastEditors": "name", "LastEditTime":
2021-09-27 14:33:25
82
转载 原生DOM操作
查找DOMEle.getElementByClassName()Ele.getElementsByTagName()Ele.querySelector() | Ele.querySelectorAll('.warp a')//快速查找warp下的所有a给DOM添加样式Ele.style.width = 12给元素添加classEle.className = 'aaa'//直接覆盖之前的类名Ele.classList.add = 'aaa'//不覆盖Ele.className +
2021-05-27 10:14:58
224
原创 element文件上传调用一次接口上传多个文件
<el-form> <el-form-item label="导入文本:" label-width="120px"> <el-upload ref="exportUpload" class="upload-demo" drag action="#" :http-request="uploadSectionFile" :file-l.
2021-04-29 14:08:23
222
1
原创 自学react基础
JSXjs拓展（语法糖） 使用jsx代替document.createElement ，babel将JSX转换为js语法规则：1. 定义虚拟DOM时，不用‘’2. 可以在JSX中写js表达式，想在JSX中使用js表达式，需要用{}来包裹3. 样式类名指定不用class,用className, JSX的标签属性需要小驼峰方式4. 只能有一个跟标签5. 标签必须闭合6. 自定义组件的首写字母必须大写优点：更好的创建节点，使得代码一目了然虚拟DOM:是一个一般对象，有真实DOM的部分
2021-03-06 22:01:59
366
原创 通用正则表达式
正则电话正则： ^(((13[0-9]{1})|(15[0-9]{1})|(16[0-9]{1})|(17[3-8]{1})|(18[0-9]{1})|(19[0-9]{1})|(14[5-7]{1}))+\d{8})$邮箱正则： 1+@[a-zA-Z0-9_-]+(.[a-zA-Z0-9_-]+)+$A-Za-z0-9\u4e00-\u9fa5 ↩︎
2021-03-04 11:31:01
488
原创 滚动分页，页面滚动到底部
滚动分页//element中table的ref通过bodyWrapper获取//普通标签把bodyWrapper去掉function loadMore (refName,curPage,totalPage,callback) { let box = refName ? this.$refs[refName].bodyWrapper : document.body;//获取监听元素 box.addEventListener("scroll", () => { // 监听滑动
2021-03-04 11:29:16
331
1
原创 自定义百度地图组件
百度地图自定义组件<template> <div v-show="visible" class="map"> <div id="map-core"></div> </div></template><script>/* eslint-disable */export default { name: "theMap", data() { return { visible:
2020-10-22 10:28:47
510
1
原创 vue学习笔记
生命周期函数Event Bus创建bus.js文件//bus.js文件import Vue from 'vue'export default new Vue()//发送import Bus from "@/utils/bus";Bus.$emit("resetInterval", "999");//接收import Bus from "@/utils/bus"; created() { Bus.$on("resetInterval", (e) =>
2020-10-13 15:21:12
96
转载 proxy和defineProperty
proxy 和 Object.defineProperty的对比Object.defineProperty的缺点无法监听数组的变化只能监听已存在的属性，对于新增删除属性无能为力语法Object.defineProperty(obj, prop, desc)//obj: 需要定义属性的当前对象//prop: 当前需要定义的属性名//desc: 对当前需要定义的属性的描述proxy可以监听数组的变化监听对象本身，即：对象本身没有的属性也可以被监听语法const proxy =
2020-10-12 10:14:13
225
原创 微信小程序授权过程
首先询问用户是否同意授权，同意则直接授权，否则弹框提示用户没有授权将影响后续操作。引导用户去设置页开启授权wx.openSetting。wx.getSetting({ success(res) { //没有权限，发起授权 if (!res.authSetting['scope.writePhotosAlbum']) { wx.authorize({ scope: 'scope.writePhotosAlbum'
2020-10-09 13:25:16
898
1
原创 vue3学习总结
v-model2.x语法<childComponent :title.sync="oldValue"></childComponent>this.$emit('update:title',newValue)3.x语法<childComponent v-model:title="oldValue"></childComponent> 所有v-model不到参数，一定要改变道具和事件名称，以modelValue和updata:modelVal
2020-10-09 13:13:33
216
转载 github从安装到上传，删除，修改文件的具体步骤
github从安装到上传，删除，修改文件的具体步骤https://blog.csdn.net/wugenqiang/article/details/81215396)https://blog.csdn.net/wugenqiang/article/details/81215396
2019-06-23 17:19:04
148
原创 react创建组件
创建组件：function Hello(){return <div>Hello 组件</div>}为组件传递数据<Hello name={dog.name} age={dog.age}></Hello>//构造函数中，使用props形参接收外界传递过来的数据function Hello(props){ //如果在一个...
2019-06-01 09:08:17
126
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人