- 博客(84)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 【React】父组件如何调用子组件的方法
在React中，父组件可以通过ref来调用子组件的方法。以下是一个简单的示例，展示了如何在父组件中使用ref来调用子组件的方法。在父组件中，使用useRef创建一个ref，并将其传递给子组件。然后，可以通过这个ref调用子组件的方法。子组件：使用forwardRef和useImperativeHandle将scroll方法暴露给父组件。父组件：使用useRef创建一个ref，并将其传递给子组件。首先，在子组件中定义一个方法，并使用forwardRef将其暴露给父组件。这样，父组件就可以调用子组件的方法了。
2024-10-14 20:00:08
891
原创 时间方法js
Sat Sep 07 2024 23:59:59 GMT+0800 (中国标准时间)2024-09-07 23:59:59 可以按照这个格式，随意更改。如：new Date(1725724799000)new Date(时间戳)1.如何从时间转为时间戳。2.时间戳如何转时间。
2024-09-30 15:28:18
115
原创 vue手写遮罩层弹窗，实现点击遮罩层和关闭按钮关闭弹窗
父组件<template> <section> <div class="ruleBtn" @click="handleClick($event)">点击按钮</div> <RuleModal v-if="ruleModalVisible" ref="ruleModal" :modalConfig="modalConfig" @close="closeRuleModal" /
2021-11-26 17:43:46
6642
2
原创 vue实现将html代码格式转换为纯文本
toText(html){ return html.replace(/<(style|script|iframe)[^>]*?>[\s\S]+?<\/\1\s*>/gi,'').replace(/<[^>]+?>/g,'').replace(/\s+/g,' ').replace(/ /g,' ').replace(/>/g,' ');}效果如下：
2021-11-26 16:00:14
1756
原创 记录 --- vue项目使用wangEditor富文本编辑器
<template><div> <div class="editor_container" :class="{'is-error': isError}"> <div :id="uniqEditorId" class="inner"></div> </div> <div>{{htmlContent}}</div></div></template><scr
2021-11-25 16:13:44
1022
原创 移动端rem适配方法之一
index.html文件 <script> (function flexible(window, document) { var docEl = document.documentElement // 375屏幕的font-size是100，也就是说，iphone6的font-size是100，设计稿按照750px设计，0.01rem = 1px function setRemUnit() { var rem = docE
2021-07-19 18:11:36
154
原创 好用的vscode插件
我有个习惯，开发vue的时候，懒得写它的格式，就用vbase快捷键，一下就出来了。只需要安装插件： Vue VSCode Snippets 长下面这样：
2021-07-02 14:52:38
393
1
原创 ts实现对象转为数组
let envTypeOptions_:any=[];let envOptions_:any={ isA:'腾讯', isB:'微博', isC:'朋友圈'}；Object.keys(envOptions_).forEach(function(key:string){ envTypeOptions_.push({ value:key, label:envOptions_[key] });})
2021-06-23 11:32:47
4459
原创 记录: git生成SSH公钥
1.首先: 确认自己是否已经拥有密钥。默认情况下，用户的 SSH 密钥存储在其 ~/.ssh 目录下。进入该目录并列出其中内容，你便可以快速确认自己是否已拥有密钥：$ cd ~/.ssh$ lsauthorized_keys2 id_dsa known_hostsconfig id_dsa.pub我们需要寻找一对以 id_dsa 或 id_rsa 命名的文件，其中一个带有 .pub 扩展名。 .pub 文件是你的公钥，另一个则是与之对应的私钥。 如果找不到这
2021-06-21 10:46:50
174
原创 webpack的一些插件
postcss-preset-envcss兼容性处理：postcss --> postcss-loader postcss-preset-envwebpack-bundle-analyzer 分析工具compression-webpack-plugin压缩插件 配合gzip压缩postcssautoprefixer 加上前缀 浏览器postcss-pxtorem px to rem 移动端...
2021-04-22 17:27:51
124
原创 实现table左边固定，右侧滚动 --position:sticky属性在ios真机不生效
<template> <div class="widget-table can-not-copy" > <div :class="{ letScroll: fixed }" ref="tableBox"> <table :key="keyCode" cellpadding="5" id="widget-table" width="100%" :border=.
2021-04-21 10:23:04
1786
原创 如何把参数的对象转为字符串
const parmas = { moduleCode:this.moduleCode, code:this.keyCode, title:this.configData.twoPageConfig.title, orgCode:this.orgCode, hasKeys:JSON.stringify(this.hasKeys), mergeParmas:JSON.stringify(this.mer...
2021-04-20 14:45:30
713
原创 h5调试 console
在index.html中加上以下代码<script src="//cdn.jsdelivr.net/npm/eruda"></script><script >eruda.init();</script>
2021-04-20 11:22:45
437
原创 h5 禁止微信内置浏览器调整字体大小
因为h5项目，需要将页面通过微信分享出去，用户可以在微信中通过链接点入查看页面，会出现一些字体大小改变的问题，所以：android 需要重写事件wxFont.js文件(function() { if ( typeof WeixinJSBridge == 'object' && typeof WeixinJSBridge.invoke == 'function' ) { handleFontSize(); } else { if (docume
2021-04-13 15:16:36
815
原创 如何在h5的vant中 让其不自动转换px为rem
找到postcss.config文件设置一个文件夹，专门放这部分不让其转换的页面只return 这个plugins其次：在文件夹的vue文件中， 需要设置媒体查询，因为一般移动端都设置了最大宽度。所以我们需要让他在大于760px（根据实际）时，干掉这个属性。而且还得给页面设置最小宽度。...
2021-04-09 17:16:51
1161
原创 分别使用sortablejs 和 vuedraggable 使用拖拽排序的效果
左侧排序：vuedraggable<template> <div class="theme-list"> <h2> <span>主题管理</span> <b class="iconfont icon-xinzeng" @click="handleAdd"></b> </h2> <div class="search-box"> <e
2021-03-31 10:48:11
764
2
原创 如何实现图标在屏幕上下移动的效果
<div v-show="isShow" class="IT-support" ref='itSupport' @mousedown.capture="mouseDown" > <img class="ITImg" src="@/common/images/IT.png" @click.stop="showOrHideBar"> </div>data: startY:0,//初始移动位置 domBotto...
2021-03-05 16:01:52
497
原创 具名插槽 非具名插槽
具名和非具名插槽需要多个插槽时，可以利用 元素的一个特殊的特性：name来定义具名插槽：具名插槽:父组件: <template slot="名字"> 子组件: <slot name="名字">非具名插槽:父组件：直接写或者标签即可不用做其他操作，子组件：直接写1）子组件模板定义：<div class="container"> <header> <slot name="header"></slot> &..
2021-03-05 11:04:23
463
1
原创 简单实现一个可在屏幕上拖拽的div
template: <div v-drag class="new-sir-kf" ref="newSirKF" @click="toggleOpenKf" > </div>style: .new-sir-kf { display: inline-block; width: 76px; height: 111px; position: fixed; bottom: 5
2021-03-02 17:55:25
210
原创 工作前准备，拿到一台新电脑如何一步一步配置环境
抽时间整理一下，先写个标题放着git add .git statusgit commit -m “”git pull 解决冲突code .bash
2021-03-02 14:46:52
197
原创 上传代码到github
1.首先new一个仓库2. 根据自己想要的： 填入名字，仓库公开/隐私， 要不要readme，忽略文件这些。3.创建成功，在右侧code那里可以查看到地址。4. 这时可以把自己之前创建的项目上传到这个仓库。找到自己的项目文件夹，右键gitbash here 。分两种情况：1）如果自己的项目之前是有git追踪信息的，就执行下面的命令，更改远端地址：把上面一个步骤拿到的地址 使用git remote add origin 地址2）如果项目是没有任何git相关信息的：就直接git ini
2021-02-24 11:23:38
82
原创 记录项目在使用vue-router时遇到的问题
App.vue<template> <div id="app"> <router-view></router-view> </div></template><script>export default { name: 'app', components: { }}</script>main.js 入口文件import Vue from 'vue'import App
2021-02-18 17:27:50
440
原创 项目中websocket简单应用
HTML5 WebSocketWebSocket 教程<template> <div id="app" class="mainContainer"> <div class="topSide"> <div class="topRight"> <span class="timeStr">{{formatTimeStr}}</span> <span class="secon.
2021-02-18 15:49:12
157
原创 vue-scroll的简单使用
vue的无缝滚动插件vue-seamless-scroll的安装与使用vue-seamless-scroll1.命令行执行:npm install vue-seamless-scroll --save在vue文件中使用：template 文件 <div class="content"> <div class="title"> <div class="total" style="margin-right: 16px">..
2021-02-18 11:10:11
7656
转载 package.json和package-lock.json的区别
关于两者区别，推荐一篇简单又清晰的好文章！package.json:主要用来定义项目中需要依赖的包package-lock.json：在 npm install时候生成一份文件，用以记录当前状态下实际安装的各个npm package的具体来源和版本号。‘^’ :放在版本号之前，表示向后兼容依赖，说白了就是在大版本号不变的情况下，下载最新版的包项目中引入的包版本号之前经常会加^号，每次在执行npm install之后，下载的包都会发生变化，为了系统的稳定性考虑，每次执行完npm install之
2021-02-09 15:52:21
208
原创 实现二维码登录功能（及单点登录重定向）
<div class="qrcodeCanvas"> <div id="qrcode" v-loading="expireLoading"></div> <div class="markQr" v-if="expireSign" @click="getCode"> <i class="iconfont icon-tuzhishuchu-xiazaichajianshuaxin"></i> </div&.
2021-01-29 18:01:07
1642
原创 h5实现：模拟字幕从底部缓缓向上移动的效果
效果：实现页面字幕从屏幕外向上缓缓移动的动效，动效完成后，实现下部分固定，上部分（为了观察效果，特意用粉色框圈住部分）可滚动scroll的效果。效果一览：难点：主要是字幕动效完成后，将文字部分压缩在content中时：需要始终保持字幕部分最后一行字：【贺卡】，保持它在动画最后一幕那个位置不变动。知识：Element.scrollTopElement.clientHeightCSS3 过渡 transition代码：<template> <div class="h
2021-01-28 15:04:42
764
原创 h5如何实现页面生成海报保存到本地 踩坑
踩坑1：在某些手机型号下：我说你说他说大家说有咩有问题就算是一个完整的span标签的内容，也会重叠在一起解决：加上letter-spacing属性：.text {letter-spacing: 2px;}letter-spacing 属性增加或减少字符间的空白（字符间距）踩坑2：在iphone6s真机上，保存图片到本地，出现：页面除背景外的其他部分为空白的情况。其他手机型号没有这种情况。出现原因：排查后发现：是由于页面主体部分有显隐动画，且直接把动画写在css里导致的问题。原代
2021-01-27 16:53:49
1051
原创 h5 component:is属性的使用 配合实现滑动切换页面的效果（不是路由的形式）
<template> <div class="page-home" @touchstart="onTouchStart" @touchmove="onTouchMove" @touchend="onTouchEnd"> <!-- 头部 --> <nb-header :logo="logo" :hasMusic="active" ref="headerContainer"></nb-header> <!-- 改变的页面
2021-01-27 15:40:08
503
原创 h5实现加载100%过程中同时加载静态资源的效果
子组件 ： loading文件：<template> <div class="nb-loading"> <div class="nb-loading-process"> <div class="process"> <img src="@/common/images/1-3@2x.png" /> <span>{{ process }}%</span>
2021-01-27 11:22:42
471
原创 h5 背景 星星掉落 动画
nb-loading文件<template><!-- 1. 背景图 --> <div class="nb-loading"> <!-- 2. 滑动流星动画 --> <nbMeteor></nbMeteor> <!-- 3. loading加载百分比动效 --> <div class="nb-loading-process"> <div class="pr.
2021-01-20 17:09:01
334
原创 h5实现 音乐播放器功能
<template> <div class="nb-header"> <div class="nb-music" v-show="hasMusic != 0" :style="'backgroundImage: url('+((isXinghaiApp)? bg:'')+')'"> <!-- audio标签 --> <audio ref="audioPlayer" style="opacity: 0;" loop
2021-01-20 14:17:35
1019
原创 h5如何实现页面生成海报 & 保存图片及分享到微信/朋友圈功能
知识点：使用html2canvas实现移动端H5页面截图实现canvas图片转为文件阿里云文件上传功能.……<template> <div class="letter_box" id="shareContainer" :style="{ height: height ? height + 'px' : '100vh' }"> <!-- 头部logo --> <div class="header" v-show="isShowHeader
2021-01-15 15:43:00
11146
7
原创 记录项目中：图片引入的几种方式 h5
<template> <div class="nb-header"> <div class="nb-logo" :style="'backgroundImage: url('+logo+') '"></div> <div class="nb-music" @click="click"> <img :src="status ? music : musicStop" alt="" /> </di
2021-01-08 10:06:33
925
原创 关于/deep/, ::v-deep, ＞＞＞
当我们在项目中：需要改变element某个自带的深层元素或其他深层样式时????如果是：????scss/less语言：<style lang="scss" scoped> (scoped属性实现组件样式私有化),????1：(简单粗暴)直接移除scoped或者最好是新建一个没有scoped的style <style lang="scss"> （一个vue文件可以有多个style）????2:✋/deep/.div /deep/ .el-input__inner
2020-12-25 18:05:14
590
原创 element 实现文件上传：只能上传一个，且能覆盖上传 & 文件大小，类型限制
需求：在文件满足条件时直接上传，再次上传时若文件满足条件则覆盖之前的文件上传，否则则提示且不上传不满足条件的文件。<!-- :limit="1" --> // 注意：最大允许上传个数：这里不要置为1，置为1有个问题就是：无论怎么选择文件，页面上展示的始终是第一次选择的文件，这效果和我想的大相径庭。<el-upload ref="upload" :action="$config.baseURL + '/resource/upload/images'" :http-re
2020-12-25 15:17:41
6592
原创 如何对vant输入框同时进行2个校验
<van-field v-model.trim="submitParams.title" autocomplete="off" :rules="[{ required: true},{validator, message: '输入长度50字符以内'}]" /><van-field v-model.trim="submitParams.offset" type="digit" name="offset" :rules="[{ required: true},{valvalida
2020-12-23 15:43:33
3171
1
原创 css 实现颜色渐变效果
<div class="barBox"> <div class="colorBar" v-if="tabType=='bug'" :style="{width:computedBug(itemData,'finish')}"></div> <div class="colorBar" v-else :style="{width:computedWidth(itemData.estimate)}"></div></div>m.
2020-12-17 18:00:11
236
原创 记录一下windows dos常用命令行
dir(directory):列出当前目录下的文件以及文件夹md(make directory):创建目录rd(remove directory): 删除目录cd(change directory): 进入指定目录cd… : 退回到上一级目录 cd./ cd…/ cd…/cd: 退回到根目录del: 删除文件exit:退出dos命令行cls(clear screen):清屏...
2020-12-16 14:52:18
137
h5vue文件使用高德地图
2020-10-26
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人