- 博客(159)
- 资源 (8)
- 收藏
- 关注
原创 css3选择器用法合集
如下:类名为label的元素,如果满足下一个兄弟节点是input框,并且当前input框存在一个属性required,则满足条件,设置::after。focus-within:当前元素及后代元素获取焦点后即可触发。如下:子元素input聚焦后,可以设置父元素parent的效果。has:可设置条件信息,若满足条件,则触发选择器,否则则不触发。selection:设置文字选中时的样式效果。如下:当鼠标选中文字时,文字样式将会改变。
2023-10-10 09:28:21 144
原创 关于ResizeObserver用于监听元素尺寸变化
xxx/directive.ts文件。xxx/index.ts文件。以下代码案例皆属于vue3。
2023-04-14 11:21:41 453
原创 vue3结合keepalive使用路由刷新
路由声明,注意组件中必须设置name属性,includeRouteName是组件name的数组集合,类型为string[]新建reload.vue,代码如下。// pinia,根据自己情况。
2023-03-31 09:25:59 1574
原创 关于在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 1229
原创 关于uni-app使用v-for绑定动态ref后无法获取的解决办法
上述代码的打印结果为一个空对象,即表示并没有获取到动态的ref元素,但如果我们将动态的ref改成静态写死的ref,又能够获取得到,所以我们可以排除是兼容性的问题,而考虑是界面元素渲染的时间问题,我们可以加上一个延迟获取。此时我们能够正确获取到所有的ref元素,得出结论就是,元素渲染需要时间,我们必须得等它渲染完成后才能进行获取ref,否则将获取不到,至于延迟多少,看自己的业务情况,这里只是给出问题所在及对应的解决方法。
2022-12-10 15:00:20 2453
原创 react native使用自定义图标iconfont与react-native-vector-icons
react native使用自定图标库及react-native-vector-icons图标库
2022-07-06 10:19:02 973
原创 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 821 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 4338
原创 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 2792
原创 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 2851
原创 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 3527 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 154
原创 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 453
原创 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 217
原创 接口请求方式的定义(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 426
原创 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 440
原创 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 11680 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 324 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 971
原创 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 904 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 2265 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 647 1
gojs可自由伸缩拓扑图
2017-08-31
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人