代码集合
关注
分享
扫一扫
瘦瘦瘦瘦不了
这个作者很懒，什么都没留下…
展开
-
vue 图片放大、缩小、旋转、滚轮操作图片放大缩小
图片放大缩小旋转原创 2022-12-05 13:40:15 · 3358 阅读 · 2 评论 -
vue防抖函数
防抖原创 2022-06-17 14:40:52 · 182 阅读 · 0 评论 -
vue组件传值：子传父 $emit
案例-自定义事件案例-删除列表项在子组件中设置自定义事件，触发父组件的监听事件函数调用this.$emit(自定义事件名 XXX, 数据传递) 在父组件中定义事件监听函数，并引用子组件标签上 v-on 绑定事件监听。@自定义事件名=事件监听函数 <child @xxx="deleteHobby"> < /child>如图：将B页面（子）事件 传到 A页面（父）A页面引入B组件显示具体写法：代码如下：A页面（父组件）<!-- @自定义事件.原创 2022-05-26 16:48:33 · 446 阅读 · 0 评论 -
vue组件传值：父传子 props
案例-表格渲染如图：将A页面（父）传到 B页面（子）A页面引入B组件显示具体写法：代码如下：A页面（父组件）<tableChild :tableDataChild = "tableData"></tableChild><!-- <tableChild :tableData= "tableData"></tableChild> -->import tableChild from "./tableModule";expor.原创 2022-05-26 14:44:18 · 1043 阅读 · 1 评论 -
vue组件传值：父传子 props传递的类型和写法
props写法方式：1.指定传递属性名 ,数组形式props: ['id', 'name','list'] //不限制数据类型 2.指定传递属性名和数据类型,对象形式props: { id: Number, name: String, isRequired: Boolean, list: Array, info: Object, addFn: Function }3.指定属性名、数据类型、必要性、默认值props: { // 基础的类型检查 (`null` .原创 2022-05-26 12:11:17 · 1870 阅读 · 0 评论 -
根据接口返回数字展示对应的状态文字
<el-button>{{status}}</el-button>methods(){ async getList() { const res = await this.$api.queryVoucherLog(参数); const {data} = res; this.tableData = data?.map((item) => { item.status = this.getStatus(item.status);原创 2022-05-10 10:57:13 · 414 阅读 · 0 评论 -
vue 判断页面是首次进入还是再次刷新
需求：默认打开页面请求相应的接口，执行任务当页面刷新时则代表放弃该任务，请求新的任务进行执行created(){ //刷新页面代表放弃任务 let refreshNumsValue //判断页面是否含有缓存，有则代表再次刷新，无则代表首次进入页面 if(localStorage.getItem("refreshNums")){ refreshNumsValue = Number(localStorage.getItem("refreshNums"));.原创 2022-05-09 19:00:46 · 1944 阅读 · 0 评论 -
vue组件传值：非父子传值 $bus（总线）
比如将A页面中的事件传到B页面需求：管理后台右上角用户信息当B页面点击时需弹出确认框并请求接口判断；其他页面点击则直接跳转//A页面 navBar.vue<el-dropdown-menu slot="dropdown" class="user-dropdown"> <el-dropdown-item @click.native="jumpPage"> 任务明细 </el-dropdown-item> <el-dro原创 2022-05-09 18:54:12 · 1055 阅读 · 0 评论 -
判断点击的是不是同一个内容，优化请求接口
data() { return { clickContent:null, content:"" } }; },if (this.clickContent== null) { console.log("第一次点击"); //请求接口 } else { if (this.clickContent != this.content) { console.log("点击的不同"); //请求接口 }原创 2022-04-29 11:36:04 · 178 阅读 · 0 评论 -
element ui----关于el-tooltip提示文字多行/多行显示
<el-tooltip class="item" effect="dark" placement="top-start"> <!-- 使用插槽 --> <div slot="content" class="tooltip-content"> <div> 第一行 </div> <div> 第二行 </div> </div>原创 2022-02-17 14:42:25 · 2181 阅读 · 0 评论 -
将邮件模板内容拷贝到邮箱中（含样式）
注：邮件样式仅支持行内，且不支持部分CSS3样式<div> <div class="fixBtn"> <el-button type="primary" @click="copyInfo()">复制</el-button> </div> <!-- 复制内容开始 --> <div ref="htmlData"> <div style="width: 700px.原创 2022-02-15 16:02:59 · 1152 阅读 · 1 评论 -
vxe-table处理分页
<vxe-pager align="center" size="mini" background :current-page="tablePage.currentPage" :page-size="tablePage.pageSize" :total="tablePage.totalResult" :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump',原创 2022-02-09 12:00:52 · 3125 阅读 · 0 评论 -
动态类添加，根据条件判断添加对应样式类
方式一:class="['其它类名（可选）', {'btn1': 判断条件}, {'btn2': 判断条件}, {'btn3': (item.status)==3}].btn1{ border: 1px solid #f2f6fc;}.btn2{ border: 1px solid #409eff;}.btn3{ border: 1px solid #E6A23C;}方式二:class="条件1 == 条件2 ? '添加类名' : .原创 2022-01-26 13:27:25 · 1308 阅读 · 0 评论 -
间隔X秒执行函数
节流：延迟X秒执行函数（在规定时间内执行一次）只允许一个函数在 X 毫秒内执行一次，只有当上一次函数执行后过了你规定的时间间隔，才能进行下一次该函数的调用。<button @click="save">保存</button>data(){ return{ timeout: null, }}, methods: { save() { if (this.timeout) { clearTimeout(this.timeout);.原创 2022-01-11 16:07:42 · 207 阅读 · 0 评论 -
后端返回的数据中带换行符，前端渲染时处理-vue
<span v-html="text"></span>data() { return { text: '', }},mounted() { let str = 'PHONE00644[2021123109442733041111]订单已锁定，不能生效！；\nPHONE00645[202112310945032522217]订单已锁定，不能生效！；\nPHONE0063[2021123109451054533337]订单已锁定，不能生效！；\n原创 2022-01-04 14:06:02 · 1053 阅读 · 0 评论 -
Element UI文件拖拽上传至oss（结合vxe弹框）
<el-button size="small" type="primary" @click="addFile()">新增文件</el-button> <vxe-modal ref="xModal" v-model="attachment" row-id="id" title="上传文件"原创 2021-11-24 10:13:25 · 442 阅读 · 0 评论 -
数据整合（数组里面嵌套多层数组）
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <script&原创 2021-11-10 15:28:02 · 1559 阅读 · 0 评论 -
将对象转为需要的数组形式
let aa = { meeting_site_photos: "会议现场照片&&线下会议，需能显示会议规模的照片", other: "其他&&其他", material: "易拉宝，横幅等物料&&如有" } let ccc = [] for (let i in aa) { let info = aa[i].split('&&') ccc.push({ key: i, v.原创 2021-11-10 10:09:57 · 422 阅读 · 0 评论 -
获取url后缀，截取字符串，判断数组是否包含某个元素（indexOf()、lastIndexOf()、substring()）
indexOf()indexOf方法对大小写敏感！如果要检索的字符串值没有出现，则该方法返回 -1。也可以检索数组元素首次出现的位置var str2="Hello world!"console.log(str2.indexOf("e")) //1console.log(str2.indexOf("Hello")) //0console.log(str2.indexOf("World")) //-1console.log(str2.indexOf("world")) //6var f.原创 2021-11-08 15:57:22 · 580 阅读 · 0 评论 -
vue获取dom添加样式
<div ref="showBorder"></div>this.$refs.showBorder.style.width = 200 + "px";this.$refs.showBorder.style.display = 'block';原创 2021-07-27 10:54:05 · 1278 阅读 · 0 评论 -
vue获取图片原始宽高及渲染宽高
<div class="imgBox" ref="imgBox"> <img src="../../assets/images/current.jpg" ref="urlInfo" @load="urlInfo" /></div>//原始宽高this.$refs.urlInfo.naturalWidth;this.$refs.urlInfo.naturalHeight;//渲染宽高(涉及加载问题后面补充，可以使用@load获取)this.$refs.ur原创 2021-07-27 09:26:15 · 5104 阅读 · 2 评论 -
数组去重的六种方法
非原创，朋友发我的，我也不知道出自哪里，就当作一个笔记来记录(●’◡’●)首先创建一个含有重复元素的数组let arr = [1, 1, 2, 3, 3, 6, 7, 2, 9, 9]第一种方法：利用 Set数据结构 + Array.from() 函数 function removeRepeat1(arr) { return Array.from(new Set(arr)) } console.log(removeRepeat1(arr)); .原创 2021-05-25 22:48:21 · 591 阅读 · 0 评论