1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
| <template>
| <div class="notice-bar-container">
| <el-card shadow="hover" header="滚动通知栏：默认">
| <NoticeBar
| text="🎉🎉🔥基于vue3.x 、Typescript、vite、Element plus等，适配手机、平板、pc
| 的后台开源免费模板库（vue2.x请切换vue-prev-admin分支），仓库地址：https://gitee.com/lyt-top/vue-next-admin"
| />
| </el-card>
|
| <el-card shadow="hover" header="滚动通知栏：设置样式" class="mt15">
| <NoticeBar
| text="🎉🎉🔥基于vue3.x 、Typescript、vite、Element plus等，适配手机、平板、pc
| 的后台开源免费模板库（vue2.x请切换vue-prev-admin分支），仓库地址：https://gitee.com/lyt-top/vue-next-admin"
| leftIcon="iconfont icon-tongzhi2"
| rightIcon="ele-ArrowRight"
| background="#ecf5ff"
| color="#409eff"
| />
| </el-card>
|
| <el-card shadow="hover" header="滚动通知栏：搭配 NoticeBar 和 Carousel 走马灯 组件可以实现垂直滚动的效果" class="mt15">
| <NoticeBar :scrollable="true">
| <el-carousel height="40px" direction="vertical" :autoplay="true" indicator-position="none" :interval="3000">
| <el-carousel-item v-for="v in noticeList" :key="v">{{ v }} </el-carousel-item>
| </el-carousel>
| </NoticeBar>
| </el-card>
|
| <el-card shadow="hover" header="滚动通知栏：参数" class="mt15">
| <el-table :data="tableData" style="width: 100%">
| <el-table-column prop="a1" label="参数"> </el-table-column>
| <el-table-column prop="a2" label="说明"> </el-table-column>
| <el-table-column prop="a3" label="类型"> </el-table-column>
| <el-table-column prop="a4" label="可选值"> </el-table-column>
| <el-table-column prop="a5" label="默认值"> </el-table-column>
| </el-table>
| </el-card>
|
| <el-card shadow="hover" header="图标选择器(宽度自动)：事件" class="mt15">
| <el-table :data="tableData1" style="width: 100%">
| <el-table-column prop="a1" label="事件名称"> </el-table-column>
| <el-table-column prop="a2" label="说明"> </el-table-column>
| <el-table-column prop="a3" label="类型"> </el-table-column>
| <el-table-column prop="a4" label="回调参数"> </el-table-column>
| </el-table>
| </el-card>
| </div>
| </template>
|
| <script lang="ts">
| import { toRefs, reactive, defineComponent } from 'vue';
| import NoticeBar from '/@/components/noticeBar/index.vue';
|
| export default defineComponent({
| name: 'makeNoticeBar',
| components: { NoticeBar },
| setup() {
| const state = reactive({
| noticeList: [
| '🎉🎉🔥基于vue3.x 、Typescript、vite、Element plus等',
| '适配手机、平板、pc的后台开源免费模板库（vue2.x请切换vue-prev-admin分支）',
| '仓库地址：https://gitee.com/lyt-top/vue-next-admin',
| '演示地址：https://lyt-top.gitee.io/vue-next-admin-preview/#/login',
| ],
| tableData: [
| {
| a1: 'mode',
| a2: '通知栏模式，用于右侧 icon 图标点击',
| a3: 'string',
| a4: 'closeable / link',
| a5: '',
| },
| {
| a1: 'text',
| a2: '通知文本内容，scrollable 为 false 时生效',
| a3: 'string',
| a4: '',
| a5: '',
| },
| {
| a1: 'color',
| a2: '通知文本颜色',
| a3: 'string',
| a4: '',
| a5: '#e6a23c',
| },
| {
| a1: 'background',
| a2: '通知背景色',
| a3: 'string',
| a4: '',
| a5: '#fdf6ec',
| },
| {
| a1: 'size',
| a2: '字体大小，单位px',
| a3: 'number / string',
| a4: '',
| a5: '14',
| },
| {
| a1: 'height',
| a2: '通知栏高度，单位px',
| a3: 'number / string',
| a4: '',
| a5: '40',
| },
| {
| a1: 'delay',
| a2: '动画延迟时间 (s)',
| a3: 'number / string',
| a4: '',
| a5: '1',
| },
| {
| a1: 'speed',
| a2: '滚动速率 (px/s)',
| a3: 'number / string',
| a4: '',
| a5: '100',
| },
| {
| a1: 'scrollable',
| a2: '是否开启垂直滚动',
| a3: 'boolean',
| a4: 'true',
| a5: 'false',
| },
| {
| a1: 'leftIcon',
| a2: '自定义左侧图标',
| a3: 'string',
| a4: '',
| a5: '',
| },
| {
| a1: 'rightIcon',
| a2: '自定义右侧图标',
| a3: 'string',
| a4: '',
| a5: '',
| },
| ],
| tableData1: [
| {
| a1: 'close',
| a2: '通知栏模式（mode）closeable 时回调事件',
| a3: 'function',
| a4: '',
| },
| {
| a1: 'link',
| a2: '通知栏模式（mode）link 时回调事件',
| a3: 'function',
| a4: '',
| },
| ],
| });
| return {
| ...toRefs(state),
| };
| },
| });
| </script>
|
|
