2022-01-20：vue使用Jquery-contextmenu插件

Posted 2023-03-27

参考技术A npm i jquery-contextmenu --save-dev

import Jquery_contextmenu from '@//jquery-contextmenu'

import 'jquery-contextmenu/dist/jquery.contextMenu.css'

Vue.use(Jquery_contextmenu)

npm install jquery

我的jquery是最新版本："jquery": "^3.6.0"

顶部：const webpack = require('webpack')

module.exports =

    configureWebpack:

        plugins: [

              new webpack.ProvidePlugin(

                    $: 'jquery',

                    jQuery: 'jquery',

                    'windows.jQuery': 'jquery'

          )

        ]

      ,



import $ from 'jquery'

使用：

   $.contextMenu(

      selector: '.' + connInfo.id,  # 这里就是class类

      items:

        'delete':

          name: '删除',

          callback: function(key, opt)

            removeEdge(key)

         

       

     

    )

由于使用npm安装插件，所以只能在node_modules中jquery-contextmenu中进行修改，这里我将文件取出来放在components中作为组件使用，可以自定义格式。

从node_modules去除上图的文件，放到自己想放的目录。

然后在页面中引入：

import '@/components/contextMenu/jquery.contextMenu.css'

import '@/components/contextMenu/jquery.contextMenu.min.js'

这里需要注意的是，要把main.js中的引入包的语句删除或者注释掉（下面三句不要了）：

import Jquery_contextmenu from '@//jquery-contextmenu'

import 'jquery-contextmenu/dist/jquery.contextMenu.css'

Vue.use(Jquery_contextmenu)

在下面的文件中可以随意修改样式

/components/contextMenu/jquery.contextMenu.css'

此时依旧需要在页面中引入 import $ from  'jquery'

引入jquery-contextMenu：

https://www.yisu.com/zixun/168799.html

jquery官网：

https://jquery.com/download/

替换font图标：

https://blog.csdn.net/du_5pet/article/details/107781455?utm_medium=distribute.pc_relevant.none-task-blog-2~default~baidujs_title~default-0.pc_relevant_default&spm=1001.2101.3001.4242.1&utm_relevant_index=3

vue 怎么挂载swiper

参考技术A

在 Vue 中使用 swiper 有以下几种方式：

使用 Vue Swiper 插件：Vue Swiper 是一个基于 Swiper 的 Vue 组件，可以很方便地在 Vue 中使用 swiper。

使用 vue-awesome-swiper 插件： vue-awesome-swiper 是一个基于 Swiper 的 Vue 组件，可以很方便地在 Vue 中使用 swiper。

手动挂载 swiper:
a. 引入 swiper 的 css 和 js 文件。
b. 在 Vue 组件中手动初始化 swiper 实例。
c. 在 Vue 组件的 mounted 钩子函数中调用 swiper 实例的初始化方法。
d. 在 Vue 组件的 beforeDestroy 钩子函数中调用 swiper 实例的销毁方法。

建议你先查看你项目的说明文档来确定应该使用哪种方式使用swiper。