shoot-miniprograms/src/components/UserItem.vue

<script setup>
defineProps({
  title: {
    type: String,
    default: "",
  },
  value: {
    type: String,
    default: "",
  },
  customStyle: {
    type: Object,
    default: () => ({}),
  },
  onClick: {
    type: Function,
    default: null,
  },
});
</script>

<template>
  <view class="user-item" :style="customStyle" @click="onClick">
    <text>{{ title }}</text>
    <view>
      <slot></slot>
      <view v-if="onClick !== null">
        <image src="../static/enter.png" mode="widthFix" />
      </view>
    </view>
  </view>
</template>

<style scoped>
.user-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  height: 55px;
  border-bottom: 1px solid #f5f5f5;
}
.user-item > text {
  margin-left: 15px;
  font-size: 14px;
  color: #000;
}
.user-item > view {
  display: flex;
  align-items: center;
  font-size: 13px;
  color: #999;
  margin-right: 10px;
}
.user-item > view image {
  width: 24px;
  height: 24px;
}
.user-item > view button {
  margin-left: 5px;
}
</style>