vant-button.vue 854 B

1234567891011121314151617181920212223242526272829303132333435363738
  1. <template>
  2. <view >
  3. <page-head title="微信小程序自定义组件示例"></page-head>
  4. <view class="uni-common-mt" style="text-align: center;width: 750rpx;width: 100%;">
  5. <text style="padding-left: 10px;padding-right: 10px;">
  6. uni-app支持在微信小程序、QQ小程序端、App端、H5端引入微信小程序自定义组件。以下以vant weapp组件为例演示
  7. </text>
  8. </view>
  9. <view class="uni-common-mt" style="text-align: center;">
  10. <van-button type="primary" @click="onClick">vant weapp的van-button按钮组件</van-button>
  11. </view>
  12. </view>
  13. </template>
  14. <script>
  15. export default {
  16. data() {
  17. return {
  18. checked: true
  19. };
  20. },
  21. methods: {
  22. onClick() {
  23. uni.showToast({
  24. title: "click van-button",
  25. mask: false,
  26. icon: "none",
  27. duration: 1500
  28. });
  29. }
  30. }
  31. }
  32. </script>
  33. <style>
  34. </style>