native-view-time-picker-dialog.uvue 948 B

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647
  1. <template>
  2. <view class="dialog-container">
  3. <!-- native-time-picker 通过 native-view 绑定原生time-picker 实现的UTS插件-标准模式组件 -->
  4. <native-time-picker class="native-time-picker" :hour=2 :minute=3 @changed="onChanged"></native-time-picker>
  5. <button @click="sure">确定</button>
  6. </view>
  7. </template>
  8. <script>
  9. export default {
  10. data() {
  11. return {
  12. }
  13. },
  14. methods: {
  15. onChanged(e : UniNativeViewEvent) {
  16. console.log("onchanged-----", e.detail)
  17. },
  18. sure() {
  19. uni.closeDialogPage({
  20. dialogPage: this.$page
  21. })
  22. }
  23. }
  24. }
  25. </script>
  26. <style>
  27. .native-time-picker {
  28. margin: 10px auto 25px auto;
  29. border-style: solid;
  30. border-radius: 5px;
  31. background-color: white;
  32. }
  33. .dialog-container {
  34. width: 100%;
  35. height: 100%;
  36. background-color: rgba(0, 0, 0, 0.3);
  37. display: flex;
  38. justify-content: center;
  39. align-items: center;
  40. }
  41. </style>