BradyCC的博客

项目需求：微信网页，点击保存图标，实现网页截图效果。使用 html2canvas 实现。具体实现如下：安装 html2canvas 1.0.0-rc.4 版本 （处理 Android 与 IOS 兼容问题）yarn add html2canvas@1.0.0-rc4引入并使用<template> <div id="home"> <button @click="screenShot">截图</button> <.

项目需求：点击自定义关闭按钮，主动关闭微信浏览器。备注：使用 weixin-sdk-js，部署后 IOS 失效。具体实现如下：在 index.html 中 使用 WeixinJSBridge 执行微信浏览器关闭 <script> // 处理微信浏览器关闭 window.customCloseWindow = function () { setTimeout(function () { // 安卓 document.addEventListener('.

项目需求：微信公众号（服务号）访问网页，第一次登录后，再次访问默认自动登录，执行退出后，可重新手动登录。具体实现如下：微信公众号 - 设置 - 公众号设置 - 功能设置 - 配置网页授权域名，用于获取授权code（以下是订阅号截图，服务号对应位置配置网页授权域名地址）微信公众号 - 开发 - 开发者工具 - 绑定开发者微信号，用于调试前端使用 appid 调用授权获取code，用code调用接口获取对应的openid实现自动登录// 以下为具体实现代码 async moun.

项目需求：除固定的模块使用静态路由定义外，其他路由由后端定义配置后，以接口的形式返回给前端动态添加。这里使用 vue-router addRoutes 方法操作。具体实现方式如下：// main.jsimport Vue from "vue";import App from "./App.vue";import router from "./router";import store from "./store";import Antd from "ant-design-vue";impo.

项目需求：使用Tabs标签页显示对应菜单项内容，同时实现数据缓存便于操作，关闭Tabs标签页时重置组件清空缓存。这里使用 Vue keep-alive 动态缓存的方式实现。同时配合 vuex 实现Tabs标签页的全局配置 - 多标签页、单标签页、关闭。具体实现方式如下：<template> <!-- 公共多Tab缓存组件 --> <div id="common-tabs-keep-alive"> <a-tabs v-model="activ.

项目需求：要做饼图倒计时效果。一开始只想到了用 border-radius 来实现，但只能拆分成 4 个半圆。动态显示没有倒计时的类似效果。通过查看资料发现 Css3 中的 skewY 属性可以实现类似的需求，旋转角度可以从 0° 到 90°，这样再配合 border-radius 就可以实现想要的效果了。具体方法如下：...

项目需求：动态显示视频滚动条、禁止视频下载、播放时每5s更新当前时长、每10分钟暂时视频显示提示。之前做视频播放时基本都是使用 vue-video-player 组件，其原因为 封装功能齐全、播放源兼容性好等。通过这次项目需求，也深入的学习了 video 标签的属性及方法。具体在这里跟大家分享一下。具体使用方法如下<template> <!-- Video组件 --> <div id="common-video" class="h-100"> .

项目需求：在线查看PDF文档，同时还需要记录查看时长。 如果只是单纯查看，可以使用 window.location.href 方法更新浏览器地址栏即可查看。但这样 Vue 就无法实现监听了。之前在项目中使用过 vue-pdf 组件，用于查看PDF文档，但因此组件前端无法解决跨域问题，此方法又被舍弃了。最终选择了使用 标签的形式，可以实现与第一种方法相同的效果，又能满足项目需求，在组件内实现监听。具体使用方法如下 <!-- PDF在线查看弹窗 --> <CommonDialog.

typescript 提供了类型声明，做静态类型检查，类型就是最好的注释。<template> <div id="demo"> {{ msg }} {{ computedMsg }} <button @click="handleClick">点击</button> </div></templa...

模型文件要放在 static 或者 public 下，否则无法正常引入，引入的模型需要调整颜色，否则显示会有问题<template> <div id="import-template"> </div></template><script> import * as THREE from 'three' impor...

three.js是JavaScript编写的WebGL第三方库。提供了非常多的3D显示功能。相关插件npm i threenpm i stats.js - 性能插件npm i dat.gui - 页面调试插件npm i three-orbitcontrols - 相机控制插件npm i tween.js - 补间动画插件基本用法<template> <...

实现点击缩放、移动，鼠标点击移动完成旋转<template> <div id="import-template" @mouseup.self="mouseUp"> <ul class="box" @click="reset" @mousedown.self="mouseDown($event)" @mousemove="mouseMove($even...

是一个专为 Vue.js 应用程序开发的状态管理模式，可以帮助我们管理共享状态。每一个 Vuex 应用的核心就是 store（仓库）。vuex 状态管理核心概念：state - 存储需管理的状态，相当于组件中的datamutations - 提交状态修改，更改 Vuex 的 store 中的状态的唯一方法actions - 提交mutation，可以包含任意异步操作getters...

是 Vue.js 官方的路由管理器。可以在任何组件内通过 this.router访问路由器，也可以通过this.router 访问路由器，也可以通过 this.router访问路由器，也可以通过this.route 访问当前路由。动态路由匹配 - 在组件中使用 this.$route.params 获取对应参数嵌套路由路由元信息 - meta: {}路由组件传参 - 配置 props...

ECharts，一个使用 JavaScript 实现的开源可视化库。提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。vue中使用echarts安装：yarn add echarts封装：my...

vue-baidu-map，是Vue的百度地图组件库。vue-baidu-map官方文档百度地图JavascriptAPI文档使用方法：安装NPM - npm install vue-baidu-map --saveCDN - <script src="https://unpkg.com/vue-baidu-map"></script>全局注册、使...

项目需求：可以本地上传头像，也可以选择拍摄头像上传。组件：Camera组件：实现 打开、关闭摄像头、绘制、显示图片、用于上传CameraDialog组件：使用ElementUI dialog组件 展示摄像头UI效果外部调用CameraDialog组件，实现拍摄头像上传功能本地上传可使用原生input、也可使用ElementUI upload组件操作逻辑：新增时将头像图片转为...

配置vue-video-player，实现视频流。只需 npm i vue-video-player 即可。亲测一定要使用 npm 安装，其他安装包引入不全，无法正常使用//package.json{ "name": "v3demo", "version": "0.1.0", "private": true, "scripts": { "serve": "vue-c...

vuex实现了统一状态管理，这里记录基础配置及使用方法//store.jsimport Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)export default new Vuex.Store({ state: { count: 1, isShow: true }, mutations: { ...

配置vue-router，实现路由懒加载、webpack分模块打包、监听路由显示title//router.jsimport Vue from 'vue'import Router from 'vue-router'Vue.use(Router)export default new Router({ routes: [ { path: '/', ...

渐进式Javascript框架，动态构建用于界面。Vue的特点：MVVM模式 （Model - View - ViewModel）编码简洁、体积小、运行效率高，适合 移动/PC 端开发它本身只关注UI，可以轻松引入vue插件或其他第三方库开发项目与其他前端JS框架关联：借鉴Angular的 模板 和 数据绑定 技术 - Google公司借鉴React的 组件化 和 虚拟DO...