|
@@ -1,9 +1,77 @@
|
|
|
|
+<!-- 福利标签 -->
|
|
<template>
|
|
<template>
|
|
- <div>welfareLabel</div>
|
|
|
|
|
|
+ <span style="font-size: 16px;" class="mr-1">已选择标签</span>
|
|
|
|
+ <span style="font-size: 14px; color: #666;">(最多10个标签)</span>
|
|
|
|
+ <div class="mb-15">
|
|
|
|
+ <v-chip
|
|
|
|
+ v-for="(item, index) in chosenChipList" :key="index"
|
|
|
|
+ class="mx-2 mt-4"
|
|
|
|
+ label closable color="primary"
|
|
|
|
+ >{{ item.name }}</v-chip>
|
|
|
|
+ <div>
|
|
|
|
+ <v-chip class="mx-2 mt-4" label color="orange"><v-icon icon="mdi-plus" start></v-icon>自定义标签</v-chip>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <span style="font-size: 16px;">推荐标签</span>
|
|
|
|
+ <div>
|
|
|
|
+ <v-chip
|
|
|
|
+ v-for="(item, index) in chipList" :key="index"
|
|
|
|
+ class="mx-2 mt-4"
|
|
|
|
+ label color="primary"
|
|
|
|
+ :disabled="chosenChipIds.includes(item.name)"
|
|
|
|
+ >
|
|
|
|
+ <v-icon icon="mdi-plus" start></v-icon>
|
|
|
|
+ {{ item.name }}
|
|
|
|
+ </v-chip>
|
|
|
|
+ </div>
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
<script setup>
|
|
|
|
+import { ref } from 'vue';
|
|
defineOptions({name: 'informationSettingsComponents-welfareLabel'})
|
|
defineOptions({name: 'informationSettingsComponents-welfareLabel'})
|
|
|
|
+let chosenChipIds = ref([])
|
|
|
|
+const chosenChipList = ref([
|
|
|
|
+ { name: '五险一金' },
|
|
|
|
+ { name: '节日礼物' },
|
|
|
|
+ { name: '技能培训' },
|
|
|
|
+ { name: '带薪年假' },
|
|
|
|
+ { name: '岗位晋升' },
|
|
|
|
+ { name: '美女多' },
|
|
|
|
+ { name: '帅哥多' },
|
|
|
|
+ { name: '领导好' },
|
|
|
|
+ { name: '午餐补贴' },
|
|
|
|
+])
|
|
|
|
+chosenChipIds.value = chosenChipList.value.map(e => e.name)
|
|
|
|
+//
|
|
|
|
+const chipList = ref([
|
|
|
|
+ { name: '2五险一金' },
|
|
|
|
+ { name: '2节日礼物' },
|
|
|
|
+ { name: '五险一金' },
|
|
|
|
+ { name: '节日礼物' },
|
|
|
|
+ { name: '技能培训' },
|
|
|
|
+ { name: '美女多' },
|
|
|
|
+ { name: '帅哥多' },
|
|
|
|
+ { name: '领导好' },
|
|
|
|
+ { name: '午餐补贴' },
|
|
|
|
+ { name: '2技能培训' },
|
|
|
|
+ { name: '2带薪年假' },
|
|
|
|
+ { name: '2岗位晋升' },
|
|
|
|
+ { name: '带薪年假' },
|
|
|
|
+ { name: '岗位晋升' },
|
|
|
|
+ { name: '2美女多' },
|
|
|
|
+ { name: '2帅哥多' },
|
|
|
|
+ { name: '2领导好' },
|
|
|
|
+ { name: '2午餐补贴' },
|
|
|
|
+ { name: '3五险一金' },
|
|
|
|
+ { name: '3节日礼物' },
|
|
|
|
+ { name: '3技能培训' },
|
|
|
|
+ { name: '3带薪年假' },
|
|
|
|
+ { name: '3岗位晋升' },
|
|
|
|
+ { name: '3美女多' },
|
|
|
|
+ { name: '3帅哥多' },
|
|
|
|
+ { name: '3领导好' },
|
|
|
|
+ { name: '3午餐补贴' },
|
|
|
|
+])
|
|
</script>
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
<style lang="scss" scoped>
|
|
</style>
|
|
</style>
|