From 38430ddb8612fce15a2f1c940f9bd57d4da3e70b Mon Sep 17 00:00:00 2001 From: zhangzengfei <zhangzengfei@smartai.com> Date: 星期四, 16 九月 2021 11:59:39 +0800 Subject: [PATCH] add new key --- components/uni-list-item/uni-list-item.vue | 542 +++++++++++++++++++++++++++--------------------------- 1 files changed, 271 insertions(+), 271 deletions(-) diff --git a/components/uni-list-item/uni-list-item.vue b/components/uni-list-item/uni-list-item.vue index ef5c142..e96ca82 100644 --- a/components/uni-list-item/uni-list-item.vue +++ b/components/uni-list-item/uni-list-item.vue @@ -1,272 +1,272 @@ -<template> - <!-- #ifdef APP-NVUE --> - <cell> - <!-- #endif --> - <view :class="disabled ? 'uni-list-item--disabled' : ''" :hover-class="disabled || showSwitch ? '' : 'uni-list-item--hover'" - class="uni-list-item" @click="onClick"> - <view class="uni-list-item__container" :class="{'uni-list-item--first':isFirstChild}"> - <view v-if="thumb" class="uni-list-item__icon"> - <image :src="thumb" class="uni-list-item__icon-img" /> - </view> - <view v-else-if="showExtraIcon" class="uni-list-item__icon"> - <uni-icons :color="extraIcon.color" :size="extraIcon.size" :type="extraIcon.type" class="uni-icon-wrapper" /> - </view> - <view class="uni-list-item__content"> - <slot /> - <text class="uni-list-item__content-title">{{ title }}</text> - <text v-if="note" class="uni-list-item__content-note">{{ note }}</text> - </view> - <view class="uni-list-item__extra"> - <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" /> - <slot name="right"></slot> - <uni-icons v-if="showArrow" :size="20" class="uni-icon-wrapper" color="#bbb" type="arrowright" /> - </view> - </view> - </view> - <!-- #ifdef APP-NVUE --> - </cell> - <!-- #endif --> -</template> - -<script> - import uniIcons from '../uni-icons/uni-icons.vue' - import uniBadge from '../uni-badge/uni-badge.vue' - - /** - * ListItem 鍒楄〃瀛愮粍浠� - * @description 鍒楄〃瀛愮粍浠� - * @tutorial https://ext.dcloud.net.cn/plugin?id=24 - * @property {String} title 鏍囬 - * @property {String} note 鎻忚堪 - * @property {String} thumb 宸︿晶缂╃暐鍥撅紝鑻humb鏈夊�硷紝鍒欎笉浼氭樉绀烘墿灞曞浘鏍� - * @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} showArrow = [true|false] 鏄惁鏄剧ず绠ご鍥炬爣 - * @property {Boolean} showBadge = [true|false] 鏄惁鏄剧ず鏁板瓧瑙掓爣 - * @property {Boolean} showSwitch = [true|false] 鏄惁鏄剧ずSwitch - * @property {Boolean} switchChecked = [true|false] Switch鏄惁琚�変腑 - * @property {Boolean} showExtraIcon = [true|false] 宸︿晶鏄惁鏄剧ず鎵╁睍鍥炬爣 - * @property {Boolean} scrollY = [true|false] 鍏佽绾靛悜婊氬姩锛岄渶瑕佹樉寮忕殑璁剧疆鍏跺楂� - * @property {Object} extraIcon 鎵╁睍鍥炬爣鍙傛暟锛屾牸寮忎负 {color: '#4cd964',size: '22',type: 'spinner'} - * @event {Function} click 鐐瑰嚮 uniListItem 瑙﹀彂浜嬩欢 - * @event {Function} switchChange 鐐瑰嚮鍒囨崲 Switch 鏃惰Е鍙� - */ - export default { - name: 'UniListItem', - components: { - uniIcons, - uniBadge - }, - props: { - title: { - type: String, - default: '' - }, // 鍒楄〃鏍囬 - note: { - type: String, - default: '' - }, // 鍒楄〃鎻忚堪 - disabled: { - // 鏄惁绂佺敤 - type: [Boolean, String], - default: false - }, - showArrow: { - // 鏄惁鏄剧ず绠ご - type: [Boolean, String], - default: true - }, - showBadge: { - // 鏄惁鏄剧ず鏁板瓧瑙掓爣 - type: [Boolean, String], - default: false - }, - showSwitch: { - // 鏄惁鏄剧ずSwitch - type: [Boolean, String], - default: false - }, - switchChecked: { - // Switch鏄惁琚�変腑 - type: [Boolean, String], - default: false - }, - badgeText: { - // badge鍐呭 - type: String, - default: '' - }, - badgeType: { - // badge绫诲瀷 - type: String, - default: 'success' - }, - rightText: { - // 鍙充晶鏂囧瓧鍐呭 - type: String, - default: '' - }, - thumb: { - // 缂╃暐鍥� - type: String, - default: '' - }, - showExtraIcon: { - // 鏄惁鏄剧ず鎵╁睍鍥炬爣 - type: [Boolean, String], - default: false - }, - extraIcon: { - type: Object, - default () { - return { - type: 'contact', - color: '#000000', - size: 20 - } - } - } - }, - inject: ['list'], - data() { - return { - isFirstChild: false - } - }, - mounted() { - if (!this.list.firstChildAppend) { - this.list.firstChildAppend = true - this.isFirstChild = true - } - }, - methods: { - onClick() { - this.$emit('click') - }, - onSwitchChange(e) { - this.$emit('switchChange', e.detail) - } - } - } -</script> - -<style lang="scss" scoped> - $list-item-pd: $uni-spacing-col-lg $uni-spacing-row-lg; - - .uni-list-item { - font-size: $uni-font-size-lg; - position: relative; - flex-direction: column; - justify-content: space-between; - padding-left: $uni-spacing-row-lg; - } - - .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: 0; - flex: 1; - position: relative; - justify-content: space-between; - align-items: center; - /* #ifdef APP-PLUS */ - border-top-color: $uni-border-color; - border-top-style: solid; - border-top-width: 0.5px; - /* #endif */ - } - - .uni-list-item--first { - border-top-width: 0px; - } - - /* #ifndef APP-NVUE */ - .uni-list-item__container:after { - position: absolute; - top: 0; - right: 0; - left: 0; - height: 1px; - content: ''; - -webkit-transform: scaleY(.5); - transform: scaleY(.5); - background-color: $uni-border-color; - } - - .uni-list-item--first:after { - height: 0px; - } - - /* #endif */ - - - - - - .uni-list-item__content { - /* #ifndef APP-NVUE */ - display: flex; - /* #endif */ - flex: 1; - overflow: hidden; - flex-direction: column; - color: #3b4144; - - } - - .uni-list-item__content-title { - font-size: $uni-font-size-base; - color: #3b4144; - overflow: hidden; - } - - .uni-list-item__content-note { - margin-top: 6rpx; - 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__icon { - margin-right: 18rpx; - flex-direction: row; - justify-content: center; - align-items: center; - } - - .uni-list-item__icon-img { - height: $uni-img-size-base; - width: $uni-img-size-base; - } - - .uni-list-item__extra-text { - color: $uni-text-color-grey; - font-size: $uni-font-size-sm; - } +<template> + <!-- #ifdef APP-NVUE --> + <cell> + <!-- #endif --> + <view :class="disabled ? 'uni-list-item--disabled' : ''" :hover-class="disabled || showSwitch ? '' : 'uni-list-item--hover'" + class="uni-list-item" @click="onClick"> + <view class="uni-list-item__container" :class="{'uni-list-item--first':isFirstChild}"> + <view v-if="thumb" class="uni-list-item__icon"> + <image :src="thumb" class="uni-list-item__icon-img" /> + </view> + <view v-else-if="showExtraIcon" class="uni-list-item__icon"> + <uni-icons :color="extraIcon.color" :size="extraIcon.size" :type="extraIcon.type" class="uni-icon-wrapper" /> + </view> + <view class="uni-list-item__content"> + <slot /> + <text class="uni-list-item__content-title">{{ title }}</text> + <text v-if="note" class="uni-list-item__content-note">{{ note }}</text> + </view> + <view class="uni-list-item__extra"> + <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" /> + <slot name="right"></slot> + <uni-icons v-if="showArrow" :size="20" class="uni-icon-wrapper" color="#bbb" type="arrowright" /> + </view> + </view> + </view> + <!-- #ifdef APP-NVUE --> + </cell> + <!-- #endif --> +</template> + +<script> + import uniIcons from '../uni-icons/uni-icons.vue' + import uniBadge from '../uni-badge/uni-badge.vue' + + /** + * ListItem 鍒楄〃瀛愮粍浠� + * @description 鍒楄〃瀛愮粍浠� + * @tutorial https://ext.dcloud.net.cn/plugin?id=24 + * @property {String} title 鏍囬 + * @property {String} note 鎻忚堪 + * @property {String} thumb 宸︿晶缂╃暐鍥撅紝鑻humb鏈夊�硷紝鍒欎笉浼氭樉绀烘墿灞曞浘鏍� + * @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} showArrow = [true|false] 鏄惁鏄剧ず绠ご鍥炬爣 + * @property {Boolean} showBadge = [true|false] 鏄惁鏄剧ず鏁板瓧瑙掓爣 + * @property {Boolean} showSwitch = [true|false] 鏄惁鏄剧ずSwitch + * @property {Boolean} switchChecked = [true|false] Switch鏄惁琚�変腑 + * @property {Boolean} showExtraIcon = [true|false] 宸︿晶鏄惁鏄剧ず鎵╁睍鍥炬爣 + * @property {Boolean} scrollY = [true|false] 鍏佽绾靛悜婊氬姩锛岄渶瑕佹樉寮忕殑璁剧疆鍏跺楂� + * @property {Object} extraIcon 鎵╁睍鍥炬爣鍙傛暟锛屾牸寮忎负 {color: '#4cd964',size: '22',type: 'spinner'} + * @event {Function} click 鐐瑰嚮 uniListItem 瑙﹀彂浜嬩欢 + * @event {Function} switchChange 鐐瑰嚮鍒囨崲 Switch 鏃惰Е鍙� + */ + export default { + name: 'UniListItem', + components: { + uniIcons, + uniBadge + }, + props: { + title: { + type: String, + default: '' + }, // 鍒楄〃鏍囬 + note: { + type: String, + default: '' + }, // 鍒楄〃鎻忚堪 + disabled: { + // 鏄惁绂佺敤 + type: [Boolean, String], + default: false + }, + showArrow: { + // 鏄惁鏄剧ず绠ご + type: [Boolean, String], + default: true + }, + showBadge: { + // 鏄惁鏄剧ず鏁板瓧瑙掓爣 + type: [Boolean, String], + default: false + }, + showSwitch: { + // 鏄惁鏄剧ずSwitch + type: [Boolean, String], + default: false + }, + switchChecked: { + // Switch鏄惁琚�変腑 + type: [Boolean, String], + default: false + }, + badgeText: { + // badge鍐呭 + type: String, + default: '' + }, + badgeType: { + // badge绫诲瀷 + type: String, + default: 'success' + }, + rightText: { + // 鍙充晶鏂囧瓧鍐呭 + type: String, + default: '' + }, + thumb: { + // 缂╃暐鍥� + type: String, + default: '' + }, + showExtraIcon: { + // 鏄惁鏄剧ず鎵╁睍鍥炬爣 + type: [Boolean, String], + default: false + }, + extraIcon: { + type: Object, + default () { + return { + type: 'contact', + color: '#000000', + size: 20 + } + } + } + }, + inject: ['list'], + data() { + return { + isFirstChild: false + } + }, + mounted() { + if (!this.list.firstChildAppend) { + this.list.firstChildAppend = true + this.isFirstChild = true + } + }, + methods: { + onClick() { + this.$emit('click') + }, + onSwitchChange(e) { + this.$emit('switchChange', e.detail) + } + } + } +</script> + +<style lang="scss" scoped> + $list-item-pd: $uni-spacing-col-lg $uni-spacing-row-lg; + + .uni-list-item { + font-size: $uni-font-size-lg; + position: relative; + flex-direction: column; + justify-content: space-between; + padding-left: $uni-spacing-row-lg; + } + + .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: 0; + flex: 1; + position: relative; + justify-content: space-between; + align-items: center; + /* #ifdef APP-PLUS */ + border-top-color: $uni-border-color; + border-top-style: solid; + border-top-width: 0.5px; + /* #endif */ + } + + .uni-list-item--first { + border-top-width: 0px; + } + + /* #ifndef APP-NVUE */ + .uni-list-item__container:after { + position: absolute; + top: 0; + right: 0; + left: 0; + height: 1px; + content: ''; + -webkit-transform: scaleY(.5); + transform: scaleY(.5); + background-color: $uni-border-color; + } + + .uni-list-item--first:after { + height: 0px; + } + + /* #endif */ + + + + + + .uni-list-item__content { + /* #ifndef APP-NVUE */ + display: flex; + /* #endif */ + flex: 1; + overflow: hidden; + flex-direction: column; + color: #3b4144; + + } + + .uni-list-item__content-title { + font-size: $uni-font-size-base; + color: #3b4144; + overflow: hidden; + } + + .uni-list-item__content-note { + margin-top: 6rpx; + 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__icon { + margin-right: 18rpx; + flex-direction: row; + justify-content: center; + align-items: center; + } + + .uni-list-item__icon-img { + height: $uni-img-size-base; + width: $uni-img-size-base; + } + + .uni-list-item__extra-text { + color: $uni-text-color-grey; + font-size: $uni-font-size-sm; + } </style> -- Gitblit v1.8.0