ylwl-cpscoms 1.1.0 → 1.2.0

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.
Files changed (38) hide show
  1. package/package.json +2 -3
  2. package/src/DtTable/DtTable/347/273/204/344/273/266/344/275/277/347/224/250/346/226/207/346/241/243.md +0 -819
  3. package/src/DtTable/index.vue +0 -779
  4. package/src/SlAlert/SlAlert.stories.js +0 -108
  5. package/src/SlAlert/index.vue +0 -55
  6. package/src/SlAlert/remark.md +0 -16
  7. package/src/SlDescriptions/SlDescriptions.stories.js +0 -119
  8. package/src/SlDescriptions/index.vue +0 -60
  9. package/src/SlDescriptions/renderOptions.vue +0 -27
  10. package/src/SlDialog/README-PLUS.md +0 -74
  11. package/src/SlDialog/README.md +0 -114
  12. package/src/SlDialog/dialogPlus.js +0 -160
  13. package/src/SlDialog/index.js +0 -170
  14. package/src/SlDrawer/SlDrawer.stories.js +0 -154
  15. package/src/SlDrawer/index.js +0 -62
  16. package/src/SlForm/SlForm.stories.js +0 -120
  17. package/src/SlForm/index.vue +0 -506
  18. package/src/SlForm/mixinRender.js +0 -228
  19. package/src/SlForm/otherItem/titleItem.vue +0 -31
  20. package/src/SlForm/remark.md +0 -607
  21. package/src/SlGuide/SlGuide.stories.js +0 -100
  22. package/src/SlGuide/index.vue +0 -166
  23. package/src/SlGuide/remark.md +0 -90
  24. package/src/SlMessageBox/index.js +0 -35
  25. package/src/SlPage/README.md +0 -515
  26. package/src/SlPage/SlPage.stories.js +0 -125
  27. package/src/SlPage/index.vue +0 -303
  28. package/src/SlPage/remark.md +0 -283
  29. package/src/SlTable/SlTable.stories.js +0 -118
  30. package/src/SlTable/components/colSetting.vue +0 -86
  31. package/src/SlTable/index.vue +0 -541
  32. package/src/SlTitle/SlTitle.stories.js +0 -98
  33. package/src/SlTitle/index.vue +0 -49
  34. package/src/global.css +0 -5
  35. package/src/index.js +0 -49
  36. package/src/store/index.js +0 -20
  37. package/src/utils/index.js +0 -47
  38. package/src/utils/tableConfig.js +0 -33
@@ -1,607 +0,0 @@
1
- <template>
2
- <div style="padding:30px;">
3
- <!-- 一行展示 -->
4
- <sl-form ref="form" v-model="form" :data="options" :form-props="{ inline: false, column: 2,size: 'small', labelWidth: 'auto' }" item-width="100%">
5
- <el-form-item label="自定义字段xxxxx">
6
- <el-input v-model="form.customField" />
7
- adsdaskdoajsio
8
- </el-form-item>
9
- </sl-form>
10
- <!-- 两行展示 -->
11
- <sl-form ref="form" v-model="form" :data="options" :form-props="{ inline: false, column: 2,size: 'small', labelWidth: '180px' }" item-width="50%"/>
12
- <!-- <sl-form ref="form" v-model="form" :data="options" :form-props="{ inline: false, column: 2, labelStyle: { width: '140px', textAlign: 'right' }, showlabel: false }" /> -->
13
- </div>
14
- </template>
15
-
16
- <script>
17
- // import Operation from './components/operation'
18
- // import moment from 'moment'
19
- import * as commonApi from '@/api/common'
20
- import * as settleApi from '@/api/settleAndCash/settle'
21
- import slForm from '@/components/global/SlForm'
22
- const validInt = (_rule, _value, _callback) => {
23
- // 验证是否为合法数字
24
- if (/[^\d\\.]/.test(_value)) {
25
- _callback(new Error(`请输入数字`))
26
- return
27
- }
28
- // 验证是否为整数
29
- // if (/[^\d]/g.test(_value)) {
30
- // _callback(new Error(`请输入整数`))
31
- // return
32
- // }
33
- // 验证金额区间在0-1亿之间
34
- if (Number(_value) === 0) {
35
- _callback(new Error(`不能为0`))
36
- } else if (Number(_value) > 100000000) {
37
- _callback(new Error(`不能大于一亿`))
38
- } else {
39
- _callback()
40
- }
41
- }
42
- export default {
43
- name: 'Setsdatle',
44
- components: {
45
- slForm
46
- },
47
- data() {
48
- return {
49
- options: [
50
- // {
51
- // type: 'tips',
52
- // model: 'tips',
53
- // labelWidth: '0',
54
- // text: '分包标识:游戏包内用于识别合作商的一种标识,方便确认数据来源,<br>等同于原统一后台的渠道号'
55
- // },
56
- {
57
- type: 'select',
58
- model: 'publisherId',
59
- label: '聚合',
60
- labelKey: 'label',
61
- valueKey: 'value',
62
- props: { placeholder: '请输入聚合', disabled: false },
63
- rules: [{ required: true, message: '该项为必填', trigger: 'change' }],
64
- options: [ { label: 'Android', value: 1 },
65
- { label: 'iOS', value: 2 },
66
- { label: 'H5', value: 3 }],
67
- view: 'auto'
68
- },
69
- {
70
- type: 'slot', // 标记为插槽类型
71
- slotName: 'customSlot', // 插槽名称
72
- model: 'slotModel',
73
- },
74
- {
75
- label: '聚合游戏ID',
76
- type: 'input',
77
- model: 'aggGameId',
78
- privateAttrs: { placeholder: '请输入聚合游戏ID' },
79
- rules: [{ required: true, message: '该项为必填', trigger: 'change' }],
80
- view: 'auto'
81
- },
82
- {
83
- label: '聚合游戏',
84
- type: 'input',
85
- model: 'gameName',
86
- rules: [{ required: true, message: '该项为必填', trigger: 'change' }],
87
- privateAttrs: {
88
- placeholder: '请输入聚合游戏',
89
- type: 'textarea',
90
- rows: 3,
91
- maxlength: 128,
92
- 'show-word-limit': true
93
- },
94
- remark: '备注'
95
- },
96
- {
97
- label: '聚合游戏222',
98
- type: 'input',
99
- model: 'gameName2222',
100
- show: false,
101
- rules: [
102
- { required: true, message: '该项为必填', trigger: 'blur' },
103
- { max: 50, message: '最大50位', trigger: 'blur' },
104
- { validator: validInt, trigger: 'blur' }
105
- ],
106
- },
107
- {
108
- label: '系统类型',
109
- type: 'radio',
110
- model: 'systemType',
111
- value: 3,
112
- options: [
113
- { label: 'Android', value: 1 },
114
- { label: 'iOS', value: 2 },
115
- { label: 'H5', value: 3 }
116
- ],
117
- rules: [{ required: true, message: '该项为必填', trigger: 'change' }],
118
- view: 'auto',
119
- linkSet: this.setPartner
120
- },
121
- {
122
- label: '游戏包',
123
- type: 'select',
124
- model: 'gameApk',
125
- labelTips: `1、分包流程请遵循
126
- (1)若是游戏包要上架GooglePlay/AppStore时,只能854聚合-854平台或784聚合-784平台<br>
127
- 2、分包标识:<br>
128
- (1)同个渠道商,需要不同分包标识时:比如田木聚合-644,此时渠道商选择643平台,分包标识取deep644<br>
129
- (2)同聚合同母包同个渠道商分包标识只能创建一个游戏包<br>
130
- 3、如何选择母包:若找不到想要的游戏母包,请点击【新增】创建新游戏母包<br>
131
- 4、H5转手游时,需要配置双聚合,一个H5聚合分手游聚合再分给平台商`,
132
- options: [
133
- { label: 'Android', value: 1 },
134
- { label: 'iOS', value: 2 },
135
- { label: 'H5', value: 3 }
136
- ],
137
- rules: [{ required: true, message: '该项为必填', trigger: 'change' }],
138
- view: 'auto',
139
- // onChange: this.setTipContent(7)
140
- },
141
- {
142
- label: '标题',
143
- type: 'title', // 渲染为select
144
- model: 'problemFxxxxxileInfo', // 给form对象绑定followUserId字段
145
- // rules: [{ required: true, message: '该项为必填', trigger: 'change' }], //规则
146
- view: 'auto',
147
- props: {
148
- stip: '最多20张,每个大小不超过100M,支持 .png .jpg .jpeg .mp4',
149
- limit: 20,
150
- perSize: 100,
151
- accept: '.png, .jpg, .jpeg, .mp4, .MP4',
152
- max: 2000
153
- // style: 'width:350px'
154
- },
155
- privateAttrs: {
156
- style: 'width:350px'
157
- }
158
- // show: false
159
- },
160
- {
161
- label: 'swich',
162
- type: 'switch', // 渲染为select
163
- model: 'problemxxFileInfo', // 给form对象绑定followUserId字段
164
- // rules: [{ required: true, message: '该项为必填', trigger: 'change' }], //规则
165
- view: 'auto',
166
- props: {
167
- stip: '最多20张,每个大小不超过100M,支持 .png .jpg .jpeg .mp4',
168
- limit: 20,
169
- perSize: 100,
170
- accept: '.png, .jpg, .jpeg, .mp4, .MP4',
171
- max: 2000
172
- // style: 'width:350px'
173
- },
174
- privateAttrs: {
175
- style: 'width:350px'
176
- },
177
- remark: '备注'
178
- // show: false
179
- },
180
- {
181
- label: '申请时间',
182
- type: 'datePicker',
183
- model: 'timer',
184
- privateProps: { type: 'daterange', startPlaceholder: '申请开始时间', valueFormat: 'yyyy-MM-dd HH:mm:ss' },
185
- view: 'auto',
186
- callback: (val) => {
187
- return {
188
- applyTimeBegin: val[0],
189
- applyTimeEnd: val[1],
190
- timer: val
191
- }
192
- }
193
- }
194
-
195
-
196
-
197
- ],
198
- form: {
199
- // publisherId: '',
200
- // aggGameId: '123',
201
- // gameName: '321',
202
- // systemType: 1
203
- }
204
- }
205
- },
206
- mounted() {
207
- this.vrySecond()
208
- },
209
- methods: {
210
- // 取消
211
- async cancel() {
212
-
213
- },
214
- // 确定
215
- async confirm() {
216
- return true
217
- },
218
- async setPartner(val) {
219
- console.log('setPartner', val)
220
- if (val === 3 || !val) { return {
221
- model: 'gameApk',
222
- show: () => val === 3,
223
- options: [
224
- { label: '温柔', value: 8 },
225
- { label: '瘦猴', value: 9 },
226
- { label: '转动', value: 10 }
227
- ]
228
- } }
229
- const data = {
230
- secondPwd: 'a123456.'
231
- }
232
- const res = await commonApi.checkSecondPwd(data)
233
- if (res.flag === 1) {
234
- return {
235
- model: 'gameApk',
236
- show: false,
237
- options: [
238
- { label: 'Anxxxxxdroid', value: 100 },
239
- { label: 'iOxxxxS', value: 200 },
240
- { label: 'Hxxxx5', value: 300 }
241
- ]
242
- }
243
- }
244
- },
245
- setTipContent(val) {
246
- console.log('setTipContent', val)
247
- },
248
- submit() {
249
- console.log('submit', this.form)
250
- },
251
- validate() {
252
- this.$refs.form.validate(valid => {
253
- console.log('validate', valid)
254
- })
255
- },
256
- // 去设置二级密码
257
- toSetSecondBtn() {
258
- this.$store.commit('SET_PANEL', 'secondPwd')
259
- this.$router.push({ name: 'SafeVerify' })
260
- },
261
-
262
- // 检查是否验证过二级密码
263
- vrySecond() {
264
- /**
265
- * 检查是否验证过二级密码
266
- *
267
- * 返回参数
268
- * @param {状态(11,未设置二级密码,12,未验证二级密码)} flag
269
- */
270
- commonApi
271
- .vrySecond({})
272
- .then(res => {
273
- if (Number(res.flag) === 11) {
274
- this.isVrySecond = false
275
- } else if (Number(res.flag) === 12) {
276
- this.isVrySecond = true
277
- } else {
278
- this.getList()
279
- }
280
- })
281
- .catch(() => {})
282
- },
283
-
284
- tradeConfirm() {
285
- if (this.secondPwd === '') {
286
- this.$message.warning('请输入二级密码')
287
- return
288
- }
289
- const data = {
290
- secondPwd: this.secondPwd
291
- }
292
- commonApi
293
- .checkSecondPwd(data)
294
- .then(res => {
295
- this.getList()
296
- })
297
- .catch(() => {})
298
- },
299
-
300
- // 操作
301
- operateBtn(i) {
302
- this.loading = true
303
- settleApi
304
- .rechargeOrderPage({})
305
- .then(res => {
306
- if (this.errFlagArr[res.flag] !== undefined) {
307
- this.$store.commit('SET_PANEL', this.errFlagArr[res.flag])
308
- this.$confirm(res.content, '提示', {
309
- confirmButtonText: '确定',
310
- cancelButtonText: '取消',
311
- type: 'warning'
312
- })
313
- .then(() => {
314
- this.$router.push({ name: 'SafeVerify' })
315
- })
316
- .catch(() => {
317
- //
318
- })
319
- } else if (res.flag === 12) {
320
- this.validateSecondPwd(res)
321
- } else {
322
- if (res.data) {
323
- this.operationModel = {
324
- id: '',
325
- type: 'edit',
326
- visible: true,
327
- operationdata: res.data
328
- }
329
- }
330
- }
331
- this.loading = false
332
- })
333
- .catch(() => {
334
- this.loading = false
335
- })
336
- },
337
-
338
- validateSecondPwd(res) {
339
- this.$prompt('为了您的信息安全,请先验证二级密码', '温馨提示', {
340
- confirmButtonText: '确认',
341
- cancelButtonText: '取消',
342
- inputType: 'password',
343
- // inputValidator: validateSafePassword,
344
- inputErrorMessage: '二级密码格式不正确'
345
- })
346
- .then(({ value }) => {
347
- commonApi
348
- .checkSecondPwd({ secondPwd: value })
349
- .then(res => {
350
- if (res.flag === 1) {
351
- this.operateBtn()
352
- }
353
- })
354
- .catch(err => {
355
- if (err.flag === 0) {
356
- // this.$message.error('密码错误!')
357
- }
358
- })
359
- })
360
- .catch(() => {
361
- //
362
- })
363
- },
364
-
365
- // 四舍五入保留两位小数
366
- keepTwoDecimalFull(num) {
367
- var result = parseFloat(num)
368
- if (isNaN(result)) {
369
- return '-'
370
- }
371
- result = Math.round(num * 100) / 100
372
- var s_x = result.toString()
373
- var pos_decimal = s_x.indexOf('.')
374
- if (pos_decimal < 0) {
375
- pos_decimal = s_x.length
376
- s_x += '.'
377
- }
378
- while (s_x.length <= pos_decimal + 2) {
379
- s_x += '0'
380
- }
381
- return s_x
382
- },
383
-
384
- // 查看
385
- lookBtn(orderNum) {
386
- this.loading = true
387
- const data = {
388
- orderNum,
389
- currentPage: 1,
390
- pageShowNum: 10
391
- }
392
- settleApi
393
- .querySettlementDetail(data)
394
- .then(res => {
395
- if (res.data) {
396
- // 设置比较时间
397
- // const compareTime = '2022-12-01 23:59:59'
398
- // 时间戳转换年月日
399
- // const formatTime = moment(res.data.ro.operateTime).format('YYYY-MM-DD HH:mm:ss')
400
- // const isBefore = moment(formatTime).isBefore(compareTime)
401
- // 如果item中 申请时间小于比较时间 展示扣款金额,前端需综合服务费扣款为0
402
- // 如果item中 申请时间大于比较时间 展示综合服务费扣款,前端需展示扣款金额为0
403
- // 注意:后端,扣款金额与综合服务服务费扣款使用的是同一个字段为 recharge_withhold
404
- // 前端单独将扣款金额与综合服务费扣款拆分为2个字段
405
- // chargeback_money:扣款金额
406
- // synthesizeServiceFee_money :综合服务费扣款
407
- // if (isBefore) {
408
- // res.data.ro.chargeback_money = res.data.ro.rechargeWithhold
409
- // res.data.ro.synthesizeServiceFee_money = '0.00'
410
- // // 计算实结金额
411
- // let reality_money = res.data.ro.rechargeJsMoney - res.data.ro.chargeback_money
412
- // reality_money = this.keepTwoDecimalFull(reality_money)
413
- // res.data.ro.reality_money = reality_money
414
- // // 计算实结金额
415
- // // let reality_money = item.recharge_js_money - item.synthesizeServiceFee_money
416
- // // reality_money = this.keepTwoDecimalFull(reality_money)
417
- // // item.reality_money = reality_money
418
- // // } else {
419
- // // item.chargeback_money = item.recharge_withhold
420
- // // item.synthesizeServiceFee_money = '0.00'
421
- // // // 计算实结金额
422
- // // let reality_money = item.recharge_js_money - item.chargeback_money
423
- // // reality_money = this.keepTwoDecimalFull(reality_money)
424
- // // item.reality_money = reality_money
425
- // } else {
426
- // res.data.ro.synthesizeServiceFee_money = res.data.ro.rechargeWithhold
427
- // res.data.ro.chargeback_money = '0.00'
428
- // // 计算实结金额
429
- // let reality_money = res.data.ro.rechargeJsMoney - res.data.ro.synthesizeServiceFee_money
430
- // reality_money = this.keepTwoDecimalFull(reality_money)
431
- // res.data.ro.reality_money = reality_money
432
- // }
433
- // 计算实结金额
434
- const reality_money = res.data.ro.rechargeJsMoney - res.data.ro.rechargeWithhold
435
- res.data.ro.reality_money = reality_money
436
-
437
- this.operationModel = {
438
- id: orderNum,
439
- type: 'look',
440
- visible: true,
441
- operationdata: res.data
442
- }
443
- }
444
- this.loading = false
445
- })
446
- .catch(() => {
447
- this.loading = false
448
- })
449
- },
450
-
451
- // 导出
452
- exportBtn() {
453
- const searchModel = {}
454
- for (const key in this.searchModel) {
455
- if (this.searchModel[key] !== '') {
456
- searchModel[key] = this.searchModel[key]
457
- }
458
- }
459
-
460
- searchModel.startTime = searchModel.startTime ? searchModel.startTime : ''
461
- searchModel.endTime = searchModel.endTime ? searchModel.endTime : ''
462
- if (searchModel.endTime < searchModel.startTime) {
463
- alert('结束日期需大于开始日期')
464
- } else {
465
- commonApi.commonExport(searchModel, '/propertyMgr/exportSettlement.html')
466
- }
467
- },
468
-
469
- // 搜索
470
- searchBtn() {
471
- this.pageConfig.currentPage = 1
472
- this.getList()
473
- },
474
-
475
- // 表单提交回调
476
- confirmOperation() {
477
- this.operationModel.visible = false
478
- this.getList()
479
- },
480
-
481
- // 弹窗关闭回调
482
- cancelOperation() {
483
- this.operationModel.visible = false
484
- this.operationKey = new Date().getTime()
485
- },
486
-
487
- // 获取列表
488
- getList() {
489
- const searchModel = {}
490
- for (const key in this.searchModel) {
491
- if (this.searchModel[key] !== '') {
492
- searchModel[key] = this.searchModel[key]
493
- }
494
- }
495
- searchModel.startTime = searchModel.startTime ? searchModel.startTime : ''
496
- searchModel.endTime = searchModel.endTime ? searchModel.endTime : ''
497
- searchModel.currentPage = this.pageConfig.currentPage
498
- searchModel.pageShowNum = this.pageConfig.pageShowNum
499
- if (searchModel.endTime < searchModel.startTime) {
500
- alert('结束日期需大于开始日期')
501
- } else {
502
- this.loading = true
503
- settleApi
504
- .list(searchModel)
505
- .then(res => {
506
- if (res.data) {
507
- const data = res.data
508
-
509
- data.page.list.forEach(item => {
510
- const reality_money = item.recharge_js_money - item.recharge_withhold
511
- item.reality_money = this.keepTwoDecimalFull(reality_money)
512
- })
513
-
514
- // 设置比较时间
515
- // const compareTime = '2022-12-03 23:59:59'
516
-
517
- // 如果item中 申请时间小于比较时间 展示扣款金额,前端需综合服务费扣款为0
518
- // 如果item中 申请时间大于比较时间 展示综合服务费扣款,前端需展示扣款金额为0
519
- // 注意:后端,扣款金额与综合服务服务费扣款使用的是同一个字段为 recharge_withhold
520
- // 前端单独将扣款金额与综合服务费扣款拆分为2个字段
521
- // chargeback_money:扣款金额
522
- // synthesizeServiceFee_money :综合服务费扣款
523
- // data.page.list.forEach(item => {
524
- // const isBefore = moment(item.operate_time).isBefore(compareTime)
525
-
526
- // if (isBefore) {
527
- // item.chargeback_money = item.recharge_withhold
528
- // item.synthesizeServiceFee_money = '0.00'
529
- // // 计算实结金额
530
- // let reality_money = item.recharge_js_money - item.chargeback_money
531
- // reality_money = this.keepTwoDecimalFull(reality_money)
532
- // item.reality_money = reality_money
533
- // } else {
534
- // item.synthesizeServiceFee_money = item.recharge_withhold
535
- // item.chargeback_money = '0.00'
536
- // // 计算实结金额
537
- // let reality_money = item.recharge_js_money - item.synthesizeServiceFee_money
538
- // reality_money = this.keepTwoDecimalFull(reality_money)
539
- // item.reality_money = reality_money
540
- // }
541
- // })
542
-
543
- // // 前端添加实结金额
544
- // data.page.list.forEach(item => {
545
- // let reality_money = item.recharge_js_money - item.recharge_withhold
546
- // reality_money = this.keepTwoDecimalFull(reality_money)
547
- // item.reality_money = reality_money
548
- // })
549
-
550
- this.dataList = data.page.list
551
- this.pageConfig.total = data.page.total
552
- // this.totalJsMoney = data.totalJsMoney
553
- }
554
- this.showTradeInfo = true
555
- this.loading = false
556
- })
557
- .catch(() => {
558
- this.loading = false
559
- })
560
- }
561
- },
562
-
563
- // 修改每页显示条数
564
- handleSizeChange: function(val) {
565
- this.pageConfig.pageShowNum = val
566
- this.getList()
567
- },
568
-
569
- // 点击分页跳转
570
- handleCurrentChange: function(val) {
571
- this.pageConfig.currentPage = val
572
- this.getList()
573
- }
574
- }
575
-
576
- }
577
- </script>
578
-
579
- <style lang="scss" scoped>
580
- .fi-body {
581
- margin-top: 150px;
582
- display: flex;
583
- align-items: center;
584
- justify-content: center;
585
- .trade-box {
586
- display: flex;
587
- flex-direction: column;
588
- align-items: center;
589
- max-width: 500px;
590
- }
591
- }
592
-
593
- // 头部橙黄标识
594
- .attention {
595
- font-size: 16px;
596
- padding: 20px 10px;
597
- margin-bottom: 10px;
598
- border-radius: 8px;
599
- color: #f99550;
600
- background-color: #fcf8e3;
601
- }
602
- .txt-ellips {
603
- overflow: hidden;
604
- white-space: nowrap;
605
- text-overflow: ellipsis;
606
- }
607
- </style>
@@ -1,100 +0,0 @@
1
- import SlGuide from './index.vue'
2
-
3
- export default {
4
- title: 'Components/SlGuide',
5
- component: SlGuide,
6
- parameters: {
7
- docs: {
8
- description: {
9
- component: '新手引导组件,基于 Shepherd.js 封装。通过 steps 数组配置引导步骤,每个步骤可指定挂载元素、标题、文案和按钮。'
10
- }
11
- }
12
- }
13
- }
14
-
15
- const codeBlock = (code) => `
16
- <div style="margin-top:24px;border-top:1px solid #eee;padding-top:16px">
17
- <p style="font-size:14px;font-weight:600;color:#666;margin-bottom:8px;">使用代码:</p>
18
- <pre style="background:#f5f5f5;padding:16px;border-radius:4px;overflow-x:auto;font-size:13px;line-height:1.6;white-space:pre-wrap;word-break:break-all"><code>${escapeHtml(code.trim())}</code></pre>
19
- </div>`
20
-
21
- function escapeHtml(str) {
22
- return str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
23
- }
24
-
25
- // ---- 基础用法 ----
26
- const defaultCode = `<!-- 使用方式 -->
27
- <sl-guide :steps="steps" :options="options" />
28
-
29
- <!-- steps 配置 -->
30
- steps: [
31
- {
32
- id: 'step-1',
33
- title: '欢迎使用',
34
- text: '这是一个功能引导,将帮助您快速了解页面功能。',
35
- attachTo: { element: '#guide-target-1', on: 'bottom' },
36
- buttons: [
37
- { text: '下一步', actionType: 'next', classes: 'shepherd-button-primary' }
38
- ]
39
- }
40
- ]`
41
-
42
- export const Default = () => ({
43
- components: { SlGuide },
44
- template: `
45
- <div>
46
- <div style="display:flex;gap:40px;margin-bottom:30px">
47
- <div>
48
- <p style="font-weight:600;margin-bottom:8px">点击下方按钮开始引导:</p>
49
- <el-button id="guide-target-1" type="primary">目标按钮 1</el-button>
50
- </div>
51
- <div>
52
- <p style="font-weight:600;margin-bottom:8px">第二个目标:</p>
53
- <el-input id="guide-target-2" placeholder="搜索框" style="width:200px" />
54
- </div>
55
- <div>
56
- <p style="font-weight:600;margin-bottom:8px">第三个目标:</p>
57
- <el-button id="guide-target-3" type="success">目标按钮 3</el-button>
58
- </div>
59
- </div>
60
- <sl-guide :steps="steps" ref="guide" />
61
- ${codeBlock(defaultCode)}
62
- </div>`,
63
- data() {
64
- return {
65
- steps: [
66
- {
67
- id: 'step-1',
68
- title: '欢迎',
69
- text: '这是第一步引导,介绍功能入口按钮。',
70
- attachTo: { element: '#guide-target-1', on: 'bottom' },
71
- buttons: [
72
- { text: '下一步', actionType: 'next', classes: 'shepherd-button-primary' }
73
- ]
74
- },
75
- {
76
- id: 'step-2',
77
- title: '搜索',
78
- text: '在这里可以输入关键词进行搜索。',
79
- attachTo: { element: '#guide-target-2', on: 'bottom' },
80
- buttons: [
81
- { text: '上一步', actionType: 'back', classes: 'shepherd-button-secondary' },
82
- { text: '下一步', actionType: 'next', classes: 'shepherd-button-primary' }
83
- ]
84
- },
85
- {
86
- id: 'step-3',
87
- title: '操作',
88
- text: '最后一步,点击按钮执行操作。',
89
- attachTo: { element: '#guide-target-3', on: 'bottom' },
90
- buttons: [
91
- { text: '上一步', actionType: 'back', classes: 'shepherd-button-secondary' },
92
- { text: '完成', actionType: 'complete', classes: 'shepherd-button-primary' }
93
- ]
94
- }
95
- ]
96
- }
97
- }
98
- })
99
-
100
- Default.storyName = '基础引导'