52 行
1.8 KiB
Plaintext
52 行
1.8 KiB
Plaintext
<template>
|
|
<view style="align-items: center;">
|
|
<page-head title="微信小程序自定义组件示例"></page-head>
|
|
<text class="uni-list-cell-padding">
|
|
uni-app-x支持在微信小程序端引入微信小程序自定义组件。以下以vant weapp组件为例演示
|
|
</text>
|
|
<text class="uni-common-mt uni-title-text uni-common-mb">vant-button组件</text>
|
|
<vant-button color="#55aa00" @click="onClick">vant weapp的vant-button按钮组件</vant-button>
|
|
<text class="uni-common-mt uni-title-text uni-common-mb">vant-icon组件</text>
|
|
<vant-icon name="balance-list" size="30" color="#aa55ff"></vant-icon>
|
|
<text class="uni-common-mt uni-title-text uni-common-mb">vant-info组件</text>
|
|
<vant-info info="99"></vant-info>
|
|
<text class="uni-common-mt uni-title-text uni-common-mb">vant-loading组件</text>
|
|
<vant-loading color="#00aaff"></vant-loading>
|
|
</view>
|
|
</template>
|
|
<script setup lang="uts">
|
|
/**
|
|
* @description: 演示 uni-app x 在微信小程序端接入 Vant 自定义组件，并完成基础交互验证。
|
|
* @logic: 页面依次渲染 vant-button、vant-icon、vant-info 和 vant-loading 组件，点击按钮后更新页面状态并弹出提示。
|
|
* @optimization: 使用最小状态数据和直接组件渲染方式聚焦验证自定义组件接入能力，避免复杂业务逻辑影响接入结果。
|
|
*/
|
|
type DataType = {
|
|
jest: boolean,
|
|
}
|
|
|
|
// 使用reactive避免ref数据在自动化测试中无法访问
|
|
const data = reactive({
|
|
jest: false,
|
|
} as DataType)
|
|
|
|
function onClick() {
|
|
data.jest = true
|
|
uni.showToast({
|
|
title: "click van-button",
|
|
mask: false,
|
|
icon: "none",
|
|
duration: 1500
|
|
});
|
|
}
|
|
|
|
defineExpose({
|
|
data
|
|
})
|
|
</script>
|
|
<style>
|
|
.van-info {
|
|
right: 200px !important;
|
|
top: 370px !important;
|
|
}
|
|
</style>
|