- 博客(71)
- 收藏
- 关注
原创 uniapp 小程序接入腾讯实时音视频trtc-wx
微信 App iOS 最低版本要求:7.0.9微信 App Android 最低版本要求:7.0.8小程序基础库最低版本要求:2.10.0由于小程序测试号不具备 和 的使用权限,请使用企业小程序账号申请相关权限进行开发。由于微信开发者工具不支持原生组件(即 和 标签),需要在真机上进行运行体验。
2023-03-14 14:03:22
2379
4
原创 vue判断是否全屏状态
(1)使用screenfull来解决全屏操作 (2) 利用监听事件,来改变isFullscreen的值,进而控制页面展示“全屏”图标,还是“退出全屏" 1.安装screenfull.js
2022-12-17 13:57:37
5322
1
原创 js 页面缓慢移动到顶部,移动到底部实现
goToWhere(0) -----------------------> 返回顶部。goToWhere(1) -----------------------> 返回底部。
2022-09-27 11:03:50
602
1
原创 知道子级id利用递归函数获取父级id,再进行拼接
这里的子数组为children,如果子数组是其它字段,则需要把递归函数中的children替换。六、对转换成数组的子id进行遍历,然后利用递归求出父id添加到新数组中。五、将子级id转成字符串数组。一、定义一个嵌套子级数组。
2022-09-27 11:00:31
644
原创 vue-fullpage.js的使用
1、安装vue-fullpage,最新版就可以。fullpage.min.css在本地引入。vue 调用fullpage方法。2、入口文件main.js引入。
2022-09-27 10:46:25
1202
原创 uni-app文档、图片,文件预览查看
新开页面打开文档,支持格式:doc, xls, ppt, pdf, docx, xlsx, pptx。注意:需要把下载的文件添加到白名单,此时需要添加到downLoadFile合法域名。点击可预览即可,无需下载。
2022-09-27 10:42:34
2590
原创 vue-router路由跳转的三种传参方式
日常业务中,路由跳转的同时传递参数是比较常见的,传参的方式有三种:1)通过动态路由方式//路由配置文件中 配置动态路由{ path: '/detail/:id', name: 'Detail', component: Detail }//跳转时页面var id = 1;this.$router.push('/detail/' + id) //跳转后页面获取参数this.$route.params.id2)通过query属性传值//路由配置文件中
2022-05-16 16:04:05
2385
原创 element ui 中循环列表的表单怎么校验(v-for动态绑定的数据)
在vue项目中,使用element-ui的表单校验能节省很多时间,简单的对象表单校验,很简单,使用prop属性就可以直接校验。但是,如果表单项里有通过v-for动态生成的数组对象,又该怎么设置验证呢?1、总结:1) v-for要遍历的数组dynamicItem // 字典维护表单 dictMaintainForm: { dynamicItem: [ { typeId: this.$route.query.typeId
2022-04-28 14:45:58
1738
原创 vue element-ui分页删除最后一页的最后一条数据,返回上一页
1.默认当前页为第一页,页容量为10条data(){ return{ current:1, size:10 }}2.再点击删除的时候进行如下配置 // 为了在删除最后一页的最后一条数据时能成功跳转回最后一页的上一页(pageSize=1时不生效) let totalPage = Math.ceil((this.total - 1) / this.size) let currentPage =this.
2022-04-28 14:38:33
2694
1
原创 element-ui input只允许输入数字
html:<el-form-item label="用户账号:" prop="loginId"> <el-input type="loginId" v-model.number="ruleForm.loginId" maxlength="11" placeholder="请输入用户账号" autocomplete="off"></el-input></el-form-item>data:data(){ return{ ruleFor
2022-04-28 14:35:57
778
原创 vue 实现动态表单,点击新增 增加一行输入框
功能说明存在一排必填,点击增加后会新增一行,点击每行后面的删除图标则会删除该行,新增按钮只会出现在最后一行动态表单部分 <el-form :model="dictMaintainForm" ref="dictMaintainFormRef" :rules="dictMaintainFormRules" label-width="100px" class="demo-ruleForm" >
2022-04-27 11:38:43
8666
1
原创 element-UI级联选择器(Cascader)获取label值
<el-cascader :options="options" v-model="selectedOptions" :props="props" size="small" ref="cascaderAddr" filterable @change="handleChange" change-on-select placeholder="请选择上级分类"/><script>handleChange(e) {
2022-04-27 11:29:12
3724
原创 vue级联选择框(Cascader)动态渲染数据
<el-cascader v-model="baseForm.selectAdressKeys" ref="cascader" @change="areaHandleChange" :props="props"></el-cascader>在data中定义props props:{ checkStrictly:true, childre...
2022-04-27 11:28:01
1471
原创 vue element-ui 实现el-table表格 多选以及回显
<el-table v-loading="roleInfaceLoading" ref="multipleApiTable" :data="data" tooltip-effect="dark" row-key="id" style="width: 100%"..
2022-04-27 11:25:00
2962
原创 vue解决Element-ui中 el-cascader 级联选择器 最后一级数据为空显示暂无数据问题
1.出现问题bug: el-cascader控件 最后一级出现空白 暂无数据2. 问题原因分析经过调试分析出现空级联原因是:由于数据是从后台传递过来的,当后端的哥们使用递归算出菜单,然后转换成json传递到前端的时候。就会出现 最底层 的子项中 的 children 为空数组,这样就会造成,空级联 的bug存在。3.解决办法: 使用递归的方式,将最底层中的 children设为undefinedhtml代码 <el-casc
2022-04-13 13:55:48
6091
1
原创 Vue利用递归的方法,根据id获取对应的字段名(树形数据)
树形数据源 options:[ { id: 1, name: '一级1', children: [ { id: 4, name: '二级1', }, { id: 5,
2022-04-13 13:51:16
6491
原创 Vue常见过度动画
从右向左滑动<transition name="slide"> <router-view></router-view> </transition>.slide-enter-active,.slide-leave-active { transition: all 1s;}.slide-enter,.slide-leave-to { transform: translate3d(100%, 0, 0);}从左向右&
2022-04-13 13:46:04
468
原创 解决vue 使用axios发送post请求表单提交时参数传不进去问题
1.qs插件介绍简单来说,qs 是一个增加了一些安全性的查询字符串解析和序列化字符串的库。2.qs安装在项目中使用命令行工具输入:npm install qs安装完成后在需要用到的组件中:import qs from 'qs'qs.parse()和qs.stringify()区别:qs.parse()是将URL解析成对象的形式qs.stringify()是将对象序列化成URL的形式,以&进行拼接解决我遇到的问题我使用了qs.stringify()4.axios
2022-04-13 13:44:43
2463
原创 div拼表格
html代码 <div class="table"> <div class="row"> <div class="l">企业名称</div> <div class="r">三门峡XXXXXXXXXXXXXXXX有限责任公司</div> </div> <div class="row"> <d...
2022-04-13 13:42:05
262
原创 css3 word-break 属性
属性定义及使用说明word-break: normal | break-all | keep-all; normal 使用浏览器默认的换行规则。 break-all 允许在单词内换行。 keep-all 只能在半角空格或连字符处换行。 ...
2022-04-13 13:40:36
504
原创 table表格实现
<!DOCTYPE html><html><head><style>#customers { font-family: Arial, Helvetica, sans-serif; border-collapse: collapse; width: 100%;}#customers td, #customers th { border: 1px solid #ddd; padding: 8px;}#customers...
2022-04-13 13:34:02
298
原创 box-shadow属性值的详细解析
以第一个阴影:box-shadow: 10px 10px 20px 10px rgba(255,255,0,0.5)为例:这段代码表示阴影的水平位置为右移10px;垂直位置为下移10px;第三个10px代表阴影的模糊程度blur,我们也将它设置成20px;第四个10px是阴影半径的意思;最后一个规定了阴影的颜色为rgba(255,255,0,0.5)。也就是说,我们为class为test的div元素添加了一个偏离框,并且向右距离为10px、向下距离为10px、模糊半径为10px、阴影半径为10px
2022-04-13 07:00:00
3252
原创 css溢出隐藏
如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览。实现方法:overflow: hidden;text-overflow:ellipsis;white-space: nowrap;但是这个属性只支持单行文本的溢出显示省略号,如果我们要实现多行文本溢出显示省略号呢。接下来重点说一说多行文本溢出显示省略号,如下。实现方法:display: -webkit-box;-webkit-box-orien
2022-04-13 00:15:00
98
原创 vue 5s倒计时
在data中定义初始化时间 data() { return { // 定时器 count:5, timer:null }; },在methods中定义定时器 // 倒计时 sendCode(){ this.timer=setInterval(()=>{ // 创建定时器 if(t
2022-04-12 20:45:00
1311
原创 vue利用递归改造tree数据
1.数据结构格式 arr: [ { id: 1, icon: "user", name: "张安", hidden: true }, { id: 2, icon: null, name: "张三", hidden: false, children: [ { id: 4, name: "张三2"
2022-04-12 15:47:01
1582
原创 vue 点击左侧列表显示右侧内容
<template> <div class="home"> <div class="content"> <div class="lunbo w"> <el-carousel> <el-carousel-item v-for="item in 4" :key="item"> <h3...
2022-04-12 15:42:55
4893
原创 vue 过滤器的使用
例子:过滤出表格中数字对应的支付状态,以及不同支付状态的对应的颜色一、过滤对应的状态1.在src目录下新建filters文件夹,新建filter.jsfilter.js内容如下:export default{ /** * 支付状态 * 1 未支付 * 2 已支付 * 3 已处理 * 4 未处理 */ setPayStatus(status){ switch (status){ ..
2022-04-12 15:30:14
638
原创 vue 实时显示当前时间
<script>export default { data () { return { date:new Date() } }, methods:{ dateFormat(time) { var date=new Date(time); var year=date.getFullYear(); /* 在日期格式中,月份是从0开始的,因此要加0 * 使用三
2022-04-12 15:24:54
9176
1
原创 前端导出excel
1、安装依赖:npm install -S file-savernpm install -S xlsxnpm install -D script-loader2、下载导入Blob.js和 Export2Excel.jsBlob.js/* eslint-disable *//* Blob.js * A Blob implementation. * 2014-05-27 * * By Eli Grey, http://eligrey.com * By Devin Samarin, ht
2022-04-12 15:17:47
199
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人