@10yun/cv-mobile-ui 0.5.20 → 0.5.21

package/uni-ui/lib/uni-list-item/uni-list-item.vue

@@ -1 +1,346 @@
-<template>
  <!-- #ifdef APP-NVUE -->
  <cell :keep-scroll-position="keepScrollPosition">
    <!-- #endif -->
    <view
      :class="{ 'uni-list-item--disabled': disabled }"
      :style="{ 'background-color': customStyle.backgroundColor }"
      :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' }"
        :style="{
          paddingTop: padding.top,
          paddingLeft: padding.left,
          paddingRight: padding.right,
          paddingBottom: padding.bottom
        }"
      >
        <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
                :customPrefix="extraIcon.customPrefix"
                :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" :custom-style="badgeStyle" />
            <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 -->
 * 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 {Object}   badgeStyle           数字角标样式
 * @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 时触发
 */
  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'
    },
    badgeStyle: {
      type: Object,
      default() {
        return {};
      }
    },
    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: '',
          color: '#000000',
          size: 20,
          customPrefix: ''
        };
      }
    },
    border: {
      type: Boolean,
      default: true
    },
    customStyle: {
      type: Object,
      default() {
        return {
          padding: '',
          backgroundColor: '#FFFFFF'
        };
      }
    },
    keepScrollPosition: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    'customStyle.padding': {
      handler(padding) {
        if (typeof padding == 'number') {
          padding += '';
        }
        let paddingArr = padding.split(' ');
        if (paddingArr.length === 1) {
          const allPadding = paddingArr[0];
          this.padding = {
            top: allPadding,
            right: allPadding,
            bottom: allPadding,
            left: allPadding
          };
        } else if (paddingArr.length === 2) {
          const [verticalPadding, horizontalPadding] = paddingArr;
          this.padding = {
            top: verticalPadding,
            right: horizontalPadding,
            bottom: verticalPadding,
            left: horizontalPadding
          };
        } else if (paddingArr.length === 4) {
          const [topPadding, rightPadding, bottomPadding, leftPadding] = paddingArr;
          this.padding = {
            top: topPadding,
            right: rightPadding,
            bottom: bottomPadding,
            left: leftPadding
          };
        }
      },
      immediate: true
    }
  },
  // inject: ['list'],
  data() {
    return {
      isFirstChild: false,
      padding: {
        top: '',
        right: '',
        bottom: '',
        left: ''
      }
    };
  },
  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);
      }
    }
  }
+<template>
+  <!-- #ifdef APP-NVUE -->
+  <cell :keep-scroll-position="keepScrollPosition">
+    <!-- #endif -->
+    <view
+      :class="{ 'uni-list-item--disabled': disabled }"
+      :style="{ 'background-color': customStyle.backgroundColor }"
+      :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' }"
+        :style="{
+          paddingTop: padding.top,
+          paddingLeft: padding.left,
+          paddingRight: padding.right,
+          paddingBottom: padding.bottom
+        }"
+      >
+        <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
+                :customPrefix="extraIcon.customPrefix"
+                :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" :custom-style="badgeStyle" />
+            <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 {Object}   badgeStyle           数字角标样式
+ * @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'
+    },
+    badgeStyle: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    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: '',
+          color: '#000000',
+          size: 20,
+          customPrefix: ''
+        };
+      }
+    },
+    border: {
+      type: Boolean,
+      default: true
+    },
+    customStyle: {
+      type: Object,
+      default() {
+        return {
+          padding: '',
+          backgroundColor: '#FFFFFF'
+        };
+      }
+    },
+    keepScrollPosition: {
+      type: Boolean,
+      default: false
+    }
+  },
+  watch: {
+    'customStyle.padding': {
+      handler(padding) {
+        if (typeof padding == 'number') {
+          padding += '';
+        }
+        let paddingArr = padding.split(' ');
+        if (paddingArr.length === 1) {
+          const allPadding = paddingArr[0];
+          this.padding = {
+            top: allPadding,
+            right: allPadding,
+            bottom: allPadding,
+            left: allPadding
+          };
+        } else if (paddingArr.length === 2) {
+          const [verticalPadding, horizontalPadding] = paddingArr;
+          this.padding = {
+            top: verticalPadding,
+            right: horizontalPadding,
+            bottom: verticalPadding,
+            left: horizontalPadding
+          };
+        } else if (paddingArr.length === 4) {
+          const [topPadding, rightPadding, bottomPadding, leftPadding] = paddingArr;
+          this.padding = {
+            top: topPadding,
+            right: rightPadding,
+            bottom: bottomPadding,
+            left: leftPadding
+          };
+        }
+      },
+      immediate: true
+    }
+  },
+  // inject: ['list'],
+  data() {
+    return {
+      isFirstChild: false,
+      padding: {
+        top: '',
+        right: '',
+        bottom: '',
+        left: ''
+      }
+    };
+  },
+  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>
+@import 'style.css';
+</style>