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

feat(v-on): 补充 prevent 修饰符示例及测试

上级 b78bbcbd
...@@ -17,14 +17,14 @@ ...@@ -17,14 +17,14 @@
<button class="mb-10 btn" v-on:click="handleClick($event as MouseEvent)"> <button class="mb-10 btn" v-on:click="handleClick($event as MouseEvent)">
v-on:click="handleClick($event as MouseEvent)" v-on:click="handleClick($event as MouseEvent)"
内联声明,注意要显式声明$event的类型 内联声明,注意要显式声明$event的类型
</button> </button>
<!-- #ifndef MP --> <!-- #ifndef MP -->
<button class="mb-10 btn" v-on:[event]="handleClick"> <button class="mb-10 btn" v-on:[event]="handleClick">
v-on:[event]="handleClick" 动态事件 v-on:[event]="handleClick" 动态事件
</button> </button>
<button class="mb-10 btn" v-on="{ click: handleClick }"> <button class="mb-10 btn" v-on="{ click: handleClick }">
v-on="{ click: handleClick }" 对象语法 v-on="{ click: handleClick }" 对象语法
</button> </button>
<!-- #endif --> <!-- #endif -->
<!-- TODO: ios 不支持 --> <!-- TODO: ios 不支持 -->
<!-- #ifndef APP-IOS || MP --> <!-- #ifndef APP-IOS || MP -->
...@@ -33,16 +33,38 @@ ...@@ -33,16 +33,38 @@
<view @click="handleClick"> <view @click="handleClick">
<button class="mb-10 btn" id="btn-stop" @click.stop="handleClick">@click stop</button> <button class="mb-10 btn" id="btn-stop" @click.stop="handleClick">@click stop</button>
</view> </view>
<button class="mb-10" id="btn-prevent" @touchstart.prevent="handleTouchstart" @click="handleClick">@touch prevent</button>
</view> </view>
</template> </template>
<script setup lang="uts"> <script setup lang="uts">
const count = ref(0) const count = ref(0)
const event = ref('click') const event = ref('click')
type BtnPreventRect = {
value: DOMRect | null
}
let btnPreventRect = reactive({
value: null
} as BtnPreventRect)
onReady(() => {
const btnPrevent = uni.getElementById("btn-prevent")
btnPreventRect.value = btnPrevent!.getBoundingClientRect()
btnPreventRect.value!.y += uni.getSystemInfoSync().safeArea.top + 44
})
const handleTouchstart = () => {
console.log('handleTouchstart')
}
const handleClick = (e : MouseEvent) => { const handleClick = (e : MouseEvent) => {
count.value++ count.value++
console.log('handleClick', e) console.log('handleClick', e)
} }
defineExpose({
btnPreventRect
})
</script> </script>
...@@ -15,14 +15,14 @@ ...@@ -15,14 +15,14 @@
<button class="mb-10 btn" v-on:click="handleClick($event as MouseEvent)"> <button class="mb-10 btn" v-on:click="handleClick($event as MouseEvent)">
v-on:click="handleClick($event as MouseEvent)" v-on:click="handleClick($event as MouseEvent)"
内联声明,注意要显式声明$event的类型 内联声明,注意要显式声明$event的类型
</button> </button>
<!-- #ifndef MP --> <!-- #ifndef MP -->
<button class="mb-10 btn" v-on:[event]="handleClick"> <button class="mb-10 btn" v-on:[event]="handleClick">
v-on:[event]="handleClick" 动态事件 v-on:[event]="handleClick" 动态事件
</button> </button>
<button class="mb-10 btn" v-on="{ click: handleClick }"> <button class="mb-10 btn" v-on="{ click: handleClick }">
v-on="{ click: handleClick }" 对象语法 v-on="{ click: handleClick }" 对象语法
</button> </button>
<!-- #endif --> <!-- #endif -->
<!-- TODO: ios 不支持 --> <!-- TODO: ios 不支持 -->
<!-- #ifndef APP-IOS || MP --> <!-- #ifndef APP-IOS || MP -->
...@@ -31,18 +31,34 @@ ...@@ -31,18 +31,34 @@
<view @click="handleClick"> <view @click="handleClick">
<button class="mb-10 btn" id="btn-stop" @click.stop="handleClick">@click stop</button> <button class="mb-10 btn" id="btn-stop" @click.stop="handleClick">@click stop</button>
</view> </view>
<button class="mb-10" id="btn-prevent" @touchstart.prevent="handleTouchstart" @click="handleClick">@touch prevent</button>
</view> </view>
</template> </template>
<script lang="uts"> <script lang="uts">
type BtnPreventRect = {
value: DOMRect | null
}
export default { export default {
data() { data() {
return { return {
count: 0, count: 0,
event: 'click' event: 'click',
btnPreventRect: {
value: null as DOMRect | null
} as BtnPreventRect
} }
}, },
onReady(){
const btnPrevent = uni.getElementById("btn-prevent")
this.btnPreventRect.value = btnPrevent?.getBoundingClientRect()
this.btnPreventRect.value!.y += uni.getSystemInfoSync().safeArea.top + 44
},
methods: { methods: {
handleTouchstart(){
console.log('handleTouchstart')
},
handleClick(e : MouseEvent) { handleClick(e : MouseEvent) {
this.count++ this.count++
console.log('handleClick', e) console.log('handleClick', e)
......
...@@ -3,6 +3,7 @@ const COMPOSITION_PAGE_PATH = '/pages/directive/v-on/v-on-composition' ...@@ -3,6 +3,7 @@ const COMPOSITION_PAGE_PATH = '/pages/directive/v-on/v-on-composition'
describe('v-on', () => { describe('v-on', () => {
const platformInfo = process.env.uniTestPlatformInfo.toLowerCase() const platformInfo = process.env.uniTestPlatformInfo.toLowerCase()
const isAndroid = platformInfo.startsWith('android')
const isIOS = platformInfo.startsWith('ios') const isIOS = platformInfo.startsWith('ios')
const isMP = platformInfo.startsWith('mp') const isMP = platformInfo.startsWith('mp')
let page let page
...@@ -29,6 +30,17 @@ describe('v-on', () => { ...@@ -29,6 +30,17 @@ describe('v-on', () => {
await onceBtn.tap() await onceBtn.tap()
expect(await count.text()).toBe(supportedCount) expect(await count.text()).toBe(supportedCount)
} }
if (isAndroid || isIOS) {
const btnPreventRect = (await page.data('btnPreventRect')).value
const x = Math.ceil(btnPreventRect.x + btnPreventRect.width / 2)
const y = Math.ceil(btnPreventRect.y + btnPreventRect.height / 2.0)
await program.tap({
x: x,
y: y,
duration: 100
})
expect(await count.text()).toBe(supportedCount)
}
} }
it('v-on options API', async () => { it('v-on options API', async () => {
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册