Vue3
项目地址:https://github.com/skywalk94/vite-demo.git
明知山_
这个作者很懒,什么都没留下…
展开
-
前端重新部署通知用户刷新
信息,不一致就触发更新操作。原创 2023-09-20 16:27:20 · 596 阅读 · 2 评论 -
Vue3统一导出局部组件和全局组件
文件夹标识为全局组件。原创 2023-09-08 11:53:39 · 1435 阅读 · 0 评论 -
Vue3使用递归组件封装El-Menu多级菜单
【代码】Vue3使用递归组件封装El-Menu菜单。原创 2023-09-04 10:17:47 · 2136 阅读 · 2 评论 -
Vue3封装函数组件(ElImageViewer)预览图片
/ api文档:https://element-plus.org/zh-CN/component/image.html#image-viewer-attributes。//自定义函数组件无法使用全局组件,需要单独引入。//传入createApp中移除节点的方法。// 监听显示的消失,需要移除dom。原创 2023-07-27 11:53:42 · 1216 阅读 · 0 评论 -
Vue3自定义全局指令
自定义的指令功能:根据传参判断是否显隐功能按钮。判断方法自己去实现,这里就不贴代码了。原创 2023-05-24 11:52:39 · 739 阅读 · 0 评论 -
Vue引入第三方字体
【代码】Vue引入第三方字体。原创 2023-05-16 14:20:51 · 554 阅读 · 0 评论 -
Vue3+vant4适配移动端
【代码】Vue3+vant4适配移动端。原创 2023-01-02 15:22:51 · 1029 阅读 · 0 评论 -
Vue3文件拖拽上传
【代码】Vue3文件拖拽上传。原创 2022-10-26 14:33:57 · 4139 阅读 · 2 评论 -
微前端qiankun接入Vite子应用含Vue3和React18
文件,进行单独的抽离。的,需要借助插件完成。的一样,就不贴代码了。原创 2022-10-20 17:16:14 · 1927 阅读 · 2 评论 -
Vue3+Vite+ElementPlus自定义主题色
安装sass在进行配置import {scss : {alias : {原创 2022-10-18 14:02:17 · 1643 阅读 · 3 评论 -
Vue3根据动态字段绑定v-model
因业务需要用到低代码,v-model绑定的是随机生成的。原创 2022-10-12 11:55:51 · 2289 阅读 · 0 评论 -
Vue3引入pinia状态管理
pinia中文文档pinia安装pinia在引入项目目录新建做个简单的数值递增可以自己任意命名类似id的意思,使用它来将连接到在中导入原创 2022-06-11 11:21:02 · 551 阅读 · 1 评论 -
Vue3实现图片滚轮缩放和拖拽
<template> <div ref="imgWrap" class="wrap" @mousewheel.prevent="rollImg"> <img :src="url" alt ref="image" @mousedown.prevent="moveImg" /> </div></template><script setup>import { ref } from 'vue'const.原创 2021-12-27 14:44:29 · 1881 阅读 · 0 评论 -
Vue3响应式provide、inject传值
在父组件定义一个响应式的值chat为要向子组件传递的值updateChat为子组件修改chat的方法const chat = ref(null)const updateChat = (item) => { console.log("重新拿到的值", item) chat.value = item}provide('chat', chat)provide('updateChat', updateChat)子组件修改const updateChat = inject('原创 2021-12-16 10:51:21 · 4697 阅读 · 0 评论 -
Vue3父子组件通信
子组件<template> <h1 @click="childClick">{{ title }}</h1> <button @click="updateFunc">修改父组件传递的值</button></template><script setup>import { defineProps, defineEmits, defineExpose } from "vue"defineProps({原创 2021-10-19 11:15:57 · 2391 阅读 · 0 评论 -
Vue3返回关闭弹窗不返回页面
//监听页面销毁之前 beforeDestroy() { window.removeEventListener( "popstate", e => { console.log(e); if (this.showPop) { this.showPop = false; } else { ...原创 2020-05-08 10:56:38 · 1965 阅读 · 0 评论 -
vite2+vant+postcss搭建移动端
安装vant和vite按需引入npm install vant -snpm install vite-plugin-style-import -Dvite.config.jsimport vue from '@vitejs/plugin-vue';import styleImport from 'vite-plugin-style-import';export default { plugins: [ vue(), styleImport({ libs: [原创 2021-05-21 16:42:49 · 949 阅读 · 1 评论 -
Vue3使用keep-alive实现组件缓存
<template> <router-view v-slot="{ Component }"> <keep-alive :include="includeList"> <component :is="Component" /> </keep-alive> </router-view></template><script lang="ts">import { ref, d原创 2021-04-07 13:48:32 · 1295 阅读 · 0 评论 -
Vue3+Vuex4实现组件公共状态
安装Vuex4.0以上版本npm install vuex@4.0.0 -s在src目录下新建store/index.js文件夹import { createStore} from 'vuex';export default createStore({ state: { num: 123 }});在main.js引入import { createApp} from 'vue'import App from './App.vue'im原创 2021-03-25 10:01:22 · 346 阅读 · 0 评论 -
Vue3传送门Teleport示例
teleportteleport可以让我们的子组件DOM不用嵌套在父组件的DOM中,但又可以继续访问父组件的值和方法子组件,用teleport包裹,这里的to对应的是App.vue里面的id<template> <teleport to="#title"> <div class="box"> <slot>标题</slot> </div> <div class="placehoder"&原创 2021-03-20 09:24:05 · 299 阅读 · 0 评论 -
vue3使用transition封装弹窗组件
弹窗缓慢向左移的动画.fadein { animation: fadein .5s;}@keyframes fadein { 0% { transform: translate(100%, 0); } 100% { transform: none; }}参照网站...原创 2019-12-07 15:37:38 · 1775 阅读 · 0 评论 -
Vue3+Vue-Router4.x实现路由跳转传参
安装路由,注意需要4.x版本npm install vue-router -s在main.js进行导入import { createApp} from 'vue'import App from './App.vue'import router from './router'const app = createApp(App)app.use(router)app.mount('#app')在src目录下新建router\index.jsimport { creat原创 2020-12-17 10:56:04 · 4752 阅读 · 8 评论 -
Vite2+Vue3初始化项目
构建命令npm init vite-app <project-name>cd <project-name>npm installnpm run dev打包上线先在文件夹根目录创建vite.config.js文件写入module.exports = { base: './'};执行npm run build把dist文件夹里面的文件上传到服务器...原创 2020-12-17 10:20:19 · 714 阅读 · 0 评论