rtim/pages_im/components/SettingItem/index.vue

<template>
  <view @click="onClick" class="setting_item" :class="{ setting_item_border: border }">
    <text :style="{ color: danger ? '#D32414' : '$uni-text-color' }">{{ title }}</text>
    <u-switch :loading="loading" active-color="#FF5C03" @change="onChange" :asyncChange="true" v-if="is_switch" size="20"
      :value="switchValue" />
    <view v-else class="setting_right">
      <slot></slot>
      <u-icon v-if="arrow" name="arrow-right" color="#999" size="14" />
    </view>
  </view>
</template>

<script>
export default {
  name: "",
  components: {},
  props: {
    title: String,
    danger: {
      type: Boolean,
      default: false,
    },
    is_switch: {
      type: Boolean,
      default: false,
    },
    switchValue: {
      type: Boolean,
      default: false,
    },
    loading: {
      type: Boolean,
      default: false,
    },
    border: {
      type: Boolean,
      default: true,
    },
    arrow: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {};
  },
  methods: {
    onClick() {
      this.$emit("click");
    },
    onChange(value) {
      this.$emit("switch", value);
    },
  },
};
</script>

<style lang="scss" scoped>
.setting_item {
  @include btwBox();
  padding: 28rpx 24rpx;
  color: $uni-text-color;
  position: relative;

  .setting_right {
    @include vCenterBox();
  }

  &_border {
    &:after {
      content: "";
      position: absolute;
      left: 24rpx;
      right: 24rpx;
      bottom: 0;
      height: 1rpx;
      background-color: #ECECEC;
    }
  }
}
</style>