BradyCC-CSDN博客

原创 Vite script setup语法糖的使用

Vue3 使用 Composition（组合式） API , 同时引入了 setup() 函数，而 script setup 语法糖将更进一步的简化书写。<template> <div>默认count: {{ iState.count }}</div> <div> <button @click="increment">增加</button> <button @click="decrement"&gt.

2021-06-15 10:42:33 1558

原创 Vite 配置 vue-router 和 vuex

安装相应依赖# 安装依赖yarn add vue-router@next vuex@next创建目录结构基础文件配置router/index.tsimport { createRouter, createWebHashHistory, createWebHistory } from "vue-router";import Home from '../views/Home.vue'const routes = [ { path: "/", name: "home

2021-06-07 16:18:49 1691

原创 Vite 快速搭建Vue3 Ts项目

Vite快速搭建 Vue3 Ts 项目详情请查阅vite官方文档# 直接创建项目选择 vue-ts 模板yarn create @vitejs/app vue-ts-vite --template vue-ts# 进入项目目录cd vue-ts-vite# 安装依赖yarn# 运行yarn dev配置 tsconfig.json{ "compilerOptions": { "target": "esnext", "module": "esnext",

2021-06-07 15:43:19 586

原创 Vue3 异步组件的使用

Vue3 中使用 defineAsyncComponent 定义异步组件，配置选项 component 替换为 loader ，用法如下：<template>  <AsyncPage /></tempate><script>import { defineAsyncComponent } from "vue";export default { components: { // 无.

2020-11-28 10:02:40 3550

原创 Vue3 函数式组件的使用

Vue3 中废除了 functional 特性声明，具体使用方法如下：<template>  <Functional level="3">这是一个动态的h元素</Functional></template><script>export default { components: { Functional, }}</script><scrip.

2020-11-27 16:36:38 4773 1

原创 Vue3 渲染函数 Api 的使用

Vue3 中渲染函数的用法更简单、直接，插槽统一使用 $slots 获取。<template>  <RenderTest v-model:counter="counter"> <template #default>title</template> <template #content>content...</template> &l.

2020-11-27 16:12:06 1629

原创 Vue3 全局 Api 与 v-model 的使用

Vue2 中的 Global Api 在 Vue3 中改为应用程序实例调用，如自定义组件// Vue2 使用 Vue.component 方式import Vue from "vue";import App from "./App.vue";Vue.component('App', App);// Vue3 使用 createApp().component 方式import { createApp, h } from "vue";import App from "./App.vue.

2020-11-27 15:42:11 654

原创 Vite 快速搭建Vue3项目

两种方式：使用 create-vite-app 搭建使用 yarn init vite-app 搭建第一种方式# 全局安装yarn global add create-vite-app# 创建项目create-vite-app vitev3demo# 安装依赖yarn# 运行yarn dev第二种方式# 创建项目yarn create vite-app vitev3demo# 安装依赖yarn# 运行yarn dev...

2020-11-08 19:56:02 249

原创 10.24 节日快乐

如题： 2020 - 996 = 1024

2020-10-24 16:31:14 157

原创 Vue 微信网页截图实现

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

2020-10-19 08:21:05 1344

原创 Vue 微信浏览器关闭兼容

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

2020-10-19 08:12:15 450

原创 Angular2 环境配置

Angular 是一个应用设计框架与开发平台，用于创建高效、复杂、精致的单页面应用。# 配置 node 官网下载稳定版本# 配置 typescriptsudo npm i -g typescript# 安装 angular/clisudo npm i -g @angular/cli# 查看 angular 版本ng v至此，Angular2的开发环境配置完成，可以使用 ng new 项目名创建 Angular2 项目了。...

2020-09-06 17:49:34 245

原创 AntV G6 可视化引擎实现前端任务调度

项目需求：前端可视化实现任务调度，包括动态渲染、创建、编辑、拖拽、关联任务节点，功能栏、缩略图等相关功能。具体实现效果图如下：动态渲染任务节点关联任务节点关联关系确认任务节点拖拽选择添加节点创建新节点右键菜单相关代码参照g6demo...

2020-09-06 17:37:54 875

原创 Vue 微信网页授权自动登录

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

2020-09-06 17:24:02 2405

原创 Vue3 Composition API - 数据监听

Vue3 提供了两种方式进行数据监听：watchEffect 和 watchwatchEffect 基于 Proxy 代理的响应式数据，主动监听响应式数据的变化watch 完全等效于 2.x this.$watch，属于懒执行基本用法<template> <div> <h3>{{ title }}</h3>  <p>支持人数：{{ supNum }}</p> .

2020-08-03 20:37:22 1874

原创 Vue3 Composition API - 响应式API

Vue3 提供了两种方式构建响应式数据：ref 和 reactive基本用法<template> <div>  <p>支持人数：{{ supNum }}</p> <p>反对人数：{{ oppNum }}</p> <p>支持率：{{ ratio }}</p> <button @click="changeNum(0)"&gt.

2020-08-03 20:32:46 556

原创 Vue3 Composition API - setup

Vue3 推荐的 Composition API 相较于 Options API，使用更加灵活、逻辑更加清晰、易于维护、重用。具体用法详见：官方文档Composition API 入口setup 函数是一个新的组件选项。作为在组件内使用 Composition API 的入口点。setup() 在初始化 props 之后与生命周期 beforeCreate 之前调用。所以，this 在 setup() 中不可用。基本用法：<template> <div&gt.

2020-07-29 07:37:16 383

原创 Vue3 项目搭建

两种方式搭建 Vue3 项目基于 vue/cli 搭建 Vue2 项目后，升级至 Vue3 （vue-cli-plugin-vue-next）基于 vite 直接搭建 Vue3 项目第一种方式# 创建项目vue create vue3demo# 安装依赖yarn# 升级至 Vue3vue add vue-next# 运行yarn serve第二种方式# 创建项目yarn create vite-app vue3vite# 安装依赖yarn# 运行yar.

2020-07-29 07:05:44 211

原创 Flutter 环境搭建

Flutter 环境搭建第一步：选择操作系统，下载 Flutter SDK第二步：配置环境变量终端执行 vim ~/.bash_profile第三步：编辑器安装 Flutter 插件IntelliJ IDEAvscodeAndroid Studio安装完成后，执行 flutter doctor 检查备注：如有显示 X，说明未安装 Flutter 插件，这里我的 IDEA 已经安装完成，但还显示未安装，不明原因详细操作可参照：Flutter官网第四步：配置

2020-07-26 16:16:44 140

原创 Uni-app App 文件下载

文件上传以后，当前需要在线预览，下载也是必不可少，这里记录一下uni-app 文件下载的方式，使用 uni-app 内置方法 uni.downloadFile 配合 uni.saveFile 和 uni.openDocument 实现。具体使用用法如下：/** * 下载文件 * @param url 文件地址 */public downloadFile(url: string): void { uni.downloadFile({ url, success: (res) .

2020-07-07 16:34:37 3359

原创 Uni-app App 使用 web-view 实现文件上传

uni-app 内置了文件上传的方法，但并不适用于阿里云对象存储方式，实践了很多种方式，最终还是选择了 web-view 配合 H5 实现文件上传。具体使用用法如下：必须将 H5 页面放置在 src/hybrid/html 文件夹中配置 web-view，使用@message 接收 web-view 传参<template> <view id="project-upload-file"> <web-view src="/hybrid/html/i.

2020-07-07 16:29:29 3216

原创 Vue 动态添加路由实现

项目需求：除固定的模块使用静态路由定义外，其他路由由后端定义配置后，以接口的形式返回给前端动态添加。这里使用 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.

2020-06-13 18:51:37 2005

原创 Vue keep-alive配合Tabs标签页实现数据缓存

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

2020-06-13 18:43:50 4320

原创 Uni-app 微信小程序使用 web-view 在线查看PDF

在线查看PDF文件，已经是很常见的需求了，也有很多种方法可以时间，此次的需求是在微信小程序里打开、查看PDF文件，这次使用的 web-view 组件。具体使用用法如下：<template> <view id="web-info"> <web-view :src="src" v-if="iOS"></web-view> </view></template><script lang="ts">im.

2020-05-31 15:21:54 3957

原创 Vue 使用 Css3 中的 skewY 属性实现饼图倒计时效果

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

2020-05-29 23:57:49 617

原创 Vue 使用 video 标签实现视频播放

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

2020-05-29 23:50:55 53513 11

原创 Vue 使用 embed 标签实现在线查看PDF

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

2020-05-29 23:40:52 3003

原创 Uni-app 微信小程序头像上传

uni-app 提供了很多图片处理的Api，比如 uni.chooseImage()方法，但基本都是本地、拍照上传，本地临时、持久存储，要想跟服务器交互，就需要使用上传Api uni.uploadFile()。需求是想将图片转为base64格式后上传服务器，经多方查找，找到了微信提供的Api方法 wx.getFileSystemManager()。wx.getFileSystemManagerwx.FileSystemManager.readFile() 方法可以提供的本地文件路径、读取本地文件内.

2020-05-25 06:46:25 2479

空空如也

空空如也