vue
一个打工仔的笔记
这个作者很懒,什么都没留下…
展开
-
vue3 + ts <script setup>语法糖
setUp原创 2023-03-09 14:00:35 · 2103 阅读 · 1 评论 -
typeScript小记
vue3+typeScript原创 2023-03-06 15:28:51 · 78 阅读 · 0 评论 -
vue3小点子
1.修改父组件传入的参数proxy.parent.isRefresh=true改值proxy.parent.isRefresh=true 改值proxy.parent.isRefresh=true改值proxy.parent.refreshTable() 调方法2.质量不佳?子太少??原创 2022-07-12 15:20:53 · 172 阅读 · 0 评论 -
element UI 自定义传参的解决方法
https://blog.csdn.net/Web_Notes?spm=1011.2124.3001.5343原创 2022-04-01 18:28:05 · 330 阅读 · 0 评论 -
计算属性传参
html<div class="node_title">{{ titleText(node) }}</div>js computed: { titleText() { return function(node) { //就是html种传入的node return node.data[this.tilteName] } } },原创 2022-01-08 14:19:18 · 204 阅读 · 0 评论 -
vue导出txt文件模板
function exportTemp(light) { function download(name, content) { let blob = new Blob([content]) let link = document.createElement('a') link.href = URL.createObjectURL(blob) link.download = name ...原创 2022-01-07 15:10:22 · 691 阅读 · 0 评论 -
点击时监听键盘事件,比如ctril多选
fsdf原创 2021-12-13 10:35:26 · 887 阅读 · 0 评论 -
vue3在浏览器source中打断点
浏览器source文件都是压缩过的,不能在浏览器上打断点需要自己配置让浏览器source显示全部代码1.在根目录上添加一个叫vue.config.js的文件2.vue.cong.js 内容module.exports = { // 放置静态资源的地方 (js/css/img/font/...) assetsDir: 'static', // 是否为生产环境构建生成 source map? productionSourceMap: false, configureWebpac原创 2021-12-16 10:24:04 · 2103 阅读 · 0 评论 -
vue 多层子组件调用父组件的方法(传参方式bind方法 或 注入 provide() {}方法)
一,bind方法的使用例:ui作为一个对象data() { return { ui:{}//ui作为一个对象 }}初始化中,给ui绑定一个方法editDesignTree,使用bind指针指向某个具体方法//初始化中,给ui绑定一个方法editDesignTree,使用bind指针指向某个具体方法init(){this.ui.editDesignTree = this.editDesignTreeFun.bind(this)},editDesignTreeFun(原创 2021-12-09 16:40:00 · 2152 阅读 · 0 评论 -
vue 点击搜索,内容关键字标红
效果:实现思路:用v-html实现把搜索的关键词记录下来,serachTexttitle截取serachText的内容 然后join标签代码:html <div v-html="toolTipTitle"></div>js computed: { toolTipTitle() { let titleIdCodeText =this.titleText//props传入的,不管怎么样,拿到这个titleJ就是了 // title原创 2021-10-09 11:08:37 · 1040 阅读 · 0 评论 -
elementUI 事件添加自定义参数,以及子组件emit传参 父组件增加自定义参数
@visible-change="val => dropDownOpen(val, 自定义参数) ,val为事件默认返回的参数<el-dropdown size="small" trigger="hover" @visible-change="val => dropDownOpen(val, index)">原创 2021-09-26 11:23:51 · 1759 阅读 · 0 评论 -
vue html循环数组,每个子对象不同颜色的边框
效果:数据是一个数组dataList:[{},{}…]颜色也是一个数组 color:[red,blue,green,pink]在循环数据的同时,循环这个数组的颜色,每个data添加一个左边框实现:思路:颜色数组有4个子对象,长度为4,利用取余的方式:用dataList的下标,处以4,所得的余数总是 0,1,2,3 这四个余数所以就可以进行判断<div v-for='(obj,index) in dataList' :key='index' :class="{'color1':inde原创 2021-09-08 11:26:41 · 504 阅读 · 0 评论 -
判断数组、数组对象是否有某个值或者属性
let checkedObject=[{id:1,selected:false},{id:2,selected:true},] var result = checkedObject.some(item => item.selected === true) //判断checkedObject里是否有selected 为true的,返回true或falselet id=8let disabledIds=[1,2]var result=disabledIds.includes(id) /原创 2021-09-01 17:46:07 · 1403 阅读 · 0 评论 -
vue修改子组件data()里的参数
self.$refs.multiObject.inputPage = 1multiObject为组件名称 ref=‘multiObject’原创 2021-08-30 13:41:56 · 552 阅读 · 0 评论 -
css calc属性 固定头部底部
<div><div class='top'></div><div class='middle'></div><div class='bottom'></div></div><style>.top{height:30px}.middle{ overflow-y: auto; height: calc(100% - 50px);}.bottom{height:20px原创 2021-08-18 11:29:26 · 237 阅读 · 0 评论 -
vue 孙组件调爷爷组件的方法
this.$parent.$parent.addFun()原创 2021-08-30 11:50:40 · 1023 阅读 · 0 评论 -
循环子组件,拿到循环的下标
原创 2021-08-18 15:24:04 · 154 阅读 · 0 评论 -
input 获取焦点的情况
第一种<input class="ModifyInput" ref="test" v-model="valueEdit" />//获取焦点1.this.$refs.test.focus()2.this.$refs[·test·].focus()//模板字符串或引号第二种 动态生成的input<input class="ModifyInput" :ref="`tableInput${i}-${index}`" v-show="displayInputIndex ==原创 2021-06-23 20:56:07 · 3937 阅读 · 0 评论 -
js-面向对象
当是固定值时var avar b=3a=bb=4console.log(a) a=3当为对象或数组时var a={age:1}var b={age:3}a=bb.age=99console.log(a) a={age:99}不管更改a里面的参数还是b里面的参数,另一个都会跟着改变原创 2021-06-23 16:09:42 · 86 阅读 · 0 评论 -
vue修改ui(elementUI)组件的样式
需求:单选框样式修改为这种1.修改ui组件样式,是修改它本身组件的样式,所以style不能加scoped但是加在全局样式里怕影响也引用这个组件的样式,所以自定义一个class包住要修改的样式,就不影会响别的页面样式了<style lang="less">.type_table { //html片段,ui组件的父组件class .el-radio__inner { border-radius: 0%; }} </style>...原创 2021-06-10 15:21:21 · 387 阅读 · 0 评论 -
vue使用组件、node配置环境
1.组件导出2.原创 2021-04-21 16:48:42 · 99 阅读 · 0 评论 -
Vue 查看一周日期
效果代码:html代码:<div class="week-item" v-on:click="dateActive(index)" v-for="(day,index) in week" v-bind:class="{ active:index==current}"> <div class="week-date">{{day.ts}}</div> <div class="week-name">{{day.xq}}</div原创 2020-09-28 19:06:22 · 781 阅读 · 0 评论 -
vue循环 点击加减
循环如何加减html代码<div class="operate-w">//:data-meal="index" index为循环的index <img src="~/images/ordersys/icon_reduce.png" class="reduce" :data-meal="index" v-on:click.stop="numberReduce($event)" /> <span class="number">{{item.number}}&原创 2020-10-09 10:40:49 · 618 阅读 · 0 评论 -
vue 控制显示隐藏的两种办法
方法一:v-if<div class="operate-w" v-if="CanAddTip"> 截至日期已过,不能添加套餐</div>data: {CanAddTip:false;}//方法里:goSet: function (e) { this.CanAddTip=true; //this.CanAddTip=!this.CanAddTip; 或者直接取反},其他:v-if=“item.payState0?true:false"原创 2020-10-10 12:28:30 · 6172 阅读 · 0 评论 -
vue 循环时 给对象里的数组 新增属性 同步到页面
平时给对象新增属性:var param={name:小小,age:28}param.sex=0平时直接这样可以新增属性,但是vue循环时用这种方法,无法同步到页面总结:要这样:循环里this.$set(that.orderList[i], "age", "18")原创 2020-10-14 15:37:44 · 1819 阅读 · 0 评论 -
vue定时器问题(单个定时器和循环定时器)
有两种情况:一、单个定时器,比如发送验证码后,显示倒计时60秒二、在循环中创建多个定时器,比如美团未支付页面有多个订单,都是从下单时间开始倒计时15分钟第二个情况有点复杂,弄了很久,算是踩坑了。一、单个定时器,比如发送验证码后,显示倒计时60秒html <div class="input-item"> <span class="des">验证码</span> <input class="inp原创 2020-10-15 10:25:20 · 2426 阅读 · 3 评论 -
vue滚动到底部加载
之前也做过html引用 vue的滚动到底部加载的//ref="Box"这个别忘了加,也可以直接在方法里@@scroll="orderScroll(e)"//高很重要!!不然进不了滚动事件!!踩过的坑 <div class="meal-list loaddiv" style="height:500px;overflow:auto;" ref="Box" @@scroll="orderScroll"> <div class="order-group" v-for="(i原创 2020-10-20 18:37:19 · 567 阅读 · 0 评论