first commit
This commit is contained in:
lingxiao865
260
uni_modules/tdesign-uniapp/components/cell/cell.vue
Normal file
260
uni_modules/tdesign-uniapp/components/cell/cell.vue
Normal file
@@ -0,0 +1,260 @@
|
||||
<template>
|
||||
<view
|
||||
:style="tools._style([customStyle])"
|
||||
:class="[
|
||||
tClass,
|
||||
tools.cls(classPrefix, [['bordered', bordered || isLastChild]])
|
||||
]"
|
||||
:hover-class="hover ? classPrefix + '--hover' : ''"
|
||||
hover-stay-time="70"
|
||||
:aria-role="ariaRole || (arrow ? 'button' : '')"
|
||||
:aria-label="ariaLabel"
|
||||
@click="onClick"
|
||||
>
|
||||
<view :class="classPrefix + '__left ' + tClassLeft">
|
||||
<block
|
||||
v-if="_leftIcon"
|
||||
name="icon"
|
||||
>
|
||||
<t-icon
|
||||
:custom-style="leftIconCustomStyle"
|
||||
:t-class="classPrefix + '__left-icon ' + tClassLeftIcon"
|
||||
:name="_leftIcon.name"
|
||||
:size="_leftIcon.size"
|
||||
:color="_leftIcon.color"
|
||||
:aria-hidden="true"
|
||||
:aria-label="_leftIcon.ariaLabel"
|
||||
:aria-role="_leftIcon.ariaRole"
|
||||
@click="'handleClose' || ''"
|
||||
/>
|
||||
</block>
|
||||
<slot name="left-icon" />
|
||||
<t-image
|
||||
v-if="image"
|
||||
shape="round"
|
||||
:t-class="classPrefix + '__left-image ' + tClassImage"
|
||||
:src="image"
|
||||
:custom-style="leftImageCustomStyle"
|
||||
/>
|
||||
<slot name="image" />
|
||||
</view>
|
||||
<view :class="classPrefix + '__title ' + tClassCenter">
|
||||
<view
|
||||
:class="[
|
||||
classPrefix + '__title-text ',
|
||||
tClassTitle
|
||||
]"
|
||||
:style="tools._style(titleStyle)"
|
||||
>
|
||||
<block v-if="title">
|
||||
{{ title }}
|
||||
</block>
|
||||
<slot name="title" />
|
||||
<block v-if="required">
|
||||
<text
|
||||
decode
|
||||
:class="classPrefix + '--required'"
|
||||
>
|
||||
*
|
||||
</text>
|
||||
</block>
|
||||
</view>
|
||||
<view
|
||||
:class="[
|
||||
classPrefix + '__description ',
|
||||
tClassDescription
|
||||
]"
|
||||
>
|
||||
<view
|
||||
v-if="description"
|
||||
:class="classPrefix + '__description-text'"
|
||||
>
|
||||
{{ description }}
|
||||
</view>
|
||||
<slot name="description" />
|
||||
</view>
|
||||
</view>
|
||||
<view
|
||||
:class="[
|
||||
classPrefix + '__note ',
|
||||
tClassNote
|
||||
]"
|
||||
:style="tools._style(noteStyle)"
|
||||
>
|
||||
<text v-if="note">
|
||||
{{ note }}
|
||||
</text>
|
||||
<slot name="note" />
|
||||
</view>
|
||||
<view
|
||||
:class="[
|
||||
tools.cls(classPrefix + '__right', [align]),
|
||||
tClassRight
|
||||
]"
|
||||
>
|
||||
<t-icon
|
||||
v-if="_arrow"
|
||||
:custom-style="rightArrowCustomStyle"
|
||||
:t-class=" classPrefix + '__right-icon ' + tClassRightIcon"
|
||||
:name="_arrow.name || ''"
|
||||
:size="_arrow.size"
|
||||
:color="_arrow.color"
|
||||
:aria-hidden="true"
|
||||
:aria-label="_arrow.ariaLabel"
|
||||
:aria-role="_arrow.ariaRole"
|
||||
@click="'handleClose' || ''"
|
||||
/>
|
||||
<block v-else>
|
||||
<block
|
||||
v-if="_rightIcon"
|
||||
name="icon"
|
||||
>
|
||||
<t-icon
|
||||
:custom-style="rightIconCustomStyle"
|
||||
:t-class=" classPrefix + '__right-icon ' + tClassRightIcon"
|
||||
:name="_rightIcon.name"
|
||||
:size="_rightIcon.size"
|
||||
:color="_rightIcon.color || ''"
|
||||
:aria-hidden="true"
|
||||
:aria-label="_rightIcon.ariaLabel"
|
||||
:aria-role="_rightIcon.ariaRole"
|
||||
@click="'handleClose' || ''"
|
||||
/>
|
||||
</block>
|
||||
<slot name="right-icon" />
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import TIcon from '../icon/icon';
|
||||
import TImage from '../image/image';
|
||||
import { uniComponent } from '../common/src/index';
|
||||
import { prefix } from '../common/config';
|
||||
import props from './props';
|
||||
import { calcIcon } from '../common/utils';
|
||||
import tools from '../common/utils.wxs';
|
||||
|
||||
import { ChildrenMixin, RELATION_MAP } from '../common/relation';
|
||||
|
||||
|
||||
const name = `${prefix}-cell`;
|
||||
const COMMON_RIGHT_ICON_STYLE = {
|
||||
color: 'var(--td-cell-right-icon-color, var(--td-text-color-placeholder, var(--td-font-gray-3, rgba(0, 0, 0, .4))))',
|
||||
fontSize: 'var(--td-cell-right-icon-font-size, 24px)',
|
||||
};
|
||||
|
||||
export default uniComponent({
|
||||
name,
|
||||
options: {
|
||||
styleIsolation: 'shared',
|
||||
},
|
||||
externalClasses: [
|
||||
`${prefix}-class`,
|
||||
`${prefix}-class-title`,
|
||||
`${prefix}-class-description`,
|
||||
`${prefix}-class-note`,
|
||||
`${prefix}-class-hover`,
|
||||
`${prefix}-class-image`,
|
||||
`${prefix}-class-left`,
|
||||
`${prefix}-class-left-icon`,
|
||||
`${prefix}-class-center`,
|
||||
`${prefix}-class-right`,
|
||||
`${prefix}-class-right-icon`,
|
||||
],
|
||||
mixins: [ChildrenMixin(RELATION_MAP.Cell)],
|
||||
components: {
|
||||
TIcon,
|
||||
TImage,
|
||||
},
|
||||
props: {
|
||||
...props,
|
||||
},
|
||||
emits: [
|
||||
'click',
|
||||
],
|
||||
data() {
|
||||
return {
|
||||
prefix,
|
||||
classPrefix: name,
|
||||
_arrow: null,
|
||||
_rightIcon: null,
|
||||
_leftIcon: null,
|
||||
isLastChild: false,
|
||||
tools,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
rightArrowCustomStyle() {
|
||||
return tools._style([
|
||||
COMMON_RIGHT_ICON_STYLE,
|
||||
this.rightIconStyle || '',
|
||||
this._arrow.style || '',
|
||||
]);
|
||||
},
|
||||
rightIconCustomStyle() {
|
||||
return tools._style([
|
||||
COMMON_RIGHT_ICON_STYLE,
|
||||
this.rightIconStyle || '',
|
||||
this._rightIcon.style || '',
|
||||
]);
|
||||
},
|
||||
leftIconCustomStyle() {
|
||||
return tools._style([
|
||||
{
|
||||
color: 'var(--td-cell-left-icon-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)))',
|
||||
fontSize: 'var(--td-cell-left-icon-font-size, 24px)',
|
||||
},
|
||||
this._leftIcon.style || '',
|
||||
]);
|
||||
},
|
||||
leftImageCustomStyle() {
|
||||
return tools._style({
|
||||
height: 'var(--td-cell-image-height, 48px)',
|
||||
width: 'var(--td-cell-image-width, 48px)',
|
||||
});
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
leftIcon: {
|
||||
handler(e) {
|
||||
this.setIcon('_leftIcon', e, '');
|
||||
},
|
||||
immediate: true,
|
||||
},
|
||||
rightIcon: {
|
||||
handler(e) {
|
||||
this.setIcon('_rightIcon', e, '');
|
||||
},
|
||||
immediate: true,
|
||||
},
|
||||
arrow: {
|
||||
handler(e) {
|
||||
this.setIcon('_arrow', e, 'chevron-right');
|
||||
},
|
||||
immediate: true,
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
setIcon(e, t, s) {
|
||||
this[e] = calcIcon(t, s);
|
||||
},
|
||||
onClick(e) {
|
||||
this.$emit('click', e);
|
||||
this.jumpLink();
|
||||
},
|
||||
jumpLink(e = 'url', t = 'jumpType') {
|
||||
const s = this[e];
|
||||
const i = this[t];
|
||||
if (s) {
|
||||
uni[i]({
|
||||
url: s,
|
||||
});
|
||||
}
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style scoped>
|
||||
@import './cell.css';
|
||||
</style>
|
||||
Reference in New Issue
Block a user