当前位置: 首页>>代码示例>>TypeScript>>正文


TypeScript vue.component函数代码示例

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


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

示例1: checkInstance

_.forEach(components, (instance: AbstractUiComponent) => {

  checkInstance(instance);

  // register components globally
  Vue.component(instance.componentTagName, instance.constructor);

});
开发者ID:remipassmoilesel,项目名称:personnal-website,代码行数:8,代码来源:componentsInit.ts

示例2: componentFactory

export function componentFactory(
    Component: VueClass,
    options: ComponentOptions<any> = {}
): VueClass {
    options.name = options.name || (Component as any)._componentTag || (Component as any).name;
    // prototype props.
    const proto = Component.prototype;
    Object.getOwnPropertyNames(proto).forEach(function(key) {
        if (key === "constructor") {
            return;
        }
        // hooks
        if ($internalHooks.indexOf(key) > -1) {
            options[key] = proto[key];
            return;
        }
        const descriptor = Object.getOwnPropertyDescriptor(proto, key);
        if (typeof descriptor.value === "function") {
            // methods
            (options.methods || (options.methods = {}))[key] = descriptor.value;
        } else if (descriptor.get || descriptor.set) {
            // computed properties
            (options.computed || (options.computed = {}))[key] = {
                get: descriptor.get,
                set: descriptor.set
            };
        }
    });

    // add data hook to collect class properties as Vue instance's data
    (options.mixins || (options.mixins = [])).push({
        data() {
            return collectDataFromConstructor(this, Component);
        }
    });

    if (!options.props)
        options.props = {};

    if (!options.props["model"])
        options.props["model"] = Object;

    if (componentLoader.templates[options.name])
        options.template = componentLoader.templates[options.name];
    //else
    //    console.error(`Missing template for component: ${options.name}`);
    
    // find super
    const superProto = Object.getPrototypeOf(Component.prototype);
    const Super = superProto instanceof Vue ? superProto.constructor as VueClass : Vue;
    const result = Super.extend(options);

    Vue.component(options.name, result);
    return result;
}
开发者ID:alippai,项目名称:kaitai_struct_webide,代码行数:55,代码来源:Component.ts

示例3: function

    run: function (app) {

        Vue.config.debug = true;
        Vue.config.async = false;
        
        Vue.use(VueRouter);
        Vue.component('vue-logo', vueLogo);
        Vue.component('materialize-logo', materializeLogo);
        Vue.component('doc-api', docApi);
        Vue.component('doc-sources', docSources);
        Vue.component('doc-snippet', docSnippet);
        Vue.component('doc-tabs', docTabs);

        var router = new VueRouter({
            history: false,
            root: '/'
        });

        router.map(mapping);

        router.start(App, app);
    },
开发者ID:Pandahisham,项目名称:material-components,代码行数:22,代码来源:index.ts

示例4: Vue

import 'tachyons/css/tachyons.css'
import 'flickity/css/flickity.css'
import './main.css'
import './icons.css'

import Vue from 'vue'
import Carousel from './components/carousel'
import InstaCarousel from './components/insta-carousel'
import InstaRow from './components/insta-row'
import ContactFrom from './components/contact-form'
import Nav from './components/collapsable-nav'

Vue.component('op-carousel', Carousel)
Vue.component('op-insta-carousel', InstaCarousel)
Vue.component('op-insta-row', InstaRow)
Vue.component('op-contact-form', ContactFrom)
Vue.component('op-nav', Nav)

new Vue({
  el: '#root'
})
开发者ID:harrygr,项目名称:op-website,代码行数:21,代码来源:main.ts

示例5: mapGetters

import Component from 'vue-class-component';
import { mapGetters, mapActions } from 'vuex';

import { setBlogTitle } from '@/common/service/CommonService';
import template from './blog.html';

@Component({
	computed: mapGetters(['isDesktop', 'navList', 'socialLinkList', 'title']),
	methods: mapActions(['loadBrowserSetting', 'loadNavList', 'loadSocialLink']),
	template,
	watch: {
		title() {
			setBlogTitle((this as BlogContainer).title);
		},
	},
})
class BlogContainer extends Vue {
	public title: string;
	public loadBrowserSetting: () => void;
	public loadNavList: () => void;
	public loadSocialLink: () => void;

	public created() {
		this.loadBrowserSetting();
		this.loadNavList();
		this.loadSocialLink();
	}
}

export default Vue.component('blog', BlogContainer);
开发者ID:DiscipleD,项目名称:blog,代码行数:30,代码来源:index.ts

示例6:

/**
 * Created by jack on 16-8-21.
 */

import Vue from 'vue';
import Component from 'vue-class-component';

import template from './template.html';

@Component({
	template,
})
class MainContent extends Vue {}

export default Vue.component('mainContent', MainContent);
开发者ID:DiscipleD,项目名称:blog,代码行数:15,代码来源:index.ts

示例7:

import ReservationDetail from '@js/components/partials/lessonRoom/ReservationDetail'
import Material from '@js/components/partials/lessonRoom/Material'
import MaterialSelect from '@js/components/partials/lessonRoom/MaterialSelect'
import MaterialDisplay from '@js/components/partials/lessonRoom/MaterialDisplay'
import DebugTool from '@js/components/partials/DebugTool'
import Himawari from '@js/components/partials/lessonRoom/Himawari'
import Banana from '@js/components/partials/lessonRoom/Banana'
import PreCheckLoading from '@js/components/partials/lessonRoom/PreCheckLoading'
import LessonRoomModal from '@js/components/partials/modals/LessonRoom'
import ErrorModal from '@js/components/partials/modals/Error'
import DevicePermissionModal from '@js/components/partials/modals/DevicePermission'
import LessonRoomAlert from '@js/components/partials/alerts/LessonRoom'
import PreparationCheckResult from '@js/components/partials/preparation/CheckResult'

// set components as global componnents
Vue.component('Header', Header)
Vue.component('HeaderLessonTimeCounter', HeaderLessonTimeCounter)
Vue.component('PhraseBalloon', PhraseBalloon)
Vue.component('HelpBalloon', HelpBalloon)
Vue.component('InquiryBalloon', InquiryBalloon)
Vue.component('ProgressBar', ProgressBar)
Vue.component('Video', Video)
Vue.component('VideoSystemMessage', VideoSystemMessage)
Vue.component('VideoTutorControl', VideoTutorControl)
Vue.component('VideoStudentControl', VideoStudentControl)
Vue.component('Chatbox', Chatbox)
Vue.component('ChatboxChat', ChatboxChat)
Vue.component('ChatboxMemo', ChatboxMemo)
Vue.component('ReservationDetail', ReservationDetail)
Vue.component('Material', Material)
Vue.component('MaterialSelect', MaterialSelect)
开发者ID:tic40,项目名称:archives,代码行数:31,代码来源:app.ts

示例8: validity_

import Vue from "vue";

Vue.component("validation-errors", {
    props: ['name', 'validity', 'custom_message'],
    template: `
   <transition name="fade">
    <span v-if="!validity_.valid">    
       <span class="help-block">{{custom_message || validity_.message}}</span>
    </span>
   </transition>
    `,
    computed: {
        validity_() {
            return this.validity && this.validity.submitted && this.validity[this.name] || { valid: true };
        },
    },
});

Vue.component("my-bootstrap-form-group", {
    props: ['name', 'label', 'multi', 'validity', 'hideErrors', 'labels'],
    template: `
            <div class='form-group' :class="{'has-error': validity && validity.submitted && !validity[name].valid }">
              <label v-if="label" class="col-md-3 control-label" :for="name">{{label}}</label>
              <div :class="subClass">
                  <slot></slot>
                  <validation-errors v-if="!hideErrors && validity" :name="name" :validity="validity" :custom_message="labels && labels.advice"></validation-errors>
              </div>
            </div>
    `,
    computed: {
        subClass() {
开发者ID:prigaux,项目名称:compte-externe,代码行数:31,代码来源:Bootstrap.ts

示例9:

import Component from 'vue-class-component';

import './style.scss';
import template from './post-header.html';
import _defaultImg from '@/assets/img/tags-bg.jpg';

@Component({
	props: {
		boardImg: {
			type: String,
			default: _defaultImg,
		},
		title: {
			type: String,
		},
		subtitle: {
			type: String,
		},
		tags: {
			type: Array,
		},
		createdTime: {
			type: String,
		},
	},
	template,
})
class PostHeader extends Vue {}

export default Vue.component('postHeader', PostHeader);
开发者ID:DiscipleD,项目名称:blog,代码行数:30,代码来源:index.ts

示例10: Vue

import store from './store';
import { sync } from 'vuex-router-sync';
import NProgress from 'nprogress';
import * as filters from './filter';
import '@/styles/style.less';

import iView from 'iviewplus';
import './styles/iview.less';
import VueDND from 'awe-dnd';
import 'echarts';
import ECharts from 'vue-echarts/components/ECharts.vue';
import VueCodemirror from 'vue-codemirror';
import 'codemirror/lib/codemirror.css';
import 'codemirror/theme/base16-dark.css';

Vue.component('chart', ECharts);
Vue.use(VueDND);
Vue.use(VueCodemirror,{});

Vue.use(iView);
Vue.config.productionTip = false;

/* eslint-disable no-new */
const app = new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
});
开发者ID:yuhonyon,项目名称:veditor,代码行数:30,代码来源:main.ts

示例11: mounted

import Vue from "vue";
import conf from '../conf';
import loadScriptOnce from 'load-script-once';
import webcamLivePortrait from './webcamLivePortrait.vue';
import { finallyP } from '../services/helpers';

Vue.component('webcamLivePortrait', webcamLivePortrait);

Vue.component('autocomplete-user', {
  template: `<input type="search">`,
  mounted() {
    let select = (_event, ui) => {
        this.$emit("select", ui.item);
    };
    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();
    }
开发者ID:prigaux,项目名称:compte-externe,代码行数:31,代码来源:various.ts

示例12:

import userCard from './user-card.vue';
import noteDetail from './note-detail.vue';
import followButton from './follow-button.vue';
import friendsMaker from './friends-maker.vue';
import notification from './notification.vue';
import notifications from './notifications.vue';
import notificationPreview from './notification-preview.vue';
import usersList from './users-list.vue';
import userPreview from './user-preview.vue';
import userTimeline from './user-timeline.vue';
import userListTimeline from './user-list-timeline.vue';
import activity from './activity.vue';
import widgetContainer from './widget-container.vue';
import postForm from './post-form.vue';

Vue.component('mk-ui', ui);
Vue.component('mk-note', note);
Vue.component('mk-notes', notes);
Vue.component('mk-media-image', mediaImage);
Vue.component('mk-media-video', mediaVideo);
Vue.component('mk-drive', drive);
Vue.component('mk-note-preview', notePreview);
Vue.component('mk-sub-note-content', subNoteContent);
Vue.component('mk-note-card', noteCard);
Vue.component('mk-user-card', userCard);
Vue.component('mk-note-detail', noteDetail);
Vue.component('mk-follow-button', followButton);
Vue.component('mk-friends-maker', friendsMaker);
Vue.component('mk-notification', notification);
Vue.component('mk-notifications', notifications);
Vue.component('mk-notification-preview', notificationPreview);
开发者ID:ha-dai,项目名称:Misskey,代码行数:31,代码来源:index.ts

示例13:

import Vue from 'vue';

import wNotifications from './notifications.vue';
import wTimemachine from './timemachine.vue';
import wActivity from './activity.vue';
import wTrends from './trends.vue';
import wUsers from './users.vue';
import wPolls from './polls.vue';
import wPostForm from './post-form.vue';
import wMessaging from './messaging.vue';
import wProfile from './profile.vue';

Vue.component('mkw-notifications', wNotifications);
Vue.component('mkw-timemachine', wTimemachine);
Vue.component('mkw-activity', wActivity);
Vue.component('mkw-trends', wTrends);
Vue.component('mkw-users', wUsers);
Vue.component('mkw-polls', wPolls);
Vue.component('mkw-post-form', wPostForm);
Vue.component('mkw-messaging', wMessaging);
Vue.component('mkw-profile', wProfile);
开发者ID:ha-dai,项目名称:Misskey,代码行数:21,代码来源:index.ts

示例14: mounted

Vue.component('input-with-validity', {
  template: "<input :name='name' :value='value' :type='type'>",
  props: ['value', 'name', 'type', 'sameAs', 'allowedChars', 'realType', 'pattern', 'min', 'max'],
  mixins: [checkValidity],
  mounted() {
    let element = this.$el;

    element.setAttribute('id', this.name);
    element.classList.add("form-control");
    this._setPattern();

    element.addEventListener('input', checkValidity.methods.onchange.bind(this))
    this.checkValidity();
  },
  watch: {
    value: 'on_value_set',
    min(v) { this._attrUpdated('min', v) },
    max(v) { this._attrUpdated('max', v) },
    sameAs(v) { this._attrUpdated('pattern', Helpers.escapeRegexp(v)) },
  },
  methods: {
    tellParent() { 
        this.$emit("input", this.$el.value);
    },
    checkValidity() {
        if (this.allowedChars) this._checkAllowedChars();
        if (this.realType) this._checkRealType();
        checkValidity.methods.checkValidity.call(this);
    },
    _attrUpdated(name, v) {
        this.$el.setAttribute(name, v);
        this.checkValidity();
    },
    _setPattern() {
        for (const name of ['pattern', 'min', 'max']) {
            if (this[name]) this.$el.setAttribute(name, this[name]);
        }
        if (this.realType === 'phone') this.$el.setAttribute('pattern', conf.pattern.phone);
        if (this.realType === 'mobilePhone') this.$el.setAttribute('pattern', conf.pattern.frenchMobilePhone);
        if (this.realType === 'frenchPostalCode') this.$el.setAttribute('pattern', conf.pattern.frenchPostalCode);
    },
    _setCustomMsg(msg) {
        this.$el.setCustomValidity(msg);
    },
    _checkAllowedChars() {
        let errChars = (this.$el.value || '').replace(new RegExp(this.allowedChars, "g"), '');
        this._setCustomMsg(errChars !== '' ? conf.error_msg.forbiddenChars(errChars) : '');
    },
    _checkRealType() {
        let validity = this.$el.validity;
        let msg = '';
        switch (this.realType) {
            case 'phone' :
                if (validity.patternMismatch) msg = conf.error_msg.phone;
                break;
            case 'mobilePhone' :
                if (validity.patternMismatch) msg = conf.error_msg.mobilePhone;
                break;
            case 'frenchPostalCode':
                if (validity.patternMismatch) msg = conf.error_msg.frenchPostalCode;
                break;
            case 'siret':
                if (!Helpers.checkLuhn(this.$el.value, 14)) msg = conf.error_msg.siret;
                break;
        }
        this._setCustomMsg(msg);
    }
  },
});
开发者ID:prigaux,项目名称:compte-externe,代码行数:69,代码来源:validators.ts

示例15: require

import '../lib/gj-lib-client/utils/polyfills';
import './main.styl';

import Vue from 'vue';
import * as VeeValidate from 'vee-validate';

import { store } from './store/index';
import { Payload } from '../lib/gj-lib-client/components/payload/payload-service';
import { App } from './app';
import { AppButton } from '../lib/gj-lib-client/components/button/button';
import { AppJolticon } from '../lib/gj-lib-client/vue/components/jolticon/jolticon';

// Common components.
Vue.component('AppButton', AppButton);
Vue.component('AppJolticon', AppJolticon);

const VueGettext = require('vue-gettext');

Vue.use(VeeValidate);
Vue.use(VueGettext, {
	silent: true,
	translations: {},
});

// Force tooltips to show even on mobile sizes.
if (!GJ_IS_SSR) {
	const mod = require('v-tooltip');
	mod.default.enabled = true;
}

Payload.init(store);
开发者ID:gamejolt,项目名称:widgets,代码行数:31,代码来源:main.ts


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