TypeScript vue.directive函數代碼示例

(()=>{
  let vueIf=Vue.directive('if');

  let oldInsert=vueIf.insert;

  vueIf.insert=function(){
    oldInsert.apply(this);
    $ && this.frag && this.frag.node && $.parser && this.vm && $.parser.parse(this.frag.node);
  }

})()

Vue.directive('ez-model', {
  twoWay: true,
  priority: 1000,

  isFirstCall:true,

  params: ['options'],

  ezClass: "",
    
  initEasyUiComp:function(value){
    let self = this;
    let $el=$(self.el);
    let options=this.params.options || {};

    let oldOnChange=options.onChange;
    options.onChange=function (newVal,_oldVal) {
       if (oldOnChange)
           oldOnChange.apply(this,arguments);

       self.set(newVal);
    }

    this.ezClass=(()=>{
       let cls=$el.attr('class').split(/\s+/).find((it)=>it.indexOf("easyui-")===0);
       return cls.split('-').slice(1).join('-');      
    })(); 
    if (this.ezClass==="datebox" || this.ezClass==="datetimebox"){
       $el[this.ezClass](options);

       setTimeout(()=>this.trySetValue(value,true),0);

       return;  
    }
    
    if (this.ezClass==="calendar"){
      options.current=value;
    }else if (this.ezClass==="switchbutton"){
      options.checked=value;
    } else {
      options.value=value;
    }

    $el[this.ezClass](options);

  },


   trySetValue: function(value,ignoreMultiple){
    let self=this;
    let $el= $(self.el);

    let isMultipleValues=ignoreMultiple?false:!!$el[this.ezClass]("options").multiple;

    let setValMethod=isMultipleValues?"setValues":"setValue";

    if (self.ezClass==="calendar"){
          setValMethod="moveTo";
      }

      try {
        if (self.ezClass==="datebox"){
            value=value && moment(value).format('M/D/Y')
        }else if (self.ezClass==="datetimebox"){
            value=value && moment(value).format('M/D/Y HH:mm:ss')
        }

         $el[this.ezClass](setValMethod, value);
      } catch (error) {
        console.error(error);
      }
  },

  bind: function () {
  },

  update: function (value) {
    if (this.isFirstCall){
       this.isFirstCall=false;
       this.initEasyUiComp(value);
    }else{
      this.trySetValue(value);
    }

  },
  unbind: function () {
    $(this.el)[this.ezClass]('destroy')
  }
})

import * as Stickyfill from "stickyfilljs";
import Vue from "vue";

export default Vue.directive("stickyfill", {
  bind(el: HTMLElement) {
    el.style.position = "sticky";
    el.style.top = "75px";
    Vue.nextTick(() => Stickyfill.add(el));
  },
  unbind(el: HTMLElement) {
    Stickyfill.remove(el);
  }
});

import Vue from 'vue';

import autocomplete from './autocomplete';

Vue.directive('autocomplete', autocomplete);

    let params = { select, wsParams: { allowInvalidAccounts: true } };
    let searchURL = conf.wsgroupsURL + '/searchUserCAS';

    loadScriptOnce(conf.wsgroupsURL + "/web-widget/autocompleteUser-resources.html.js", (err) => {
        if (err) {
            console.error(err);
        } else {
            window['jQuery'](this.$el)['autocompleteUser'](searchURL, params);
        }
    });
  },
})

Vue.directive('auto-focus', {
    inserted(el : HTMLElement) { 
        el.focus();
    }
})

// emits 'change' event
Vue.component('input-file', {
    template: "<input @change='read' type='file'>",
    methods: {
        read: function (e) {
            this.$emit('change', e.target.files[0] as File);
        },
    },
});

// usage: v-on-submit.prevent="action" where "action" returns a promise
//

 registerDirectives: function () {
     for (var directiveName in directives) {
         Vue.directive(directiveName, components[directiveName]);
     }
 },

import Vue, { DirectiveOptions } from "vue";

const AsyncBind: DirectiveOptions = {
  bind(el, binding) {
    bind(el, binding.value);
  },
  update(el, binding) {
    bind(el, binding.value);
  }
};

function bind(el: HTMLElement, binding: Promise<string>) {
  if (binding) {
    Promise.resolve(binding).then(value => {
      el.innerHTML = value;
    });
  }
}

Vue.directive("async-bind", AsyncBind);

import Vue from 'vue';

import userPreview from './user-preview';

Vue.directive('userPreview', userPreview);
Vue.directive('user-preview', userPreview);

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import placehold from './directive/placehold'
import './registerServiceWorker'

Vue.config.productionTip = false

Vue.directive('src', placehold)

new Vue({
  router,
  store,
  render: h => h(App),
}).$mount('#app')

import Vue, { DirectiveOptions, VNodeDirective } from "vue";

const SyncWidth: DirectiveOptions = {
  inserted(el, binding) {
    bind(el, binding);
  }
};

function bind(el: HTMLElement, binding: VNodeDirective) {
  el.style.maxWidth =
    (binding.value * document.getElementById(binding.arg)!.clientWidth) / 100 +
    "px";
}

Vue.directive("sync-width", SyncWidth);