Web_Notes的博客

原因：Vue3 底层使用了 proxy 代理创建实例，其创建出来的实例与echarts真正使用的那个存在兼容性问题，所以Echarts 无法从中获取内部变量；故设置echarts实例时，不要使用ref、reactive等响应式方法创建echarts对象，应该使用。问题：在echart示例里面编辑是可以正常显示hover数据的，放到项目上就展示hover数据了。解决：barChart 要使用。

大概效果:用vue3写的，不过逻辑都一样 主要是js+css；实现方法逻辑：①先写弹窗的div，用fixed布局，确定弹窗的位置；②绑定鼠标点击事件，主要是获得按钮和弹窗在屏幕的位置 计算定位用；③给弹窗写上css动画；④绑定按钮的点击事件，让弹窗出现代码就分成html、css、js 三部分写，方便复制直接使用。

效果：(可控制鼠标hover时停止滚动)1.新建vue文件封装组件。

效果图：可点击左右文字进行滚动、或通过滚动鼠标 内容左右滚动。

【代码】css按钮动画（放大缩小）

【代码】js秒为单位做倒计时。

【代码】elementui upload 上传多个文件只调用一次接口。

Vue项目中让滚动条始终处于最底部

2.复制ip路径：例http://192.168.1.210:80/1.npm run dev 运行项目。3.去草料二维码生成，微信扫。

【代码】vue next()、next(“/“)、next({...to})、next({...to,replace:true})的区别。

就完成了，如果没更新可以重启项目试试。1.打开index.html文件。link引入的就是logo。生成的图标放在pulic下。title就是网站图标。

src/store/modules/permission.js的generateRoutes()方法。src/permission.js 路由拦截处理的js里面调用了。2.跳转直接跳转新页面了，没有在内容里面。问题1：动态路由在哪个文件更改的。

setUp

vue3+typeScript

1.修改父组件传入的参数proxy.parent.isRefresh=true改值proxy.parent.isRefresh=true 改值proxy.parent.isRefresh=true改值proxy.parent.refreshTable() 调方法2.质量不佳？子太少？？

https://blog.youkuaiyun.com/Web_Notes?spm=1011.2124.3001.5343

html<div class="node_title">{{ titleText(node) }}</div>js computed: { titleText() { return function(node) { //就是html种传入的node return node.data[this.tilteName] } } },

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 ...

fsdf

浏览器source文件都是压缩过的，不能在浏览器上打断点需要自己配置让浏览器source显示全部代码1.在根目录上添加一个叫vue.config.js的文件2.vue.cong.js 内容module.exports = { // 放置静态资源的地方 (js/css/img/font/...) assetsDir: 'static', // 是否为生产环境构建生成 source map？ productionSourceMap: false, configureWebpac

一，bind方法的使用例:ui作为一个对象data() { return { ui:{}//ui作为一个对象 }}初始化中，给ui绑定一个方法editDesignTree，使用bind指针指向某个具体方法//初始化中，给ui绑定一个方法editDesignTree，使用bind指针指向某个具体方法init(){this.ui.editDesignTree = this.editDesignTreeFun.bind(this)},editDesignTreeFun(

效果：实现思路：用v-html实现把搜索的关键词记录下来，serachTexttitle截取serachText的内容 然后join标签代码：html <div v-html="toolTipTitle"></div>js computed: { toolTipTitle() { let titleIdCodeText =this.titleText//props传入的,不管怎么样，拿到这个titleJ就是了 // title

@visible-change="val => dropDownOpen(val, 自定义参数) ，val为事件默认返回的参数<el-dropdown size="small" trigger="hover" @visible-change="val => dropDownOpen(val, index)">

效果：数据是一个数组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

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) /

self.$refs.multiObject.inputPage = 1multiObject为组件名称 ref=‘multiObject’

<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

this.$parent.$parent.addFun()

第一种<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 ==

当是固定值时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里面的参数，另一个都会跟着改变

需求：单选框样式修改为这种1.修改ui组件样式，是修改它本身组件的样式，所以style不能加scoped但是加在全局样式里怕影响也引用这个组件的样式，所以自定义一个class包住要修改的样式，就不影会响别的页面样式了<style lang="less">.type_table { //html片段，ui组件的父组件class .el-radio__inner { border-radius: 0%; }} </style>...

1.组件导出2.

效果代码：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

循环如何加减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}}&

方法一：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"

平时给对象新增属性：var param={name:小小，age:28}param.sex=0平时直接这样可以新增属性，但是vue循环时用这种方法，无法同步到页面总结：要这样：循环里this.$set(that.orderList[i], "age", "18")

有两种情况：一、单个定时器，比如发送验证码后，显示倒计时60秒二、在循环中创建多个定时器，比如美团未支付页面有多个订单，都是从下单时间开始倒计时15分钟第二个情况有点复杂，弄了很久，算是踩坑了。一、单个定时器，比如发送验证码后，显示倒计时60秒html <div class="input-item"> <span class="des">验证码</span> <input class="inp

之前也做过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