- 博客(22)
- 收藏
- 关注
RSS订阅原创 vue2 时间处理（vue3用不了）
由于后台给到的时间格式是这样的：022-03-03T14:26:55+08:00而我需要的格式是这样的：YYYY-MM-dd HH:mm那么就需要前端去进行处理成我们需要的格式为了达到复用性，直接挂载在全局，可以的选择在src目录下新建一个js文件，我是挂载到了utils公共文件工具下（文件名称自己定如：format.js），代码如下：import Vue from 'vue'Vue.filter('dateTime', function (date, type) { if (date !
2022-03-03 16:45:21
621
原创 关于键盘事件监听的更改
最近项目开发中遇到的小问题，只能说前端的技术一直在更新，需要不断学习才能在这个大时代，超级卷的时代不被淘汰，好了直接上内容。之前在做键盘事件的时候 回车事件是依据e.keyCode 我们可以先绑定一下键盘的事件<template> <div tabindex="1" @keydown="keydown" style="display: flex;"> <div v-for="item, index in list" :key="inde
2022-02-28 11:21:15
501
原创 微信公众号拉取扫码功能
点击扫码按钮拉取微信扫码 // 扫码添加设备 goAddEquipment() { const wx = window.wx let _this = this // wx.ready(function() { wx.checkJsApi({ jsApiList: ['scanQRCode'], // 需要检测的JS接口列表，所有JS接口列表见附录2, success: function(res) {
2022-02-08 15:15:11
848
原创 vue前端实现模糊查询
<div class="blacklistPage"> <van-search v-model="searchValue" placeholder="请搜索游戏名" /> <div class="gameList"> <div class="gamelist-item" v-for="(item,index) in list" :key="index"> <div class="item-left">
2021-12-21 11:34:29
863
原创 css实现滚动条隐藏 但是可以滚动
<div class="blacklistPage"> <van-search v-model="searchValue" placeholder="请搜索游戏名" /> <div class="gameList"> <div class="gamelist-item" v-for="(item,index) in list" :key="index"> <div class="item-left">
2021-12-21 11:29:55
105
原创 tab选项卡切换（vue）
布局： <div class="selectType"> <div v-for="(item,index) in typeList" :key="index" :class="`${currentTypeIndex == index ? 'actives' : ''} selectType-item`" @click="typeSelect(index)">{{item.name}}</div> </div>声明变量 curren
2021-12-10 16:19:15
605
原创 vue tabbar组件
底部导航栏切换直接上代码使用props接受每个页面传递过来的tabKey子组件内容<template> <div class="tabbar"> <div class="placegolder-container"></div> <div class="bottom-tabs"> <div class="tabs-item" v-for="(item, index) in tabsList" :key.
2021-11-19 23:04:59
940
原创 uniapp 微信小程序需和支付宝小程序图片兼容显示
在uniapp中 给image标签直接添加地址，在微信小程序显示时正常的，但是在支付宝小程序显示不完全 在image标签上 给mode属性添加aspectFit 就可以适应两端 亲测可用<image src="" mode="aspectFit"></image>...
2021-11-03 18:00:09
646
转载 微信小程序,路由跳转方法总结：navigateTo,redirectTo,reLaunch,switchTab,navigateBack
wx.navigateTo: 用于保留当前页面、跳转到应用内的某个页面，使用 wx.navigateBack可以返回到原页面。对于页面不是特别多的小程序，通常推荐使用 wx.navigateTo进行跳转， 以便返回原页面，以提高加载速度。当页面特别多时，则不推荐使用。路由前页面：onHide。目标页：onLoad,onShow,onReadywx.redirectTo 当页面过多时，被保留页面会挤占微信分配给小程序的内存，或是达到微信所限制的 10 层页面栈。这时，我们应该考虑选择 wx.redirec
2021-10-19 13:35:52
855
转载 前端的各种日期操作
前言虽然现在处理日期方面已经有了很成熟的也很好用的库，例如（momentjs和date-fns），但是在实际开发中，我们有时候可能并不需要整个库。所以我就在下面整理了在前端开发时对日期时间的各种操作，也算是比较全的了。其中一部分来自自己，还有一部分来源于我们万能的网友~获取当前时间戳var timestamp = Date.parse(new Date()); //精确到秒var timestamp = (new Date()).valueOf(); //精确到毫秒var timestamp
2021-10-18 13:57:17
1386
原创 安卓端使用canvas
微信端使用canvas时,由于其js解析不一致 ios端可以使弹出层正常显示,安卓无法正常显示解决方案:将弹出层的层级设置的高于canvas 如果是js创建的canvas 页面内没有实际dom节点 可以在js创建时加入id或者class 然后通过js去添加样式(层级可以在此处添加,如:z-index:10)弹出层的层级要比canvas的层级高,如果现在css样式里无法生效,就将其写在行内样式内弹出层只需要用js去控制其显示隐藏即可移动端调试可以参考此文章...
2021-10-15 15:13:33
830
原创 vConsole
移动端使用 console 调试, 方便在本地调试, 在正式上线时要记得注释掉在多页面时, 在每个页面引入 cdn 方式引入<script src="https://cdn.bootcss.com/vConsole/3.3.4/vconsole.min.js"></script><script> // 初始化 var vConsole = new VConsole(); console.log('Hello world');</script>
2021-10-15 15:04:25
1742
原创 Vue 验证码插件及使用方法
以登录界面为例(效果图)新建验证码组件 SIdentity<template> <div class="s-canvas"> <canvas id="s-canvas" :width="contentWidth" :height="contentHeight"></canvas> </div></template><script> export default {
2021-10-12 09:39:11
3153
1
原创 vue-monoplasty-slide-verify自定义拼图出现位置
自定义拼图出现位置, 配合后台控制成功/失败触发时机安装 vue-monoplasty-slide-verifynpm install --save vue-monoplasty-slide-verify在main.js中引入全局组件SlideVerifyimport Vue from 'vue';import SlideVerify from 'vue-monoplasty-slide-verify';Vue.use(SlideVerify);参数详情可参考: https://gite
2021-10-12 09:30:26
4692
2
原创 Vue / React 项目打包时通过 webpack 去除 console.log
安装 terser-webpack-pluginnpm install terser-webpack-plugin -D&yarn add terser-webpack-pluginReact 项目中找到 webpack.config.prod.js 文件, 配置如下:module.exports = { optimization:{ minimizer: [ new TerserPlugin({ sourceMap:false,
2021-10-11 13:24:32
895
原创 WebPack 打包体积优化
使用 CDN 方式减少包的体积在 vue.config.js 文件中配置 externalsconfigureWebpack: (config) => { ... config["externals"] = { 'vue': 'Vue', 'vue-router': 'VueRouter', 'axios': 'axios', 'element-ui': 'ELEMENT', 'echarts': 'echarts' }}// 或者co
2021-10-11 13:20:10
345
原创 webpack 配置不同环境, 以及配置 baseUrl
使用 cross-env 配置 dev 开发 / test 测试 / prod 生产 环境安装 cross-envnpm install cross-env --save-dev&yarn add cross-env --save-dev配置 package.json 文件{ ... "scripts": { "dev": "cross-env NODE_ENV=development vue-cli-service serve --open", "test"
2021-10-11 13:10:22
3026
原创 实现点击按钮复制输入框信息
创建一个按钮, 添加点击事件COPYURL<el-button @click="copyUrl('我是复制的信息')">复制</el-button>JS代码部分copyUrl(val) { const input = document.createElement("input"); document.body.appendChild(input); input.setAttribute("value", val); input.select(); if (
2021-10-11 09:59:34
229
原创 时间日期格式互转
时间戳转时间格式function timestamp_time(timestamp){if (timestamp > 9999999999) {// 接受参数为 timestamp 时间戳let time = timestamplet timec = new Date(Number(time))//时间串let year,month,day, hour, minute, second;year = timec.getFullYear()month = timec.getMonth()+
2021-09-29 16:45:23
120
原创 前端常用css样式
1、文字超出部分显示文字单行文字的文字显示忽略号（一定的文字）div{width:200rpx;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;}div {display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;}2、中英文自动换行word-break:all-all;只对英文操作，以文
2021-09-29 16:39:49
671
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人