提交 d63d99a9 编写于 作者: DCloud-WZF's avatar DCloud-WZF 💬

feat(composition api): defineProps

上级 ab8dd6b7
<template>
<view class="page">array literal</view>
<view>
<text class="bold uni-common-mb">array literal</text>
<text class="uni-common-mb" id="array-literal-str">str: {{ str }}</text>
<text class="uni-common-mb" id="array-literal-num">num: {{ num }}</text>
<text class="uni-common-mb" id="array-literal-bool">bool: {{ bool }}</text>
<text class="uni-common-mb" id="array-literal-arr">arr: {{ arr }}</text>
<text class="uni-common-mb" id="array-literal-obj">obj: {{ obj }}</text>
<text class="uni-common-mb" id="array-literal-fn">fn: {{ (fn as () => string)() }}</text>
</view>
</template>
<script setup>
const props = defineProps(['str', 'num', 'bool', 'arr', 'obj', 'func'])
defineProps(['str', 'num', 'bool', 'arr', 'obj', 'fn']);
</script>
const PAGE_PATH = '/pages/composition-api/basic/define-props/define-props'
describe('defineProps', () => {
if (process.env.uniTestPlatformInfo.startsWith('android')) {
let page = null
beforeAll(async () => {
page = await program.reLaunch(PAGE_PATH)
await page.waitFor('view')
})
it('basic', async () => {
const arrayLiteralStr = await page.$('#array-literal-str')
expect(await arrayLiteralStr.text()).toBe('str: default str')
const arrayLiteralNum = await page.$('#array-literal-num')
expect(await arrayLiteralNum.text()).toBe('num: 0')
const arrayLiteralBool = await page.$('#array-literal-bool')
expect(await arrayLiteralBool.text()).toBe('bool: false')
const arrayLiteralArr = await page.$('#array-literal-arr')
expect(await arrayLiteralArr.text()).toBe('arr: ["a","b","c"]')
const arrayLiteralObj = await page.$('#array-literal-obj')
expect(await arrayLiteralObj.text()).toBe('obj: {"arr":[1,2,3],"num":0,"str":"obj str"}')
const arrayLiteralFn = await page.$('#array-literal-fn')
expect(await arrayLiteralFn.text()).toBe('fn: fn res')
const objectLiteralStr = await page.$('#object-literal-str')
expect(await objectLiteralStr.text()).toBe('str: default str')
const objectLiteralNum = await page.$('#object-literal-num')
expect(await objectLiteralNum.text()).toBe('num: 0')
const objectLiteralBool = await page.$('#object-literal-bool')
expect(await objectLiteralBool.text()).toBe('bool: false')
const objectLiteralArr = await page.$('#object-literal-arr')
expect(await objectLiteralArr.text()).toBe('arr: ["a","b","c"]')
const objectLiteralObj = await page.$('#object-literal-obj')
expect(await objectLiteralObj.text()).toBe('obj: {"a":1}')
const objectLiteralFn = await page.$('#object-literal-fn')
expect(await objectLiteralFn.text()).toBe('fn: fn res')
const typeStr = await page.$('#type-str')
expect(await typeStr.text()).toBe('str: default str')
const typeNum = await page.$('#type-num')
expect(await typeNum.text()).toBe('num: 0')
const typeBool = await page.$('#type-bool')
expect(await typeBool.text()).toBe('bool: false')
const typeArr = await page.$('#type-arr')
expect(await typeArr.text()).toBe('arr: ["a","b","c"]')
const typeObj = await page.$('#type-obj')
expect(await typeObj.text()).toBe('obj: {"arr":[1,2,3],"num":0,"str":"obj str"}')
const typeFn = await page.$('#type-fn')
expect(await typeFn.text()).toBe('fn: fn res')
})
} else {
it('other platform', () => {
expect(1).toBe(1)
})
}
})
\ No newline at end of file
<template>
<view class="page"> defineProps </view>
<!-- #ifdef APP -->
<scroll-view style="flex: 1">
<!-- #endif -->
<view class="page">
<ArrayLiteral :str="str" :num='num' :bool='bool' :arr='arr' :obj='obj' :fn='fn' />
<ObjectLiteral :str="str" :num='num' :bool='bool' :arr='arr' :fn='fn' />
<TypeProps :str="str" :num='num' :bool='bool' :arr='arr' :obj='obj' :fn='fn' />
</view>
<!-- #ifdef APP -->
</scroll-view>
<!-- #endif -->
</template>
<script setup></script>
<script setup>
import ArrayLiteral from './array-literal.uvue';
import ObjectLiteral from './object-literal.uvue';
import TypeProps from './type-props.uvue';
const str = ref('default str')
const num = ref(0)
const bool = ref(false)
const arr = reactive(['a', 'b', 'c'])
const obj = reactive({ str: 'obj str', num: 0, arr: [1, 2, 3] })
const fn = () : string => 'fn res'
</script>
\ No newline at end of file
<template>
<view class="page">object literal</view>
<view>
<text class="bold uni-common-mt uni-common-mb">object literal</text>
<text class="uni-common-mb" id="object-literal-str">str: {{ str }}</text>
<text class="uni-common-mb" id="object-literal-num">num: {{ num }}</text>
<text class="uni-common-mb" id="object-literal-bool">bool: {{ bool }}</text>
<text class="uni-common-mb" id="object-literal-arr">arr: {{ arr }}</text>
<text class="uni-common-mb" id="object-literal-obj">obj: {{ obj }}</text>
<text class="uni-common-mb" id="object-literal-fn">fn: {{ fn() }}</text>
</view>
</template>
<script setup>
const props = defineProps({
str: String,
num: Number,
bool: {
type: Boolean,
default: true
},
arr: {
type: Array as PropType<string[]>,
default: (): string[] => [] as string[]
},
obj: {
type: Object as PropType<UTSJSONObject>,
default: ():UTSJSONObject => ({ a: 1 })
},
func: {
type: Function as PropType<() => void>,
default: ():(() => void) => () => {}
}
})
</script>
defineProps({
str: String,
num: Number,
bool: {
type: Boolean,
default: true
},
arr: {
type: Array as PropType<string[]>,
default: () : string[] => [] as string[]
},
obj: {
type: Object as PropType<UTSJSONObject>,
default: () : UTSJSONObject => ({ a: 1 })
},
fn: {
type: Function as PropType<() => string>,
default: () : string => ''
}
})
</script>
\ No newline at end of file
<template>
<view>
<text class="bold uni-common-mt uni-common-mb">type props</text>
<text class="uni-common-mb" id="type-str">str: {{ str }}</text>
<text class="uni-common-mb" id="type-num">num: {{ num }}</text>
<text class="uni-common-mb" id="type-bool">bool: {{ bool }}</text>
<text class="uni-common-mb" id="type-arr">arr: {{ arr }}</text>
<text class="uni-common-mb" id="type-obj">obj: {{ obj }}</text>
<text id="type-fn">fn: {{ fn() }}</text>
</view>
</template>
<script setup>
defineProps<{
str : String,
num : Number,
bool : Boolean,
arr : PropType<string[]>,
obj : PropType<UTSJSONObject>,
fn : PropType<() => string>
}>()
</script>
\ No newline at end of file
<template>
<view class="page">type</view>
</template>
<script setup>
// const props = defineProps<{
// str: String,
// num: Number,
// bool: Boolean,
// arr: Array as PropType<string[]>,
// obj: Object as PropType<UTSJSONObject>,
// func: Function as PropType<() => void>
// }>()
</script>
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册