|
@@ -81,15 +81,15 @@
|
|
|
:itemsRenderer="prop.component"
|
|
|
@update="({ ndx, time }) => (am![prop.attr][ndx].time = time)"
|
|
|
@add="
|
|
|
- (item) => {
|
|
|
- am![prop.attr].push({...item, id: onlyId()});
|
|
|
- $emit('update:active', {
|
|
|
- key: prop.attr,
|
|
|
- ndx: am![prop.attr].length - 1,
|
|
|
- });
|
|
|
- }
|
|
|
- "
|
|
|
- @del="(ndx) => am![prop.attr].splice(ndx, 1)"
|
|
|
+ (item) => {
|
|
|
+ am![prop.attr].push({ ...item, id: onlyId() });
|
|
|
+ $emit('update:active', {
|
|
|
+ key: prop.attr,
|
|
|
+ ndx: am![prop.attr].length - 1,
|
|
|
+ });
|
|
|
+ }
|
|
|
+ "
|
|
|
+ @del="(ndx) => { if (prop.attr === active?.key && active.ndx === ndx) $emit('update:active', undefined); am![prop.attr].splice(ndx, 1); }"
|
|
|
:active="prop.attr === active?.key ? am[prop.attr][active.ndx] : undefined"
|
|
|
@update:active="(active: any) => $emit('update:active', active && { key: prop.attr, ndx: am![prop.attr].indexOf(active) })"
|
|
|
/>
|
|
@@ -189,14 +189,17 @@ watch(
|
|
|
height: 40px;
|
|
|
align-items: center;
|
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.16);
|
|
|
+
|
|
|
.play-bar {
|
|
|
flex: 1;
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
+
|
|
|
.icon {
|
|
|
font-size: 16px;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.scale-bar {
|
|
|
width: 180px;
|
|
|
flex: 0 0 auto;
|
|
@@ -204,6 +207,7 @@ watch(
|
|
|
align-items: center;
|
|
|
padding: 0 20px;
|
|
|
position: relative;
|
|
|
+
|
|
|
&::before {
|
|
|
content: "";
|
|
|
position: absolute;
|
|
@@ -216,12 +220,14 @@ watch(
|
|
|
.slider {
|
|
|
flex: 1;
|
|
|
}
|
|
|
+
|
|
|
.icon {
|
|
|
margin: 0 5px;
|
|
|
font-size: 16px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.oper-bar {
|
|
|
height: calc(100% - 40px);
|
|
|
}
|