자세 한 설명 Vue 사용자 정의 명령 으로 드 롭 다운 메뉴 완성(select 구성 요소)

//    
Vue.directive('my-directive', {
 //     
})

//     
var app = new Vue({
 el: '#app'
 directives: {
  'my-directive': {
    //     
  }
})

// html  
<div id="app" v-focus>
// js  
Vue.directive('focus', {
 //          DOM  。
 inserted: function (el) {
  //     
  el.focus()
 }
})

// HTML  
<div id="app" v-demo:msg.a.b="message">
 <div v-text:msg.a.b="message"></div>
</div>
// JS  
Vue.directive('demo', {
 bind: function (el, binding, vnode) {
  var s = JSON.stringify
  el.innerHTML =
   'name: '    + binding.name + '<br>' +
   'value: '   + binding.value + '<br>' +
   'expression: ' + binding.expression + '<br>' +
   'argument: '  + binding.arg + '<br>' +
   'modifiers: ' + JSON.stringify(binding.modifiers).modifiers + '<br>' +
   'vnode keys: ' + Object.keys(vnode).join(',')
 }
})
new Vue({
 el: '#app',
 data: {
  message: 'some text'
 }
})

의 내용 은 innerHTML 리 셋 을 사용 합 니 다.결 과 는?

name: "test"
value: "some text"
expression: "message"
argument: "msg"
modifiers: {"a":true,"b":true}
vnode keys: tag, data, children, text, elm, ns, context, functionalContext, functionalOptions, functionalScopeId, key, componentOptions, componentInstance, parent, raw, isStatic, isRootInsert, isComment, isCloned, isOnce, asyncFactory, asyncMeta, isAsyncPlaceholder

대부분의 사용 장면 에서 우 리 는 bind 갈고리 에 사건 을 연결 합 니 다.예 를 들 어 document 에 addEventListerer 로 연결 합 니 다.unbind 에 있 습 니 다.
removeEventListener 가 묶 여 있 습 니 다.전형 적 인 예 는 이 요 소 를 마우스 에 따라 끌 어 당 기 는 것 입 니 다.
더 많은 값 이 필요 하 다 면 사용자 정의 명령 도 자바 스 크 립 트 대상 의 글자 수 를 입력 할 수 있 습 니 다.합 법 적 인 형식의 자바 스 크 립 트 표현 식 이 라면 모두 가능 합 니 다.예제 코드 는 다음 과 같다.

// HTML  
<div id="app" v-demo:msg.a.b="message">
 <div v-test="{msg: 'hello', name: 'Aresn'}"></div>
</div>

//JS  
Vue.directive('test', {
 bind: function (el, binding, vnode) {
  console.log(binding.value.msg)
  console.log(binding.value.name)
 }
})
var app = new Vue({
 el: '#app'
})

Vue 2.x 는 대량의 Vue 1.x 사용자 정의 명령 의 설정 을 제거 합 니 다.사용자 정의 명령 을 사용 할 때 업무 수 요 를 분해 해 야 합 니 다.사용자 정의 명령 이 아니 라 구성 요소 가 필요 할 때 가 많 기 때 문 입 니 다.
기본 적 인 이야기 가 끝 났 습 니 다.directive 가 제공 하 는 API 에 따라 외부 영역 을 클릭 하면 드 롭 다운 목록 이 사라 질 수 있 는 메뉴 를 작성 합 니 다.

// HTML  
<div id="app" v-clock>
 <div class="main" v-clickoutside="handleClose">
  <button @click="show = !show">        </button>
  <div class="dropdown" v-show="show">
   <p>     ，          </p>
  </div>
</div>

// JS  
var app = new Vue({
 el: '#app',
 data: {
  show: false
 }，
methods: {
 handleClose() {
  this.show = false;
 }
}
})

Vue.directive('clickoutside', {
 bind: function(el, binding, vode) {
  function documentHandler (e) {
   if (el.contains(e.target)) {
    return false
   }
   if (binding.expression) {
    binding.value(e)
   }
  }
  el.__vueClickOutSide__ = documentHandler
  document.addEventListener('click', documentHandler)
 },
 unbind: function(el, binding) {
  document.removeEventListener('click', el.__vueClickOutSide__)
  delete el.__vueClickOutSide__
 }
})

document 에 click 이 벤트 를 연결 하려 면 bind 갈고리 에 함수 document Handler 를 설명 하고 document 의 click 이벤트 에 핸들 로 지정 합 니 다.document Handler 함 수 는 두 가지 판단 을 했 습 니 다.첫 번 째 는 클릭 한 영역 이 명령 이 있 는 요소 내부 인지 판단 하 는 것 입 니 다.만약 그렇다면 함 수 를 뛰 쳐 나 가 믿 지 않 고 계속 실행 합 니 다.
contains 방법 은 요소 A 에 요소 B 가 포함 되 어 있 는 지 판단 하 는 데 사 용 됩 니 다.true 로 돌아 가 는 것 을 포함 하고 false 로 돌아 가 는 것 을 포함 하지 않 습 니 다.

// HTML
<div id="parent">
    
 <div id="children">   </div>
</div>
// JS
var a = doucment.getElemengById('parent')
var b = doucment.getElemengById('children')
console.log(A.contains(B)) // true
console.log(B.contains(A)) // false

두 번 째 판단 은 현재 명령 v-clickoutside 에 표현 식 이 있 는 지 여부 입 니 다.이 사용자 정의 명령 에 서 는 표현 식 이 첫 번 째 함수 일 것 입 니 다.내부 요 소 를 걸 러 낸 후 외부 모든 영역 을 누 르 면 사용자 표현 식 의 함 수 를 초대 해 야 하기 때문에 biding.value 는 문맥 methods 에서 지정 한 함 수 를 실행 합 니 다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.