- 博客(37)
- 收藏
- 关注
RSS订阅原创 JS原生轮播
html<!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>Docu
2022-04-22 17:49:40
175
原创 vue.extend 写弹窗
1、components/messageBox/index.vue<template> <div :class="['message-box',type]"> <div class="mask"></div> <div class="inner"> <header class="header"> <h1>{{title}}</h1> <d
2022-04-22 15:37:38
1576
转载 H5页面跳转微信小程序
实现H5页面跳转微信小程序有三种方式来实现如果需求为在微信浏览器中实现跳转，则推荐使用微信官方接口 wx-open-launch-weapp文档点击这里 wx-open-launch-weapp接口文档注意：该方法只开放给已认证的服务号或者小程序云开发的静态网站托管绑定的域名下的网页如果需求为在外部浏览器中实现跳转，则需要使用URL Scheme的方式来实现前端在获取到URL Scheme后通过以下代码就可以实现跳转文档点击这里...
2022-04-21 17:33:19
22221
原创 vue 自定义组件，通过vue.use来使用，install的使用
vue 自定义组件，类似引入elementUI的方法，通过vue.use(ElementUI)来使用第一步：定义一个组件components/star/index.vue<template> <div> <span v-for="item in 5" :key="item" :class="item <= scoreNumber ? 'icon-star-full':'icon-star-empty'" @click="setScore
2022-04-21 09:36:11
852
原创 vue权限管理实现思路
前端权限管理的意义：1、降低非法操作的可能性2、尽可能排除不必要的请求，减轻服务器的压力3、提高用户体验前端权限控制的思路：1、菜单控制：在登录请求当中，会得到权限数据，权限需要在多个组件之间共享，所以可以通过vuex保存数据并且展示相应的菜单，页面刷新的情况下会丢失数据，所以把权限数据存入sessionStorage中。2、界面控制：如果用户没有登录，手动输入url地址，应该阻止并跳转到登录页面，通过路由导航守卫来实现。动态路由可以让不具备权限的界面在路由规则中不存在3、按钮控
2022-04-08 17:46:56
10988
原创 JS小技巧-交换数组指定位置元素位置
function arrIndexExchange(array, x, y) { array.splice(x, 1, ...array.splice(y, 1, array[x])) return array}let arr = [1 ,2, 3, 4, 5, 6];console.log(arrIndexExchange(arr,2,3)); // [ 1, 2, 4, 3, 5, 6 ]array.splice(y,1,array[x])-会改变原数组，返回的是删...
2022-04-06 16:17:25
545
转载 使用 position:sticky 实现粘性布局
position:sticky粘性定位：结合了position:relative和position:fixed两种定位的特殊定位，元素先按照普通文档流定位，然后相对于该元素在流中的 flow root（BFC）和 containing block（最近的块级祖先元素）定位。而后，元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中...
2022-03-28 15:01:02
314
原创 小程序-自定义wx-modal
1、效果2、建立一个wx-modal的组件wx-modal.wxml<view class="wx-modal-wrapper" hidden="{{!isShow}}"> <view class="wx-mask"></view> <view class="wx-modal"> <view class="wx-modal-title">{{ title }}</view>
2022-03-23 15:06:25
874
原创 微信小程序 自定义头部导航栏
1、微信自定义头部：app.json里面配置： "navigationStyle": "custom"2、建立一个navigationBar的公共组件：A、效果图：B、navigationBar.wxml<view class="navbar" style="{{'height: ' + navigationBarHeight}}"> <view style="{{'height: ' + statusBarHeight}}"></view>.
2022-03-23 11:11:19
1013
原创 小程序-自定义弹窗
<view bindtap="showSelectUserModal">点击显示弹窗</view><view class="modal-mask" bindtap="hideSelectUserModal" catchtouchmove="preventTouchMove" hidden="{{!showSelectUser}}"></view> <view class="modal-dialog" hidden="{{!showSelect.
2022-03-16 11:33:43
647
原创 小程序中 使用FLY框架请求接口封装
Fly官网GitHub - wendux/fly: Supporting request forwarding and Promise based HTTP client for all JavaScript runtimes.第一步：下载 fly.min.js/wx.js第二步：建立一个request.jsimport Fly from "../lib/flyio/wx";const fly = new Fly()fly.interceptors.request.use((.
2022-03-16 11:23:39
1422
原创 pinia状态管理
第一步：安装pinianpm install pinia --save-dev第二步：在app中注册piniaimport { createApp } from 'vue'import App from './App.vue'import { createPinia } from 'pinia'; const app = createApp(App);app.use(createPinia());app.mount('#app')第三步：store/count.tsi
2022-03-01 19:21:18
249
原创 VUE3.0 Vue-devtools
下载地址：https://chrome.google.com/webstore/detail/vuejs-devtools/ljjemllljcmogpfapbkkighbhhppjdbg/related
2022-02-22 15:11:17
589
原创 vue3中watch 与watchEffect的区别
1、watch中需要指明监视的属性，也需要指明监视的回调 特点：A、需要传入监视的属性 B、不仅可以获取新值，还可以获取旧值 C、只有属性改变的时候才会执行，初始化的时候不会执行。<script>import { watch,ref, watchEffect } from "vue";export default { setup(){ const count = ref(0); ...
2022-02-21 09:49:01
542
原创 vue3中引入less
第一步：项目中使用less 报错引入 npm install less less-loader --save第二步：任然报错百度之后说是less-loader版本过高，降低至7.x的版本npm uninstall less-loadernpm install less-loader@7.x重启：搞定...
2022-02-17 14:42:08
1602
转载 tab列表横向滚动时点击居中原理
goCenter(e) { // 横向滑动居中 let ul = document.querySelector('#topNavUl'); let nav = document.getElementById("topNav"); let window_offsetWidth = window.innerWidth; //屏幕宽度; let dom = e.target; if (dom) { let domoffsetWidth = dom.offsetLeft, //中间.
2022-02-14 09:15:45
1097
转载 Feature Police 导致iframe页面无法使用粘贴功能
说明在Chrome 81版本之上时，通过iframe引入的页面无法正常使用粘贴板。此时，控制台会输出DOMException: The Clipboard API has been blocked because of a permissions policy applied to the current document. See https://goo.gl/EuHzyv for more details.错误，这是由于web规范之Feature Police导致的。Feat...
2022-02-10 17:34:16
2134
1
原创 项目中IphoneX适配
问题：设置position:fixed;bottom:0 IOS并没有生效，底部还会出现空白距离，如下图1、设置：viewport-fit=cover<meta name="viewport" content="width=device-width,viewport-fit=cover">2、设置安全距离：safe-area-inset-top：从视口顶部开始的安全区域插入量（以CSS像素为单位）。 safe-area-inset-bottom：从视口底部开始的安全区域插入
2022-02-10 16:14:43
378
原创 vue 自定义指令拖拽DIV
<template> <div class="tips" @click="gotoSugges" title="建议反馈" v-drag data-draggable="false" id="dragbtn"></div></template><script>import { isDev } from "@/config";export default { name: "SuggestionEntry", props: { .
2022-02-09 17:34:07
189
原创 vue自定义指令-左滑出现删除按钮
直接上代码：<template> <div class="wrapper"> <ul class="app-list"> <li v-for="(item, index) in appList" :key="index" class="app-item"> <div class="app-info_wrapper"> <div class="app-info" :clas..
2022-02-09 14:13:53
929
原创 css3的属性：inherit initial unset
inherit：使元素获取其父元素的计算值，可以应用于任何的css属性。对于继承属性，inherit只是增强了属性的默认行为，通常在覆盖原有值的时候使用。继承始终来自文档树中的父元素。initial：将属性的默认值或者初始值应用于元素，initial可以将css属性恢复到初始中状态。可以应用于任何的css属性。unset：如果该属性默认为继承属性，该值等同于inherit；如果该属性默认为非继承属性，该值等同于initial。例子1：<div id="current">
2022-02-09 11:33:09
717
原创 element的隐藏组件滚动条el-scrollbar
项目中要用到左右滚动的tab菜单，但是又不需要显示滚动条。效果如下：使用el-scrollbar来实现：通过设置滚动条的样式来隐藏滚动条，安卓下效果挺好，IOS仍然会显示滚动条.el-scrollbar__bar.is-horizontal{ height: 0;}.el-scrollbar__thumb{ background-color: transparent;}解决IOS下滚动条问题：由于我这里只需要横向的滚动条，因此垂直方向的滚动条直接隐藏了，设置以下样式:
2022-02-08 16:40:33
1369
原创 前端工具函数
// 判断是否是PCexport function IsPC() { const userAgentInfo = navigator.userAgent; const agentList = new Array('Android', 'iPhone', 'SymbianOS', 'Windows Phone', 'iPad', 'iPod'); let flag = true; for (let i = 0; i < agentList.length; i++) { if .
2022-02-08 16:29:36
257
原创 移动端rem适配
1、em是根据父元素的字体大小来设置rem是根据根元素html的字体大小来设置2、浏览器根元素默认的字体大小是 16px 如果要设置12px的字体，转换成rem 则是：font-size:0.75rem;(12/16=0.75)3、通过设置html的不同的基准值来达到适配的效果，可以使用postcss-px2rem lib-flexible来适配计算公式 @function px2rem($px){ $rem : 37.5px; @return ($p...
2022-01-12 17:50:32
736
原创 复制clipboard方法
export async function copy(text: string): Promise<void> { if (navigator.clipboard.writeText) { try { return navigator.clipboard.writeText(text); } catch (err) { // fall through... } } legacyCopy(text);}function legac.
2022-01-11 14:09:46
586
转载 问题之vue3.0引入elementui报错Uncaught TypeError: Cannot read property ‘prototype‘ of undefined
ve3.0引入elementui报错Uncaught TypeError: Cannot read property ‘prototype‘ of undefinedelementUI针对的是vue2.0https://element.eleme.io/#/zh-CNElement Plus针对的是vue3.0https://element-plus.org/zh-CN/guide/installation.html当vue3.0使用elementUI时会报Uncaught TypeError
2022-01-10 09:10:48
1673
转载 关于Chromedriver配置环境变量问题解决
1、首先当然是下载Chromedriver：（下载路径：https://sites.google.com/a/chromium.org/chromedriver/downloads） win64向下兼容，下载win32就可以。2、下载 chromedriver.exe 放入 chrome 安装目录：C:\Users\AppData\Local\Google\Chrome\Application3、配置环境变量我的电脑-右键-属性-高级系统设置-环境变量...
2022-01-05 15:49:50
1373
原创 编写程序实现将任意10进制正小数m转换成n进制的正小数，小数点后保留10位小数
/* 编写程序实现将任意10进制正小数m转换成n进制的正小数，小数点后保留10位小数。 0.0000009<m<1 1<n<10 例如：0.795 3 => 0.2101101122 例如：0 0 => undefined*/function change(m,n){ if(m === 0 || n=== 0) return; return parseFloat(m.toString(n)).toFixed(10)}consol.
2021-12-30 10:56:11
2505
原创 去掉收尾空格以及去掉＜＞左右两边的空格
例如：' 333 < > 1 <> 2 ' => 333< >1<>2let str = " 333 < > 1 <> 2 ";str = str.trim();let reg1 = /\s*</g;let reg2 = />\s*/g;str = str.replace(reg1, "<");str = str.replace(reg2, ">");con
2021-12-30 10:22:04
166
原创 this.$nextTick()的使用场景
一、应用场景：需要在视图更新之后，基于新的视图进行操作。注意：在created()和mounted()生命周期函数中，如果要操作渲染后的视图，也要使用nextTick方法，或者放入异步函数setTimeout中。
2021-12-28 15:29:36
2167
1
原创 Vue中获取元素的宽高
一、获取元素1、this.$refs2、document.querySelector() document.getElementById() document.getElementByTagName()等等确保获取到的元素不是undefined或nullvue中，在mounted()生命周期函数中才能获取dom元素，建议在修改样式时加个定时器，或者将代码放入 $nextTick()中执行。二、获取元素的宽高1、如果是内嵌样式style="width:100px,height:10..
2021-12-25 10:24:06
26015
原创 GET POST 区别
1、Get是向服务器发索取数据的一种请求，而Post是向服务器提交数据的一种请求。本质都是HTTP协议中的两种发送请求的方法。2、GET把参数包含在URL中，POST通过request body传递参数。因此：GET比POST更不安全。3、GET请求在URL中传送的参数是有长度限制的，POST也有，但是相对来说大很多。4、服务器端获取GET与POST的参数的方式不同。5、GET是无害且幂等的，多次请求不会改变资源。POST会多次发起请求，修改数据，例如浏览器回退的时候。6、GET请求会被
2021-12-23 16:52:49
160
原创 Vue3构建移动端项目-postcss-px2rem-lib-flexible
1、npm installpostcss-px2rem --save-dev2、npm installlib-flexible --save-dev3、main.js中引入：import 'lib-flexible'4、vue.config.js中配置：module.exports = { lintOnSave: false,//关闭eslint css: { loaderOptions: { postcss: { ..
2021-12-21 18:00:31
800
原创 Vue 指令 拖动元素
export default { data() { return { windowWidth:0, windowHeight:0 }; }, directives: { drag (el,binding,vnode) { let oDiv = el,firstTime = '',lastTime = ''; let _this = vnode.context; document.onselectstart =..
2021-12-13 09:26:45
209
原创 Vue IOS端跳转后返回页面不刷新问题解决
方法一： we码用了，生效mounted () {this.$nextTick(()=>{//首页跳转至门诊或者商城返回 IOS不兼容页面自动刷新问题var u = navigator.userAgent,app = navigator.appVersion;var isAndroid = u.indexOf(‘Android’) > -1 || u.indexOf(‘Linux’) > -1; //android终端或者uc浏览器var isiOS = !!u.match
2021-12-13 09:16:50
3247
原创 js 网页禁止复制
#禁止右键document.oncontextmenu = function(){ return false; }#禁止选中文字document.onselectstart = function(){ return false; }#只限制使用：如果只限制复制，可以在<body>加入以下代码：<body oncopy="alert('对不起，禁止复制！');return false;">#阻止默认事件来禁止：documentment.o...
2021-12-13 09:13:27
5225
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人