<template>
    <el-form>
        <el-form-item label="名稱列表">
            <div class="tag-container">
                <div v-for="(name, index) in names" :key="index">
                    <div class="bordered-div">
                        {{ name }}
                        <el-tag style="background-color: #409eff; color: white;">學校</el-tag>
                    </div>
                </div>
            </div>
        </el-form-item>
    </el-form>

    <div style="text-align: left;">

        <div class="bordered-div">
            有邊框的 div 元件
            <el-tag style="background-color: #409eff; color: white;">自定義樣式</el-tag>
        </div>

        <div class="bordered-div">
            台大
            <el-tag style="background-color: #409eff; color: white;">學校</el-tag>
        </div>

    </div>
</template>

<script setup>
import { ref } from 'vue';
import { ElForm, ElFormItem, ElTag } from 'element-plus';

const names = ref(['Alice', 'Bob', 'Charlie']);
</script>

<style scoped>
.tag-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.bordered-div {
    display: inline-flex; /* 讓 div 根據內容自動調整大小 */
    align-items: center; /* 讓文本與標籤在垂直方向上對齊 */
    border: 2px solid #409eff; /* 邊框顏色 */
    padding: 0 10px; /* 只保留左右內邊距，去掉上下內邊距 */
    border-radius: 8px; /* 圓角 */
    background-color: #f4f6f9; /* 背景顏色 */
    line-height: 1; /* 讓文本與標籤的垂直高度最小 */
}
</style>