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


TypeScript vue.extend函数代码示例

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


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

示例1: new

export function Mixins<T>(
  ...components: Array<{ new (): any } | ComponentOptions<Vue> | typeof Vue>
): VirtualClass<T> {
  return Vue.extend({
    mixins: components as Array<ComponentOptions<Vue> | typeof Vue>
  }) as any
}
开发者ID:budiadiono,项目名称:vue-typed,代码行数:7,代码来源:mixins.ts

示例2: connectToComponent

    function connectToComponent(
      nameOrComponent: string | Component,
      optionalComponent?: Component
    ): Component {
      let Component: Component, name: string
      if (typeof nameOrComponent !== 'string') {
        Component = nameOrComponent
        name = getOptions(Component).name || 'wrapped-anonymous-component'
      } else {
        Component = optionalComponent!
        name = nameOrComponent
      }

      const propKeys = keys(
        stateToProps,
        gettersToProps,
        actionsToProps,
        mutationsToProps,
        methodsToProps
      )

      const eventKeys = keys(
        actionsToEvents,
        mutationsToEvents,
        methodsToEvents
      )

      const containerProps = omit(collectProps(Component), propKeys)
      const containerPropsKeys = Object.keys(containerProps)

      const options = {
        name: `connect-${name}`,
        props: containerProps,
        components: {
          [name]: Component
        },
        computed: merge(mapState(stateToProps), mapGetters(gettersToProps)),
        methods: merge(
          mapActions(merge(actionsToProps, actionsToEvents)),
          mapMutations(merge(mutationsToProps, mutationsToEvents)),
          mapValues(merge(methodsToProps, methodsToEvents), bindStore)
        )
      }

      insertLifecycleMixin(options, lifecycle)
      insertRenderer(
        options,
        name,
        propKeys.concat(containerPropsKeys),
        eventKeys
      )

      if (transform) {
        transform(options, lifecycle)
      }

      return typeof Component === 'function' ? Vue.extend(options) : options
    }
开发者ID:ktsn,项目名称:vuex-connect,代码行数:58,代码来源:connect.ts

示例3: it

 it("default value", function() {
     const Root = Vue.extend({
         render(h) {
             return h(MyFunctionalComponent, { props: { a: "a-value", c: 100 } });
         }
     });
     const $ = querySelectorOf(createComponent(Root).$el);
     assert($(".B").innerText === "b-default");
 });
开发者ID:wonderful-panda,项目名称:vueit,代码行数:9,代码来源:test.ts

示例4: describe

        describe("validation - auto validation from design type", function () {

            @component({ template: `<div>test</div>` })
            class Validation extends Vue {
                @prop str: string;
                @prop num: number;
                @prop bool: boolean;
                @prop arr: number[];
                @prop func: (v: number) => number;
                @prop({ type: null }) withoutCheck: string;
                @prop({ type: Number }) mismatchType: string;
            }

            const Root = Vue.extend({
                template: `<div>
                             <target ref="target"
                               :str="str" :num="num" :bool="bool" :arr="arr" :func="func"
                               :without-check="withoutCheck" :mismatch-type="mismatchType" />
                           </div>`,
                components: { target: Validation }
            });

            it("values of design types are accepted", function () {
                const root = createComponent(Root, {}, {
                    str: "s", num: 1, bool: true, arr: [1, 2, 3], func: v => v * 2, withoutCheck: "s", mismatchType: "s"
                });
                const c = root.$refs["target"] as Validation;
                assert(c.str === "s");
                assert(c.num === 1);
                assert(c.bool === true);
                assert.deepEqual(c.arr, [1, 2, 3]);
                assert(c.func(1) === 2);
                assert(c.withoutCheck === "s");
                assert(c.mismatchType === "s");
                assert(warns.length === 1);
                assert(/^Invalid prop: type check .* "mismatchType"/.test(warns[0]));
            });

            it("values of other types are rejected", function () {
                // this assert fails now, maybe because bug of vue 2.0.1
                const root = createComponent(Root, {}, {
                    str: 1, num: "s", bool: 1, arr: 1, func: 1, withoutCheck: 1, mismatchType: 1
                });
                assert(warns.length === 5);
                const [w1, w2, w3, w4, w5] = warns;
                assert(/^Invalid prop: type check .* "str"/.test(w1));
                assert(/^Invalid prop: type check .* "num"/.test(w2));
                assert(/^Invalid prop: type check .* "bool"/.test(w3));
                assert(/^Invalid prop: type check .* "arr"/.test(w4));
                assert(/^Invalid prop: type check .* "func"/.test(w5));
            });
        });
开发者ID:wonderful-panda,项目名称:vueit,代码行数:52,代码来源:test.ts

示例5: createElement

const createPosedComponentFactory: PosedComponentFactoryFactory = el => (
  config = {}
) =>
  Vue.extend({
    props,
    provide,
    inject,
    mounted() {
      invariant(typeof this.$el !== 'undefined', `No DOM element found.`);

      const poserConfig = {
        ...config,
        initialPose: this.getInitialPose(),
        onDragStart: this.$listeners['drag-start']
          ? (e: any) => this.$emit('drag-start', e)
          : undefined,
        onDragEnd: this.$listeners['drag-end']
          ? (e: any) => this.$emit('drag-end', e)
          : undefined,
        onPressStart: this.$listeners['press-start']
          ? (e: any) => this.$emit('press-start', e)
          : undefined,
        onPressEnd: this.$listeners['press-end']
          ? (e: any) => this.$emit('press-end', e)
          : undefined,
        onChange: this.$props.onValueChange,
        props: this.getPoserProps()
      };

      // First posed component in tree
      if (!this.$props.withParent || !this._poseRegisterChild) {
        this.initPoser(poseFactory(this.$el, poserConfig));
      } else {
        this._poseRegisterChild({
          element: this.$el,
          config: poserConfig,
          onRegistered: poser => this.initPoser(poser)
        } as ChildRegistration);
      }
    },
    watch,
    methods,
    destroyed,
    render(createElement) {
      return createElement(el, {}, [this.$slots.default]);
    }
  });
开发者ID:Popmotion,项目名称:popmotion,代码行数:47,代码来源:posed.ts

示例6: require

import * as Vue from 'vue';

export default Vue.extend({
    template: require('./btnMeau.html'),
    props: {
        btn: {
            type: Object, //btnMeauInterface
            twoWay: true
        }
    },
    created() {
        console.log(this.btn);
    }
});
开发者ID:wubuku,项目名称:dddml-dotnet-tools,代码行数:14,代码来源:btnMeau.ts

示例7: AppExtend

     v-model="newTask.title"
     @keyup.enter="createTask(newTask, tasks)">
  </li>
  `
// End Template

/**
 * [Input Form Component]
 * @param  {html}   {template [html string]
 */
export const inputform: Object = AppExtend({
  template: html,
  data(): Object {
    return {
      newTask: new Task('', false)
    }
  },
  props: {
    tasks: []
  },
  methods: {
    createTask(task: TaskInterface, tasks: Array<TaskInterface>): void{
      if(task.title !== ''){
        let newTask = new Task(task.title, task.complete);
        tasks.push(newTask);
        task.title = '';
      }
    }
  }
});
开发者ID:jonathonwang,项目名称:vue-typescript,代码行数:30,代码来源:form.ts


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