- 博客(159)
- 资源 (8)
- 收藏
- 关注
RSS订阅原创 css3选择器用法合集
如下：类名为label的元素，如果满足下一个兄弟节点是input框，并且当前input框存在一个属性required，则满足条件，设置::after。focus-within：当前元素及后代元素获取焦点后即可触发。如下：子元素input聚焦后，可以设置父元素parent的效果。has：可设置条件信息，若满足条件，则触发选择器，否则则不触发。selection：设置文字选中时的样式效果。如下：当鼠标选中文字时，文字样式将会改变。
2023-10-10 09:28:21
143
原创 关于ResizeObserver用于监听元素尺寸变化
xxx/directive.ts文件。xxx/index.ts文件。以下代码案例皆属于vue3。
2023-04-14 11:21:41
445
原创 vue3结合keepalive使用路由刷新
路由声明，注意组件中必须设置name属性，includeRouteName是组件name的数组集合，类型为string[]新建reload.vue，代码如下。// pinia，根据自己情况。
2023-03-31 09:25:59
1553
原创 关于在vue3中使用setup语法糖后设置name的问题
npm i unplugin-vue-define-options或者yarn add unplugin-vue-define-options。当我们不使用setup语法糖时，我们可以以上形式设置name。当我们使用setup语法糖的时候，我们可以借助。插件帮助我们设置name。在xxx.vue中使用。
2023-03-27 16:54:41
1215
原创 关于uni-app使用v-for绑定动态ref后无法获取的解决办法
上述代码的打印结果为一个空对象，即表示并没有获取到动态的ref元素，但如果我们将动态的ref改成静态写死的ref，又能够获取得到，所以我们可以排除是兼容性的问题，而考虑是界面元素渲染的时间问题，我们可以加上一个延迟获取。此时我们能够正确获取到所有的ref元素，得出结论就是，元素渲染需要时间，我们必须得等它渲染完成后才能进行获取ref，否则将获取不到，至于延迟多少，看自己的业务情况，这里只是给出问题所在及对应的解决方法。
2022-12-10 15:00:20
2389
原创 react native使用自定义图标iconfont与react-native-vector-icons
react native使用自定图标库及react-native-vector-icons图标库
2022-07-06 10:19:02
969
原创 socket.io实现聊天功能
一、环境说明文档地址：socket.io服务端使用express+ts客户端使用vue3+ts二、基本使用1.服务端安装socket.ionpm i socket.io -S参考代码import express from 'express';import { Server } from 'socket.io';import http from 'http';const app = express();const server = http.createServer
2022-03-28 16:24:52
820
1
原创 搭建react-native项目并手动集成viroReact(android版)
一、搭建项目注意项目名称的规范npx react-native init reactDemo --template react-native-template-typescript二、安装viroReactyarn add @viro-community/react-viro三、手动配置viroReact设置sdk版本(至少为24)与gradle插件版本(至少为4.1.1)// 文件位置：android/build.gradlebuildscript{ ext{ ..
2022-03-21 14:57:53
4337
原创 CSS实现立体效果
最终效果全部代码<!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"> <t
2022-02-10 17:07:14
2785
原创 vue3+vite+ts项目使用css modules
安装插件插件地址npm install -D typescript-plugin-css-modulesyarn add -D typescript-plugin-css-modules配置插件，tsconfig.json文件中{ "compilerOptions": { ... "plugins": [{"name": "typescript-plugin-css-modules"}] } ...}配置vscode软件的settings.json文件-&g
2021-12-30 09:41:57
2837
原创 vue3+vite使用jsx/tsx
安装@vitejs/plugin-vue-jsxyarn add -D @vitejs/plugin-vue-jsxnpm i -D @vitejs/plugin-vue-jsx配置vite.config.js...import vueJsx from '@vitejs/plugin-vue-jsx';export default defineConfig({ plugins: [vueJsx(), ...], ...})使用实战新建xxx.tsx或者xxx.jsx，注意不
2021-12-29 13:29:39
3512
4
原创 React: HOC高阶组件的使用
主要用于组件复用首先定义以下组件(UlCom)信息import React from "react";import LiCom from './components/LiCom';import HocCom from "./HocCom";import { Data } from './hocType';const Hoc: React.FC<{ liData: Data[] }> = ({ liData }) => { return <> &l.
2021-10-25 22:36:38
153
原创 useContext的使用
1. 基本使用父级组件import React, { useState } from "react";import Child from "./components/Child";const parentValue = { num: 0}export const parentContext = React.createContext(parentValue);const Ceshi = () => { const [parentState, setParentState] =
2021-10-25 21:25:44
446
原创 useEffect的使用
1. 不带第二个参数的情况const Home = () => { const [ count, setCount ] = useStat(0); useEffect(() => { console.log('界面一更新我就会执行，相当于类组件的componentDidUpdate') }) return ( <> <button onClick={ () => setCount(count + 1) }>点击加1</button>
2021-10-21 21:03:48
215
原创 接口请求方式的定义(REST API)
url代表资源，method代表方式json-server的使用项目中安装json-serveryarn add json-server -Dnpm install json-server -D项目根目录下新建__json_server_mock__文件夹（文件夹名自定义），此文件夹下新建db.json文件，写入以下数据{ "posts": [ { "id": 1, "title": "json-server", "author": "typicode" } ],
2021-09-22 21:09:36
425
原创 vue3.0单文件组件api的使用
Agwenbi升级vue版本到3.2以上引入组件时的注意事项definePropsdefineEmitsdefineExposeuseSlotsuseAttrsstyle的新特性之globalstyle的新特性之deepstyle的新特性之modulestyle的新特性之v-bind升级vue版本到3.2以上npm i vue -Snpm i @vue/compiler-sfc -D引入组件时的注意事项你可能会在引入组件时遇到下面的报错问题，并且组件不能正确显示出来导入组件时，首字母必须大
2021-08-18 17:21:00
438
原创 ts封装axios，并处理返回值
本项目的案例是针对vue3准备vue3+ts+axios的项目环境，这里不演示src下新建所需文件夹及对应文件，如下图api 保存所有的接口列表及对应的返回数据类型http 初始化axios，如果超时，设置拦截器等操作axios 二次封装好的axios，供开发人员使用设置api.ts，假设如下/** * @description: 所有的接口列表 * @param {*} 无参数 * @return {*} 无返回值 * ```js * key表示url路径缩写 * va.
2021-07-23 15:58:24
11635
14
原创 nginx启动命令及配置
启动nginxstart nginx.exe停止nginxnginx.exe -s stop重启nginxnginx -s reload无法停止nginx，执行下面命令taskkill /fi "imagename eq nginx.exe" /f解决vue部署项目后刷新404的问题location xxx { ...... try_files $uri $uri/ /index.html;}...
2021-07-21 17:35:31
402
原创 Vue自定义指令功能整合
当前案例全部是vue3+TS，vue2的可以根据自己情况修改1.v-copy指令文本内容复制指令// copy.tsimport { App, Directive } from "vue";const copy: Directive<HTMLElement> = { beforeMount(el, binding){ if(binding.modifiers.ref && binding.value){// 如果是要复制指定ref元素的数.
2021-07-07 16:01:24
316
2
原创 ts增强编译vuex之commit
1.接上一篇文章https://blog.csdn.net/Ag_wenbi/article/details/1181057782.hooks文件夹下新增commit.ts文件，并写入以下代码import module from "@/store/modules";type GetModule<Modules> = Modules extends { mutations: infer M } ? M : unknown;type GetModuleItems<Mod
2021-06-22 14:50:55
970
原创 ts增强编译vuex之dispatch
1.接上一篇文章https://blog.csdn.net/Ag_wenbi/article/details/118101881?spm=1001.2014.3001.55012.hooks文件夹下新增dispatch.ts文件，并写入以下代码，这里不做解析，详细操作上一篇文章，地址在第一步import module from '@vuex/modules';type GetModule<Modules> = Modules extends { actions: infer
2021-06-22 14:07:23
902
3
原创 ts增强编译vuex之getters
1.准备条件，vue3项目，并且安装了vuex与ts，这里不再演示2.在src下新建store文件夹，并在store文件夹下新建index.ts文件与modules文件夹，如下图3.在main.ts中注册vuex（此时main.ts会提示报错，因为第二步创建的文件信息都还是为空）import { createApp } from 'vue'import App from './App.vue'import store from '@vuex/index';const app = c
2021-06-22 11:35:49
2253
8
原创 eslint的个人常用配置
rules: { 'no-multi-spaces': 'error',//禁止使用多余的空格 'no-var': 'error',//禁止var 'no-unused-vars': 'error',//禁止出现未使用的变量 'quotes': ['error', 'single', {'allowTemplateLiterals': true}], 'indent': ['error', 2],//控制缩进为两个空格 'no-extra-semi': 'e.
2021-06-11 16:32:22
640
1
gojs可自由伸缩拓扑图
2017-08-31
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人