search-drawer.vue 2.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105
  1. <template>
  2. <view>
  3. <view class="search" @click="showDrawer"></view>
  4. <uni-drawer ref="showRight" mode="right" :width="300">
  5. <scroll-view class="drawer" style="height: 100%" scroll-y="true">
  6. <div class="title">{{ title }}</div>
  7. <slot></slot>
  8. <view class="btn-group">
  9. <view class="btn" @click="onOk">确定</view>
  10. <view class="btn btn-white" @click="closeDrawer">取消</view>
  11. </view>
  12. </scroll-view>
  13. </uni-drawer>
  14. </view>
  15. </template>
  16. <script>
  17. export default {
  18. name: "search-drawer",
  19. props: ["title", "visible"],
  20. watch: {
  21. visible(val) {
  22. if (val) {
  23. this.$refs.showRight.open();
  24. } else {
  25. this.$refs.showRight.close();
  26. }
  27. },
  28. },
  29. methods: {
  30. onOk() {
  31. this.$emit("onOk");
  32. },
  33. closeDrawer() {
  34. this.$emit("update:visible", false);
  35. this.$refs.showRight.close();
  36. },
  37. showDrawer() {
  38. this.$emit("update:visible", true);
  39. this.$refs.showRight.open();
  40. },
  41. },
  42. };
  43. </script>
  44. <style lang="less" scoped>
  45. .search {
  46. position: fixed;
  47. right: 0;
  48. top: 300rpx;
  49. width: 100rpx;
  50. height: 100rpx;
  51. z-index: 999;
  52. background: url("@/static/drawer-bar.png") no-repeat center;
  53. background-size: cover;
  54. }
  55. .drawer {
  56. .title {
  57. font-size: 34rpx;
  58. font-family: Microsoft YaHei UI;
  59. font-weight: bold;
  60. color: #666666;
  61. line-height: 1;
  62. border-bottom: 1px solid #666666;
  63. margin: 44rpx 30rpx 20rpx;
  64. padding-bottom: 34rpx;
  65. }
  66. .btn-group {
  67. display: flex;
  68. justify-content: space-between;
  69. padding: 20rpx 30rpx;
  70. margin-top: 20rpx;
  71. }
  72. .btn {
  73. height: 70rpx;
  74. width: 210rpx;
  75. line-height: 70rpx;
  76. text-align: center;
  77. background: #5b78bf;
  78. color: #fff;
  79. font-size: 30rpx;
  80. &.btn-white {
  81. background: #fff;
  82. color: #333;
  83. border: 1px solid #666;
  84. }
  85. }
  86. ::v-deep {
  87. .select {
  88. width: 100%;
  89. height: 72rpx;
  90. line-height: 70rpx;
  91. border: 1px solid #666;
  92. padding-left: 20rpx;
  93. }
  94. .input {
  95. border: 1px solid #666;
  96. }
  97. .uni-forms-item__label {
  98. font-size: 34rpx;
  99. color: #666;
  100. width: 100% !important;
  101. }
  102. }
  103. }
  104. </style>