|
|
@@ -2,7 +2,7 @@
|
|
|
<div class="arrow_default" :style="arrowStyle" @click="handleClick">
|
|
|
<div class="arrow_text" :style="getFontSize" v-if="!iconFirst">{{ props.arrowText }}</div>
|
|
|
<i class="icon iconfont icon-rightArrow arrow_icon" :style="arrowIconStyle"
|
|
|
- :class="{ can_click: !!props.specialCondition.linkUrl }"></i>
|
|
|
+ :class="{ can_click: !!props.specialCondition?.linkUrl }"></i>
|
|
|
<div class="arrow_text" :style="getFontSize" v-if="iconFirst">{{ props.arrowText }}</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
@@ -31,12 +31,13 @@ const props = defineProps({
|
|
|
|
|
|
// 箭头容器样式(flex布局)
|
|
|
const arrowStyle = computed(() => ({
|
|
|
- display: 'flex',
|
|
|
- flexDirection: props.specialCondition.flexDir || 'row',
|
|
|
- justifyContent: 'center',
|
|
|
- alignItems: 'center',
|
|
|
+ display: 'flex',
|
|
|
+ flexDirection: props.specialCondition?.flexDir ?? 'row',
|
|
|
+ justifyContent: 'center',
|
|
|
+ alignItems: 'center',
|
|
|
}))
|
|
|
|
|
|
+
|
|
|
// 箭头文字位置
|
|
|
const iconFirst = computed(() => {
|
|
|
const val = props.specialCondition?.iconFirst
|
|
|
@@ -49,7 +50,7 @@ const iconFirst = computed(() => {
|
|
|
// 箭头方向转换
|
|
|
const arrowIconStyle = computed(() => ({
|
|
|
fontSize: `${props.iconSize}px`,
|
|
|
- transform: `rotate(${props.specialCondition.arrowRotate || 0}deg)`,
|
|
|
+ transform: `rotate(${props.specialCondition?.arrowRotate || 0}deg)`,
|
|
|
}))
|
|
|
|
|
|
// 字体大小
|