本文整理汇总了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);
});
示例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;
}
示例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);
},
示例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'
})
示例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);
示例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);
示例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)
示例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() {
示例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);
示例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/>'
});
示例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();
}
示例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);
示例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);
示例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);
}
},
});
示例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);