mirror of https://github.com/rocboss/paopao-ce
Michael Li
2 years ago
parent
47a9d9e8b4
commit
e58e069755
@ -0,0 +1,133 @@
|
||||
<template>
|
||||
<div class="tag-item">
|
||||
<n-thing>
|
||||
<template #header>
|
||||
<n-tag
|
||||
type="success"
|
||||
size="large"
|
||||
round
|
||||
:key="tag.id"
|
||||
>
|
||||
<router-link
|
||||
class="hash-link"
|
||||
:to="{
|
||||
name: 'home',
|
||||
query: {
|
||||
q: tag.tag,
|
||||
t: 'tag',
|
||||
},
|
||||
}"
|
||||
>
|
||||
#{{ tag.tag }}
|
||||
</router-link>
|
||||
<span v-if="!showAction" class="tag-quote">({{ tag.quote_num }})</span>
|
||||
<span v-if="showAction" class="tag-quote tag-follow">({{ tag.quote_num }})</span>
|
||||
<template #avatar>
|
||||
<n-avatar :src="tag.user.avatar" />
|
||||
</template>
|
||||
</n-tag>
|
||||
</template>
|
||||
<template #header-extra>
|
||||
<div
|
||||
v-if="showAction"
|
||||
class="options">
|
||||
<n-dropdown
|
||||
placement="bottom-end"
|
||||
trigger="click"
|
||||
size="small"
|
||||
:options="tagOptions"
|
||||
@select="handleTagAction"
|
||||
>
|
||||
<n-button type="success" quaternary circle block>
|
||||
<template #icon>
|
||||
<n-icon>
|
||||
<more-vert-outlined />
|
||||
</n-icon>
|
||||
</template>
|
||||
</n-button>
|
||||
</n-dropdown>
|
||||
</div>
|
||||
</template>
|
||||
</n-thing>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, computed } from 'vue';
|
||||
import { MoreVertOutlined } from '@vicons/material';
|
||||
import type { DropdownOption } from 'naive-ui';
|
||||
|
||||
const hasFollowing= ref(false);
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
tag: Item.TagProps;
|
||||
showAction: boolean;
|
||||
}>(),
|
||||
{}
|
||||
);
|
||||
|
||||
const tagOptions = computed(() => {
|
||||
let options: DropdownOption[] = [];
|
||||
if (props.tag.is_following == 0) {
|
||||
options.push({
|
||||
label: '关注',
|
||||
key: 'follow',
|
||||
});
|
||||
} else {
|
||||
options.push({
|
||||
label: '取消关注',
|
||||
key: 'unfollow',
|
||||
});
|
||||
}
|
||||
return options;
|
||||
});
|
||||
|
||||
const handleTagAction = (
|
||||
item: 'follow' | 'unfollow'
|
||||
) => {
|
||||
switch (item) {
|
||||
case 'follow':
|
||||
window.$message.success(`关注话题 - ${props.tag.tag}`);
|
||||
break;
|
||||
case 'unfollow':
|
||||
window.$message.success(`取消关注话题 - ${props.tag.tag}`);
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
};
|
||||
const execFollowAction = () => {
|
||||
// TODO
|
||||
window.$message.success('修改follow/unfllow');
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
hasFollowing.value = false
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.tag-item {
|
||||
.tag-quote {
|
||||
margin-left: 12px;
|
||||
font-size: 14px;
|
||||
opacity: 0.75;
|
||||
}
|
||||
.tag-follow {
|
||||
margin-right: 22px;
|
||||
}
|
||||
.options {
|
||||
margin-left: -32px;
|
||||
margin-bottom: 4px;
|
||||
opacity: 0.55;
|
||||
}
|
||||
.n-thing {
|
||||
.n-thing-header {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
.n-thing-avatar-header-wrapper {
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in new issue