web前端
zzz_97
这个作者很懒,什么都没留下…
展开
-
Vue2.x实现this调用组件
长期以来,我都是通过父组件引入子组件的方式调用,比如一个Modal,一个Notice之类的,而很多UI框架都可以支持this.$xxx的方法调用展示,很羡慕,很自责,为啥我还在用这么low的方式?而且多个组件引入到父组件会造成层级过深,不利于渲染,而这种方式不仅优雅,而且可以直接将组件挂载到body里面,岂不是美滋滋实现方法1.一个Vue文件<template> <div> this is count {{count}} th原创 2022-03-04 10:24:07 · 792 阅读 · 0 评论 -
前后端分离,请求加密思路
1.声明,Access-Control-Allow-Origin 可以指定某个地址访问,可以保证安全2.多个地址想要访问一个后台地址,似乎有点难,尝试了写正则,不过不太好3.用的koa2写的后台, vue3前台,本来想着 用crytojs来加密解密,但是感觉有点太杀鸡用牛刀的感觉,个人不喜欢 import各种包,能自己实现的就尽可能自己实现4.直到我发现了window.btoa,一番折腾,找到了还算可行的加密方法下面贴给大家前端代码,写在axios里面的,主要是添加了一个自定义Hea原创 2022-02-02 16:35:44 · 1622 阅读 · 0 评论 -
vue 实现横屏及切换效果
1.实现横屏App.vue里面引入 css 原理就是 媒体查询 然后设置不同样式body { position: fixed; width: 100%; height: 100%; padding: 0; margin: 0; overflow: hidden;}@media screen and (orientation: portrait) { #app { position: absolute; width: 100vh; ...原创 2021-12-21 13:43:01 · 7009 阅读 · 0 评论 -
新版vuecli 配置环境
我们在开发中可能同时有几个环境,他们所需要的配置不一定是一样的,就需要多个环境配置首先 我自定义了两个环境 名字随意的"scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", // 新增 后面添加 mode 为 dev / pro "dev": "vue-cli-service serve --mode dev", "pro": "vue-cli-se.原创 2021-12-16 11:50:49 · 1021 阅读 · 0 评论 -
前端下载文件
const btnElement = document.getElementById('btn') btnElement.addEventListener('click', download) function download() { const xhr = new XMLHttpRequest() const url = document.querySelector('input').value i.原创 2021-12-12 18:25:43 · 448 阅读 · 0 评论 -
uniapp 简陋易懂版仿抖音视频播放
1. 只实现了上滑(下滑稍微改动下就有了)<template> <view class="flex-1"> <view class="flex-1" style="position: fixed;left: 0;right: 0;" :style="getStyle" @touchmove="handleMove" @touchstart="handleStart" @touchend="handleEnd"> <video id="myVid原创 2021-11-30 00:01:03 · 936 阅读 · 0 评论 -
uniapp app和微信小程序使用腾讯地图定位
1. 首先 注册个腾讯地图定位的key链接https://lbs.qq.com/dev/console/key/add2. 在官网下载好 sdk 保存到你项目里面3.使用sdkimport QQMapWX from "./wxsdk/qqmap-wx-jssdk.min.js";import { newModal } from './new-modal.js' let getLocation; // #ifdef MP-WEIXINgetLocation = () => {.原创 2021-11-29 12:47:54 · 3467 阅读 · 1 评论 -
uniapp 判断安卓iOS权限
uniapp 权限原创 2021-11-29 12:33:39 · 5503 阅读 · 0 评论 -
vue.config.js 通用配置!
// compression-webpack-plugin image-webpack-loader webpack-bundle-analyzer TODO INSTALL DEVconst CompressionWebpackPlugin = require('compression-webpack-plugin') // 开启gzip压缩, 按需引用const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$.原创 2021-08-06 16:04:36 · 358 阅读 · 0 评论 -
vue环境配置实践
vue-cli安装npm install -g @vue/cli不同环境需要不同配置时候比如development环境需要请求地址为: 127.0.0.1:3000/api/getuser production环境需要请求地址为: https:www.niubi123.com/api/getuser脚手架默认配置是"serve": "vue-cli-service serve","build": "vue-cli-service build","li...原创 2021-08-06 13:42:43 · 198 阅读 · 0 评论 -
前端根据机型跳转对应市场下载app
公司有这样的要求,H5界面,让用户点击下载我们公司App按钮后,判断机型,引导到各自的应用商店去下载,然后那些冷门机型就通过链接下载。注意:我本来想的是通过js来判断用户是否安装了这个App,发现基本上不可能实现。网上也有通过location打开判断时长来确定用户是否安装了app(原理在于如果安装了app至少有一段时间打开app,而没有,js的判断基本上在一瞬间完成。)我用的方法是直接通过应用商店来判断是否下载了,反正就是一股脑地拉起应用商店,应用商店会判断,安装了的会直接显示打开(嘻嘻,这不...原创 2021-08-04 16:00:30 · 8109 阅读 · 0 评论 -
前端获取用户经纬度
1.通过浏览器自带的apiif(navigator.geolocation){ navigator.geolocation.getCurrentPosition(geoSuccess, geoError)}else{ alert('浏览器不支持地理定位。') }2.处理成功逻辑function geoSuccess(position) { var lat = position.coords.latitude var lng = position.coords原创 2021-08-04 15:46:22 · 1094 阅读 · 0 评论 -
js简易uid生成
function myId () { const time = new Date().getTime().toString() const timeArr = time.split('') const arr = 'abcdefghijklmnopqrstuvwxyz'.split('') timeArr.forEach((item, index) => { const random = arr[Math.floor(Math.random() * arr.length)].原创 2021-06-07 15:47:14 · 1914 阅读 · 0 评论 -
vue+elementui 部分引入 + 自定义主题!!
1.版本"element-ui": "^2.15.2","vue": "^2.6.11"(如需使用sass)原创 2021-06-01 02:02:33 · 803 阅读 · 3 评论 -
koa + websocket + vue实现简单的聊天
使用koa2.x koa-websocket vue2.x1.首先 创建websocket服务原创 2021-05-29 11:40:00 · 1264 阅读 · 0 评论