精华内容
下载资源
问答
  • VUE插件引入

    2019-08-16 13:59:59
    首先提出官网链接,但是官网给的比较笼统,没有示例代码,所以下面的这个视频代码就好一些。 总的说,使用结构如下,部分可以没有,最下方的代码是实例代码 ... 添加全局方法或属性 使用时 Vue.myGlobalM...

    https://cn.vuejs.org/v2/guide/plugins.html
    首先提出官网链接,但是官网给的比较笼统,没有示例代码,所以下面的这个视频代码就好一些。
    总的说,使用结构如下,部分可以没有,最下方的代码是实例代码

    MyPlugin.install = function (Vue, options) {
      // 1. 添加全局方法或属性
       //使用时 Vue.myGlobalMethod(传入参数)
      Vue.myGlobalMethod = function () {
        // 逻辑...
      }
    
      // 2. 添加全局资源   
      //使用时在标签中加入<a v-my-directive></a>就可以使用,注意v-
      Vue.directive('my-directive', {
        bind (el, binding, vnode, oldVnode) {
          // 逻辑...
        }
        ...
      })
    
      // 3. 注入组件选项
      使用时直接 this.方法或者数据   这个是混入
      Vue.mixin({
        created: function () {
          // 逻辑...
        },
        methods: {
        },
        data: function () {
    		return {
      			message: 'hello',
      			foo: 'abc'
    }
    

    }

        ...
      })
    
      // 4. 添加实例方法
      axios的封装方法fetch就可以在这里传入
      Vue.prototype.$myMethod = function (methodOptions) {
        // 逻辑...
      }
    }
    

    https://www.jb51.net/article/144879.htm
    在这里插入图片描述

    注意里面报了指令 方法 混入还可以通过传参控制是否有部分方法
    https://www.bilibili.com/video/av60670516?from=search&seid=9204299765244438636

    l
    myPlugin.js文件

    et MyPlugin = {};
    MyPlugin.install = function (Vue, options) {
      // 1. 添加全局方法或属性 注意实例方法就是这个小的VUE实例,通过prototype传来的,this点出来,而1的全局方法是VUE的用Vue来点出来
      Vue.myGlobalMethod = function () {
        // 逻辑...
        console.log('myGlobalMethod')
      }
    
      // 2. 添加全局资源
      Vue.directive('my-directive', {
        bind (el, binding, vnode, oldVnode) {
          // 逻辑...
        }
      })
    
      // 3. 注入组件
      Vue.mixin({
        created: function () {
          // 逻辑...
        }
      })
    
      // 4. 添加实例方法  注意实例方法就是这个小的VUE实例,通过prototype传来的,this点出来,而1的全局方法是VUE的用Vue来点出来
      Vue.prototype.$myMethod = function (methodOptions) {
        // 逻辑...
        console.log('myMethod')
      }
    }
    export default MyPlugin
    

    App.vue代码 使用

    </template>
    <script>
        import Vue from 'vue'
        import MyPlugin from './myPlugin'
        Vue.use(MyPlugin)
        
        export default {
            data() {
                return {
                }
            },
            methods: {
            },
            mounted: function(){
                this.$myMethod();
                Vue.myGlobalMethod(); 
            }
        }
    </script>
    
    展开全文
  • 安装npm install vue-video-player --save引入可以全局引入插件,也可以在需要用到该插件的组件内单独引入(二选一)【1】全局引用, 在main.js里面导入并引用import VideoPlayer from 'vue-video-player'import 'vue-...

    安装

    npm install vue-video-player --save

    引入

    可以全局引入插件,也可以在需要用到该插件的组件内单独引入(二选一)

    【1】全局引用, 在main.js里面导入并引用

    import VideoPlayer from 'vue-video-player'

    import 'vue-video-player/src/custom-theme.css'

    import 'video.js/dist/video-js.css'

    Vue.use(VideoPlayer)

    【2】组件内引用import { videoPlayer } from 'vue-video-player'

    import 'video.js/dist/video-js.css'

    export default {

    components: {

    videoPlayer

    }

    }

    使用

    【1】html部分

    ref="videoPlayer"

    :playsinline="true"

    :options="playerOptions">

    【2】js部分

    export default {

    data() {

    return {

    playerOptions: {

    playbackRates: [0.5, 1.0, 1.5, 2.0], // 可选的播放速度

    autoplay: false, // 如果为true,浏览器准备好时开始回放。

    muted: false, // 默认情况下将会消除任何音频。

    loop: false, // 是否视频一结束就重新开始。

    preload: 'auto', // 建议浏览器在加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频(如果浏览器支持)

    language: 'zh-CN',

    aspectRatio: '16:9', // 将播放器置于流畅模式,并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字(例如"16:9"或"4:3")

    fluid: true, // 当true时,Video.js player将拥有流体大小。换句话说,它将按比例缩放以适应其容器。

    sources: [{

    type: "video/mp4", // 类型

    src: '' // url地址

    }],

    poster: '', // 封面地址

    notSupportedMessage: '此视频暂无法播放,请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。

    controlBar: {

    timeDivider: true, // 当前时间和持续时间的分隔符

    durationDisplay: true, // 显示持续时间

    remainingTimeDisplay: false, // 是否显示剩余时间功能

    fullscreenToggle: true // 是否显示全屏按钮

    }

    }

    }

    }

    }

    【3】效果图​

    视频格式

    type:"video/webm" // 可以播放,用ogg也可打开

    type:"video/ogg" // 可以播放,用webm也可打开

    type:"video/3gp" // 可以播放

    type:"video/mp4" // 可以播放

    type:"video/avi" // 打不开

    type:"video/flv" // 打不开

    type:"video/mkv" // 打不开

    type:"video/mov" // 打不开

    type:"video/mpg" // 打不开

    type:"video/swf" // 打不开

    type:"video/ts" // 打不开

    type:"video/wmv" // 打不开

    type:"video/vob" // 没转化

    type:"video/mxf" // 转化出错

    type: "video/rm" // 转化出错

    控制播放和暂停

    this.$refs.videoPlayer.player.play() // 播放

    this.$refs.videoPlayer.player.pause() // 暂停

    this.$refs.videoPlayer.player.src(src) // 重置进度条

    回调函数

    ref="videoPlayer"

    :playsinline="true"

    :options="playerOptions"

    @play="onPlayerPlay($event)"

    @pause="onPlayerPause($event)"

    @ended="onPlayerEnded($event)"

    @waiting="onPlayerWaiting($event)"

    @playing="onPlayerPlaying($event)"

    @loadeddata="onPlayerLoadeddata($event)"

    @timeupdate="onPlayerTimeupdate($event)"

    @canplay="onPlayerCanplay($event)"

    @canplaythrough="onPlayerCanplaythrough($event)"

    @statechanged="playerStateChanged($event)"

    @ready="playerReadied"

    >

    export default {

    methods: {

    // 播放回调

    onPlayerPlay(player) {

    console.log('player play!', player)

    },

    // 暂停回调

    onPlayerPause(player) {

    console.log('player pause!', player)

    },

    // 视频播完回调

    onPlayerEnded($event) {

    console.log(player)

    },

    // DOM元素上的readyState更改导致播放停止

    onPlayerWaiting($event) {

    console.log(player)

    },

    // 已开始播放回调

    onPlayerPlaying($event) {

    console.log(player)

    },

    // 当播放器在当前播放位置下载数据时触发

    onPlayerLoadeddata($event) {

    console.log(player)

    },

    // 当前播放位置发生变化时触发。

    onPlayerTimeupdate($event) {

    console.log(player)

    },

    //媒体的readyState为HAVE_FUTURE_DATA或更高

    onPlayerCanplay(player) {

    // console.log('player Canplay!', player)

    },

    //媒体的readyState为HAVE_ENOUGH_DATA或更高。这意味着可以在不缓冲的情况下播放整个媒体文件。

    onPlayerCanplaythrough(player) {

    // console.log('player Canplaythrough!', player)

    },

    //播放状态改变回调

    playerStateChanged(playerCurrentState) {

    console.log('player current update state', playerCurrentState)

    },

    //将侦听器绑定到组件的就绪状态。与事件监听器的不同之处在于,如果ready事件已经发生,它将立即触发该函数。。

    playerReadied(player) {

    console.log('example player 1 readied', player);

    }

    },

    }

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

    展开全文
  •   为了降低类似问题带来的影响,我们采用Vue2.0压缩图片插件localResizeIMG(lrz),压缩图片。   大体的思路:每次拍照或选择一张图片-然后压缩图片-预览上传。上传图片压缩插件是localR...

    移动端图片压缩插件localResizeIMG

    、介绍:
      解决Webapp项目中上传图片时,拍照或者选择的图片太大,导致上传速度缓慢,用户体验差,高并发下,后台处理较大的文件压力大。
      为了降低类似问题带来的影响,我们采用Vue2.0压缩图片插件localResizeIMG(lrz),压缩图片。
      大体的思路:每次拍照或选择一张图片-然后压缩图片-预览上传。上传图片压缩插件是localResizeIMG ,基本原理是通过canvas渲染图片,再通过 toDataURL 方法压缩保存为base64字符串(根据项目需求),压缩效果很不错。

    2、使用方式:
    安装:

    npm i lrz -save

    引入:

    在main.js里加入:import lrz from ‘lrz’
     

    展开全文
  • 首先安装vditor npm install vditor --save 在组件中使用 <template>...import { defineProps, ref, onMounted } from "vue"; import Vditor from "vditor"; import "vditor/dist/index.css"; const

    首先安装vditor

    npm install vditor --save
    

    在组件中使用

    <template>
      <div id="vditor"></div>
    </template>
    <script setup>
    import { defineProps, ref, onMounted } from "vue";
    import Vditor from "vditor";
    import "vditor/dist/index.css";
    const contentEditor = ref("");
    onMounted(() => {
      contentEditor.value = new Vditor("vditor", {
        height: 360,
        toolbarConfig: {
          pin: true,
        },
        cache: {
          enable: false,
        },
        after: () => {
          contentEditor.value.setValue("hello,Vditor+Vue!");
        },
      });
    });
    </script>
    <style scoped>
    a {
      color: #42b983;
    }
    </style>
    
    

    在这里插入图片描述

    展开全文
  • vue项目引入第三方js插件,单个js文件引入成功,使用该插件方法时报错 1、引入第三方js文件,npm安装不了 2、控制台显示引入成功 3、在methods下使用 图片看不清请看下面代码 updateTime() { setInterval(()=>...
  • vue项目引入第三方js插件,单个js文件引入成功,使用该插件方法时报错(问题已解决)
  • [vue] vue在组件中引入插件方法有哪些? 插件通常用来为 Vue 添加全局功能。插件的功能范围没有严格的限制——一般有下面几种: 添加全局方法或者属性。如: vue-custom-element 添加全局资源:指令/过滤器/过渡...
  • 1.先npm install下载。 2.如果是全局引用,在main.js里面引用 import 'vue-layer-mobile/need/layer.css' ...3.如果在页面引用报 ****runtime-only****等错误,用一下方法解决: ①在源文件下创建vue...
  • 1. 环境准备1.1 电脑上安装node.js安装方法:官网下载https://nodejs.org/en/LTS长期支持版。安装完成后在命令行输入 node -v 查看安装版本。nodejs的安装同时也会安装npm,输入 npm -v 查看安装版本。1.2安装cnpm...
  • Vue插件

    2021-03-12 11:47:30
    vue插件可以在全局引用,所以其实现实质上就是一个全局组件的实现,我们来看插件的使用方法: import xxx from 'xxx.js' vue.use(xxx) Vue.use的作用是注册一个Vue插件(注册组件), Vue.use必须在new Vue之前使用。 ...
  • vue引入全年日历插件calendar.js

    千次阅读 2019-03-07 14:17:33
    针对依赖amazeui的全年日历插件vue项目中的问题 cnpm i jquery -D cnpm i amazeui -D 在当前vue引入jquery 、amazeui及相关css或这全局引入(看其他是否用到) calendar.js这里引入需要注意 import引入其实是...
  • VUE引入CKEditor方法

    千次阅读 2019-02-21 11:40:57
    最近在做一个CMS系统,然后找了几个插件,最后在ueditor和CKEditor挑选的,为什么没有选择百度的ueditor呢? 总之就是issue太多了,百度爸爸不想在搞这个麻烦了。然后就用了CKEditor. 引入的时候在网上搜了好多...
  • vue引入jquery插件

    2017-09-11 18:05:00
    vue中使用jquery插件 1.引入jquery 第一种方法:全局引入jquery 在webpack.base.conf.js,新增以下代码 plugins: [ new webpack.optimize.CommonsChunkPlugin('common.js'), new webpack.ProvidePlugin...
  • 文章目录一、安装nodejs1、安装nodejs,默认下一步就...三、安装vue/cli四、脚手架安装五、idea插件安装六、vue2.0 minimal admin template1、导入工程2、Terminal下执行npm install3、安装gyp命令4、运行:npm rebu...
  • Live2d vue 插件 将live2d引入vue工程 在网页上添加live2d模型 前面的废话: Live2d火过一阵,因为当我搜索“live2d 添加到网页上“的时候可以看到很多宅友已经给自己的博客首页加上了live2d看板娘并且发了博客...
  • 一种是用npm或者cnpm指令去下载对应的插件,然后在main.js里用import方法引入,这里不讨论这种方法 我比较喜欢采用的是直接下载对应的js,然后引入vue项目中去 问题来了,如何引入方法如下: 下载对应的js文件...
  • vue项目引入第三方js插件

    千次阅读 2018-07-11 16:42:10
    1、引入第三方js文件,npm安装不了2、在methods下使用 图片看不清请看下面代码 updateTime() { setInterval(()=&gt;{ var cd = new Date(); var lunar = calendarNU....//此处是引用插件方法 this.time =...
  • vue插件学习

    2020-05-06 19:19:02
    vue插件通常是用来添加全局功能, 插件按功能分一般有: 1、添加全局方法或属性 2、添加全局属性:指令、过滤器、过渡 3、通过全局混入来添加一些...Vue.js 的插件应该暴露一个 install 方法。这个方法的第一个...
  • 项目环境: node -v:v8.11.1 npm -v: 5.6.0 cnpm -v:5.2.0 ...在创建vue项目之前先用npm安装webpack:cnpm install webpack -g第一步:npm方法安装vue 1.安装vue: cnpm install vue 2.全局安装vue-cli...
  • 在我们创建的vue项目中,为了使页面更加简洁,我们通常把公共的css和单个组件的css写道外面单个引入。 文件目录如下 加公共的css ①在main.js中加入@import '../static/css/reset.css'(main.js 是我们的...
  • 1、引入第三方js文件,npm安装不了 2、控制台显示引入成功 3、在methods下使用 图片看不清请看下面代码 updateTime() { setInterval(()=>{ var cd = new Date(); var lunar = ...
  • VUE引入第三方插件

    千次阅读 2017-06-30 10:19:58
    vue 引入第三方插件方法:1⃣️: 如果是第三方 npm 模块文件 文件统一放入src/assets/js 文件夹下; 统一在main.js 内引入: import parse from ‘./assets/js/plugin.js’ import ‘./assets/js/plugin.js’; 2...
  • vue插件的开发流程

    千次阅读 2018-10-25 12:06:48
    趁有机会,简单回顾下vue插件开发的过程。学习本身就是个不断重复滴过程嘛: 一、官网插件的开发文档地址 https://cn.vuejs.org/v2/guide/plugins.html   二、简单唠一唠 但是呢,如果看官网文档的话,有的小...
  • vue-cli引入postcss插件

    千次阅读 2019-12-29 14:16:23
    利用 vue-cli引入第三发postcss插件的过程 默认情况下vue-loader 也是按postcss进行css加载的 故修改webpack配置文件跟平时不太一样 如下提供三种方法(以填入tailwindcss插件为例) (1)直接在根目录的postcssrc....

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 797
精华内容 318
关键字:

vue插件引入方法

vue 订阅