RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://www.npmjs.com/package/vue-prop below:

vue-prop - npm

Prop type define of Vue3.

<script setup lang="ts">
import { prop, emitType } from "vue-prop";

export const drawerProps = {
  visible: prop.boolean.def(false).isRequired,
  title: prop.string
};

export const drawerEmits = {
  open: emitType<(value: boolean) => void>()
};

const props = defineProps(drawerProps);

const emit = defineEmits(drawerEmits);
</script>

<script lang="ts">
import { defineComponent } from 'vue';
import { prop, emitType } from 'vue-prop';

export const drawerProps = {
  visible: prop.boolean.def(false).isRequired,
  title: prop.string
};

export const drawerEmits = {
  open: emitType<(value: boolean) => void>(),
};

export default defineComponent({
  name: 'Drawer',
  props: drawerProps,
  emits: drawerEmits,
  setup(props, { emit }) {
    return {}
  },
});
</script>

import { prop } from 'vue-prop';

interface Person {
  name: string;
  sex?: string;
  age: number;
}

const props = {
  name: prop.stringNumber.def('123').isRequired,
  //{type:[String,Number],required:true,default:123}
  test: prop.string,
  //{type:String}
  titles: prop.array<Person>().valid((value) => value.length > 0),
  //{type:Array as PropType<Array<Person>>,validator:(value) => value.length > 0}
  content: prop.vNode,
  //{type:[Object,String] as PropType<VNode|null|string>}
  style: prop.css.def({ height: '20px' }),
  //{type: Object as PropType<StyleValue>,default:{ height:'20px' }}
};

property default type example string string prop.string number number prop.number.def(7) stringNumber string Î number prop.stringNumber boolean boolean prop.boolean symbol symbol prop.symbol date date prop.date vNode vue.VNode Î string Î null prop.vNode css vue.StyleValue prop.css object Record<string, any> prop.object<{name?:string,age?:number}>() array Record<string, any>[] prop.array<{name:string}>() function ()=>void prop.function<(value?:number)=>boolean>() literal undefined prop.literal<'ok'Î'cancel'>()

<script setup lang="ts">
import { prop } from "vue-prop";

type Button = "ok" | "cancel" | 0 | true;

const props = defineProps({ button: prop.literal<Button>() });

</script>

<script setup lang="ts">
import { emitType } from "vue-prop";

export const drawerEmits = {
  open: emitType<(value: boolean) => void>()
};

const emit = defineEmits(drawerEmits);
</script>

import { propType } from "vue-prop";

const props = {
  title: propType<string | boolean>([String, Boolean]),
  user: propType<string | { name?: string, age?: number }>([String, Object]),
  color: propType<string | number, "red" | "blue" | 1 | 2>([String, Number])
};

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4