Skip to content

H
hello-uvue

DCloud / hello-uvue

通知 401
Star 3
Fork 10
H
hello-uvue
提交 246ec8e7 编写于 作者: D DCloud_LXH
浏览文件
操作

refactor(component-instance): methods

上级 8e97c0c5
隐藏空白更改
内联 并排
Showing with 659 addition and 222 deletion
pages.json
浏览文件 @ 246ec8e7
...@@ -372,27 +372,51 @@ ...@@ -372,27 +372,51 @@
} }
}, },
{ {
"path": "pages/component-instance/methods/call-method-uni-element", "path": "pages/component-instance/methods/call-method-uni-element-options",
"style": { "style": {
"navigationBarTitleText": "call-method-uni-element" "navigationBarTitleText": "call-method-uni-element 选项式 API"
} }
}, },
{ {
"path": "pages/component-instance/methods/call-method-easycom", "path": "pages/component-instance/methods/call-method-uni-element-composition",
"style": { "style": {
"navigationBarTitleText": "call-method-easycom" "navigationBarTitleText": "call-method-uni-element 组合式 API"
} }
}, },
{ {
"path": "pages/component-instance/methods/call-method-easycom-uni-modules", "path": "pages/component-instance/methods/call-method-easycom-options",
"style": { "style": {
"navigationBarTitleText": "call-method-easycom-uni-modules" "navigationBarTitleText": "call-method-easycom 选项式 API"
} }
}, },
{ {
"path": "pages/component-instance/methods/call-method-other", "path": "pages/component-instance/methods/call-method-easycom-composition",
"style": { "style": {
"navigationBarTitleText": "call-method-other" "navigationBarTitleText": "call-method-easycom 组合式 API"
}
},
{
"path": "pages/component-instance/methods/call-method-easycom-uni-modules-options",
"style": {
"navigationBarTitleText": "call-method-easycom-uni-modules 选项式 API"
}
},
{
"path": "pages/component-instance/methods/call-method-easycom-uni-modules-composition",
"style": {
"navigationBarTitleText": "call-method-easycom-uni-modules 组合式 API"
}
},
{
"path": "pages/component-instance/methods/call-method-other-options",
"style": {
"navigationBarTitleText": "call-method-other 选项式 API"
}
},
{
"path": "pages/component-instance/methods/call-method-other-composition",
"style": {
"navigationBarTitleText": "call-method-other 组合式 API"
} }
}, },
{ {
......
pages/component-instance/methods/call-method-easycom-composition.uvue 0 → 100644
浏览文件 @ 246ec8e7
<template>
<view>
<call-easy-method ref="callEasyMethod1"></call-easy-method>
</view>
</template>
<script setup lang="uts">
const callEasyMethod1 = ref<CallEasyMethodComponentPublicInstance | null>(null)
const callMethod1 = () => {
// 调用组件的 foo1 方法
callEasyMethod1.value!.foo1()
}
const callMethod2 = () => {
// 调用组件的 foo2 方法并传递 1个参数
callEasyMethod1.value!.foo2(Date.now())
}
const callMethod3 = () => {
// 调用组件的 foo3 方法并传递 2个参数
callEasyMethod1.value!.foo3(Date.now(), Date.now())
}
const callMethod4 = () => {
// 调用组件的 foo4 方法并传递 callback
callEasyMethod1.value!.foo4(() => {
console.log('callback')
})
}
const callMethod5 = () => {
// 注意： 返回值可能为 null，当前例子一定不为空，所以加了 !
const result = callEasyMethod1.value!.foo5('string1') as string
console.log(result) // string1
}
const callMethodTest = (text: string): string | null => {
const result = callEasyMethod1.value!.foo5(text) as string
return result
}
const delay = (): Promise<string> =>
new Promise((resolve, _) => {
setTimeout(() => {
resolve('')
}, 1000)
})
const call = async (): Promise<void> => {
callMethod1()
await delay()
callMethod2()
await delay()
callMethod3()
await delay()
callMethod4()
await delay()
callMethod5()
}
onReady(() => {
call()
})
defineExpose({
callMethodTest
})
</script>
\ No newline at end of file
pages/component-instance/methods/call-method-easycom-options.uvue 0 → 100644
浏览文件 @ 246ec8e7
<template>
<view>
<call-easy-method ref="callEasyMethod1"></call-easy-method>
</view>
</template>
<script lang="uts">
const delay = (): Promise<string> =>
new Promise((resolve, _) => {
setTimeout(() => {
resolve('')
}, 1000)
})
export default {
data() {
return {
callEasyMethod1: null as CallEasyMethodComponentPublicInstance | null
}
},
onReady() {
// 通过组件 ref 属性获取组件实例, 组件标签名首字母大写，驼峰+ComponentPublicInstance
this.callEasyMethod1 = this.$refs['callEasyMethod1'] as CallEasyMethodComponentPublicInstance
},
methods: {
call: async (): Promise<void> => {
this.callMethod1()
await delay()
this.callMethod2()
await delay()
this.callMethod3()
await delay()
this.callMethod4()
await delay()
this.callMethod5()
},
callMethod1() {
// 调用组件的 foo1 方法
this.callEasyMethod1!.foo1()
},
callMethod2() {
// 调用组件的 foo2 方法并传递 1个参数
this.callEasyMethod1!.foo2(Date.now())
},
callMethod3() {
// 调用组件的 foo3 方法并传递 2个参数
this.callEasyMethod1!.foo3(Date.now(), Date.now())
},
callMethod4() {
// 调用组件的 foo4 方法并传递 callback
this.callEasyMethod1!.foo4(() => {
console.log('callback')
})
},
callMethod5() {
// 注意： 返回值可能为 null，当前例子一定不为空，所以加了 !
const result = this.callEasyMethod1!.foo5('string1') as string
console.log(result) // string1
},
callMethodTest(text: string): string | null {
const result = this.callEasyMethod1!.foo5(text) as string
return result
}
}
}
</script>
\ No newline at end of file
pages/component-instance/methods/call-method-easycom-uni-modules-composition.uvue 0 → 100644
浏览文件 @ 246ec8e7
<template>
<view>
<call-easy-method-uni-modules ref="callEasyMethod1"></call-easy-method-uni-modules>
</view>
</template>
<script setup lang="uts">
import { testInOtherFile } from './call-method-easycom-uni-modules'
const delay = (): Promise<string> =>
new Promise((resolve, _) => {
setTimeout(() => {
resolve('')
}, 1000)
})
const callEasyMethod1 = ref<CallEasyMethodUniModulesComponentPublicInstance | null>(null)
const callMethod1 = () => {
// 调用组件的 foo1 方法
callEasyMethod1.value!.foo1()
}
const callMethod2 = () => {
// 调用组件的 foo2 方法并传递 1个参数
callEasyMethod1.value!.foo2(Date.now())
}
const callMethod3 = () => {
// 调用组件的 foo3 方法并传递 2个参数
callEasyMethod1.value!.foo3(Date.now(), Date.now())
}
const callMethod4 = () => {
// 调用组件的 foo4 方法并传递 callback
callEasyMethod1.value!.foo4(() => {
console.log('callback')
})
}
const callMethod5 = () => {
// 注意： 返回值可能为 null，当前例子一定不为空，所以加了 !
const result = callEasyMethod1.value!.foo5('string5') as string
console.log(result) // string1
}
const callMethodTest = (text: string): string | null => {
const result = callEasyMethod1.value!.foo5(text) as string
return result
}
const callMethodInOtherFile = (text: string): string => {
return testInOtherFile(callEasyMethod1.value!, text)
}
const call = async (): Promise<void> => {
callMethod1()
await delay()
callMethod2()
await delay()
callMethod3()
await delay()
callMethod4()
await delay()
callMethod5()
}
onReady(() => {
call()
})
defineExpose({
callMethodTest,
callMethodInOtherFile
})
</script>
\ No newline at end of file
pages/component-instance/methods/call-method-easycom-uni-modules-options.uvue 0 → 100644
浏览文件 @ 246ec8e7
<template>
<view>
<call-easy-method-uni-modules ref="callEasyMethod1"></call-easy-method-uni-modules>
</view>
</template>
<script lang="uts">
import { testInOtherFile } from './call-method-easycom-uni-modules'
const delay = (): Promise<string> =>
new Promise((resolve, _) => {
setTimeout(() => {
resolve('')
}, 1000)
})
export default {
data() {
return {
callEasyMethod1: null as CallEasyMethodUniModulesComponentPublicInstance | null
}
},
onReady() {
// 通过组件 ref 属性获取组件实例, 组件标签名首字母大写，驼峰+ComponentPublicInstance
this.callEasyMethod1 = this.$refs['callEasyMethod1'] as CallEasyMethodUniModulesComponentPublicInstance
this.call()
},
methods: {
call: async (): Promise<void> => {
this.callMethod1()
await delay()
this.callMethod2()
await delay()
this.callMethod3()
await delay()
this.callMethod4()
await delay()
this.callMethod5()
},
callMethod1() {
// 调用组件的 foo1 方法
this.callEasyMethod1!.foo1()
},
callMethod2() {
// 调用组件的 foo2 方法并传递 1个参数
this.callEasyMethod1!.foo2(Date.now())
},
callMethod3() {
// 调用组件的 foo3 方法并传递 2个参数
this.callEasyMethod1!.foo3(Date.now(), Date.now())
},
callMethod4() {
// 调用组件的 foo4 方法并传递 callback
this.callEasyMethod1!.foo4(() => {
console.log('callback')
})
},
callMethod5() {
// 注意： 返回值可能为 null，当前例子一定不为空，所以加了 !
const result = this.callEasyMethod1!.foo5('string5') as string
console.log(result) // string1
},
callMethodTest(text: string): string | null {
const result = this.callEasyMethod1!.foo5(text) as string
return result
},
callMethodInOtherFile(text: string): string {
return testInOtherFile(this.callEasyMethod1!, text)
}
}
}
</script>
\ No newline at end of file
pages/component-instance/methods/call-method-easycom-uni-modules.test.js
浏览文件 @ 246ec8e7
const PAGE_PATH = '/pages/component-instance/methods/call-method-easycom-uni-modules' const PAGE_PATH = '/pages/component-instance/methods/call-method-easycom-uni-modules-options'
const PAGE_COMPOSITION_PATH = '/pages/component-instance/methods/call-method-easycom-uni-modules-composition'
describe('call-method-easycom-uni-modules', () => { describe('call-method-easycom-uni-modules', () => {
let page let page
beforeAll(async () => { describe('Options API', () => {
page = await program.reLaunch(PAGE_PATH) beforeAll(async () => {
await page.waitFor(500) page = await program.reLaunch(PAGE_PATH)
await page.waitFor(500)
})
it('callMethodTest Options API', async () => {
const title = Date.now() + ''
const result = await page.callMethod('callMethodTest', title)
expect(result).toBe(title)
})
it('callMethodInOtherFile Options API', async () => {
const title = Date.now() + ''
const result = await page.callMethod('callMethodInOtherFile', title)
expect(result).toBe(title)
})
}) })
it('callMethodTest', async () => {
const title = Date.now() + '' describe('Composition API', () => {
const result = await page.callMethod('callMethodTest', title) beforeAll(async () => {
expect(result).toBe(title) page = await program.reLaunch(PAGE_COMPOSITION_PATH)
}) await page.waitFor(500)
it('callMethodInOtherFile', async () => { })
const title = Date.now() + '' it('callMethodTest Composition API', async () => {
const result = await page.callMethod('callMethodInOtherFile', title) const title = Date.now() + ''
expect(result).toBe(title) const result = await page.callMethod('callMethodTest', title)
expect(result).toBe(title)
})
it('callMethodInOtherFile Composition API', async () => {
const title = Date.now() + ''
const result = await page.callMethod('callMethodInOtherFile', title)
expect(result).toBe(title)
})
}) })
}) })
\ No newline at end of file
pages/component-instance/methods/call-method-easycom-uni-modules.uvue 已删除 100644 → 0
浏览文件 @ 8e97c0c5
<template>
<view>
<call-easy-method-uni-modules ref="callEasyMethod1"></call-easy-method-uni-modules>
</view>
</template>
<script>
import { testInOtherFile } from './call-method-easycom-uni-modules'
export default {
data() {
return {
callEasyMethod1: null as CallEasyMethodUniModulesComponentPublicInstance | null
}
},
onReady() {
// 通过组件 ref 属性获取组件实例, 组件标签名首字母大写，驼峰+ComponentPublicInstance
this.callEasyMethod1 = this.$refs['callEasyMethod1'] as CallEasyMethodUniModulesComponentPublicInstance;
},
methods: {
callMethod1() {
// 调用组件的 foo1 方法
this.callEasyMethod1!.foo1();
},
callMethod2() {
// 调用组件的 foo2 方法并传递 1个参数
this.callEasyMethod1!.foo2(Date.now());
},
callMethod3() {
// 调用组件的 foo3 方法并传递 2个参数
this.callEasyMethod1!.foo3(Date.now(), Date.now());
},
callMethod4() {
// 调用组件的 foo4 方法并传递 callback
this.callEasyMethod1!.foo4(() => {
console.log('callback')
});
},
callMethod5() {
// 注意： 返回值可能为 null，当前例子一定不为空，所以加了 !
const result = this.callEasyMethod1!.foo5('string1') as string;
console.log(result); // string1
},
callMethodTest(text: string): string | null {
const result = this.callEasyMethod1!.foo5(text) as string;
return result;
},
callMethodInOtherFile(text: string): string {
return testInOtherFile(this.callEasyMethod1!, text);
},
}
}
</script>
\ No newline at end of file
pages/component-instance/methods/call-method-easycom.test.js
浏览文件 @ 246ec8e7
const PAGE_PATH = '/pages/component-instance/methods/call-method-easycom' const PAGE_PATH = '/pages/component-instance/methods/call-method-easycom-options'
const PAGE_COMPOSITION_PATH = '/pages/component-instance/methods/call-method-easycom-composition'
describe('call-method-easycom', () => { describe('call-method-easycom', () => {
let page let page
beforeAll(async () => {
it('callMethodTest Options API', async () => {
page = await program.reLaunch(PAGE_PATH) page = await program.reLaunch(PAGE_PATH)
await page.waitFor(500) await page.waitFor(500)
const title = Date.now() + ''
const result = await page.callMethod('callMethodTest', title)
expect(result).toBe(title)
}) })
it('callMethodTest', async () => {
it('callMethodTest Composition API', async () => {
page = await program.reLaunch(PAGE_COMPOSITION_PATH)
await page.waitFor(500)
const title = Date.now() + '' const title = Date.now() + ''
const result = await page.callMethod('callMethodTest', title) const result = await page.callMethod('callMethodTest', title)
expect(result).toBe(title) expect(result).toBe(title)
}) })
}) })
\ No newline at end of file
pages/component-instance/methods/call-method-easycom.uvue 已删除 100644 → 0
浏览文件 @ 8e97c0c5
<template>
<view>
<call-easy-method ref="callEasyMethod1"></call-easy-method>
</view>
</template>
<script>
export default {
data() {
return {
callEasyMethod1: null as CallEasyMethodComponentPublicInstance | null
}
},
onReady() {
// 通过组件 ref 属性获取组件实例, 组件标签名首字母大写，驼峰+ComponentPublicInstance
this.callEasyMethod1 = this.$refs['callEasyMethod1'] as CallEasyMethodComponentPublicInstance;
},
methods: {
callMethod1() {
// 调用组件的 foo1 方法
this.callEasyMethod1!.foo1();
},
callMethod2() {
// 调用组件的 foo2 方法并传递 1个参数
this.callEasyMethod1!.foo2(Date.now());
},
callMethod3() {
// 调用组件的 foo3 方法并传递 2个参数
this.callEasyMethod1!.foo3(Date.now(), Date.now());
},
callMethod4() {
// 调用组件的 foo4 方法并传递 callback
this.callEasyMethod1!.foo4(() => {
console.log('callback')
});
},
callMethod5() {
// 注意： 返回值可能为 null，当前例子一定不为空，所以加了 !
const result = this.callEasyMethod1!.foo5('string1') as string;
console.log(result); // string1
},
callMethodTest(text: string): string | null {
const result = this.callEasyMethod1!.foo5(text) as string;
return result;
},
}
}
</script>
\ No newline at end of file
pages/component-instance/methods/call-method-other-composition.uvue 0 → 100644
浏览文件 @ 246ec8e7
<template>
<view>
<component1 ref="componentRef"></component1>
</view>
</template>
<script setup lang="uts">
// 非easycom组件需import引用组件 componentRef-composition.uvue
import component1 from './component1-composition.uvue'
const componentRef = ref<ComponentPublicInstance | null>(null)
const callMethod1 = () => {
// 通过 $callMethod 调用组件的 foo1 方法
componentRef.value!.$callMethod('foo1')
}
const callMethod2 = () => {
// 通过 $callMethod 调用组件的 foo2 方法并传递 1个参数
componentRef.value!.$callMethod('foo2', Date.now())
}
const callMethod3 = () => {
// 通过 $callMethod 调用组件的 foo3 方法并传递 2个参数
componentRef.value!.$callMethod('foo3', Date.now(), Date.now())
}
const callMethod4 = () => {
// 通过 $callMethod 调用组件的 foo4 方法并传递 callback
componentRef.value!.$callMethod('foo4', () => {
console.log('callback')
})
}
const callMethod5 = () => {
// 通过 $callMethod 调用组件的 foo5 方法并接收返回值
// 注意： 返回值可能为 null，当前例子一定不为空，所以加了 !
const result = componentRef.value!.$callMethod('foo5', 'string1') as string
console.log(result) // string1
}
const callMethodTest = (text: string): string | null => {
const result = componentRef.value!.$callMethod('foo5', text) as string
return result
}
const delay = (): Promise<string> =>
new Promise((resolve, _) => {
setTimeout(() => {
resolve('')
}, 1000)
})
const call = async (): Promise<void> => {
callMethod1()
await delay()
callMethod2()
await delay()
callMethod3()
await delay()
callMethod4()
await delay()
callMethod5()
}
onReady(() => {
call()
})
defineExpose({
callMethodTest
})
</script>
\ No newline at end of file
pages/component-instance/methods/call-method-other-options.uvue 0 → 100644
浏览文件 @ 246ec8e7
<template>
<view>
<component1 ref="component1"></component1>
</view>
</template>
<script>
// 非easycom组件需import引用组件 component1.uvue
import component1 from './component1.uvue'
const delay = (): Promise<string> =>
new Promise((resolve, _) => {
setTimeout(() => {
resolve('')
}, 1000)
})
export default {
components: {
component1
},
data() {
return {
component1: null as ComponentPublicInstance | null
}
},
onReady() {
// 通过组件 ref 属性获取组件实例
this.component1 = this.$refs['component1'] as ComponentPublicInstance;
this.call()
},
methods: {
call: async (): Promise<void> => {
this.callMethod1()
await delay()
this.callMethod2()
await delay()
this.callMethod3()
await delay()
this.callMethod4()
await delay()
this.callMethod5()
},
callMethod1() {
// 通过 $callMethod 调用组件的 foo1 方法
this.component1!.$callMethod('foo1');
},
callMethod2() {
// 通过 $callMethod 调用组件的 foo2 方法并传递 1个参数
this.component1!.$callMethod('foo2', Date.now());
},
callMethod3() {
// 通过 $callMethod 调用组件的 foo3 方法并传递 2个参数
this.component1!.$callMethod('foo3', Date.now(), Date.now());
},
callMethod4() {
// 通过 $callMethod 调用组件的 foo4 方法并传递 callback
this.component1!.$callMethod('foo4', () => {
console.log('callback')
});
},
callMethod5() {
// 通过 $callMethod 调用组件的 foo5 方法并接收返回值
// 注意： 返回值可能为 null，当前例子一定不为空，所以加了 !
const result = this.component1!.$callMethod('foo5', 'string1') as string;
console.log(result); // string1
},
callMethodTest(text: string): string | null {
const result = this.component1!.$callMethod('foo5', text) as string;
return result;
},
}
}
</script>
pages/component-instance/methods/call-method-other.test.js
浏览文件 @ 246ec8e7
const PAGE_PATH = '/pages/component-instance/methods/call-method-other' const PAGE_PATH = '/pages/component-instance/methods/call-method-other-options'
const PAGE_COMPOSITION_PATH = '/pages/component-instance/methods/call-method-other-composition'
describe('call-method-other', () => { describe('call-method-other', () => {
let page let page
beforeAll(async () => {
it('callMethodTest Options API', async () => {
page = await program.reLaunch(PAGE_PATH) page = await program.reLaunch(PAGE_PATH)
await page.waitFor(500) await page.waitFor(500)
const title = Date.now() + ''
const result = await page.callMethod('callMethodTest', title)
expect(result).toBe(title)
}) })
it('callMethodTest', async () => {
it('callMethodTest Composition API', async () => {
page = await program.reLaunch(PAGE_COMPOSITION_PATH)
await page.waitFor(500)
const title = Date.now() + '' const title = Date.now() + ''
const result = await page.callMethod('callMethodTest', title) const result = await page.callMethod('callMethodTest', title)
expect(result).toBe(title) expect(result).toBe(title)
}) })
}) })
\ No newline at end of file
pages/component-instance/methods/call-method-other.uvue 已删除 100644 → 0
浏览文件 @ 8e97c0c5
<template>
<view>
<component1 ref="component1"></component1>
</view>
</template>
<script>
// 非easycom组件需import引用组件 component1.uvue
import component1 from './component1.uvue'
export default {
components: {
component1
},
data() {
return {
component1: null as ComponentPublicInstance | null
}
},
onReady() {
// 通过组件 ref 属性获取组件实例
this.component1 = this.$refs['component1'] as ComponentPublicInstance;
},
methods: {
callMethod1() {
// 通过 $callMethod 调用组件的 foo1 方法
this.component1!.$callMethod('foo1');
},
callMethod2() {
// 通过 $callMethod 调用组件的 foo2 方法并传递 1个参数
this.component1!.$callMethod('foo2', Date.now());
},
callMethod3() {
// 通过 $callMethod 调用组件的 foo3 方法并传递 2个参数
this.component1!.$callMethod('foo3', Date.now(), Date.now());
},
callMethod4() {
// 通过 $callMethod 调用组件的 foo4 方法并传递 callback
this.component1!.$callMethod('foo4', () => {
console.log('callback')
});
},
callMethod5() {
// 通过 $callMethod 调用组件的 foo5 方法并接收返回值
// 注意： 返回值可能为 null，当前例子一定不为空，所以加了 !
const result = this.component1!.$callMethod('foo5', 'string1') as string;
console.log(result); // string1
},
callMethodTest(text: string): string | null {
const result = this.component1!.$callMethod('foo5', text) as string;
return result;
},
}
}
</script>
\ No newline at end of file
pages/component-instance/methods/call-method-uni-element-composition.uvue 0 → 100644
浏览文件 @ 246ec8e7
<template>
<view>
<slider :show-value="true" ref="sliderRef"></slider>
</view>
</template>
<script setup lang="uts">
const sliderRef = ref<UniSliderElement | null>(null)
const setValue = () => {
sliderRef.value!.value = 80
}
onReady(() => {
setValue()
})
const callMethodTest = (text: string): string | null => {
sliderRef.value!.setAttribute('str', text)
const result = sliderRef.value!.getAttribute('str') as string
return result
}
defineExpose({
callMethodTest
})
</script>
\ No newline at end of file
pages/component-instance/methods/call-method-uni-element-options.uvue 0 → 100644
浏览文件 @ 246ec8e7
<template>
<view>
<slider :show-value="true" ref="slider1"></slider>
</view>
</template>
<script>
export default {
data() {
return {
slider1: null as UniSliderElement | null
}
},
onReady() {
// 通过组件 ref 属性获取组件实例, Uni组件名(驼峰)UniElement
this.slider1 = this.$refs['slider1'] as UniSliderElement;
this.setValue()
},
methods: {
setValue() {
this.slider1!.value = 80
},
callMethodTest(text: string): string | null {
this.slider1!.setAttribute('str', text);
const result = this.slider1!.getAttribute('str') as string;
return result;
},
}
}
</script>
pages/component-instance/methods/call-method-uni-element.test.js
浏览文件 @ 246ec8e7
const PAGE_PATH = '/pages/component-instance/methods/call-method-uni-element' const PAGE_PATH = '/pages/component-instance/methods/call-method-uni-element-options'
const PAGE_COMPOSITION_PATH = '/pages/component-instance/methods/call-method-uni-element-composition'
describe('call-method-uni-element', () => { describe('call-method-uni-element', () => {
let page let page
beforeAll(async () => {
it('callMethodTest Options API', async () => {
page = await program.reLaunch(PAGE_PATH) page = await program.reLaunch(PAGE_PATH)
await page.waitFor(500) await page.waitFor(500)
const title = Date.now() + ''
const result = await page.callMethod('callMethodTest', title)
expect(result).toBe(title)
}) })
it('callMethodTest', async () => {
it('callMethodTest Composition API', async () => {
page = await program.reLaunch(PAGE_COMPOSITION_PATH)
await page.waitFor(500)
const title = Date.now() + '' const title = Date.now() + ''
const result = await page.callMethod('callMethodTest', title) const result = await page.callMethod('callMethodTest', title)
expect(result).toBe(title) expect(result).toBe(title)
}) })
}) })
\ No newline at end of file
pages/component-instance/methods/call-method-uni-element.uvue 已删除 100644 → 0
浏览文件 @ 8e97c0c5
<template>
<view>
<slider ref="slider1"></slider>
</view>
</template>
<script>
export default {
data() {
return {
slider1: null as UniSliderElement | null
}
},
onReady() {
// 通过组件 ref 属性获取组件实例, Uni组件名(驼峰)UniElement
this.slider1 = this.$refs['slider1'] as UniSliderElement;
},
methods: {
setValue() : boolean {
// 设置组件的 value 属性
this.slider1!.value = 80;
return true;
},
callMethodTest(text: string): string | null {
this.slider1!.setAttribute('str', text);
const result = this.slider1!.getAttribute('str') as string;
return result;
},
}
}
</script>
\ No newline at end of file
pages/component-instance/methods/component1-composition.uvue 0 → 100644
浏览文件 @ 246ec8e7
<template>
<view>{{ result }}</view>
</template>
<script setup lang="uts">
const result = ref<string>('')
const foo1 = () => {
result.value = 'foo1'
}
const foo2 = (date1: number) => {
result.value = 'foo2=' + date1
}
const foo3 = (date1: number, date2: number) => {
result.value = 'foo3=' + date1 + ' ' + date2
}
const foo4 = (callback: () => void) => {
callback()
}
const foo5 = (text: string): string => {
result.value = text
return text
}
defineExpose({
foo1,
foo2,
foo3,
foo4,
foo5
})
</script>
\ No newline at end of file
pages/component-instance/methods/component1.uvue
浏览文件 @ 246ec8e7
...@@ -22,7 +22,8 @@ ...@@ -22,7 +22,8 @@
foo4(callback : (() => void)) { foo4(callback : (() => void)) {
callback() callback()
}, },
foo5(text1 : string) : any | null { foo5(text1 : string) : string | null {
this.result = text1
return text1 return text1
} }
} }
......
pages/index/index.uvue
浏览文件 @ 246ec8e7
...@@ -295,6 +295,42 @@ export default { ...@@ -295,6 +295,42 @@ export default {
url: 'force-update-composition' url: 'force-update-composition'
} }
] ]
},
{
id: 'methods',
name: '$methods',
children: [
{
id: 'call-method-easycom-uni-modules-options',
name: '调用 uni_modules easycom 组件方法 选项式 API',
url: 'call-method-easycom-uni-modules-options'
},
{
id: 'call-method-easycom-uni-modules-composition',
name: '调用 uni_modules easycom 组件方法 组合式 API',
url: 'call-method-easycom-uni-modules-composition'
},
{
id: 'call-method-uni-element-options',
name: '调用内置组件方法 选项式 API',
url: 'call-method-uni-element-options'
},
{
id: 'call-method-uni-element-composition',
name: '调用内置组件方法 组合式 API',
url: 'call-method-uni-element-composition'
},
{
id: 'call-method-other-options',
name: '调用自定义组件方法 选项式 API',
url: 'call-method-other-options'
},
{
id: 'call-method-other-composition',
name: '调用自定义组件方法 组合式 API',
url: 'call-method-other-composition'
}
]
} }
] as Page[] ] as Page[]
}, },
......
uni_modules/call-easy-method/components/call-easy-method-uni-modules/call-easy-method-uni-modules.vue
浏览文件 @ 246ec8e7
...@@ -23,6 +23,7 @@ ...@@ -23,6 +23,7 @@
callback() callback()
}, },
foo5(text1: string): any | null { foo5(text1: string): any | null {
this.result = text1
return text1 return text1
} }
} }
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或