TypeScript vue.component函數代碼示例

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

  checkInstance(instance);

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

});

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

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

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

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

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

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)

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() {

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

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

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

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

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

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

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