zydx-plus 1.32.306 → 1.32.308
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/src/components/biz_header/src/bizHeader.vue +1 -1
- package/src/components/biz_header/src/button_name.js +124 -10
- package/src/components/biz_taskInfo/src/bizTaskInfo.vue +9 -5
- package/src/components/choice/src/choice.vue +8 -3
- package/src/components/editor2/src/editor.vue +6 -1
- package/src/components/flip/src/flip.vue +22 -13
- package/src/components/menu/index.js +7 -0
- package/src/components/menu/src/menu.vue +140 -0
- package/src/components/menu/src/menuList.vue +35 -0
- package/src/components/seek/src/word.css +3 -0
- package/src/index.js +1 -1
package/package.json
CHANGED
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
<div class="headLevel">
|
|
17
17
|
<div v-for="(item, index) in nodeList" :key="index" class="borderBottom1cccccc padding0_10 box_sizing_border_box" v-show="getShow(item)">
|
|
18
18
|
<zydx-topic-dry>
|
|
19
|
-
<template v-slot:title_slot><span class="fontSize16" :class="'level'+item.level">{{item.name}}</span></template>
|
|
19
|
+
<template v-slot:title_slot><span class="fontSize16" :title="item.name" :class="'level'+item.level">{{item.name}}</span></template>
|
|
20
20
|
<template v-slot:button_slot v-if="isShowBtn">
|
|
21
21
|
<template v-for="(buttonInfo, buttonIndex) in initConfig(item).buttonList[tabType]">
|
|
22
22
|
<template v-if="buttonInfo instanceof Object" v-for="(childButtonInfo, childButtonIndex) in buttonInfo">
|
|
@@ -2391,7 +2391,7 @@ let buttonNames = {
|
|
|
2391
2391
|
headLevel: {
|
|
2392
2392
|
default: "demand",
|
|
2393
2393
|
demand: '项目要求',
|
|
2394
|
-
resourceIndex: '
|
|
2394
|
+
resourceIndex: '学习项目',
|
|
2395
2395
|
guideIndex: '指导意见',
|
|
2396
2396
|
review: '项目点评',
|
|
2397
2397
|
analyse: '项目分析',
|
|
@@ -2419,7 +2419,7 @@ let buttonNames = {
|
|
|
2419
2419
|
headLevel: {
|
|
2420
2420
|
default: "demand",
|
|
2421
2421
|
demand: '创新要求',
|
|
2422
|
-
resourceIndex: '
|
|
2422
|
+
resourceIndex: '创新主题',
|
|
2423
2423
|
guideIndex: '指导意见',
|
|
2424
2424
|
review: '创新点评',
|
|
2425
2425
|
analyse: '创新分析',
|
|
@@ -2427,8 +2427,8 @@ let buttonNames = {
|
|
|
2427
2427
|
},
|
|
2428
2428
|
otherLevel: {
|
|
2429
2429
|
default: "singletonClass",
|
|
2430
|
-
singletonClass: this.getCurrentPrefix(item) + '
|
|
2431
|
-
allClass: this.getPrefix(item) + '
|
|
2430
|
+
singletonClass: this.getCurrentPrefix(item) + '主题',
|
|
2431
|
+
allClass: this.getPrefix(item) + '主题'
|
|
2432
2432
|
},
|
|
2433
2433
|
lowLevel: {
|
|
2434
2434
|
default: "singletonClass",
|
|
@@ -2500,12 +2500,31 @@ let buttonNames = {
|
|
|
2500
2500
|
btnIndex2: this.getPrefix(item) + '图谱'
|
|
2501
2501
|
},
|
|
2502
2502
|
lowLevel: {
|
|
2503
|
-
default: "
|
|
2503
|
+
default: "",
|
|
2504
2504
|
// btnIndex1: this.getCurrentPrefix(item) + '图谱',
|
|
2505
2505
|
createResource: '创建图谱',
|
|
2506
2506
|
viewResource: '图谱列表',
|
|
2507
2507
|
selectResource: '查找资源',
|
|
2508
2508
|
}
|
|
2509
|
+
},
|
|
2510
|
+
2: {
|
|
2511
|
+
headLevel: {
|
|
2512
|
+
default: "btnIndex1",
|
|
2513
|
+
btnIndex1: this.getCurrentPrefix(item) + '图谱',
|
|
2514
|
+
btnIndex2: this.getPrefix(item) + '图谱'
|
|
2515
|
+
},
|
|
2516
|
+
otherLevel: {
|
|
2517
|
+
default: "btnIndex1",
|
|
2518
|
+
btnIndex1: this.getCurrentPrefix(item) + '图谱',
|
|
2519
|
+
btnIndex2: this.getPrefix(item) + '图谱'
|
|
2520
|
+
},
|
|
2521
|
+
lowLevel: {
|
|
2522
|
+
default: "",
|
|
2523
|
+
// btnIndex1: this.getCurrentPrefix(item) + '图谱',
|
|
2524
|
+
// createResource: '创建图谱',
|
|
2525
|
+
viewResource: '图谱列表',
|
|
2526
|
+
selectResource: '查找资源',
|
|
2527
|
+
}
|
|
2509
2528
|
}
|
|
2510
2529
|
}
|
|
2511
2530
|
},
|
|
@@ -2524,12 +2543,31 @@ let buttonNames = {
|
|
|
2524
2543
|
btnIndex2: this.getPrefix(item) + '课件'
|
|
2525
2544
|
},
|
|
2526
2545
|
lowLevel: {
|
|
2527
|
-
default: "
|
|
2546
|
+
default: "",
|
|
2528
2547
|
// btnIndex1: this.getCurrentPrefix(item) + '课件',
|
|
2529
2548
|
importResource: '导入课件',
|
|
2530
2549
|
viewResource: '课件列表',
|
|
2531
2550
|
selectResource: '查找资源',
|
|
2532
2551
|
}
|
|
2552
|
+
},
|
|
2553
|
+
0: {
|
|
2554
|
+
headLevel: {
|
|
2555
|
+
default: "btnIndex1",
|
|
2556
|
+
btnIndex1: this.getCurrentPrefix(item) + '课件',
|
|
2557
|
+
btnIndex2: this.getPrefix(item) + '课件'
|
|
2558
|
+
},
|
|
2559
|
+
otherLevel: {
|
|
2560
|
+
default: "btnIndex1",
|
|
2561
|
+
btnIndex1: this.getCurrentPrefix(item) + '课件',
|
|
2562
|
+
btnIndex2: this.getPrefix(item) + '课件'
|
|
2563
|
+
},
|
|
2564
|
+
lowLevel: {
|
|
2565
|
+
default: "",
|
|
2566
|
+
// btnIndex1: this.getCurrentPrefix(item) + '课件',
|
|
2567
|
+
// importResource: '导入课件',
|
|
2568
|
+
viewResource: '课件列表',
|
|
2569
|
+
selectResource: '查找资源',
|
|
2570
|
+
}
|
|
2533
2571
|
}
|
|
2534
2572
|
}
|
|
2535
2573
|
},
|
|
@@ -2548,12 +2586,31 @@ let buttonNames = {
|
|
|
2548
2586
|
btnIndex2: this.getPrefix(item) + '视频'
|
|
2549
2587
|
},
|
|
2550
2588
|
lowLevel: {
|
|
2551
|
-
default: "
|
|
2589
|
+
default: "",
|
|
2552
2590
|
// btnIndex1: this.getCurrentPrefix(item) + '视频',
|
|
2553
2591
|
importResource: '导入视频',
|
|
2554
2592
|
viewResource: '视频列表',
|
|
2555
2593
|
selectResource: '查找资源',
|
|
2556
2594
|
}
|
|
2595
|
+
},
|
|
2596
|
+
2: {
|
|
2597
|
+
headLevel: {
|
|
2598
|
+
default: "btnIndex1",
|
|
2599
|
+
btnIndex1: this.getCurrentPrefix(item) + '视频',
|
|
2600
|
+
btnIndex2: this.getPrefix(item) + '视频'
|
|
2601
|
+
},
|
|
2602
|
+
otherLevel: {
|
|
2603
|
+
default: "btnIndex1",
|
|
2604
|
+
btnIndex1: this.getCurrentPrefix(item) + '视频',
|
|
2605
|
+
btnIndex2: this.getPrefix(item) + '视频'
|
|
2606
|
+
},
|
|
2607
|
+
lowLevel: {
|
|
2608
|
+
default: "",
|
|
2609
|
+
// btnIndex1: this.getCurrentPrefix(item) + '视频',
|
|
2610
|
+
// importResource: '导入视频',
|
|
2611
|
+
viewResource: '视频列表',
|
|
2612
|
+
selectResource: '查找资源',
|
|
2613
|
+
}
|
|
2557
2614
|
}
|
|
2558
2615
|
}
|
|
2559
2616
|
},
|
|
@@ -2572,12 +2629,31 @@ let buttonNames = {
|
|
|
2572
2629
|
btnIndex2: this.getPrefix(item) + '视频'
|
|
2573
2630
|
},
|
|
2574
2631
|
lowLevel: {
|
|
2575
|
-
default: "
|
|
2632
|
+
default: "",
|
|
2576
2633
|
// btnIndex1: this.getCurrentPrefix(item) + '视频',
|
|
2577
2634
|
importResource: '导入视频',
|
|
2578
2635
|
viewResource: '视频列表',
|
|
2579
2636
|
selectResource: '查找资源',
|
|
2580
2637
|
}
|
|
2638
|
+
},
|
|
2639
|
+
2: {
|
|
2640
|
+
headLevel: {
|
|
2641
|
+
default: "btnIndex1",
|
|
2642
|
+
btnIndex1: this.getCurrentPrefix(item) + '视频',
|
|
2643
|
+
btnIndex2: this.getPrefix(item) + '视频'
|
|
2644
|
+
},
|
|
2645
|
+
otherLevel: {
|
|
2646
|
+
default: "btnIndex1",
|
|
2647
|
+
btnIndex1: this.getCurrentPrefix(item) + '视频',
|
|
2648
|
+
btnIndex2: this.getPrefix(item) + '视频'
|
|
2649
|
+
},
|
|
2650
|
+
lowLevel: {
|
|
2651
|
+
default: "",
|
|
2652
|
+
// btnIndex1: this.getCurrentPrefix(item) + '视频',
|
|
2653
|
+
// importResource: '导入视频',
|
|
2654
|
+
viewResource: '视频列表',
|
|
2655
|
+
selectResource: '查找资源',
|
|
2656
|
+
}
|
|
2581
2657
|
}
|
|
2582
2658
|
}
|
|
2583
2659
|
},
|
|
@@ -2596,12 +2672,31 @@ let buttonNames = {
|
|
|
2596
2672
|
btnIndex2: this.getPrefix(item) + '数据'
|
|
2597
2673
|
},
|
|
2598
2674
|
lowLevel: {
|
|
2599
|
-
default: "
|
|
2675
|
+
default: "",
|
|
2600
2676
|
// btnIndex1: this.getCurrentPrefix(item) + '数据',
|
|
2601
2677
|
importResource: '导入数据',
|
|
2602
2678
|
viewResource: '数据列表',
|
|
2603
2679
|
selectResource: '查找资源',
|
|
2604
2680
|
}
|
|
2681
|
+
},
|
|
2682
|
+
2: {
|
|
2683
|
+
headLevel: {
|
|
2684
|
+
default: "btnIndex1",
|
|
2685
|
+
btnIndex1: this.getCurrentPrefix(item) + '数据',
|
|
2686
|
+
btnIndex2: this.getPrefix(item) + '数据'
|
|
2687
|
+
},
|
|
2688
|
+
otherLevel: {
|
|
2689
|
+
default: "btnIndex1",
|
|
2690
|
+
btnIndex1: this.getCurrentPrefix(item) + '数据',
|
|
2691
|
+
btnIndex2: this.getPrefix(item) + '数据'
|
|
2692
|
+
},
|
|
2693
|
+
lowLevel: {
|
|
2694
|
+
default: "",
|
|
2695
|
+
// btnIndex1: this.getCurrentPrefix(item) + '数据',
|
|
2696
|
+
// importResource: '导入数据',
|
|
2697
|
+
viewResource: '数据列表',
|
|
2698
|
+
selectResource: '查找资源',
|
|
2699
|
+
}
|
|
2605
2700
|
}
|
|
2606
2701
|
}
|
|
2607
2702
|
},
|
|
@@ -2620,12 +2715,31 @@ let buttonNames = {
|
|
|
2620
2715
|
btnIndex2: this.getPrefix(item) + '歌诀'
|
|
2621
2716
|
},
|
|
2622
2717
|
lowLevel: {
|
|
2623
|
-
default: "
|
|
2718
|
+
default: "",
|
|
2624
2719
|
// btnIndex1: this.getCurrentPrefix(item) + '歌诀',
|
|
2625
2720
|
createResource: '创建歌诀',
|
|
2626
2721
|
viewResource: '歌诀列表',
|
|
2627
2722
|
selectResource: '查找资源',
|
|
2628
2723
|
}
|
|
2724
|
+
},
|
|
2725
|
+
2: {
|
|
2726
|
+
headLevel: {
|
|
2727
|
+
default: "btnIndex1",
|
|
2728
|
+
btnIndex1: this.getCurrentPrefix(item) + '歌诀',
|
|
2729
|
+
btnIndex2: this.getPrefix(item) + '歌诀'
|
|
2730
|
+
},
|
|
2731
|
+
otherLevel: {
|
|
2732
|
+
default: "btnIndex1",
|
|
2733
|
+
btnIndex1: this.getCurrentPrefix(item) + '歌诀',
|
|
2734
|
+
btnIndex2: this.getPrefix(item) + '歌诀'
|
|
2735
|
+
},
|
|
2736
|
+
lowLevel: {
|
|
2737
|
+
default: "",
|
|
2738
|
+
// btnIndex1: this.getCurrentPrefix(item) + '歌诀',
|
|
2739
|
+
// createResource: '创建歌诀',
|
|
2740
|
+
viewResource: '歌诀列表',
|
|
2741
|
+
selectResource: '查找资源',
|
|
2742
|
+
}
|
|
2629
2743
|
}
|
|
2630
2744
|
}
|
|
2631
2745
|
},
|
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
<template v-if="!readonly">
|
|
16
16
|
<zydx-input v-model:value="info.examJoinTime"
|
|
17
17
|
:readonly="readonly"
|
|
18
|
-
:placeholder="'
|
|
18
|
+
:placeholder="'请输入时长'"
|
|
19
19
|
:border="!readonly"
|
|
20
20
|
:type="'number'">
|
|
21
21
|
<template #suffix>
|
|
@@ -43,7 +43,7 @@
|
|
|
43
43
|
</template>
|
|
44
44
|
<template v-else>
|
|
45
45
|
<zydx-input :value="dateFormat(info.endTime)"
|
|
46
|
-
:placeholder="'
|
|
46
|
+
:placeholder="'请选择日期'"
|
|
47
47
|
:readonly="readonly"
|
|
48
48
|
:border="!readonly"
|
|
49
49
|
:key="JSON.stringify(info.endTime)"
|
|
@@ -92,8 +92,8 @@
|
|
|
92
92
|
</div>
|
|
93
93
|
<div v-if="actionConfig[actionId].isShowVirtualScore" class="task_item_main" style="z-index: 1">
|
|
94
94
|
<div class="task_text_desc">虚仿成绩:</div>
|
|
95
|
-
<div class="width250">
|
|
96
|
-
<zydxSelect :color="'#000000'" :readonly="readonly" :options="virtualScoreOptions" v-model:value="virtualScore"></zydxSelect>
|
|
95
|
+
<div class="width250" title="操作虚仿软件所得成绩在该题总得分占比">
|
|
96
|
+
<zydxSelect :color="'#000000'" :readonly="readonly" :placeholder="'操作虚仿软件所得成绩在该题...'" :options="virtualScoreOptions" v-model:value="virtualScore"></zydxSelect>
|
|
97
97
|
</div>
|
|
98
98
|
</div>
|
|
99
99
|
<div class="default_item_main width100" >
|
|
@@ -765,7 +765,7 @@
|
|
|
765
765
|
screenLimit: '0',
|
|
766
766
|
funDisable: '0',
|
|
767
767
|
round: 1,
|
|
768
|
-
virtualScore: '
|
|
768
|
+
virtualScore: ''
|
|
769
769
|
}
|
|
770
770
|
]
|
|
771
771
|
}
|
|
@@ -818,6 +818,10 @@
|
|
|
818
818
|
if(item.endTime != null) {
|
|
819
819
|
item.endTime = new Date(item.endTime);
|
|
820
820
|
}
|
|
821
|
+
// 设置虚仿默认值
|
|
822
|
+
if(item.virtualScore == '') {
|
|
823
|
+
item.virtualScore = "0";
|
|
824
|
+
}
|
|
821
825
|
Object.keys(item).forEach(key=>{
|
|
822
826
|
if(!that.keysArr.includes(key) || item[key] == null) {
|
|
823
827
|
delete item[key];
|
|
@@ -30,8 +30,8 @@
|
|
|
30
30
|
<div v-else>
|
|
31
31
|
<div class="choice-list">
|
|
32
32
|
<div class="list-title">
|
|
33
|
-
|
|
34
|
-
|
|
33
|
+
<span>试题选项:<em>(必选项)</em></span>
|
|
34
|
+
<button class="but" @click="addOption">增加选项</button>
|
|
35
35
|
</div>
|
|
36
36
|
<div class="list-cont">
|
|
37
37
|
<div class="list-cont-li" v-for="(item,index) in list">
|
|
@@ -249,7 +249,7 @@ export default {
|
|
|
249
249
|
line-height: 30px;
|
|
250
250
|
}
|
|
251
251
|
.list-cont{
|
|
252
|
-
padding: 0 0 8px
|
|
252
|
+
padding: 0 0 8px 0;
|
|
253
253
|
}
|
|
254
254
|
.lv-color span{
|
|
255
255
|
color: #13BF6C;
|
|
@@ -272,6 +272,11 @@ export default {
|
|
|
272
272
|
margin-right: 2px;
|
|
273
273
|
font-style: normal;
|
|
274
274
|
}
|
|
275
|
+
.list-title em{
|
|
276
|
+
font-weight: normal;
|
|
277
|
+
font-style: normal;
|
|
278
|
+
font-size: 12px;
|
|
279
|
+
}
|
|
275
280
|
.choice-title{
|
|
276
281
|
display: flex;
|
|
277
282
|
justify-content: center;
|
|
@@ -41,7 +41,12 @@
|
|
|
41
41
|
<div class="enclosure" v-if="uploadAttData.length > 0 && enclosureShow">
|
|
42
42
|
<p :style="enclosureStyle">{{ enclosureText }}</p>
|
|
43
43
|
<div class="enclosure-list" v-for="(item,index) in uploadAttData">
|
|
44
|
-
<div class="enclosure-item">
|
|
44
|
+
<div class="enclosure-item" v-if="uploadAttData.length <= 1">
|
|
45
|
+
<span v-if="item.name">{{ item.name }}</span>
|
|
46
|
+
<span v-if="item.annexName">{{ item.annexName }}</span>
|
|
47
|
+
<span v-if="item.fileName">{{ item.fileName }}</span>
|
|
48
|
+
</div>
|
|
49
|
+
<div class="enclosure-item" v-else>
|
|
45
50
|
<span v-if="item.name">{{ numberStyle? `【${index + 1}】`: `${index + 1}.` }} {{ item.name }}</span>
|
|
46
51
|
<span v-if="item.annexName">{{ numberStyle? `【${index + 1}】`: `${index + 1}.` }} {{ item.annexName }}</span>
|
|
47
52
|
<span v-if="item.fileName">{{ numberStyle? `【${index + 1}】`: `${index + 1}.` }} {{ item.fileName }}</span>
|
|
@@ -3,13 +3,14 @@
|
|
|
3
3
|
<div>
|
|
4
4
|
<div class="book">
|
|
5
5
|
<div class="pages">
|
|
6
|
-
<div class="wrap">
|
|
7
|
-
<div class="wrap-one" :class="{'flip-animation-start': flipRights, 'flip-animation-end': flipLefts}"
|
|
8
|
-
v-if="oneShow" :style="canvasStyle"
|
|
9
|
-
<img :src="imgArr[(oneIndex === 'right')? pageIndex-1: pageIndex]" alt=""
|
|
10
|
-
</div
|
|
6
|
+
<div class="wrap" ref="wrap">
|
|
7
|
+
<!-- <div class="wrap-one" :class="{'flip-animation-start': flipRights, 'flip-animation-end': flipLefts}"-->
|
|
8
|
+
<!-- v-if="oneShow" :style="canvasStyle">-->
|
|
9
|
+
<!-- <img :src="imgArr[(oneIndex === 'right')? pageIndex-1: pageIndex]" alt=""/>-->
|
|
10
|
+
<!-- </div>-->
|
|
11
11
|
<div class="wrap-can" ref="wrapCan">
|
|
12
12
|
<canvas @click.stop="turnText" class="wrap-can-one" @mousedown.stop="mouseDown" @mousemove.stop="mouseMove" :id="id"></canvas>
|
|
13
|
+
<!-- <img v-if="imgArr !== ''" :src="imgArr" alt="" />-->
|
|
13
14
|
<canvas :id="`${id}2`"></canvas>
|
|
14
15
|
<div
|
|
15
16
|
v-show="state === 'text'&&textY2>0&&textX2>0"
|
|
@@ -138,7 +139,7 @@ export default {
|
|
|
138
139
|
data() {
|
|
139
140
|
return {
|
|
140
141
|
pdfPages: 0,
|
|
141
|
-
imgArr:
|
|
142
|
+
imgArr: '',
|
|
142
143
|
hei: 0,
|
|
143
144
|
pageIndex: this.page,
|
|
144
145
|
show: false,
|
|
@@ -1001,14 +1002,17 @@ export default {
|
|
|
1001
1002
|
that.ctx = canvas.getContext('2d');
|
|
1002
1003
|
let ctx2 = canvas2.getContext('2d');
|
|
1003
1004
|
let viewport = page.getViewport({scale: that.scales})
|
|
1004
|
-
|
|
1005
|
-
|
|
1006
|
-
|
|
1007
|
-
canvas.
|
|
1005
|
+
const sc = viewport.width / viewport.height
|
|
1006
|
+
const wid = that.$refs.wrap.offsetWidth
|
|
1007
|
+
const hei = wid / sc
|
|
1008
|
+
canvas.width = wid * that.sratio
|
|
1009
|
+
canvas.height = hei * that.sratio
|
|
1010
|
+
canvas.style.width = wid + 'px'
|
|
1011
|
+
canvas.style.height = hei + 'px'
|
|
1008
1012
|
canvas2.width = viewport.width * that.sratio
|
|
1009
1013
|
canvas2.height = viewport.height * that.sratio
|
|
1010
|
-
canvas2.style.width =
|
|
1011
|
-
canvas2.style.height =
|
|
1014
|
+
canvas2.style.width = wid + 'px'
|
|
1015
|
+
canvas2.style.height = hei + 'px'
|
|
1012
1016
|
that.canvasStyle = {
|
|
1013
1017
|
width: viewport.width + 'px',
|
|
1014
1018
|
height: viewport.height + 'px',
|
|
@@ -1035,7 +1039,7 @@ export default {
|
|
|
1035
1039
|
that.flipRights = false
|
|
1036
1040
|
that.flipLefts = false
|
|
1037
1041
|
that.oneShow = false
|
|
1038
|
-
that.imgArr
|
|
1042
|
+
that.imgArr = canvas2.toDataURL('image/jpeg', 1)
|
|
1039
1043
|
that.processing()
|
|
1040
1044
|
}, 1000)
|
|
1041
1045
|
})
|
|
@@ -1266,6 +1270,11 @@ export default {
|
|
|
1266
1270
|
//cursor: none;
|
|
1267
1271
|
}
|
|
1268
1272
|
|
|
1273
|
+
.wrap-can img{
|
|
1274
|
+
width: 100%;
|
|
1275
|
+
height: 100%;
|
|
1276
|
+
}
|
|
1277
|
+
|
|
1269
1278
|
.but-wrap {
|
|
1270
1279
|
text-align: center;
|
|
1271
1280
|
}
|
|
@@ -0,0 +1,140 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div class="menu-container">
|
|
3
|
+
<menu-list-item
|
|
4
|
+
v-for="(value, idx) in list"
|
|
5
|
+
:key="idx"
|
|
6
|
+
:value="value"
|
|
7
|
+
@trigger:click="click"
|
|
8
|
+
>
|
|
9
|
+
<template #default="{ item }">
|
|
10
|
+
<div
|
|
11
|
+
class="title"
|
|
12
|
+
:class="{
|
|
13
|
+
green: handleActive(item, 'green'),
|
|
14
|
+
red: handleActive(item, 'red'),
|
|
15
|
+
}"
|
|
16
|
+
:title="item.title"
|
|
17
|
+
>
|
|
18
|
+
{{ idx + 1 }}.{{ item.title }}
|
|
19
|
+
</div>
|
|
20
|
+
<div
|
|
21
|
+
class="detail"
|
|
22
|
+
:class="{
|
|
23
|
+
green: handleActive(item, 'green'),
|
|
24
|
+
red: handleActive(item, 'red'),
|
|
25
|
+
}"
|
|
26
|
+
>
|
|
27
|
+
<div
|
|
28
|
+
class="detail-item"
|
|
29
|
+
:title="item.detail[idx].value"
|
|
30
|
+
v-for="({ name, value }, idx) in item.detail"
|
|
31
|
+
:key="idx"
|
|
32
|
+
>
|
|
33
|
+
{{ name }}:
|
|
34
|
+
{{ value }}
|
|
35
|
+
</div>
|
|
36
|
+
</div>
|
|
37
|
+
</template>
|
|
38
|
+
</menu-list-item>
|
|
39
|
+
</div>
|
|
40
|
+
</template>
|
|
41
|
+
|
|
42
|
+
<script>
|
|
43
|
+
import menuListItem from "./menuList.vue";
|
|
44
|
+
export default {
|
|
45
|
+
name: "zydx-menu",
|
|
46
|
+
components: {
|
|
47
|
+
menuListItem,
|
|
48
|
+
},
|
|
49
|
+
props: {
|
|
50
|
+
list: {
|
|
51
|
+
type: Array,
|
|
52
|
+
default: () => [],
|
|
53
|
+
},
|
|
54
|
+
styleConfig: {
|
|
55
|
+
type: Object,
|
|
56
|
+
default: () => {
|
|
57
|
+
return {
|
|
58
|
+
activeColor: "green",
|
|
59
|
+
};
|
|
60
|
+
},
|
|
61
|
+
},
|
|
62
|
+
},
|
|
63
|
+
data() {
|
|
64
|
+
return {
|
|
65
|
+
activeIndex: -1,
|
|
66
|
+
};
|
|
67
|
+
},
|
|
68
|
+
methods: {
|
|
69
|
+
click: function (item) {
|
|
70
|
+
const idx = this.list.findIndex(({ id }) => id === item.id);
|
|
71
|
+
this.activeIndex = idx;
|
|
72
|
+
this.$emit("trigger:click", item);
|
|
73
|
+
},
|
|
74
|
+
handleActive: function (item, color) {
|
|
75
|
+
const idx = this.list.findIndex(({ id }) => id === item.id);
|
|
76
|
+
return this.activeIndex === idx
|
|
77
|
+
? this.checkColor(this.styleConfig.activeColor, color)
|
|
78
|
+
? true
|
|
79
|
+
: false
|
|
80
|
+
: false;
|
|
81
|
+
},
|
|
82
|
+
checkColor: function (activeColor, color) {
|
|
83
|
+
switch (color) {
|
|
84
|
+
case "green":
|
|
85
|
+
return activeColor === color;
|
|
86
|
+
case "red":
|
|
87
|
+
return activeColor === color;
|
|
88
|
+
default:
|
|
89
|
+
return false;
|
|
90
|
+
}
|
|
91
|
+
},
|
|
92
|
+
},
|
|
93
|
+
computed: {
|
|
94
|
+
activeColor: function () {
|
|
95
|
+
return this.styleConfig.activeColor;
|
|
96
|
+
},
|
|
97
|
+
},
|
|
98
|
+
};
|
|
99
|
+
</script>
|
|
100
|
+
|
|
101
|
+
<style scoped>
|
|
102
|
+
.menu-container {
|
|
103
|
+
width: 100%;
|
|
104
|
+
height: auto;
|
|
105
|
+
margin: 0 auto;
|
|
106
|
+
display: flex;
|
|
107
|
+
flex-direction: column;
|
|
108
|
+
align-items: center;
|
|
109
|
+
justify-content: flex-start;
|
|
110
|
+
gap: 10px;
|
|
111
|
+
padding: 15px;
|
|
112
|
+
font-size: 14px;
|
|
113
|
+
line-height: 30px;
|
|
114
|
+
letter-spacing: 1px;
|
|
115
|
+
}
|
|
116
|
+
.title {
|
|
117
|
+
width: 100%;
|
|
118
|
+
font-size: 16px;
|
|
119
|
+
}
|
|
120
|
+
.title.red {
|
|
121
|
+
color:red
|
|
122
|
+
}
|
|
123
|
+
.title.green {
|
|
124
|
+
color:#00ff00
|
|
125
|
+
}
|
|
126
|
+
.detail {
|
|
127
|
+
width: 100%;
|
|
128
|
+
text-indent: 28px;
|
|
129
|
+
text-overflow: ellipsis;
|
|
130
|
+
white-space: nowrap;
|
|
131
|
+
overflow: hidden;
|
|
132
|
+
}
|
|
133
|
+
.detail.red {
|
|
134
|
+
color:red
|
|
135
|
+
}
|
|
136
|
+
.detail.green {
|
|
137
|
+
color:#00ff00
|
|
138
|
+
}
|
|
139
|
+
</style>
|
|
140
|
+
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div class="menu-list-item" @click="click">
|
|
3
|
+
<slot v-bind="{ item: value }"></slot>
|
|
4
|
+
</div>
|
|
5
|
+
</template>
|
|
6
|
+
|
|
7
|
+
<script>
|
|
8
|
+
export default {
|
|
9
|
+
name: "menuListItem",
|
|
10
|
+
props: {
|
|
11
|
+
value: {
|
|
12
|
+
type: Object,
|
|
13
|
+
default: () => ({}),
|
|
14
|
+
},
|
|
15
|
+
},
|
|
16
|
+
methods: {
|
|
17
|
+
click() {
|
|
18
|
+
this.$emit("trigger:click", this.value);
|
|
19
|
+
},
|
|
20
|
+
},
|
|
21
|
+
};
|
|
22
|
+
</script>
|
|
23
|
+
|
|
24
|
+
<style scoped>
|
|
25
|
+
.menu-list-item {
|
|
26
|
+
width: 100%;
|
|
27
|
+
height: auto;
|
|
28
|
+
display: flex;
|
|
29
|
+
flex-direction: column;
|
|
30
|
+
align-items: center;
|
|
31
|
+
justify-content: flex-start;
|
|
32
|
+
min-height: 60px;
|
|
33
|
+
cursor: pointer;
|
|
34
|
+
}
|
|
35
|
+
</style>
|