TypeScript vue.directive函数代码示例

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› TypeScript›TypeScript教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

本文整理汇总了TypeScript中vue.directive函数的典型用法代码示例。如果您正苦于以下问题：TypeScript directive函数的具体用法？TypeScript directive怎么用？TypeScript directive使用的例子？那么恭喜您, 这里精选的函数代码示例或许可以为您提供帮助。

在下文中一共展示了directive函数的10个代码示例，这些例子默认根据受欢迎程度排序。您可以为喜欢或者感觉有用的代码点赞，您的评价将有助于我们的系统推荐出更棒的TypeScript代码示例。

示例1:

(()=>{
  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);
  }

})()

开发者ID:noteon，项目名称:vue-easyui，代码行数:11，代码来源:ezModel.ts

示例2: setTimeout

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')
  }
})

开发者ID:noteon，项目名称:vue-easyui，代码行数:89，代码来源:ezModel.ts

示例3: bind

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);
  }
});

开发者ID:kevmo314，项目名称:canigraduate.uchicago.edu，代码行数:13，代码来源:Sticky.ts

示例4:

import Vue from 'vue';

import autocomplete from './autocomplete';

Vue.directive('autocomplete', autocomplete);

开发者ID:ha-dai，项目名称:Misskey，代码行数:5，代码来源:index.ts

示例5: loadScriptOnce

    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
//

开发者ID:prigaux，项目名称:compte-externe，代码行数:31，代码来源:various.ts

示例6: function

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

开发者ID:Pandahisham，项目名称:material-components，代码行数:5，代码来源:index.ts

示例7: bind

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);

开发者ID:pranavjindal999，项目名称:Youtube-Material，代码行数:20，代码来源:AsyncBind.ts

示例8:

import Vue from 'vue';

import userPreview from './user-preview';

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

开发者ID:ha-dai，项目名称:Misskey，代码行数:6，代码来源:index.ts

示例9: Vue

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')

开发者ID:cbcruk，项目名称:mrpizzacn，代码行数:16，代码来源:main.ts

示例10: inserted

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);

开发者ID:pranavjindal999，项目名称:Youtube-Material，代码行数:15，代码来源:SyncWidth.ts

注：本文中的vue.directive函数示例由纯净天空整理自Github/MSDocs等源码及文档管理平台，相关代码片段筛选自各路编程大神贡献的开源项目，源码版权归原作者所有，传播和使用请参考对应项目的License；未经允许，请勿转载。