精华内容
下载资源
问答
  • vue 插件方式引入混入

    2021-07-14 14:38:05
    混入(mixin) ...通过全局方法Vue.use()使用插件,它需要在调用new Vue()启动应用之前完成:// 调用 `MyPlugin.install(Vue)` Vue.use(MyPlugin) new Vue({ // ...组件选项 }) 开发插件 Vue.js的

    混入(mixin)

    混入提供了一种非常灵活的方式,来分发vue组件中的可复用功能。一个混入对象可以包含任意组件选项,当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项。
    请谨慎使用全局混入,因为它会影响每个单独创建的 Vue 实例 (包括第三方组件)。大多数情况下,只应当应用于自定义选项,就像上面示例一样。推荐将其作为插件发布,以避免重复应用混入。

    1. 钩子函数合并
      同名钩子将混合为一个数组,因此都将被调用。混入对象的钩子函数在组件自身钩子函数之前调用。
    2. 数据对象合并
      数据对象在内部会进行递归合并,在发生冲突时以组件数据优先。
    3. 普通方法合并
      当混合值为对象的选项时,例如methods、components、directive,将被混合为同一个对象,两个对象键名冲突时,取组件对象的键值对。

    插件

    插件通常用来为vue添加全局功能。

    1. 使用插件
      通过全局方法Vue.use()使用插件,它需要在调用new Vue()启动应用之前完成:
      // 调用 `MyPlugin.install(Vue)`
      Vue.use(MyPlugin)
      
      new Vue({
        // ...组件选项
      })
      
    2. 开发插件
      Vue.js的插件应该暴露一个install方法,这个方法的第一个参数是Vue构造器,第二个参数是一个可选的选项对象

    数据字典的引入

    整体结构:
    在这里插入图片描述

    1. 数据字典来源
      在resource.js中,导出数据:
      const baseDict = {
          dataStatus:{
              0:'待触发',
              1:'执行中',
              2:'已完成'
          },
          taskStatus:{
              0: '审核中',
              1: '已发布',
              2: '未通过',
          }
      }
      
      export default {
          ...baseDict
      }
      
    2. dict类处理
      dict.js中,创建类Dict
      import resource from './resource'
      
      export default class Dict {
          constructor(dict){
              this.dict = dict
          }
      
          init(dicts,Vue){
              if(dicts && dicts instanceof Array){
                  dicts.forEach(item => {
                      Vue.set(this.dict,item,resource[item])
                  })
              }
          }
      }
      
    3. 创建插件,使用mixin
      在index.js中,导出插件
      import Dict from './dict'
      
      let dictPlugin = {}
      dictPlugin.install = function(Vue) {
          Vue.mixin({
              data(){
                  return{
                      dict:{}
                  }
              },
              created(){
                  new Dict(this.dict).init(this.$options.dicts,Vue)
              }
          })
      }
      export default dictPlugin
      
    4. 引入插件
      main.js中,使用插件:
      import dictPlugin from './components/Dict'
      Vue.use(dictPlugin)
      
    5. 组件中使用
      在这里插入图片描述
    展开全文
  • 前言话不多说,有时候你还是真的需要在Vue中使用某些好用的jQuery插件,这时候为了使用这个插件,犯不着全局引入jQuery,所以还要局部引入,怎么做呢?以ion-rangeslider举例我在我写的《谁说在Vue.js里不能使用...

    前言

    话不多说,有时候你还是真的需要在Vue中使用某些好用的jQuery插件,这时候为了使用这个插件,犯不着全局引入jQuery,所以还要局部引入,怎么做呢?

    以ion-rangeslider举例

    我在我写的《谁说在Vue.js里不能使用jQuery?!》(https://www.jianshu.com/p/c10219c01e14)里提到过一个插件,叫ion-rangeslider,它的引入方式很简单:import就完事。

    以jcanvas举例

    jcanvas是基于jQuery的canvas绘图工具,怎么局部引入它呢?

    在vue中使用,道理上说import就完事,但是在jcanvas这就不行,因为jcanvas找不到全局的window.jQuery对象,所以使用的时候会报错。应该怎么做?

    import $ from "jquery";

    import jcanvas from 'jcanvas'; // 以上两行没什么可说的

    jcanvas($, window); // 关键是这一行

    这时候就可以在mounted里直接使用了:

    $("canvas").drawArc({

    fillStyle: "black",

    x: 100,

    y: 100,

    radius: 50,

    });

    为什么ion-rangeslider能import之后就完事?因为ion-rangeslider会检查局部作用域的jQuery变量是否存在,比jcanvas考虑的更全面。jcanvas只检查window上是否有jQuery对象,没有的话就无法给jQuery挂插件。

    展开全文
  • [vue] vue在组件中引入插件方法有哪些? 插件通常用来为 Vue 添加全局功能。插件的功能范围没有严格的限制——一般有下面几种: 添加全局方法或者属性。如: vue-custom-element 添加全局资源:指令/过滤器/过渡...

    [vue] vue在组件中引入插件的方法有哪些?

    插件通常用来为 Vue 添加全局功能。插件的功能范围没有严格的限制——一般有下面几种:
    
        添加全局方法或者属性。如: vue-custom-element
        添加全局资源:指令/过滤器/过渡等。如 vue-touch
        通过全局混入来添加一些组件选项。如 vue-router
        添加 Vue 实例方法,通过把它们添加到 Vue.prototype 上实现。
        一个库,提供自己的 API,同时提供上面提到的一个或多个功能。如 vue-router
    
    示例:安装 ElementUI
    
        安装:yarn add element-ui
    
        引入,在 main.js 中写入以下内容:
    
        import Vue from 'vue'
        import App from './App.vue'
        import ElementUI from 'element-ui';
        import 'element-ui/lib/theme-chalk/index.css';
    
        Vue.config.productionTip = false
        Vue.use(ElementUI);
        new Vue({
          render: h => h(App),
        }).$mount('#app')
    
        在组件中使用:
    
        <template>
          <div>
            <Button>Button</Button>
          </div>
        </template>
    
        <script>
        import { Button } from 'element-ui';
    
        export default {
          components: {
            Button
          }
        };
        </script>
    
    
    

    个人简介

    我是歌谣,欢迎和大家一起交流前后端知识。放弃很容易,
    但坚持一定很酷。欢迎大家一起讨论

    主目录

    与歌谣一起通关前端面试题

    展开全文
  • 插件文件 引入 import printJS from "@/plugin/print-js"; 样例 UI用的是ElementUI <el-row class="btnInfo"> <el-button class="submitBtn" type="primary" @click="beforePrint"> 批量打印预览 &...

    引入

    官网链接:https://printjs.crabbly.com/
    直接放插件文件

    import printJS from "@/plugin/print-js";
    

    或者

    npm install print-js --save
    import printJS from 'print-js'
    

    样例

    UI用的是ElementUI

    <el-row class="btnInfo">
      <el-button class="submitBtn" type="primary" @click="beforePrint">
        批量打印预览
      </el-button>
    </el-row>
    <el-dialog
      title="打印预览"
      :visible.sync="dialogVisible"
      class="bank-dialog"
      width="820px"
      :closeOnClickModal="false"
      :closeOnPressEscape="false">
      <div id="print_table_batch" style="">
        <!-- 这个是循环打印多个单据,一页放两张单据 -->
        <div v-for="(item, index) in multipleSelection.length === 0 ? []  : multipleSelection" :key="index">
          <div :style="{'page-break-after': index % 2 == 0 && index !== 0 ? 'always' : ''}"></div>
          <!-- 这个是要打印的内容组件 -->
          <verifiedResult :tableTitle="tableTitle" :tableData="item" :printMode="false"></verifiedResult>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="print">打印</el-button>
      </span>
    </el-dialog>
    
    
    //在print方法中执行打印,printable对应的id就是要打印的内容上面的div的id,打印的就是div包含的html内容,内容的样式在style里写。
    print() {
      this.dialogVisible = false;
      this.$nextTick(() => {
        printJS({
          printable: "print_table_batch",
          type: "html",
          style: `
          .boxWrap{
            margin-bottom: 10px;
          }
          .verifiedTable{
            width:100%;
            border-collapse: collapse;
            table-layout: fixed;
          }
          .verifiedTitle{
            text-align: center;
            margin: 5px 0;
          }
          .verifiedTh_img{
            width: 82px;
            height: 20px;
            vertical-align: middle;
            margin-right:10px;
          }
          .verifiedTh_img_singed{
            width: 80px;
            height: 50px;
          }
          .verifiedTh_title{
            display: inline-block;
            vertical-align: middle;
            line-height: 20px;
            font-weight: 600;
          }
          td{
            border:1px solid #ccc;
            padding:4px;
            height: 16px;
            word-break: break-word;
            font-size: 12px;
          }
          .verifiedTd{
            width:20%;
            text-align: center;
            word-break: normal;
          }
          .verifiedTd_in{
            width:8%;
            text-align: center;
          }
          .text {
                color: #ff0000;
                padding-left: 10px;
            }
          .btnInfo{
              display: none;
          }`
        });
      });
    }
    

    看博文Print.js javascript库 实现页面打印

    展开全文
  • 首先安装vditor npm install vditor --save 在组件中使用 <template>...import { defineProps, ref, onMounted } from "vue"; import Vditor from "vditor"; import "vditor/dist/index.css"; const
  • vue tinymce富文本插件引入 vue版本 2.6 tinymce版本 4.9.10 1.安装tinymce 根据官网的安装教程 For Vue.js 3.x users: $ npm install --save "@tinymce/tinymce-vue@^4" For Vue.js 2.x users: $ npm install --...
  • vue typescript 全局插件
  • IDEA 引入VUE项目

    2021-01-27 00:40:01
    1. 环境准备1.1 电脑上安装node.js安装方法:官网下载https://nodejs.org/en/LTS长期支持版。安装完成后在命令行输入 node -v 查看安装版本。nodejs的安装同时也会安装npm,输入 npm -v 查看安装版本。1.2安装cnpm...
  • 本文为大家分享了vue微信分享插件的使用方法,供大家参考,具体内容如下1.安装weixin-js-sdknpm install weixin-js-sdk2.创建文件并引入在src下创建common目录在common目录下创建wxshare.js3.在wxshare.js中编写插件...
  • configureWebpack: config => { config.externals = { AMap: "window.AMap", } }
  • 首先,怎么引入jQuery?查了一些资料,步骤是这样的:(1)首先在package.json中加入jQuery依赖,然后npm install jQuery --save安装依赖;(2)在build文件夹下找到webpack.base.conf.js文件,添加var webpack=require...
  • vue.js引入外部CSS样式和外部JS文件的方法学习Vue.js动画时,需要引入一个animate.css,如何全局引入外部文件呢?一.引入外部CSS样式文件1. 在app.vue中下直接引入对应的路径使用@import引入外部css,作用域是全局的...
  • ES6的引入方式:.vue文件中css文件引入@import "../assets/common/common.css";//自定义.css的样式路径js文件的引入在main.js中:import API ...P.S.:传统上,引入css样式的三种方法:1.使用link来调用外部的css...
  • Vue项目中如何引入Toast插件 安装vue2-toast: npm install vue2-toast -S 在main.js中全局导入vue2-toast import 'vue2-toast/lib/toast.css'; import Toast from 'vue2-toast'; Vue.use(Toast); 或者...
  • 方法一:配置 webpack ProvidePlugin 全局引入假设要使用到 jquery,那么可以通过配置 webpack 的 ProvidePlugin 的插件来全局引入:new webpack.ProvidePlugin({$: 'jquery',jQuery: 'jquery'})方法二:包装成插件...
  • 一文读懂Vue插件使用

    2021-08-10 08:44:08
    Vue插件开发简介钩子函数钩子函数参数动态指令参数函数简写对象字面量项目中使用根据权限判断相关按钮是否展示Vue源码学习目录 你越是认真生活,你的生活就会越美好——弗兰克·劳埃德·莱特 《人生果实》经典语录 ...
  • vue引入swiper vue使用swiper vue脚手架使用swiper /引入js文件/引入css文件----------------------------------------------------------转载文章请注明出处!---------------------------------------------------...
  • vue 引入依赖的方法

    千次阅读 2021-04-21 16:05:54
    1.1 在vue的入口页面index.html中引入网络文件 例如: <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script> 1.2 在根目录下的build/webpack.base...
  • 1.如何引入vue-cli里,引入文件有几钟方法一种是用npm或者cnpm指令去下载对应的插件,然后在main.js里用import方法引入,这里不讨论这种方法我比较喜欢采用的是直接下载对应的js,然后引入vue项目中去问题来了,...
  • vue3引入element-plus

    2021-08-09 23:09:14
    在idea中直接通过命令安装会出现管理员权限问题 npm install element-plus --save 所以我只能通过用管理员的形式打开命令符,然后读到该项目的文件夹下来通过命令进行安装。 安装完毕后需要在main.js里面加上代码...
  • vue项目中引入bootstrap?下面本篇文章给大家介绍一下。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。 相关教程推荐:《bootstrap教程》 在 vue 项目中引入 bootstrap,首先要引入两个依赖:...
  • 如何编写Vue插件

    2021-11-18 23:43:29
    通过Vue插件我们可以实现一些Vue框架没有的功能,也可以使用别人写好的插件,来帮助我们更快速的实现一些功能。 插件的功能范围并没有严格的要求,根据官方的示例来说,一般有下面几种: 添加全局方法或者属性,如...
  • vue中如何引入全局样式或方法

    千次阅读 2020-12-20 11:51:14
    我们一般将公用的方法分装再utils.js文件中,然后再main.js主入口文件中将utils.js中的公共的方法通过@import引入进来即可,或者我们通过再main.js中设置Vue.prototype.xxx = function () {};来设置全局通用的 方法...
  • ​​​​​​​引入代码如下 跟着官方走的 全局引入, 局部组件中引入,包括降版本都试了 故障依旧 一直都是 如上图所示的错误,不知道是不是 官方代码写错了 还是我差了什么参数没给,求助 懂的大神请评论区留言 ...
  • vue引入vue-xss

    2021-05-14 16:18:44
    1、下载依赖:npm install vue-xss --save 2、main.js import VueXss from 'vue-xss' Vue.use(VueXss) 3、使用 在js中 let message = xxx message = this.$xss(message) 在html中 <div v-html="$xss...
  • vue引入echarts的两种方式

    千次阅读 2021-04-20 11:03:11
    a:全局引入 main.js页面 import echarts from 'echarts' Vue.prototype.$echarts = echarts Hello.vue页面 <div id="myChart" :style="{width: '300px', height: '300px'}"></div> <script&...
  • ## 有些需要保密安全的项目,需要在内网环境开发,在没有网络的情况下如何安装idea插件正是本文所讲内容 一 . 下载所需插件(需要和自己idea版本相对应,需在有网络环境下完成) 1.打开idea选择file-setting 2.选择...
  • 2:创建一个用轮播的组件:例如SwiperImage.vue 3: main.js文件中 引入以下文件 import 'swiper/dist/css/swiper.min.css' import 'swiper/dist/js/swiper.min.js' 3: 组件中模板的代码如下 <template> &...
  • vue-cli项目中import引入vue-pdf插件报错, 报错内容 pdfjs-dist/es5/build/pdf.js in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 52,505
精华内容 21,002
关键字:

vue插件引入方法

vue 订阅