朱兆平 / vue_cli · 提交

转到一个项目

作者 王勇
提交 56bdca38b24a25fe8050c5436c55dc7d8bd938ce 1 个父辈 030cb9d8

修改样式

内嵌 并排对比
正在显示 2 个修改的文件 包含 211 行增加 和 94 行删除
@@ -6,10 +6,6 @@ @@ -6,10 +6,6 @@
6 <div> 6 <div>
7 <el-row> 7 <el-row>
8 <el-col :span="4"> 8 <el-col :span="4">
9 - <el-input v-model="messageNote_queryInfo.username" placeholder="用户名称"  
10 - size="medium" clearable prefix-icon="el-icon-search"></el-input>  
11 - </el-col>  
12 - <el-col :span="4">  
13 <el-input v-model="messageNote_queryInfo.serverName" placeholder="服务器名称" 9 <el-input v-model="messageNote_queryInfo.serverName" placeholder="服务器名称"
14 size="medium" clearable prefix-icon="el-icon-search"></el-input> 10 size="medium" clearable prefix-icon="el-icon-search"></el-input>
15 </el-col> 11 </el-col>
@@ -18,8 +14,6 @@ @@ -18,8 +14,6 @@
18 size="medium" clearable prefix-icon="el-icon-search" 14 size="medium" clearable prefix-icon="el-icon-search"
19 placeholder="虚拟主机名称"></el-input> 15 placeholder="虚拟主机名称"></el-input>
20 </el-col> 16 </el-col>
21 - </el-row>  
22 - <el-row>  
23 <el-col :span="4"> 17 <el-col :span="4">
24 <el-input v-model="messageNote_queryInfo.exchangeName" placeholder="交换机名称" 18 <el-input v-model="messageNote_queryInfo.exchangeName" placeholder="交换机名称"
25 size="medium" clearable prefix-icon="el-icon-search"></el-input> 19 size="medium" clearable prefix-icon="el-icon-search"></el-input>
@@ -28,8 +22,19 @@ @@ -28,8 +22,19 @@
28 <el-input v-model="messageNote_queryInfo.routingKeyName" placeholder="路由键名称" 22 <el-input v-model="messageNote_queryInfo.routingKeyName" placeholder="路由键名称"
29 size="medium" clearable prefix-icon="el-icon-search"></el-input> 23 size="medium" clearable prefix-icon="el-icon-search"></el-input>
30 </el-col> 24 </el-col>
  25 + </el-row>
  26 + <el-row>
31 <el-col :span="4"> 27 <el-col :span="4">
32 - <el-date-picker v-model="messageNote_queryInfo.sendTime" placeholder="消息发送时间" 28 + <el-input v-model="messageNote_queryInfo.username" placeholder="用户名称"
  29 + size="medium" clearable prefix-icon="el-icon-search"></el-input>
  30 + </el-col>
  31 + <el-col :span="4">
  32 + <el-date-picker v-model="messageNote_queryInfo.sendTimeBegin" placeholder="时间段-开始"
  33 + type="date" value-format="yyyy-MM-dd"
  34 + size="medium" style="width: auto"></el-date-picker>
  35 + </el-col>
  36 + <el-col :span="4">
  37 + <el-date-picker v-model="messageNote_queryInfo.sendTimeEnd" placeholder="时间段-结束"
33 type="date" value-format="yyyy-MM-dd" 38 type="date" value-format="yyyy-MM-dd"
34 size="medium" style="width: auto"></el-date-picker> 39 size="medium" style="width: auto"></el-date-picker>
35 </el-col> 40 </el-col>
@@ -65,7 +70,7 @@ @@ -65,7 +70,7 @@
65 <el-table-column label="交换机名称" prop="exchangeName" align="center" width="220"></el-table-column> 70 <el-table-column label="交换机名称" prop="exchangeName" align="center" width="220"></el-table-column>
66 <el-table-column label="路由键名称" prop="routingKeyName" align="center" 71 <el-table-column label="路由键名称" prop="routingKeyName" align="center"
67 width="220"></el-table-column> 72 width="220"></el-table-column>
68 - <el-table-column label="消息发送时间" prop="sendTime" align="center" 73 + <el-table-column label="消息发送时间" prop="alias_sendTime" align="center"
69 width="220"> 74 width="220">
70 </el-table-column> 75 </el-table-column>
71 <el-table-column label="发送内容" prop="alias_sendContent" align="center" 76 <el-table-column label="发送内容" prop="alias_sendContent" align="center"
@@ -77,9 +82,9 @@ @@ -77,9 +82,9 @@
77 <el-table-column label="操作" width="245px" align="center" fixed="right"> 82 <el-table-column label="操作" width="245px" align="center" fixed="right">
78 <template slot-scope="scope"> 83 <template slot-scope="scope">
79 <!-- 编辑按钮--> 84 <!-- 编辑按钮-->
80 - <el-tooltip effect="dark" content="编辑" placement="top-start" :enterable="false"> 85 + <el-tooltip effect="dark" content="查看" placement="top-start" :enterable="false">
81 <el-button type="primary" icon="el-icon-edit" size="mini" 86 <el-button type="primary" icon="el-icon-edit" size="mini"
82 - @click="messageNote_toEditDialog(scope.$index,scope.row)">编辑 87 + @click="messageNote_toEditDialog(scope.$index,scope.row)">查看
83 </el-button> 88 </el-button>
84 </el-tooltip> 89 </el-tooltip>
85 <!-- 删除按钮--> 90 <!-- 删除按钮-->
@@ -236,11 +241,12 @@ @@ -236,11 +241,12 @@
236 <el-form-item label="发送内容：" prop="alias_sendContent"> 241 <el-form-item label="发送内容：" prop="alias_sendContent">
237 <el-input v-model="messageNote_addForm.alias_sendContent" style="width:300px" size="small" 242 <el-input v-model="messageNote_addForm.alias_sendContent" style="width:300px" size="small"
238 clearable type="textarea" :rows="1" 243 clearable type="textarea" :rows="1"
239 - placeholder="请输入相关描述"> 244 + placeholder="请输入发送内容">
240 </el-input> 245 </el-input>
241 </el-form-item> 246 </el-form-item>
242 <el-form-item label="相关描述：" prop="description"> 247 <el-form-item label="相关描述：" prop="description">
243 - <el-input v-model="messageNote_addForm.description" style="width:300px" size="small" clearable 248 + <el-input v-model="messageNote_addForm.description" style="width:300px" size="small"
  249 + clearable type="textarea" :rows="1"
244 placeholder="请输入相关描述"> 250 placeholder="请输入相关描述">
245 </el-input> 251 </el-input>
246 </el-form-item> 252 </el-form-item>
@@ -257,102 +263,128 @@ @@ -257,102 +263,128 @@
257 </div> 263 </div>
258 <!-- 编辑，对话框区域 --> 264 <!-- 编辑，对话框区域 -->
259 <div> 265 <div>
260 - <el-dialog title="编辑消息记录" 266 + <el-dialog title="查看消息记录"
261 :visible.sync="messageNote_dialog.editDialog" 267 :visible.sync="messageNote_dialog.editDialog"
262 style="margin-top: -50px" text-align="center" width="65%" 268 style="margin-top: -50px" text-align="center" width="65%"
263 @close="messageNote_editDialogClosed"> 269 @close="messageNote_editDialogClosed">
264 270
265 <el-form :inline="true" label-width="120px" status-icon style="margin-top: -10px" align="center" 271 <el-form :inline="true" label-width="120px" status-icon style="margin-top: -10px" align="center"
266 :model="messageNote_editForm" :rules="messageNote_editFormRules" ref="messageNote_editFormRef"> 272 :model="messageNote_editForm" :rules="messageNote_editFormRules" ref="messageNote_editFormRef">
267 - <el-form-item label="用户名称：" prop="userId">  
268 - <el-select v-model="messageNote_editForm.userId" prefix-icon="el-icon-search" clearable  
269 - style="width:300px" size="medium" filterable disabled  
270 - placeholder="请选择用户">  
271 - <el-option  
272 - v-for="item in (messageNote_config.userInfoList)"  
273 - :key="item.id"  
274 - :label="item.username"  
275 - :value="item.id">  
276 - </el-option>  
277 - </el-select> 273 + <el-form-item label="用户名称：" prop="username">
  274 + <el-input v-model="messageNote_editForm.username" style="width:300px" size="small"
  275 + readonly
  276 + placeholder="用户名称">
  277 + </el-input>
  278 +
  279 + <!-- <el-select v-model="messageNote_editForm.userId" prefix-icon="el-icon-search" clearable-->
  280 + <!-- style="width:300px" size="medium" filterable disabled-->
  281 + <!-- placeholder="请选择用户">-->
  282 + <!-- <el-option-->
  283 + <!-- v-for="item in (messageNote_config.userInfoList)"-->
  284 + <!-- :key="item.id"-->
  285 + <!-- :label="item.username"-->
  286 + <!-- :value="item.id">-->
  287 + <!-- </el-option>-->
  288 + <!-- </el-select>-->
278 </el-form-item> 289 </el-form-item>
279 290
280 - <el-form-item label="服务器名称：" prop="serverId">  
281 - <el-select v-model="messageNote_editForm.serverId" prefix-icon="el-icon-search" clearable  
282 - disabled  
283 - style="width:300px" size="small"  
284 - @change="messageNote_server_editChange"  
285 - placeholder="请选择所属服务器">  
286 - <el-option  
287 - v-for="item in (messageNote_config.serverList)"  
288 - :key="item.id"  
289 - :label="item.serverName"  
290 - :value="item.id">  
291 - </el-option>  
292 - </el-select> 291 + <el-form-item label="服务器名称：" prop="serverName">
  292 + <el-input v-model="messageNote_editForm.serverName" style="width:300px" size="small"
  293 + readonly
  294 + placeholder="服务器名称">
  295 + </el-input>
  296 + <!-- <el-select v-model="messageNote_editForm.serverId" prefix-icon="el-icon-search" clearable-->
  297 + <!-- disabled-->
  298 + <!-- style="width:300px" size="small"-->
  299 + <!-- @change="messageNote_server_editChange"-->
  300 + <!-- placeholder="请选择所属服务器">-->
  301 + <!-- <el-option-->
  302 + <!-- v-for="item in (messageNote_config.serverList)"-->
  303 + <!-- :key="item.id"-->
  304 + <!-- :label="item.serverName"-->
  305 + <!-- :value="item.id">-->
  306 + <!-- </el-option>-->
  307 + <!-- </el-select>-->
293 </el-form-item> 308 </el-form-item>
294 309
295 - <el-form-item label="虚拟主机名称：" prop="virtualHostId"> 310 + <el-form-item label="虚拟主机名称：" prop="virtualHostName">
  311 + <el-input v-model="messageNote_editForm.virtualHostName" style="width:300px" size="small"
  312 + readonly
  313 + placeholder="虚拟主机名称">
  314 + </el-input>
296 <!-- :disabled="messageNote_editForm.serverId===''" --> 315 <!-- :disabled="messageNote_editForm.serverId===''" -->
297 - <el-select v-model="messageNote_editForm.virtualHostId" prefix-icon="el-icon-search" clearable  
298 - disabled  
299 - style="width:300px" size="small"  
300 - @change="messageNote_virtualHost_editChange"  
301 - placeholder="请选择虚拟主机名称">  
302 - <el-option  
303 - v-for="item in (messageNote_config.virtualHostList)"  
304 - :key="item.id"  
305 - :label="item.virtualHostName"  
306 - :value="item.id">  
307 - </el-option>  
308 - </el-select> 316 + <!-- <el-select v-model="messageNote_editForm.virtualHostId" prefix-icon="el-icon-search" clearable-->
  317 + <!-- disabled-->
  318 + <!-- style="width:300px" size="small"-->
  319 + <!-- @change="messageNote_virtualHost_editChange"-->
  320 + <!-- placeholder="请选择虚拟主机名称">-->
  321 + <!-- <el-option-->
  322 + <!-- v-for="item in (messageNote_config.virtualHostList)"-->
  323 + <!-- :key="item.id"-->
  324 + <!-- :label="item.virtualHostName"-->
  325 + <!-- :value="item.id">-->
  326 + <!-- </el-option>-->
  327 + <!-- </el-select>-->
309 </el-form-item> 328 </el-form-item>
310 329
311 - <el-form-item label="交换机名称：" prop="exchangeId"> 330 + <el-form-item label="交换机名称：" prop="exchangeName">
  331 + <el-input v-model="messageNote_editForm.exchangeName" style="width:300px" size="small"
  332 + readonly
  333 + placeholder="交换机名称">
  334 + </el-input>
312 <!-- :disabled="messageNote_editForm.virtualHostId===''" --> 335 <!-- :disabled="messageNote_editForm.virtualHostId===''" -->
313 - <el-select v-model="messageNote_editForm.exchangeId" prefix-icon="el-icon-search" clearable  
314 - disabled  
315 - style="width:300px" size="small"  
316 - @change="messageNote_exchange_editChange"  
317 - placeholder="请选择交换机名称">  
318 - <el-option  
319 - v-for="item in (messageNote_config.exchangeList)"  
320 - :key="item.id"  
321 - :label="item.exchangeName"  
322 - :value="item.id">  
323 - </el-option>  
324 - </el-select> 336 + <!-- <el-select v-model="messageNote_editForm.exchangeId" prefix-icon="el-icon-search" clearable-->
  337 + <!-- disabled-->
  338 + <!-- style="width:300px" size="small"-->
  339 + <!-- @change="messageNote_exchange_editChange"-->
  340 + <!-- placeholder="请选择交换机名称">-->
  341 + <!-- <el-option-->
  342 + <!-- v-for="item in (messageNote_config.exchangeList)"-->
  343 + <!-- :key="item.id"-->
  344 + <!-- :label="item.exchangeName"-->
  345 + <!-- :value="item.id">-->
  346 + <!-- </el-option>-->
  347 + <!-- </el-select>-->
325 </el-form-item> 348 </el-form-item>
326 349
327 - <el-form-item label="路由键名称：" prop="routingKeyId"> 350 + <el-form-item label="路由键名称：" prop="routingKeyName">
  351 + <el-input v-model="messageNote_editForm.routingKeyName" style="width:300px" size="small"
  352 + readonly
  353 + placeholder="路由键名称">
  354 + </el-input>
328 <!-- :disabled="messageNote_editForm.exchangeId===''" --> 355 <!-- :disabled="messageNote_editForm.exchangeId===''" -->
329 - <el-select v-model="messageNote_editForm.routingKeyId" prefix-icon="el-icon-search" clearable  
330 - disabled  
331 - style="width:300px" size="small"  
332 - placeholder="请选择路由键名称">  
333 - <el-option  
334 - v-for="item in (messageNote_config.routingKeyList)"  
335 - :key="item.id"  
336 - :label="item.routingKeyName"  
337 - :value="item.id">  
338 - </el-option>  
339 - </el-select> 356 + <!-- <el-select v-model="messageNote_editForm.routingKeyId" prefix-icon="el-icon-search" clearable-->
  357 + <!-- disabled-->
  358 + <!-- style="width:300px" size="small"-->
  359 + <!-- placeholder="请选择路由键名称">-->
  360 + <!-- <el-option-->
  361 + <!-- v-for="item in (messageNote_config.routingKeyList)"-->
  362 + <!-- :key="item.id"-->
  363 + <!-- :label="item.routingKeyName"-->
  364 + <!-- :value="item.id">-->
  365 + <!-- </el-option>-->
  366 + <!-- </el-select>-->
340 </el-form-item> 367 </el-form-item>
341 - <el-form-item label="消息发送时间：" prop="sendTime">  
342 - <el-date-picker v-model="messageNote_editForm.sendTime" disabled clearable type="datetime"  
343 - value-format="yyyy-MM-dd HH:mm:ss"  
344 - placeholder="选择发送时间" size="small" style="width:300px"></el-date-picker> 368 + <el-form-item label="消息发送时间：" prop="alias_sendTime">
  369 + <el-input v-model="messageNote_editForm.alias_sendTime" style="width:300px" size="small"
  370 + readonly
  371 + placeholder="消息发送时间">
  372 + </el-input>
  373 + <!-- <el-date-picker v-model="messageNote_editForm.sendTime" disabled clearable type="datetime"-->
  374 + <!-- value-format="yyyy-MM-dd HH:mm:ss"-->
  375 + <!-- placeholder="选择发送时间" size="small" style="width:300px"></el-date-picker>-->
345 </el-form-item> 376 </el-form-item>
346 377
347 <el-form-item label="发送内容：" prop="alias_sendContent"> 378 <el-form-item label="发送内容：" prop="alias_sendContent">
348 <el-input v-model="messageNote_editForm.alias_sendContent" style="width:300px" size="small" 379 <el-input v-model="messageNote_editForm.alias_sendContent" style="width:300px" size="small"
349 - clearable disabled type="textarea" :rows="1"  
350 - placeholder="请输入相关描述"> 380 + clearable readonly type="textarea" :rows="1"
  381 + placeholder="请输入发送内容">
351 </el-input> 382 </el-input>
352 </el-form-item> 383 </el-form-item>
353 384
354 <el-form-item label="相关描述：" prop="description"> 385 <el-form-item label="相关描述：" prop="description">
355 - <el-input v-model="messageNote_editForm.description" style="width:300px" size="small" clearable 386 + <el-input v-model="messageNote_editForm.description" style="width:300px" size="small"
  387 + clearable readonly type="textarea" :rows="1"
356 placeholder="请输入相关描述"> 388 placeholder="请输入相关描述">
357 </el-input> 389 </el-input>
358 </el-form-item> 390 </el-form-item>
@@ -361,9 +393,12 @@ @@ -361,9 +393,12 @@
361 <el-button type="info" @click="messageNote_dialog.editDialog = false" size="medium" 393 <el-button type="info" @click="messageNote_dialog.editDialog = false" size="medium"
362 style="width: 100px">取消 394 style="width: 100px">取消
363 </el-button> 395 </el-button>
364 - <el-button type="primary" @click="messageNote_edit" :loading="messageNote_loading.editLoading"  
365 - size="medium" style="width: 100px">添加 396 + <el-button type="primary" @click="messageNote_dialog.editDialog = false" size="medium"
  397 + style="width: 100px">关闭
366 </el-button> 398 </el-button>
  399 +<!-- <el-button type="primary" @click="messageNote_edit" :loading="messageNote_loading.editLoading"-->
  400 +<!-- size="medium" style="width: 100px">查看-->
  401 +<!-- </el-button>-->
367 </div> 402 </div>
368 </el-dialog> 403 </el-dialog>
369 </div> 404 </div>
@@ -420,9 +455,9 @@ @@ -420,9 +455,9 @@
420 // 路由键名称 455 // 路由键名称
421 routingKeyName: '', 456 routingKeyName: '',
422 // 消息发送时间 457 // 消息发送时间
423 - sendTime: undefined, 458 + sendTimeBegin: undefined,
424 // 消息获取时间 459 // 消息获取时间
425 - receiveTime: undefined, 460 + sendTimeEnd: undefined,
426 // 当前页数 461 // 当前页数
427 pageNum: 1, 462 pageNum: 1,
428 // 每页条数 463 // 每页条数
@@ -639,9 +674,9 @@ @@ -639,9 +674,9 @@
639 return this.$message.error('获取消息收发记录，失败！'); 674 return this.$message.error('获取消息收发记录，失败！');
640 } 675 }
641 // 获取列表数据 676 // 获取列表数据
642 - this.messageNote_page.messageNoteList = res.data.list; 677 + this.messageNote_page.messageNoteList = res.data;
643 // 获取列表的总记录数 678 // 获取列表的总记录数
644 - this.messageNote_page.total = res.data.total; 679 + this.messageNote_page.total = res.total;
645 // 关闭加载 680 // 关闭加载
646 this.messageNote_loading.listLoading = false; 681 this.messageNote_loading.listLoading = false;
647 this.$message.success('获取消息收发记录，成功！'); 682 this.$message.success('获取消息收发记录，成功！');
@@ -708,7 +743,7 @@ @@ -708,7 +743,7 @@
708 messageNote_toEditDialog(index, row) { 743 messageNote_toEditDialog(index, row) {
709 this.messageNote_selectServerList(); 744 this.messageNote_selectServerList();
710 this.messageNote_selectHostList(row.serverId); 745 this.messageNote_selectHostList(row.serverId);
711 - this.messageNote_selectQueueList(row.virtualHostId); 746 + // this.messageNote_selectQueueList(row.virtualHostId);
712 this.messageNote_selectExchangeList(row.virtualHostId); 747 this.messageNote_selectExchangeList(row.virtualHostId);
713 this.messageNote_selectRoutingKeyList(row.exchangeId); 748 this.messageNote_selectRoutingKeyList(row.exchangeId);
714 this.messageNote_editForm = Object.assign({}, row); 749 this.messageNote_editForm = Object.assign({}, row);
@@ -770,16 +805,18 @@ @@ -770,16 +805,18 @@
770 ).then(() => { 805 ).then(() => {
771 // 开启加载 806 // 开启加载
772 this.messageNote_loading.delLoading = true; 807 this.messageNote_loading.delLoading = true;
  808 + // 特殊情况，sendTime与后端接收格式不对（但又不能改）
  809 + row.sendTime = undefined;
773 deleteMessageNote(row).then((response) => { 810 deleteMessageNote(row).then((response) => {
774 let res = response.data; 811 let res = response.data;
775 if (res.code !== '200') { 812 if (res.code !== '200') {
776 // 关闭加载 813 // 关闭加载
777 this.messageNote_loading.delLoading = false; 814 this.messageNote_loading.delLoading = false;
778 - return this.$message.error('删除队列信息，失败'); 815 + return this.$message.error('删除消息记录信息，失败');
779 } 816 }
780 // 关闭加载 817 // 关闭加载
781 this.messageNote_loading.delLoading = false; 818 this.messageNote_loading.delLoading = false;
782 - this.$message.success('删除队列信息，成功！'); 819 + this.$message.success(res.msg);
783 // 刷新列表 820 // 刷新列表
784 this.messageNote_getList(); 821 this.messageNote_getList();
785 }).catch(error => { 822 }).catch(error => {
@@ -817,7 +854,7 @@ @@ -817,7 +854,7 @@
817 this.messageNote_loading.batchDelLoading = false; 854 this.messageNote_loading.batchDelLoading = false;
818 return this.$message.error('批量删除消息收发记录，失败'); 855 return this.$message.error('批量删除消息收发记录，失败');
819 } 856 }
820 - this.$message.success('批量删除消息收发记录，成功！'); 857 + this.$message.success(res.msg);
821 // 关闭加载 858 // 关闭加载
822 this.messageNote_loading.batchDelLoading = false; 859 this.messageNote_loading.batchDelLoading = false;
823 // 刷新列表 860 // 刷新列表
@@ -1026,7 +1063,7 @@ @@ -1026,7 +1063,7 @@
1026 1063
1027 // 根据虚拟主机ID，获取出对应的交换机和队列的列表 1064 // 根据虚拟主机ID，获取出对应的交换机和队列的列表
1028 this.messageNote_selectExchangeList(value); 1065 this.messageNote_selectExchangeList(value);
1029 - this.messageNote_selectQueueList(value); 1066 + // this.messageNote_selectQueueList(value);
1030 }, 1067 },
1031 /** 1068 /**
1032 * 编辑方法，交换机ID值，改变 1069 * 编辑方法，交换机ID值，改变
@@ -1056,7 +1093,7 @@ @@ -1056,7 +1093,7 @@
1056 }, 1093 },
1057 created() { 1094 created() {
1058 // 刷新列表 1095 // 刷新列表
1059 - this.messageNote_getList(); 1096 + // this.messageNote_getList();
1060 // 获取删除时间 1097 // 获取删除时间
1061 this.selectDeleteTime(); 1098 this.selectDeleteTime();
1062 }, 1099 },
  1 +<template>
  2 + <div class="ValidCode disabled-select" :style="`width:${width}; height:${height}`" @click="refreshCode">
  3 + <el-input placeholder="请输入4位验证码" style="width: 100px" v-model="ruleForm.verifyCode"></el-input>
  4 + <span v-for="(item, index) in codeList" :key="index" :style="getStyle(item)">{{item.code}}</span>
  5 + </div>
  6 +</template>
  7 +
  8 +<script>
  9 + export default {
  10 + name: 'ValidCode',
  11 + props: {
  12 + width: {
  13 + type: String,
  14 + default: '100px'
  15 + },
  16 + height: {
  17 + type: String,
  18 + default: '40px'
  19 + },
  20 + length: {
  21 + type: Number,
  22 + default: 4
  23 + }
  24 + },
  25 + data() {
  26 + return {
  27 + codeList: [],
  28 + ruleForm: {
  29 + verifyCode: ''
  30 + }
  31 + }
  32 +
  33 + },
  34 + mounted() {
  35 + this.createdCode()
  36 + },
  37 + methods: {
  38 + refreshCode() {
  39 + this.createdCode()
  40 + },
  41 + createdCode() {
  42 + let len = this.length,
  43 + codeList = [],
  44 + chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz0123456789',
  45 + charsLen = chars.length
  46 + // 生成
  47 + for (let i = 0; i < len; i++) {
  48 + let rgb = [Math.round(Math.random() * 220), Math.round(Math.random() * 240), Math.round(Math.random() * 200)]
  49 + codeList.push({
  50 + code: chars.charAt(Math.floor(Math.random() * charsLen)),
  51 + color: `rgb(${rgb})`,
  52 + fontSize: `1${[Math.floor(Math.random() * 10)]}px`,
  53 + padding: `${[Math.floor(Math.random() * 10)]}px`,
  54 + transform: `rotate(${Math.floor(Math.random() * 90) - Math.floor(Math.random() * 90)}deg)`
  55 + })
  56 + }
  57 + // 指向
  58 + this.codeList = codeList
  59 + // 将当前数据派发出去
  60 + this.$emit('update:value', codeList.map(item => item.code).join(''))
  61 + },
  62 + getStyle(data) {
  63 + return `color: ${data.color}; font-size: ${data.fontSize}; padding: ${data.padding}; transform: ${data.transform}`
  64 + }
  65 + }
  66 + }
  67 +</script>
  68 +
  69 +<style scoped lang="scss">
  70 + .ValidCode {
  71 + display: flex;
  72 + justify-content: center;
  73 + align-items: center;
  74 + cursor: pointer;
  75 +
  76 + span {
  77 + display: inline-block;
  78 + }
  79 + }
  80 +</style>