![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue3
九段刀客
你期待的并且相信的,终将实现!
展开
-
vue3利用component组件实现 string转为组件渲染
【代码】vue3利用component组件实现 string转为组件渲染。原创 2023-05-27 23:04:37 · 1871 阅读 · 1 评论 -
canvas圆环和圆弧,并添加文字
【代码】canvas圆环和圆弧,并添加文字。原创 2023-02-22 15:11:32 · 930 阅读 · 0 评论 -
echarts环状饼图
【代码】echarts环状饼图。原创 2023-02-21 21:05:13 · 296 阅读 · 0 评论 -
vite vue3批量导入指定目录下的组件
场景:批量导入components/select/ 的所有选择组件,并根据名称使用动态组件component渲染。原创 2022-11-11 15:39:09 · 2225 阅读 · 0 评论 -
el-tree-select组件值为对象,label显示多个字段
【代码】el-tree-select组件值为对象,label显示多个字段。原创 2022-11-09 11:10:37 · 2762 阅读 · 1 评论 -
vue3中使用pinia
pinia的使用原创 2022-11-08 19:15:05 · 225 阅读 · 0 评论 -
vue3标签页切换组件封装类似el-tabs
vue3标签页切换组件开发原创 2022-10-29 11:56:29 · 2071 阅读 · 0 评论 -
electron +vue3项目中添加vue-devtool插件
electron配置vue插件原创 2022-10-16 12:18:25 · 1459 阅读 · 1 评论 -
vue3 判断slot插槽是否被使用
会返回被使用的插槽实例。原创 2022-10-14 18:16:16 · 2390 阅读 · 0 评论 -
threejs实现点击某个模型变色
threejs点击模型变色原创 2022-08-10 15:40:02 · 1406 阅读 · 0 评论 -
vue3 + vite 配置jsx
vue3 jsx原创 2022-07-04 14:46:53 · 3099 阅读 · 0 评论 -
vue3+element-plus 两层v-for表单验证解决办法
el-element-plus官方的方案一层的时候用于,两层循环时不生效原创 2022-06-27 12:17:20 · 1191 阅读 · 0 评论 -
vue3实现类似微信聊天向上滚动,查看历史消息功能,并滚动到上一次查看位置
实现逻辑:使用scrollIntoView方法,通过上一次列表的第一条的id对应的dom,滚动到指定位置原创 2022-06-16 18:21:24 · 3055 阅读 · 5 评论 -
vue3 滚动到底部
滚动到底部原创 2022-06-15 15:12:47 · 1633 阅读 · 0 评论 -
Vue3学习笔记四:Vue3中使用Eventbus组件通讯
vue3中已经移除了emit,emit,emit,on等方法,Eventbus通讯使用的是发布订阅的设计模式,可以自己实现一个。下面我用的是typescript// 为保持和vue2版本中使用bus一致,emit,on,off前面都加了$class Bus { list: { [key: string]: Array<Function> }; constructor() { // 收集订阅信息,调度中心 this.list = {}; } // 订阅 $on(name:原创 2020-12-01 17:43:58 · 14237 阅读 · 4 评论 -
vite + vue3 动态图片相对路径 404
new URL(key, import.meta.url).href原创 2022-05-23 19:11:27 · 960 阅读 · 0 评论 -
vite中获取.env.xxx中自定义的环境变量
1、在业务代码中获取方式import.meta.env.VITE_APP_BASE_API2、在vite.config.js中获取方式import { defineConfig, loadEnv } from "vite";export default ({ mode }) => { server:{ "/api": { target: loadEnv(mode, process.cwd()).VITE_APP_BASE_API, ws: true, c原创 2022-05-13 09:40:01 · 3595 阅读 · 0 评论 -
解决vue3中两个路由共用一套代码,两个页面之间跳转不刷新
<template> <div>=={{ name }}</div></template><script setup>import { ref, watch } from "vue";import { useRouter } from "vue-router";const name = ref("");const router = useRouter();watch( () => router.currentRout原创 2022-05-12 10:15:44 · 1551 阅读 · 0 评论 -
vue项目中使用highlight代码高亮
切换皮肤https://highlightjs.org/<template> <div> <el-button>点击00</el-button> <highlightjs language="html" code="<el-button>点击00</el-button>" /> </div></template><script>import "hig原创 2022-05-06 10:01:08 · 2223 阅读 · 0 评论 -
vue3+vite图标库展示,并用可见性api new IntersectionObserver 实现懒加载
懒加载解决图标过多卡顿问题svg-iocns.jsconst reqs = import.meta.globEager("@/icons/svg/*.svg");const modules = [];for (const key in reqs) { let value = reqs[key].default; let a = value.split("."); let b = a[0].split("/"); modules.push({ icon: b[b.length -原创 2022-04-23 20:26:24 · 1509 阅读 · 0 评论 -
vue3 primevue水波纹bug
"primevue": "3.12.4",<script setup>//只要用了setup语法糖,里面有任何内容都会导致水波纹失效</script>原创 2022-04-17 18:20:13 · 211 阅读 · 0 评论 -
vue3中使用局部自定义指令
<button v-test>click</button>const vTest = { mounted(el) { console.log(el, "0000"); el.addEventListener("click", () => { console.log("33333333"); }); }};原创 2022-04-15 12:12:51 · 1254 阅读 · 0 评论 -
script setup语法中使用props和emit
<script setup>const props = defineProps({ foo: String})const emit = defineEmits(['change', 'delete'])// setup code</script>原创 2021-12-22 11:09:57 · 3128 阅读 · 0 评论 -
vue3 全局、局部自定义指令
全局自定义指令test.jsexport default (app) => { app.directive("test", { mounted(el) { console.log(el, "========"); } });};main.jsimport { createApp } from "vue";import App from "./App.vue";import "./registerServiceWorker";import rout原创 2021-12-08 12:15:03 · 756 阅读 · 0 评论 -
vue-cli4 vue3+element-plus采用本地cdn方式,提高开发启动速度
public/index.html<!DOCTYPE html><html lang=""> <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" /&g原创 2021-12-05 22:23:23 · 1158 阅读 · 0 评论 -
解决el-select需要取多个值的问题
使用JSON.stringify 和 JSON.parse 转换 <el-select v-model="form.roleName" @change="change_role"> <el-option v-for="item in options_role" :key="item.id" :label="item.roleName" :value="J原创 2021-11-30 17:38:32 · 1894 阅读 · 0 评论 -
vue3不带修饰符自定义v-model和带修饰符指令
1、不带修饰符的v-model父组件中使用<button @click="click_btn">点击事件</button><ChildComponent v-model="show" />import {reactive, toRefs} from 'vue'export default{ setup(props,{emit}){ const data = reactive({show:false}) function click_btn(){原创 2021-10-23 20:01:01 · 1334 阅读 · 0 评论