JS 플러그인을 Vue 플러그인으로 다시 작성하는 방법-JS 튜토리얼-php.cn

JS 플러그인을 Vue 플러그인으로 다시 작성하는 방법

不言

풀어 주다： 2018-07-21 11:12:58

원래의

2746명이 탐색했습니다.

이 글은 JS 플러그인을 Vue 플러그인으로 다시 작성하는 방법을 공유합니다. 내용이 매우 좋습니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

Vue를 처음 접하는 많은 친구들은 Vue에서 프레임워크를 사용하지 않는 일부 JS 플러그인을 사용하고 싶어하지만 효과가 없다는 것을 알게 됩니다.
여기서 먼저 예시를 게시하겠습니다.
아래 사진은 플러그인 렌더링입니다
JS 플러그인을 Vue 플러그인으로 다시 작성하는 방법

우선 플러그인 소스코드를 다운로드 받아야 합니다.
내부에서 index.html을 찾아 20~87행을 찾아 복사하고, vue 프로젝트를 찾고, 새 폴더를 만들고, 다음 내용이 포함된 새 js 파일을 만듭니다. index.html，找到里面的20行到87行，复制出来，找到你vue的项目，新建个文件夹，新建个js文件，内容如下

import wavePng from './wave.png'
export default {
    install(Vue){
        Vue.directive('wave', {
            // 当指令绑定好之后，立即触发的方法
            inserted: function(el){
                start(el)
            },
            // 当指令的值变化后会触发update
            update: function(el, binding, vnode){
                if(binding.value){
                    start(el)
                }else{
                    stop()
                }   
            }
        })
    }
}

로그인 후 복사

然后把刚刚粘贴的插件代码粘在最下面，记得把插件原先有的闭包去掉。这个改装的思路，就是改成Vue的自定义指令形式。
怎么使用呢，首先要在main.js

import wave from './components/wave.js'
Vue.use(wave)

로그인 후 복사

그런 다음 플러그를 넣으세요. -방금 붙여넣은 코드는 맨 아래에 있습니다. 플러그인에 원래 있던 클로저를 제거해야 합니다. 이번 수정의 아이디어는 Vue의 커스텀 명령어 형태로 변경하는 것입니다.

사용 방법은? 먼저 main.js에 추가하세요.

<template>
  <p>
    </p>
<p><span>60%</span></p>
    <button>start</button>
    <button>stop</button>
  
</template>

<script>
import wave from &#39;./a&#39;
export default {
  data(){
    return{
      wave: true
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
.wave{width:200px;height:200px;overflow:hidden;border-radius:50%;background:rgba(255,203,103,.6);margin:100px auto;position:relative;text-align:center;display:table-cell;vertical-align:middle;}
.wave span{display:inline-block;color:#fff;font-size:20px;position:relative;z-index:2;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%)
}
.wave canvas{position:absolute;left:0;top:0;z-index:1;}
</style>

로그인 후 복사

그런 다음 필요한 요소에 지침을 바인딩하세요.

rrreee

최종 변환이 완료되었으면 좋겠습니다. Vue 친구가 게임을 처음 접하는 사람들을 도울 수 있습니다.

관련 권장 사항:
부모와 자식 vue 구성 요소 간에 값을 전송하는 방법

jQuery에서 $() 함수를 사용하는 방법

🎜🎜

위 내용은 JS 플러그인을 Vue 플러그인으로 다시 작성하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!