vue3 + vite全局引入element-plus后使用 Message 消息提示

news2025/1/8 22:49:49

安装Element plus：

pnpm install element-plus

安装unplugin-element-plus

 自动导入组件

pnpm i -D unplugin-auto-import

pnpm install -D unplugin-element-plus

vite.config.ts 

使用plugins数组里配置，自动导入

import { fileURLToPath, URL } from 'node:url'

import { ConfigEnv, defineConfig, loadEnv, UserConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'

import AutoImport from 'unplugin-auto-import/vite'
import Icons from 'unplugin-icons/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers' //引入api自动导入插件
import IconsResolver from 'unplugin-icons/resolver'
import ElementPlus from 'unplugin-element-plus/vite'

import UnoCSS from 'unocss/vite'

// https://vitejs.dev/config/
export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
  const env = loadEnv(mode, process.cwd())
  return {
   //..
    plugins: [
      vue(),
      vueJsx(),
      UnoCSS(),
      ElementPlus({}),
      AutoImport({
        imports: ['vue', 'vue-router'],
        resolvers: [ElementPlusResolver(), IconsResolver({})],
        // 在src目录下生成一个指令文件存放各种全局指令
        dts: 'src/typings/auto-import.d.js'
      }),
      // 自动注册组件
      Components({
        resolvers: [ElementPlusResolver(), IconsResolver()],
        // dts: fileURLToPath(new URL('./types/components.d.ts', import.meta.url))
        dts: "src/typings/components.d.ts",
      }),
      Icons({
        autoInstall: true
      })
    ],
    resolve: {
      alias: {
        '@': fileURLToPath(new URL('./src', import.meta.url))
      }
    }
  }
})

视图xx.vue页面中直接使用： 

ElMessage.warning('级别最大只能为2')

案例源码AllTreeView.vue

<template>
  <div class="about">
    <h1>This is an Login page</h1>
    <br/>
    <el-divider/>
    <h4>树结构控制·</h4>

    <el-text></el-text>
    <el-divider/>
    <el-tree
      ref="menutree"
      style="max-width: 600px"
      :allow-drop="allowDrop"
      :allow-drag="allowDrag"
      :data="treeData"
      draggable
      :expand-on-click-node="false"
      default-expand-all
      node-key="id"
      @node-drag-start="handleDragStart"
      @node-drag-enter="handleDragEnter"
      @node-drag-leave="handleDragLeave"
      @node-drag-over="handleDragOver"
      @node-drag-end="handleDragEnd"
      @node-drop="handleDrop"
      class="tree"
    >
      <template #default="{ node, data }">
        <div class="custom-tree-node1">
          <div>{{ node.label }}</div>
          <div style="margin-left: 40px;">
            <el-button type="text" size="mini" v-if="data.up"
                       @click="menuMoveF(node, data, 'up')">上移<i class="el-icon-top"></i></el-button>
            <el-button
              type="text" size="mini" v-if="data.down"
              @click="menuMoveF(node, data, 'down')">下移
              <i class="el-icon-bottom"></i></el-button>
          </div>
          <div style="margin-left: 20px;">
            <el-button @click="append(node,data)" type="primary" v-if="data.subNode"> 添加子级</el-button>
            <el-button style="margin-left: 18px" @click="remove(node, data)" v-if="data.delete"> 删除</el-button>
          </div>
        </div>
      </template>
    </el-tree>

  </div>
</template>
<script setup lang="ts">
import {userStore} from "@/stores/user.ts";
import {storeToRefs} from "pinia";

import type Node from 'element-plus/es/components/tree/src/model/node'
import type {DragEvents} from 'element-plus/es/components/tree/src/model/useDragNode'
import type {AllowDropType, NodeDropType,} from 'element-plus/es/components/tree/src/tree.type'
import _, {cloneDeep} from "lodash";
import {ElMessage} from "element-plus";

const handleClick = () => {
  msg.value = msg.value + ',hello'
  alert('点了一下了55555~~~')
}
const msg = ref('hello')

//获取当前登录的用户信息，pinia全局变量store
const store = userStore() //返回一个Proxy object
console.log('|--user store', store)// 拿pinia 里真正的全局对象数据

console.log('|--user  store to refs', storeToRefs(store))// 拿pinia 里真正的全局对象数据
const {userInfos} = storeToRefs(store); // 返回对象，解构出来的userInfos， 是响应式的proxy(object)


// 移动点击函数(node：当前节点，data：当前节点的data，type：区分上下移动)
function menuMoveF(node, data, type) {
  console.log('|--node', node)
  // 将变动之前的node备份
  let copyNode = {...node};
  copyNode = cloneDeep(node)
  // copyNode.previousSibling = {...node.previousSibling};
  // copyNode.nextSibling = {...node.nextSibling};
  console.log('|--copyNode', copyNode)
  window.sessionStorage.setItem(
    "menuNode",
    // copyNode
    // CircularJSON.stringify(copyNode)
    JSON.stringify(copyNode)
    // _.cloneDeep(copyNode).toString()
    // _.cloneDeep(copyNode)
  );
  console.log('|--', _.cloneDeep(copyNode))
  let nodeData = {};
  console.log('|-  window.sessionStorage.getItem("menuNode")', window.sessionStorage.getItem("menuNode"))
  if (type === "up") {
    // 上移
    if (node.previousSibling) {

      this.$refs.menutree.remove(node.data);// 删除原先的node
      // 拿到copy的node
      // nodeData = CircularJSON.parse(
      nodeData = JSON.parse(
        window.sessionStorage.getItem("menuNode")
      );
      console.log('|--nodedata', nodeData)
      // 复制该node到指定位置(参数：1. 要增加的节点的 data 2. 要增加的节点的后一个节点的 data、key 或者 node)
      this.$refs.menutree.insertBefore(
        nodeData.data,
        nodeData.previousSibling.data
      );
      window.sessionStorage.removeItem("menuNode");
    } else {
     E("该菜单已经是当前层最上级");
    }
  } else {
    // 下移
    if (node.nextSibling) {
      this.$refs.menutree.remove(node.data);
      nodeData = CircularJSON.parse(
        window.sessionStorage.getItem("menuNode")
      );
      // 参数：1. 要增加的节点的 data 2. 要增加的节点的前一个节点的 data、key 或者 node
      this.$refs.menutree.insertAfter(
        nodeData.data,
        nodeData.nextSibling.data
      );
      window.sessionStorage.removeItem("menuNode");
    } else {
     ElMessage.warning("该菜单已经是当前层最下级");
    }
  }
}

const handleDragStart = (node: Node, ev: DragEvents) => {
  console.log('drag start', node)
}
const handleDragEnter = (
  draggingNode: Node,
  dropNode: Node,
  ev: DragEvents
) => {
  console.log('tree drag enter:', dropNode.label)
}
const handleDragLeave = (
  draggingNode: Node,
  dropNode: Node,
  ev: DragEvents
) => {
  console.log('tree drag leave:', dropNode.label)
}
const handleDragOver = (draggingNode: Node, dropNode: Node, ev: DragEvents) => {
  console.log('tree drag over:', dropNode.label)
}
const handleDragEnd = (
  draggingNode: Node,
  dropNode: Node,
  dropType: NodeDropType,
  ev: DragEvents
) => {
  console.log('|--拖拽完成，位置未改变，null none--|--tree drag end:', dropNode && dropNode.label, dropType)

}
/*
* 拖拉松开，item移动完成
* */
const handleDrop = (
  draggingNode: Node,
  dropNode: Node,
  dropType: NodeDropType,
  ev: DragEvents
) => {
  console.log('|--结点放下tree drop:', dropNode.label, dropType)
  return false
}
const allowDrop = (draggingNode: Node, dropNode: Node, type: AllowDropType) => {
  console.log('|--正在拖拽draggingNode', draggingNode)
  console.log('|--dropNode', dropNode)
  if (dropNode.level >= 2) {
    return false
  }
  if (dropNode.data.label === 'Level two 3-1') {
    console.log('|--不允许放到：Level two 3-1')
    return type !== 'inner'
  } else {
    return true
  }
}
const allowDrag = (draggingNode: Node) => {
  return !draggingNode.data.label.includes('Level three 3-1-1')
}

const treeData = ref([
  {
    label: 'Level one 1',
    up: false, down: true, subNode: true, delete: false,
    children: [
      {
        label: 'Level two 1-1',
        up: false, down: true, subNode: true, delete: true,
      },
    ],
  },
  {
    label: 'Level one 2',
    up: false, down: true, subNode: true, delete: true,
    children: [
      {
        label: 'Level two 2-1',
        up: false, down: true, subNode: false, delete: true,
      },
      {
        label: 'Level two 2-2',
      },
    ],
  },
  {
    label: 'Level one 3',
    up: false, down: true, subNode: true, delete: true,
    children: [
      {
        label: 'Level two 3-1',
        up: false, down: true, subNode: false, delete: true,
      },
      {
        label: 'Level two 3-2',
        up: false, down: true, subNode: false, delete: true,
      },
    ],
  },
])
let id = 1000;


//添加节点
function append(node, data) {
  console.log('|--添加', node, data)
  if (node.level >= 2) {
    ElMessage.warning('级别最大只能为2')
    return
  }
  const newChild = {id: id++, label: '级别2' + id, children: [], up: true, down: true, subNode: false, delete: true,}
  if (!data.children) {
    data.children = []
  }
  data.children.push(newChild)
}

//移除节点
function remove(node, data) {
  const parent = node.parent;
  const children = parent.data.children || parent.data;
  const index = children.findIndex((d) => d.id === data.id);
  children.splice(index, 1);
}

</script>

<style>
@media (min-width: 1024px) {
  .about {
    min-height: 100vh;
    display: flex;
    align-items: center;
    flex-direction: column;
  }
}

.el-tree .el-tree-node__content {
  height: 50px !important;
  border-top: 1px solid #aaa;
  min-width: 500px;
}

.tree {
  border-bottom: 1px solid #aaa;
  border-left: 1px solid #aaa;
  border-right: 1px solid #aaa;
}

.custom-tree-node1 {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding: 8px;
  height: 50px;
}
</style>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1498138.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【应用多元统计分析】--多元数据的描述和展示（R语言）

【应用多元统计分析】--多元数据的描述和展示（R语言）

一元随机变量 我们用协方差来刻画两个变量的相关关系&#xff0c;这里指的是线性相关关系。 对于一元随机变量的可视化最简单的就是散点图&#xff0c;大致可以看出X和Y之间的相关关系。如果想更好的看X、Y之间的相关关系&#xff0c;可以画二维的散点图。 总结&#xff1a; 均…
阅读更多...
蓝桥杯物联网竞赛_STM32L071_11_知识体系的查漏与补缺

蓝桥杯物联网竞赛_STM32L071_11_知识体系的查漏与补缺

太久没学单片机了&#xff0c;再重新过一遍查漏补缺&#xff0c;对其中之前没怎么在意的&#xff0c;而现在又发觉的问题进行再分析与补充 1. debug serial wire是干什么用的 这个东西我勾选不勾选都对我的程序没有什么影响&#xff0c;我很好奇是干什么用的&#xff0c;网上查…
阅读更多...
【PCIe】初识PCIe

【PCIe】初识PCIe

&#x1f525;博客主页&#xff1a;[PannLZ] &#x1f618;欢迎关注&#xff1a;&#x1f44d;点赞&#x1f64c;收藏✍️留言 文章目录 PCIe简介PCIe速度 PCIe简介 计算机内部有很多电子元器件&#xff0c;他们之间会有数据沟通和传输的需求。如果A元件想给B元件传输数据&am…
阅读更多...
JavaWeb04-Request，Response

JavaWeb04-Request，Response

目录 一、Request&#xff08;请求&#xff09; 1.作用 2.继承体系 3.获取请求数据 &#xff08;1&#xff09;请求行 &#xff08;2&#xff09;请求头 &#xff08;3&#xff09;请求体&#xff08;POST&#xff09; &#xff08;5&#xff09;Request通用方式获取请求…
阅读更多...
Unity用Shader将一张图片变成描边图片素描风格。

Unity用Shader将一张图片变成描边图片素描风格。

环境&#xff1a; unity2021.3.x 效果&#xff1a; 实现核心思路(shader)&#xff1a; fixed4 frag (v2f i) : SV_Target {fixed4 col tex2D(_MainTex, i.uv);// 调整相似度bool isRedMatch abs(col.r - _TargetColor.r) < 0.15;bool isGreenMatch abs(col.g - _Target…
阅读更多...
消息队列-Kafka-如何进行顺序消费

消息队列-Kafka-如何进行顺序消费

全局有序 只有 1 个分区&#xff0c;那这个时候就是能够保证消息的顺序消费。 分区有序 如果我们还是想同时消费多个分区并且保证有序&#xff0c;这个时候我们需要将需要保证顺序的消息路由到同一个分区。 在发送消息的时候我们可以看到&#xff1a; 上面的代码定义了消息…
阅读更多...
【R语言实战】聚类分析及可视化

【R语言实战】聚类分析及可视化

&#x1f349;CSDN小墨&晓末:https://blog.csdn.net/jd1813346972 个人介绍: 研一&#xff5c;统计学&#xff5c;干货分享          擅长Python、Matlab、R等主流编程软件          累计十余项国家级比赛奖项&#xff0c;参与研究经费10w、40w级横向 文…
阅读更多...
【自然语言处理】BitNet b1.58：1bit LLM时代

【自然语言处理】BitNet b1.58：1bit LLM时代

论文地址&#xff1a;https://arxiv.org/pdf/2402.17764.pdf 相关博客 【自然语言处理】【大模型】BitNet&#xff1a;用1-bit Transformer训练LLM 【自然语言处理】BitNet b1.58&#xff1a;1bit LLM时代 【自然语言处理】【长文本处理】RMT&#xff1a;能处理长度超过一百万t…
阅读更多...
【Vue】sessionStorage存取数据

【Vue】sessionStorage存取数据

一. 需求 1.1 模板 Vab Admin Pro 1.2 组件 ElementUI 1.3 阐述 列表页面搜索【关键词】点击【查询】后&#xff0c;点击【查看】按钮跳转到【详情页】&#xff0c;详情页【返回】【保留原搜索关键词】 原图 搜索查询【关键词】 详情 返回后【保留】【搜索查询关键词…
阅读更多...
一次简单操作代替所有异常处理

一次简单操作代替所有异常处理

一、背景 在服务端处理前端发过来的响应的时候&#xff0c;开发者不可能穷尽用户的所有奇怪的操作。除此之外&#xff0c;我们还需要应付前端人员对我们的无情吐槽&#xff0c;你对XXXX请求返回的为啥是奇怪的响应数据呢&#xff1f;于是全局异常处理应运而生&#xff0c;一次处…
阅读更多...
Java面试篇【并发编程·进阶】常见面试题（2024最新）

Java面试篇【并发编程·进阶】常见面试题（2024最新）

并发常见面试题进阶 1.synchronized synchronized关键字解决的是多线程之间访问资源的同步性&#xff0c;synchronized关键字可以保证被它修饰的方法或者代码块在任意时刻只能被一个线程执行。 监视器锁&#xff08;monitor&#xff09;是依赖于底层的操作系统的 Mutex Lock来…
阅读更多...
回溯算法07-子集(Java/子集问题)

回溯算法07-子集(Java/子集问题)

.子集 题目描述 给你一个整数数组 nums &#xff0c;数组中的元素 互不相同 。返回该数组所有可能的子集&#xff08;幂集&#xff09;。解集 不能 包含重复的子集。你可以按 任意顺序 返回解集。 示例 1&#xff1a; 输入&#xff1a;nums [1,2,3] 输出&#xff1a;[[],[…
阅读更多...
通过vue ui创建项目

通过vue ui创建项目

确认前端环境都安装好之后 打开黑窗口 输入 vue ui 会打开一个vue的网页 在此创建项目 可以选择在那个路径创建 这是我的项目配置 这里是选择vue版本 我要用的是vue2 选好点击创建项目就好了 创建好后的重点的目录结构以及结构的作用 启动前端工程 将创建好的项目导入编译器 我…
阅读更多...
自动化测试po模式是什么?自动化测试po分层如何实现?

自动化测试po模式是什么?自动化测试po分层如何实现?

一、什么是PO模式 全称&#xff1a;page object model 简称&#xff1a;POM/PO PO模式最核心的思想是分层&#xff0c;实现松耦合&#xff01;实现脚本重复使用&#xff0c;实现脚本易维护性&#xff01; 主要分三层&#xff1a; 1.基础层BasePage&#xff1a;封装一些最基…
阅读更多...
通义灵码-智能编码辅助工具

通义灵码-智能编码辅助工具

1.介绍 通义灵码&#xff0c;是阿里云出品的一款基于通义大模型的智能编码辅助工具&#xff0c;提供行级/函数级实时续写、自然语言生成代码、单元测试生成、代码注释生成、代码解释、研发智能问答、异常报错排查等能力&#xff0c;并针对阿里云 SDK/OpenAPI 的使用场景调优&a…
阅读更多...
C++并发编程 -5. 基于锁实现线程安全的队列和栈容器

C++并发编程 -5. 基于锁实现线程安全的队列和栈容器

如何通过互斥锁和条件变量构建线程安全的队列&#xff08;栈&#xff09; 在C并发编程 -2.线程间共享数据 已经介绍过构建线程安全的栈&#xff0c;现在重新回顾。 一.构建线程安全的栈 1.异常发生在接口处 有时候我们可以将对共享数据的访问和修改聚合到一个函数&#xff0c…
阅读更多...
YoloV8改进策略：Block改进|自研Block，涨点超猛

YoloV8改进策略：Block改进|自研Block，涨点超猛

参考模型 参考的Block，如下图： 我对Block做了修改，修改后的结构图如下： 代码详解 from timm.models.layers import DropPathfrom torch import Tensor def channel_shuffle(x: Tensor, groups: int
阅读更多...
Unity Samples和帧动画的问题

Unity Samples和帧动画的问题

拖动序列帧图片和自己创建clip的帧率不同 我今天在创建帧动画的时候用了两种方式第一种是直接拖动序列帧图片到Hierachy&#xff0c;然后生成的第二种是这样我发现两者播放的动画速率不一样最后查了半天查不到原因。最后发现是Samples的原因&#xff0c;而且Unity把Samples这个…
阅读更多...
Vision Transformer结构解析

Vision Transformer结构解析

Vision Transformer结构解析 ViT简介ViT三大模块ViT图像预处理模块——PatchEmbed多层Transformer Encoder模块MLP&#xff08;FFN&#xff09;模块 基本的Transformer模块Vision Transformer类的实现Transformer知识点 ViT简介 Vision Transformer。transformer于2017年的Att…
阅读更多...
【操作系统概念】 第7章：死锁

【操作系统概念】 第7章：死锁

文章目录 0.前言7.1 系统模型7.2 死锁特征7.2.1 必要条件7.2.2 资源分配图 7.3 死锁处理方法7.4 死锁预防&#xff08;deadlock prevention&#xff09;7.4.1 互斥7.4.2 占有并等待7.4.3 非抢占7.4.4 循环等待 7.5 死锁避免&#xff08;deadlock-avoidance&#xff09;7.5.1 安…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023