feat(P4): precompute移植+app.js sources双向回填+回归1003/1003+验收体积/文件/data.json
This commit is contained in:
@@ -0,0 +1,35 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Aurora Admin · Breadcrumb(普通 H5)</title>
|
||||
<link rel="stylesheet" href="../.design_library/aurora-admin/colors_and_type.css" />
|
||||
<link rel="stylesheet" href="Breadcrumb.css" />
|
||||
<style>body{margin:0;padding:24px;background: var(--au-color-page-bg);}</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="aa-breadcrumb" role="navigation" id="app"></div>
|
||||
|
||||
<script>
|
||||
var DATA = [
|
||||
{ label: '首页', key: 'home' },
|
||||
{ label: '订单管理', key: 'order' },
|
||||
{ label: '订单详情', key: 'detail' }
|
||||
];
|
||||
function render() {
|
||||
var root = document.getElementById('app');
|
||||
root.innerHTML = DATA.map(function (it, i) {
|
||||
var cur = i === DATA.length - 1;
|
||||
var html = '<span class="aa-breadcrumb-item ' + (cur ? 'is-current' : '') + '" role="link" tabindex="0" data-key="' + it.key + '">' + it.label + '</span>';
|
||||
if (!cur) html += '<span class="aa-breadcrumb-sep">/</span>';
|
||||
return html;
|
||||
}).join('');
|
||||
root.querySelectorAll('.aa-breadcrumb-item:not(.is-current)').forEach(function (el) {
|
||||
el.addEventListener('click', function () { alert('跳转到:' + el.dataset.key); });
|
||||
});
|
||||
}
|
||||
render();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,20 @@
|
||||
import React from 'react';
|
||||
import './Breadcrumb.css';
|
||||
|
||||
export default function Breadcrumb({ items = [], onSelect }) {
|
||||
return (
|
||||
<div className="aa-breadcrumb">
|
||||
{items.map((it, i) => (
|
||||
<React.Fragment key={i}>
|
||||
<span
|
||||
className={'aa-breadcrumb-item' + (i === items.length - 1 ? ' is-current' : '')}
|
||||
onClick={() => { if (i !== items.length - 1) onSelect && onSelect(it); }}
|
||||
>
|
||||
{it.label}
|
||||
</span>
|
||||
{i !== items.length - 1 ? <span className="aa-breadcrumb-sep">/</span> : null}
|
||||
</React.Fragment>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,18 @@
|
||||
<template>
|
||||
<div class="aa-breadcrumb">
|
||||
<template v-for="(it, i) in items" :key="i">
|
||||
<span class="aa-breadcrumb-item" :class="{ 'is-current': i === items.length - 1 }"
|
||||
@click="i !== items.length - 1 && $emit('select', it)">{{ it.label }}</span>
|
||||
<span v-if="i !== items.length - 1" class="aa-breadcrumb-sep">/</span>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'AaBreadcrumb',
|
||||
props: { items: { type: Array, default: function () { return []; } } }
|
||||
};
|
||||
</script>
|
||||
|
||||
<style src="./Breadcrumb.css"></style>
|
||||
@@ -0,0 +1,16 @@
|
||||
<template>
|
||||
<div class="aa-breadcrumb">
|
||||
<template v-for="(it, i) in items" :key="i">
|
||||
<span class="aa-breadcrumb-item" :class="{ 'is-current': i === items.length - 1 }"
|
||||
@click="i !== items.length - 1 && emit('select', it)">{{ it.label }}</span>
|
||||
<span v-if="i !== items.length - 1" class="aa-breadcrumb-sep">/</span>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const props = defineProps({ items: { type: Array, default: () => [] } });
|
||||
const emit = defineEmits(['select']);
|
||||
</script>
|
||||
|
||||
<style src="./Breadcrumb.css"></style>
|
||||
Reference in New Issue
Block a user