x-bluetooth.vue 1.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667
  1. <template>
  2. <view>
  3. <view class="card_item_tooth" v-for="(item,index) in list" :key="index">
  4. <view class="card_wifi">
  5. <u-icon name="wifi" color="#2979ff" size="26"></u-icon>
  6. <view class="wifi_item_title">{{item.name}}</view>
  7. </view>
  8. <view>
  9. <u-button size="small" :type="btnType" :text="text" @click="connect(item)"></u-button>
  10. </view>
  11. </view>
  12. </view>
  13. </template>
  14. <script>
  15. export default {
  16. name: 'x-bluetooth',
  17. props: {
  18. list: {
  19. type: Array,
  20. default () {
  21. return []
  22. }
  23. },
  24. text: {
  25. type: String,
  26. default () {
  27. return '连接'
  28. }
  29. },
  30. btnType: {
  31. type: String,
  32. default () {
  33. return 'primary'
  34. }
  35. },
  36. },
  37. data() {
  38. return {}
  39. },
  40. mounted() {},
  41. methods: {
  42. connect(value) {
  43. this.$emit('connect', value)
  44. }
  45. }
  46. }
  47. </script>
  48. <style lang="scss" scoped>
  49. .card_item_tooth {
  50. padding: 20rpx 0rpx;
  51. display: flex;
  52. justify-content: space-between;
  53. align-items: center;
  54. }
  55. .card_wifi {
  56. display: flex;
  57. align-items: center;
  58. }
  59. .wifi_item_title {
  60. font-size: 28rpx;
  61. margin-left: 16rpx;
  62. }
  63. </style>