u-toolbar.vue 2.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103
  1. <template>
  2. <view
  3. class="u-toolbar"
  4. @touchmove.stop.prevent="noop"
  5. v-if="show"
  6. >
  7. <view
  8. class="u-toolbar__cancel__wrapper"
  9. hover-class="u-hover-class"
  10. >
  11. <text
  12. class="u-toolbar__wrapper__cancel"
  13. @tap="cancel"
  14. :style="{
  15. color: cancelColor
  16. }"
  17. >{{ cancelText }}</text>
  18. </view>
  19. <text
  20. class="u-toolbar__title u-line-1"
  21. v-if="title"
  22. >{{ title }}</text>
  23. <view
  24. class="u-toolbar__confirm__wrapper"
  25. hover-class="u-hover-class"
  26. >
  27. <text
  28. class="u-toolbar__wrapper__confirm"
  29. @tap="confirm"
  30. :style="{
  31. color: confirmColor
  32. }"
  33. >{{ confirmText }}</text>
  34. </view>
  35. </view>
  36. </template>
  37. <script>
  38. import props from './props.js';
  39. /**
  40. * Toolbar 工具条
  41. * @description
  42. * @tutorial https://www.uviewui.com/components/toolbar.html
  43. * @property {Boolean} show 是否展示工具条(默认 true )
  44. * @property {String} cancelText 取消按钮的文字(默认 '取消' )
  45. * @property {String} confirmText 确认按钮的文字(默认 '确认' )
  46. * @property {String} cancelColor 取消按钮的颜色(默认 '#909193' )
  47. * @property {String} confirmColor 确认按钮的颜色(默认 '#3c9cff' )
  48. * @property {String} title 标题文字
  49. * @event {Function}
  50. * @example
  51. */
  52. export default {
  53. name: 'u-toolbar',
  54. mixins: [uni.$u.mpMixin, uni.$u.mixin,props],
  55. methods: {
  56. // 点击取消按钮
  57. cancel() {
  58. this.$emit('cancel')
  59. },
  60. // 点击确定按钮
  61. confirm() {
  62. this.$emit('confirm')
  63. }
  64. },
  65. }
  66. </script>
  67. <style lang="scss" scoped>
  68. @import "../../libs/css/components.scss";
  69. .u-toolbar {
  70. height: 42px;
  71. @include flex;
  72. justify-content: space-between;
  73. align-items: center;
  74. &__wrapper {
  75. &__cancel {
  76. color: $u-tips-color;
  77. font-size: 15px;
  78. padding: 0 15px;
  79. }
  80. }
  81. &__title {
  82. color: $u-main-color;
  83. padding: 0 60rpx;
  84. font-size: 16px;
  85. flex: 1;
  86. text-align: center;
  87. }
  88. &__wrapper {
  89. &__confirm {
  90. color: $u-primary;
  91. font-size: 15px;
  92. padding: 0 15px;
  93. }
  94. }
  95. }
  96. </style>