151 lines
3.3 KiB
Vue
151 lines
3.3 KiB
Vue
<template>
|
|
<div class="trigger-way-warp" :class="{ disabled: disabled }">
|
|
<div
|
|
v-for="item in typeList"
|
|
:key="item.value"
|
|
class="trigger-way-item"
|
|
:class="{
|
|
active: _value === item.value,
|
|
labelBottom: labelBottom,
|
|
}"
|
|
@click="onSelect(item.value)"
|
|
>
|
|
<div class="'way-item-title">
|
|
<span class="way-item-label">{{ item.label }}</span>
|
|
<j-popover v-if="item.tip">
|
|
<j-tooltip :title="item.tip">
|
|
<AIcon
|
|
type="QuestionCircleOutlined"
|
|
class="way-item-icon"
|
|
/>
|
|
</j-tooltip>
|
|
</j-popover>
|
|
</div>
|
|
<div class="way-item-image">
|
|
<img :width="48" :src="item.image" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { PropType } from 'vue';
|
|
|
|
const props = defineProps({
|
|
typeList: {
|
|
type: Array as PropType<any>,
|
|
default: () => [],
|
|
},
|
|
value: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
disabled: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
labelBottom: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
});
|
|
|
|
const emits = defineEmits(['update:value', 'change']);
|
|
const _value = ref(props?.value || '');
|
|
|
|
watch(
|
|
() => props.value,
|
|
(newValue) => {
|
|
_value.value = newValue || '';
|
|
},
|
|
{ immediate: true, deep: true },
|
|
);
|
|
|
|
const onSelect = (_type: string) => {
|
|
if (!props.disabled) {
|
|
_value.value = _type;
|
|
emits('update:value', _type);
|
|
emits('change', _type);
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.trigger-way-warp {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 16px 24px;
|
|
width: 100%;
|
|
|
|
.trigger-way-item {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
width: 237px;
|
|
padding: 12px 16px;
|
|
border: 1px solid #e0e4e8;
|
|
border-radius: 2px;
|
|
cursor: pointer;
|
|
transition: all 0.3s;
|
|
|
|
.way-item-title {
|
|
span {
|
|
font-size: 16px;
|
|
}
|
|
.way-item-label {
|
|
padding-right: 6px;
|
|
color: rgba(#000, 0.64);
|
|
}
|
|
|
|
.way-item-icon {
|
|
color: rgba(#000, 0.5);
|
|
}
|
|
}
|
|
|
|
.way-item-image {
|
|
margin: 0 !important;
|
|
opacity: 0.6;
|
|
}
|
|
|
|
&:hover {
|
|
.way-item-image {
|
|
opacity: 0.8;
|
|
}
|
|
}
|
|
|
|
&.active {
|
|
border-color: @primary-color-active;
|
|
.way-item-image {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
&.labelBottom {
|
|
flex-direction: column-reverse;
|
|
grid-gap: 16px;
|
|
gap: 0;
|
|
align-items: center;
|
|
width: auto;
|
|
padding: 8px 16px;
|
|
p {
|
|
margin: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.disabled {
|
|
.trigger-way-item {
|
|
cursor: not-allowed;
|
|
|
|
&:hover {
|
|
color: initial;
|
|
opacity: 0.6;
|
|
}
|
|
|
|
&.active {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |