pco/app/uni_modules/uni-list/components/uni-list-item/uni-list-item.vue

<template>
  <!-- #ifdef APP-NVUE -->
  <cell>
    <!-- #endif -->

    <view :class="{ 'uni-list-item--disabled': disabled }"
          :hover-class="(!clickable && !link) || disabled || showSwitch ? '' : 'uni-list-item--hover'"
          class="uni-list-item" @click="onClick">
      <view v-if="!isFirstChild" class="border--left" :class="{ 'uni-list--border': border }"></view>
      <view class="uni-list-item__container"
            :class="{ 'container--right': showArrow || link, 'flex--direction': direction === 'column' }">
        <slot name="header">
          <view class="uni-list-item__header">
            <view v-if="thumb" class="uni-list-item__icon">
              <image :src="thumb" class="uni-list-item__icon-img" :class="['uni-list--' + thumbSize]"/>
            </view>
            <view v-else-if="showExtraIcon" class="uni-list-item__icon">
              <uni-icons :color="extraIcon.color" :size="extraIcon.size" :type="extraIcon.type"/>
            </view>
          </view>
        </slot>
        <slot name="body">
          <view class="uni-list-item__content"
                :class="{ 'uni-list-item__content--center': thumb || showExtraIcon || showBadge || showSwitch }">
            <text v-if="title" class="uni-list-item__content-title"
                  :class="[ellipsis !== 0 && ellipsis <= 2 ? 'uni-ellipsis-' + ellipsis : '']">{{ title }}
            </text>
            <text v-if="note" class="uni-list-item__content-note">{{ note }}</text>
          </view>
        </slot>
        <slot name="footer">
          <view v-if="rightText || showBadge || showSwitch" class="uni-list-item__extra"
                :class="{ 'flex--justify': direction === 'column' }">
            <text v-if="rightText" class="uni-list-item__extra-text">{{ rightText }}</text>
            <uni-badge v-if="showBadge" :type="badgeType" :text="badgeText"/>
            <switch v-if="showSwitch" :disabled="disabled" :checked="switchChecked"
                    @change="onSwitchChange"/>
          </view>
        </slot>
      </view>
      <uni-icons v-if="showArrow || link" :size="16" class="uni-icon-wrapper" color="#bbb" type="arrowright"/>
    </view>
    <!-- #ifdef APP-NVUE -->
  </cell>
  <!-- #endif -->
</template>

<script>
/**
 * ListItem 列表子组件
 * @description 列表子组件
 * @tutorial https://ext.dcloud.net.cn/plugin?id=24
 * @property {String}  title              标题
 * @property {String}  note              描述
 * @property {String}  thumb              左侧缩略图，若thumb有值，则不会显示扩展图标
 * @property {String}    thumbSize = [lg|base|sm]    略缩图大小
 *  @value   lg      大图
 *  @value   base    一般
 *  @value   sm      小图
 * @property {String}  badgeText            数字角标内容
 * @property {String}  badgeType            数字角标类型，参考[uni-icons](https://ext.dcloud.net.cn/plugin?id=21)
 * @property {String}  rightText            右侧文字内容
 * @property {Boolean}  disabled = [true|false]      是否禁用
 * @property {Boolean}  clickable = [true|false]    是否开启点击反馈
 * @property {String}  link = [navigateTo|redirectTo|reLaunch|switchTab] 是否展示右侧箭头并开启点击反馈
 *  @value  navigateTo  同 uni.navigateTo()
 *  @value redirectTo  同 uni.redirectTo()
 *  @value reLaunch    同 uni.reLaunch()
 *  @value switchTab    同 uni.switchTab()
 * @property {String | PageURIString}  to        跳转目标页面
 * @property {Boolean}  showBadge = [true|false]    是否显示数字角标
 * @property {Boolean}  showSwitch = [true|false]    是否显示Switch
 * @property {Boolean}  switchChecked = [true|false]  Switch是否被选中
 * @property {Boolean}  showExtraIcon = [true|false]  左侧是否显示扩展图标
 * @property {Object}  extraIcon            扩展图标参数，格式为 {color: '#4cd964',size: '22',type: 'spinner'}
 * @property {String}  direction = [row|column]    排版方向
 * @value row      水平排列
 * @value column    垂直排列
 * @event {Function}  click              点击 uniListItem 触发事件
 * @event {Function}  switchChange          点击切换 Switch 时触发
 */
export default {
  name: 'UniListItem',
  emits: ['click', 'switchChange'],
  props: {
    direction: {
      type: String,
      default: 'row'
    },
    title: {
      type: String,
      default: ''
    },
    note: {
      type: String,
      default: ''
    },
    ellipsis: {
      type: [Number, String],
      default: 0
    },
    disabled: {
      type: [Boolean, String],
      default: false
    },
    clickable: {
      type: Boolean,
      default: false
    },
    showArrow: {
      type: [Boolean, String],
      default: false
    },
    link: {
      type: [Boolean, String],
      default: false
    },
    to: {
      type: String,
      default: ''
    },
    showBadge: {
      type: [Boolean, String],
      default: false
    },
    showSwitch: {
      type: [Boolean, String],
      default: false
    },
    switchChecked: {
      type: [Boolean, String],
      default: false
    },
    badgeText: {
      type: String,
      default: ''
    },
    badgeType: {
      type: String,
      default: 'success'
    },
    rightText: {
      type: String,
      default: ''
    },
    thumb: {
      type: String,
      default: ''
    },
    thumbSize: {
      type: String,
      default: 'base'
    },
    showExtraIcon: {
      type: [Boolean, String],
      default: false
    },
    extraIcon: {
      type: Object,
      default() {
        return {
          type: 'contact',
          color: '#000000',
          size: 20
        };
      }
    },
    border: {
      type: Boolean,
      default: true
    }
  },
  // inject: ['list'],
  data() {
    return {
      isFirstChild: false
    };
  },
  mounted() {
    this.list = this.getForm()
    // 判断是否存在 uni-list 组件
    if (this.list) {
      if (!this.list.firstChildAppend) {
        this.list.firstChildAppend = true;
        this.isFirstChild = true;
      }
    }
  },
  methods: {
    /**
     * 获取父元素实例
     */
    getForm(name = 'uniList') {
      let parent = this.$parent;
      let parentName = parent.$options.name;
      while (parentName !== name) {
        parent = parent.$parent;
        if (!parent) return false
        parentName = parent.$options.name;
      }
      return parent;
    },
    onClick() {
      if (this.to !== '') {
        this.openPage();
        return;
      }
      if (this.clickable || this.link) {
        this.$emit('click', {
          data: {}
        });
      }
    },
    onSwitchChange(e) {
      this.$emit('switchChange', e.detail);
    },
    openPage() {
      if (['navigateTo', 'redirectTo', 'reLaunch', 'switchTab'].indexOf(this.link) !== -1) {
        this.pageApi(this.link);
      } else {
        this.pageApi('navigateTo');
      }
    },
    pageApi(api) {
      let callback = {
        url: this.to,
        success: res => {
          this.$emit('click', {
            data: res
          });
        },
        fail: err => {
          this.$emit('click', {
            data: err
          });
        }
      }
      switch (api) {
        case 'navigateTo':
          uni.navigateTo(callback)
          break
        case 'redirectTo':
          uni.redirectTo(callback)
          break
        case 'reLaunch':
          uni.reLaunch(callback)
          break
        case 'switchTab':
          uni.switchTab(callback)
          break
        default:
          uni.navigateTo(callback)
      }
    }
  }
};
</script>

<style lang="scss">
$uni-font-size-sm: 12px;
$uni-font-size-base: 14px;
$uni-font-size-lg: 16px;
$uni-spacing-col-lg: 12px;
$uni-spacing-row-lg: 15px;
$uni-img-size-sm: 20px;
$uni-img-size-base: 26px;
$uni-img-size-lg: 40px;
$uni-border-color: #e5e5e5;
$uni-bg-color-hover: #f1f1f1;
$uni-text-color-grey: #999;
$list-item-pd: $uni-spacing-col-lg $uni-spacing-row-lg;

.uni-list-item {
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  font-size: $uni-font-size-lg;
  position: relative;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  flex-direction: row;
  /* #ifdef H5 */
  cursor: pointer;
  /* #endif */
}

.uni-list-item--disabled {
  opacity: 0.3;
}

.uni-list-item--hover {
  background-color: $uni-bg-color-hover;
}

.uni-list-item__container {
  position: relative;
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: row;
  padding: $list-item-pd;
  padding-left: $uni-spacing-row-lg;
  flex: 1;
  overflow: hidden;
  // align-items: center;
}

.container--right {
  padding-right: 0;
}

// .border--left {
// 	margin-left: $uni-spacing-row-lg;
// }

.uni-list--border {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  /* #ifdef APP-NVUE */
  border-top-color: $uni-border-color;
  border-top-style: solid;
  border-top-width: 0.5px;
  /* #endif */
}

/* #ifndef APP-NVUE */
.uni-list--border:after {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 1px;
  content: '';
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
  background-color: $uni-border-color;
}

/* #endif */

.uni-list-item__content {
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  padding-right: 8px;
  flex: 1;
  color: #3b4144;
  // overflow: hidden;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}

.uni-list-item__content--center {
  justify-content: center;
}

.uni-list-item__content-title {
  font-size: $uni-font-size-base;
  color: #3b4144;
  overflow: hidden;
}

.uni-list-item__content-note {
  margin-top: 6 rpx;
  color: $uni-text-color-grey;
  font-size: $uni-font-size-sm;
  overflow: hidden;
}

.uni-list-item__extra {
  // width: 25%;
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
}

.uni-list-item__header {
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: row;
  align-items: center;
}

.uni-list-item__icon {
  margin-right: 18 rpx;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.uni-list-item__icon-img {
  /* #ifndef APP-NVUE */
  display: block;
  /* #endif */
  height: $uni-img-size-base;
  width: $uni-img-size-base;
  margin-right: 10px;
}

.uni-icon-wrapper {
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  align-items: center;
  padding: 0 10px;
}

.flex--direction {
  flex-direction: column;
  /* #ifndef APP-NVUE */
  align-items: initial;
  /* #endif */
}

.flex--justify {
  /* #ifndef APP-NVUE */
  justify-content: initial;
  /* #endif */
}

.uni-list--lg {
  height: $uni-img-size-lg;
  width: $uni-img-size-lg;
}

.uni-list--base {
  height: $uni-img-size-base;
  width: $uni-img-size-base;
}

.uni-list--sm {
  height: $uni-img-size-sm;
  width: $uni-img-size-sm;
}

.uni-list-item__extra-text {
  color: $uni-text-color-grey;
  font-size: $uni-font-size-sm;
}

.uni-ellipsis-1 {
  /* #ifndef APP-NVUE */
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  /* #endif */
  /* #ifdef APP-NVUE */
  lines: 1;
  text-overflow: ellipsis;
  /* #endif */
}

.uni-ellipsis-2 {
  /* #ifndef APP-NVUE */
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  /* #endif */

  /* #ifdef APP-NVUE */
  lines: 2;
  text-overflow: ellipsis;
  /* #endif */
}
</style>