Vue-Element UI 组件使用经验，动态二维码生成，node.js 之使用 util 工具类发送请求，uniapp忽略路径中#，前端总结大杂烩，附代码解析（持续更新）

目录

一、Vue – Element UI

1. 表格 el-table

2. 弹框

3. 按钮（预授权）

4. 组件 template

5. 抽屉 el-drawer

6. 动态生成二维码

二、node.js

1. node.js 引入 util.js 工具类

三、uniapp

1. view 标签

2. onLoad(options) 获取url路径上参数

3. 解决微信开发中 H5 路径中的 “#” 影响跳转

一、Vue – Element UI

1. 表格 el-table

• @selection-change=”handleSelectionChange” //绑定多选框选中方法
• v-loading=”loading” //实现加载效果
• el-table 设置斑马纹表格(间隔行底色），只需要添加 stripe 字段（内置属性，置为true即可）

 //绑定属性 prop，设置居中 align="center"，设置可排序 sortable 或 :sortable="true"// 多选框选中数据handleSelectionChange(selection) {this.ids = selection.map(item => item.memberId)this.single = selection.length!==1this.multiple = !selection.length}

分页插件

0":total="total":page.sync="queryMoneyParams.pageNum":limit.sync="queryMoneyParams.pageSize"@pagination="getMoneyList"/>

2. 弹框

（可嵌套iframe，也可以嵌套table表格或form表单）

• el-dialog 弹框， append-to-body 表示将指定 html 元素添加到 body 中。
• el-col :span=”24″ 将长分为24份，中的 表示将某几个输入框按比例分隔
• ref=”form” 绑定表单数据，:model=”form” 双向绑定数据， :rules=”rules” 绑定校验规则
• slot=”footer” class=”dialog-footer” 绑定底部内容
• :before-close=”handleClose”右上角 x 号的回调函数

  确 定取 消

3. 按钮（预授权）

（常见格式，通过type修改样式）

size=”mini” 可以将按钮大小设为小型。

默认按钮主要按钮成功按钮信息按钮警告按钮危险按钮

按钮事件的 预授权操作v-hasPermi=”[‘ubp:member:remove’]”

//对应的是Java后端的 SpringSecurity 权限校验

//前端按钮 v-hasPermi 预授权按钮//后端方法上的校验：（校验权限，防止方法的错误调用或跳过前端直接访问后端方法）@PreAuthorize("@ss.hasPermi('ubp:member:remove')")public AjaxResult remove(@PathVariable Long[] memberId

搜索事件（若依生成代码）

简单引入若依的概念：若依是当下较为流行的快捷开发框架，如果你的项目是一个springboot+vue，而且主要做管理系统，那么你可以尝试引入若依进行快速开发，若依有完整的代码结构，包括常用工具类，shiro安全校验，代码生成gen，ApachePOI操作Excel都有所集成。

4. 组件 template

scope.row//相当于当前行的数据对象

{{ scope.row.memberName }}//获取行内具体数据

slot-scope=”scope”//作用域插槽(带有数据的插槽)

//用途一，获取后端传来数据，并进行处理时，可以通过 scope.row 获取行（一个对象）进而操作 +{{ scope.row.money }} -{{ scope.row.money }} //用途二，加载时间（对时间进行格式化处理） {{ parseTime(scope.row.updateTime, "{y}-{m}-{d}") }}

5. 抽屉 el-drawer

xxx

设定日期格式（年-月-日）,具体使用可参考组件template使用代码

{{ parseTime(scope.row.probationTime, '{y}-{m}-{d}') }}

6. 动态生成二维码

步骤：打开项目所在的终端，如果是HBuilder，可以在视图终端处打开

1. npm install qrcodejs2 –save //在终端输入npm命令，安装二维码插件
2. import QRCode from ‘qrcodejs2’;//在vue文件中，引入生成二维码插件
3. 构建二维码弹框，存放二维码对象qrCodeDiv

// 1. 方法调用 bangding(row){let memberId = row.memberId;this.isShowCard = true;if(this.ids != null){memberId = this.ids[0];}this.createQRCode(memberId);}//2. 具体的绑定方法createQRCode(id){this.$nextTick(()=>{this.$refs.qrCodeDiv.innerHTML = '';//二维码清除alert(id)new QRCode(this.$refs.qrCodeDiv, {text: "id="+ id,//二维码链接，参数是否添加看需求width: 200,//二维码宽度height: 200,//二维码高度colorDark: "#333333", //二维码颜色colorLight: "#ffffff", //二维码背景色correctLevel: QRCode.CorrectLevel.L //容错率，L/M/H});})}

生成动态二维码详情参考:vue页面动态生成二维码，扫描二维码跳转到微信小程序，同时传递参数_vue生成小程序二维码_coderdwy的博客-CSDN博客

7. 遍历数组或对象 v-for

在 v-for 这里弄了很多次也没获取到数据，归结起来数组和对象的区别：

数组，如果数组里面存放的是单纯的值，比如说 [1, 2, 3…], 当前的item就可以指代要查询的值。

如果数组中存放的是一个个对象，比如说 [{name: zhangsan}{name: lisi}], 当前的item指代的是对象集合，要通过 item.name 去指向具体的数据。

二、node.js

1. node.js 引入 util.js 工具类

//引入 util 对象，可以通过对象.方法名形式调用其中的方法const util = require("../../config/util.js")//使用 util发送请求（默认为get请求，参数有三，url, data, methods)this.userInfo = {code: 1,memberName: "张三",wxCode: this.code};util.request(this.baseUrl + api.url,this.userInfo, "POST").then(res => {if(res.code === 200){this.msg = "绑定成功";}else{this.msg = "绑定失败";}});

三、uniapp

1. view 标签

• view 是 template 组件中的盒子，一个 template 中只能有一个外层 view，内层可以嵌套 view。
• view 本身效果跟 form，table 类似，其中可以包括 image，input，text，button，span等标签。
• 在外层 view 标签上添加 v-show=”showModel”，通过 showModel 设置true，false 实现弹框层。 并使用 class=”model” 实现样式设置

效果图：

代码：

  {{msg}}关闭  export default { data() {return {msg: "提交信息成功",showModal: true,} }, methods:{//关闭弹框closeModal() {this.showModal = false;} }} .modal {position: fixed;top: 0;left: 0;width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;background-color: rgba(0, 0, 0, 0.5);z-index: 999;display: flex;justify-content: center;align-items: center;}.modal-content {background-color: #fff;padding: 20px;border-radius: 5px;width: 200px;height: 200px;line-height: 150px;text-align: center;margin: auto;}

2. onLoad(options) 获取url路径上参数

比如：url：http://localhost:8081/test/” />onLoad(options) {//设置访问路径端口this.baseUrl = ‘http://localhost:8080/’this.code = options.code;this.state = options.state;}

3. 解决微信开发中 H5 路径中的 “#” 影响跳转

解决一个问题最好的办法就是消掉它，所以这里我们将 “#” 进行忽略。

这里是因为路由导致的，所以只需要修改 H5 的路由模式为 history 即可实现忽略。

在微信开发的博客中有更加详细的介绍，详情参考：微信公众平台开发（测试）实现

2023年 9月 11日更新

Vue 点击事件

• 右键点击事件@contextmenu.prevent.stop

testclickRight(value, key){console.log(value + " " + key)//具体实现}

• 左键单击事件@click
• 左键双击事件@dbclick

如果双击事件没有效果，可以把 @dbclick 换成 @dblclick

//单击test//双击test

Disabled 不起效果解决方案

如果你直接使用 disabled 默认值，发现起不到效果，那么试试 绑定 disabled 方法的方式

delabel(row){if(row === '0'){return false;}return true;}

最近一直在不断学前端内容，持续更新中…