- 博客(116)
- 资源 (2)
- 收藏
- 关注
RSS订阅原创 VUE3 Hooks的面向对象实现方式
本文会以三种形式实现一个组件，该组件实现以下功能：1.显示一个数字（可从prop给初始值）和一个添加按钮；2.点击添加按钮数字增加；3.当数字大于5时，数字颜色变红，并提交error事件。
2023-08-17 17:19:40
746
原创 No index signature with a parameter of type ‘string‘ was found on type ‘XXX‘
在TypeScript项目中*（严格模式下），使用类似 obj[key]来进行取值时如下图会出现如下报错。
2023-02-22 16:18:12
1865
1
原创 Webpack关闭SourceMap
只需将【productionSourceMap】设置为falsevue.config.js文件二. 未使用VueCli的Webpack项目需要将【devtool】设置为 false三. 其他情况当完成以上设置后还是出现sourcemap，可以看一下通过【cdn】引入的库，如下图这种则需要将代码下载到本地后删除最后一行，之后用本地文件替换远端文件。
2022-12-07 09:01:50
3451
原创 VUE-Cli5配置IFrame反向代理
因为项目需求，将项目分成了外侧导航框架与内侧IFrame内容区域，这样在开发过程中，为解决IFrame跨域问题，需要使用反向代理将子页面代理到导航框架中。内容模块配置代理，主要是配置该模块的请求地址。如果按以下配置则直接会请求导航框架的配置的代理若导航框架没有配置响应的接口反向代理则会出现404。的配置是这样的，在axios的baseUrl配置如下代码。之后再再vue.config.j中配置。
2022-11-15 13:09:32
1901
2
原创 颜色规范构思（Scss版）
基础颜色是项目所有颜色的一个抽象颜色，本身并不代表任何意义，相当于UI人员的取色版，也相当于UI人员与前端人员对于颜色的基础规范。
2022-11-15 10:24:18
325
原创 【JS】解构在函数中的使用
什么是解构？ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构。案例：// 赋值let {x}={x:1} // x的值为1// 赋值对象let {x}={x:{y:1}} // x的值{y: 1}// 按照模式赋值let {x:z}={x:2} // x is not defined ；z的值为2let {x:{y}}={x:{y:1}} //x is not defined ；y的值为1；解构在函数中主要应用1
2021-11-04 17:25:20
899
原创 es6中字符串常用方法
是否包含：includes()、startsWith()、endsWith()// 是否包含特定字符'hello'.includes('ll') // true// 特定字符是否在开始位置'hello'.startsWith('h') // true// 特定字符是否在结束位置'hello'.endsWith('o') // true补齐：padStart()、padEnd()// 在后面补齐 '!' 直至总位数达到10位'hello'.padEnd(10
2021-11-04 15:51:14
170
原创 Vue3+Scss实现横向树形结构
效果：项目结构：用的Vue-Cli的脚手架，配置使用Vue3+Scss代码:App.vue<template> <div class="container"> <tree-node :node-info='nodeInfo' v-for='(nodeInfo,index) in dataList' :key='index' :expand-status='true' level="0" ...
2021-09-15 09:15:01
1880
1
原创 [JS]按顺序执行异步操作
模拟一个场景：多个tab页，有个关闭所有tab的功能，这时候我们按照tab列表的顺序每隔120毫秒（关闭动画的时间）以此关闭tab页面。代码： let tabs = ['tab1', 'tab2', 'tab3','tab4']; let closeTab = tabName => { console.log('关闭 ' + tabName); } let closeAsyncTab = async ta
2021-08-20 11:42:15
1258
原创 数据双向绑定的一些理解
目录代码model => viewview => model代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=dev
2021-08-18 15:45:47
203
原创 【vite】多入口配置
一般的Vue项目，只有根目录一个index.html文件，这个文件就作为整个项目的入口。（因为Vue是单页面应用）但是有的需求需要多个入口（比如使用微应用，子应用都是一个一个的单独的入口）。项目（两个独立的模块一个是default，一个是login）目录如下：配置vite.config.tsimport {defineConfig} from 'vite'import vue from '@vitejs/plugin-vue'const path = require('path'
2021-07-28 21:19:10
10749
8
原创 【vite】vite-vue3下使用使用svg
1.首先先将svg进行整理将多个svg文件整理成如下格式：（ps:需要去掉里面的fill，否则使用类名无法进行着色）每个symbol就是原来的一个svg，用id进行区别，这么整理的目的是减少网络请求。放在如下目录下：2.创建svg引用组件<template> <svg width=100% height="100%" class="svg-symbol"> <use :xlink:href="iconName"/> &..
2021-07-27 15:16:44
1959
原创 【vite】配置vite打包入口
项目目录vite的配置都在根目录下面的vite.config.ts里面，在没有对其进行打包配置时，默认的打包的入口就是根目录的【index.html】。这时候我们直接运行 npm run build就会打包相应的文件：（ps：为什么默认是.html文件那？因为vue是单页面应用也就是最后打包的html只有一个。vite也提供多入口，但我不再本文继续描述了）但是如果我们的目录结构改变了 ，比如：在此时打包就会报错：Could not resolve entry modu...
2021-07-26 22:46:54
29786
原创 【css】反向圆角
效果类似于谷歌浏览器的tab，如图：nav的结构代码（数据类型就是普通的list就不在这里赘述了）： <nav> <div :class="{ 'menu-item': true, 'activity': index == selectMenuIndex }" v-for="(menuInfo,index) in menuList" :key="index" @click="handelMenuClick(index)"
2021-07-19 22:14:33
4526
原创 【Vue】实现二级菜单根据一级菜单切换效果
本文代码使用vue3+ts开发。效果：代码：<template> <nav> <div :class="{ 'menu-item': true, 'activity': index == selectMenuIndex }" v-for="(menuInfo,index) in menuList" :key="index" @click="handelMenuClick(index)" &g.
2021-07-19 21:47:58
2573
原创 Vue3初体验01-创建项目
目录背景说明环境说明项目创建引入Element UI背景说明本文是关于Vue3的学习的记录，目的是使用vue3+vite+ts+elementUI搭建一个简单的后台管理系统。环境说明需要提前安装node，本文使用的是v12.22.2项目创建npm init @vitejs/app gecer_bms之后进行如下选择之后cd目录，run一下，项目就跑起来了。引入Element UInpm install element-plus --
2021-07-03 10:59:18
622
原创 【Flutter】动画入门
Flutter动画基本与前端动画一致，都是在一定时间内，将一个值变到另一个值，利用这个值的变化来实现对界面的控制。代码class MyHomePage extends StatefulWidget { MyHomePage({Key key}) : super(key: key); @override _MyHomePageState createState() => _MyHomePageState();}class _MyHomePageState extends
2021-03-10 14:46:36
115
原创 【Android】category的粗浅理解
我得理解 category 就相当于提供给框架的一个划分类型的的标识。这些标识在显示的Intent中并没有展示出多大价值（也可能是我学的不好）但是在隐式Intent时却体现了很大的作用。其中系统提供的：例如：<category android:name="android.intent.category.LAUNCHER" />他就是提供给系统的标识，提示系统这是主页面。<category android:name="android.intent.categor.
2021-02-08 11:58:59
2396
原创 【Android】RecyclerView实现聊天界面Demo
1.效果2.工程结构3.聊天内容圆角左侧内容圆角（shape_0111_10dp_corners）<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> <solid android:color="#FFFFFF" />
2021-01-27 11:21:21
2634
2
原创 【Android】Recyclerview实现ListView效果
Android官方文档上说明是“在您的界面中显示大量数据，同时最大限度减少内存用量”。此文中的用法适用于实现ListView的效果效果：工程目录1.先创建一个用于存放数据的实体，存放图片id以及显示的文字package com.example.myapplication.myrecyclerview.model;public class Student { private int imgId; private String name; public
2021-01-25 15:13:54
437
原创 【Android】初识build.gradle
本文描述的是Module中的build.gradleplugins { id 'com.android.application' //用于制定是一个工程 如果是一个库则使用com.android.library}android { //指定项目的编译版本 compileSdkVersion 30 //构建工具 buildToolsVersion "30.0.2" defaultConfig { //项目标识 app
2021-01-21 13:21:57
323
1
原创 【Android】入门05：帧布局、表格布局、网格布局
1.帧布局一层一层向上摆放的布局，重叠的元素上层会遮挡下层。默认子元素都是堆叠在左上角。<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_widt
2020-12-20 18:34:57
595
原创 【Android】入门04：TextView
目录TextView：文本展示标签1.使用文本资源2.常用属性3.文字省略4.文字链接TextView：文本展示标签 <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Hello World!" />1.使用文本资源使用文本资源，可以规范app中的文本...
2020-12-13 21:45:25
109
原创 【Android】入门03：通用属性
设置其子元素的位置android:gravity常用值center_horizontal 水平居中center_vertical 竖直居中center 居中left 左right 右top 上bottom 下<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_pare..
2020-12-12 20:03:48
124
原创 【Android】入门02：相对布局
子元素相当于父容器布局默认子元素在父容器的左上角<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <!--左上--&g
2020-12-05 11:40:20
139
原创 【Android】入门01:线性布局
线性布局：竖直、水平（默认）方向线性排列布局竖直、水平的方向设定设置竖直、水平的方向设定属性android:orientation horizontal则为水平方向布局，设置为vertical则是竖直方向布局<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_heigh
2020-12-05 11:10:55
514
原创 【Android】文字描边
在文字外边描个边。在网上看了各路大神写的代码，要不就是白色的边的黑色的文字不重合、要不就是在android 10下面显示有问题。所以自己研究了一下还是直接拿canvas画一个最直接。代码：package com.dsfa.dsfa_amap;import android.content.Context;import android.graphics.Canvas;import android.graphics.Color;import android.graphics.Pai
2020-11-26 15:54:53
869
1
原创 【Flutter】调用AndroidView 多指滑动报错问题
环境：android8.1 以及 android 5.0（暂时推测为android8.1以下因为android10并没有此问题）flutter 1.22.0+使用AndroidView包了一下原生的高德地图，在地图上3+个手指头以上触摸屏幕则会爆以下错误。E/flutter ( 4633): #0 _AndroidMotionEventConverter.toAndroidMotionEventpackage:flutter/…/services/platform_views.
2020-11-25 14:13:02
540
原创 【Android】高德地图在Debug模式下运行正常但是打Release包时则闪退解决办法
我再开发过程中遇到的高德地图在Debug模式下运行正常但是打Release包时则闪退的原因是没有设置混淆。因为我做的是Flutter，所以Android的文档目录为下：其中需要配置的则是圈出来的两个文件（proguard-rules.pro、build.gradle），其中proguard-rules.pro文件在初始化的目录中并没有，需要自己创建。两个文件配置如下：proguard-rules.pro里面具体的配置需要根据项目需要自己进行配置（链接），我这里用到的是导航、定位、搜索
2020-11-11 21:11:24
1948
5
原创 【Flutter】插件开发
本文Flutter版本为1.20.0 stable创建命令flutter create --org 包名 --template=plugin -a java -i objc - --description "插件描述" 项目名
2020-11-10 21:08:25
324
原创 【Flutter】改变TextField 边框颜色
本篇为本人平时总结的经验，如有更好的写法请留言。TextField( autofocus: true, controller: TextEditingController.fromValue(TextEditingValue( text: value, selection: TextSelection.fromPosition(TextPosition( affinity: TextAffinity.downs
2020-08-17 12:08:40
4502
原创 【Flutter】沉浸式导航
效果结构是使用Stack布局先给后面的控件弄个图片的背景，之后再上Scaffold,再将相关的组件背景设为透明即可.代码class Body extends StatelessWidget { @override Widget build(BuildContext context) { return Stack( children: <Widget>[ Image.network( 'https://timg.
2020-07-17 15:00:01
788
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人