}/*原点样式*/.timeline-item.timeline-box.out-circle{width:12px;height:12px;background:var(--el-menu-active-color);box-shadow:0px4px12px0pxrgba(0,0,0,0.4);border-radius:50%;display: flex;align-items: center;cursor:
使用Vue 3 的组合式 API,你可以创建一个公告栏组件。这里利用 Element Plus 的ElCard和ElTimeline组件: <template><el-card class="announcement-board"><template #header>公告栏</template><el-timeline><el-timeline-itemv-for="item in items":key="item.id":timestamp="item.date"placement="top"><el...
ElRadioButton, ElRadioGroup, // ElRate, ElCol, ElRow, // ElScrollbar, ElLink, // ElSlider, // ElStep, // ElSteps, ElSubMenu, ElSwitch, ElTabPane, ElTabs, ElTable, ElTableColumn, ElTag, // ElTimePicker, // ElTimeSelect, // ElTimeline, // ElTimelineItem, ElTooltip, ElTransf...
type: 'success' }) await this.handleSearch() } catch (e) { console.error(e) ElMessage({ message: '保存失败', type: 'error' }) this.state.loading = false } }, async remove(data: Catalog) { await deleteCatalog(
ElTimeline, ElTimelineItem, ElTooltip, ElTree, ElUpload, } from 'element-plus'; const app = createApp(App) const components = [ ElAffix, ElButton, ElCard, ElCascader, ElCol, ElDescriptions, ElDescriptionsItem, ElDialog, ElDrawer, ElDropdown, ElDropdownItem, ElDropdownMenu, ElForm, El...
</timeline> 1. 2. 3. 4. 5. 6. 7. 8. 子页面timeline.vue <template> <!--年月标题--> {{ timeData.yearData }} <!--时间线顶部圆点--> <!--时间线内容--> <template v-if="showCards">
ElProgress, ElRadio, ElRadioButton, ElRadioGroup, ElRate, ElRow, ElScrollbar, ElSelect, ElSlider, ElStep, ElSteps, ElSubmenu, ElSwitch, ElTabPane, ElTable, ElTableColumn, ElTabs, ElTag, ElTimePicker, ElTimeSelect, ElTimeline,
ElProgress, ElRadio, ElRadioButton, ElRadioGroup, ElRate, ElRow, ElScrollbar, ElSelect, ElSlider, ElStep, ElSteps, ElSubmenu, ElSwitch, ElTabPane, ElTable, ElTableColumn, ElTabs, ElTag, ElTimePicker, ElTimeSelect, ElTimeline, ElTimelineItem, ElTooltip, ElTransfer, ElTree, ElUpload, ...
9 + <el-timeline-item 10 + v-for="(item, index) in tasks" 11 + :key="index" 12 + :icon="getTimelineItemIcon(item)" 13 + :type="getTimelineItemType(item)" 14 + > 15 + 任务:{{ item.name }} 16 + <el-card :body-style="{ padding: '10px' }"> 17 + ...
{ position: relative; display: inline-block; } .timeline-box { display: flex; align-items: center; } .out-circle { width: 12px; height: 12px; background: var(--el-color-primary); border-radius: 50%; position: relative; } .in-circle { width: 8px; height: 8px; background: ...