![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue
陈橙橙成大事
这个作者很懒,什么都没留下…
展开
-
echarts图表显示 Can‘t get DOM width or height. Please check dom.clientWidth and dom.clientHeight.
首先出了问题 我进行了百度 但是百度上大部分的方法并不适用于我。例如: $(window).on('resize',function(){ //屏幕大小自适应,重置容器高宽 resizeMainContainer(); mainChart.resize();});且出错的原因也可能为:如果容器的height/width属性设置为百分比的形式,那么echarts就会warning,且不能正常的生成图表。所以div容器的高度宽度必须指定为px。然后我开始回归问题,去官网找解决原创 2021-04-24 12:26:17 · 23175 阅读 · 14 评论 -
后台管理系统-登录/退出功能
登录功能实现路由导航守卫控制访问权限如果用户没有登录,但是直接通过URL访问特定页面,需要重新导航到登陆页面。 // 为路由对象,添加 beforeEach 导航守卫 // to 将要访问的路径 // from 代表从哪个路径跳转而来 // next router.before((to,from,next) => { // 如果用户访问的登录页,直接放行 if (to.path === '/login') return next() // 从 sessionStorage 中获取原创 2021-04-20 08:48:38 · 1560 阅读 · 0 评论 -
后台管理系统token
1.将登陆成功之后的token,保存到客户端的sessionStorage中1.1项目中除了登录之外的其他API接口,必须在登录之后才能访问1.2token只能在当前网页打开期间生效,所以将token保存在sessionStorage中login(){ this.$refs.loginFormRef.validate(async valid => { if (!valid) return; const { data: res } = await this.$http.post("login原创 2021-04-19 17:54:51 · 808 阅读 · 0 评论 -
兄弟组件之间传值通过
SubSon1<div>汽车:{{car}} <button @click="carToSon2">传给Son2</button></div>data() { return { car:{ type:"奔驰", price:"50W" } } },methods: {原创 2021-04-12 16:04:57 · 161 阅读 · 0 评论 -
祖孙组件传值通过(provide+inject)
父级:provide:function () { return { job:this.job } },<div>职业:{{job.type}}</div>子级://注入父组件设置的依赖数据inject:['job'],<button @click="job.type='java开发工程师'">修改</button>孙级组件://注入父组件设置的依赖数据inject:['job']原创 2021-04-12 14:56:19 · 311 阅读 · 0 评论 -
路由参数-params方式和query方式
路由传参,这里的参数名只是一个描述符,写什么都可以params方式传递路由参数:$route.params返回的是params方式传递的路由参数eg:path:’/goods/:id/:title’$router是路由总信息对象$route是当前路由信息对象:to="’/goods/’+(index+1)+’/’+item"定义id,titleid:0,title:’’let {id,title} =this.$route.paramsthis.id = idthis.title原创 2021-04-10 09:48:04 · 551 阅读 · 0 评论 -
vue These dependencies were not found: * core-js/modules/es.array.iterator in ./node_modules/@babe
解决方法是1.是版本的问题,要重新install一下npm install core-js@3 --save# ornpm install core-js@2 --save2.也有人给出了这种方法:(我用这种方法还是出现了些问题,如果上面那种方式没有解决你的问题,你可以再试试这种方式;或者两种方式都用,未尝不可。)//在babel.config.js中添加presets: [ [ "@vue/app", { useBuiltIns: "entry" } ] ]详情参考这里:u.原创 2021-04-02 09:41:21 · 1023 阅读 · 0 评论 -
npm run serve运行程序到40%不动了
npm 运行程序一直卡在40%不动,一开始以为是网络的问题,不断地找解决方案。发现把网线,关闭vscode都不行。后来我发现原来是因为template下面需要有一个div根节点,有一个文件两个div并行了,所以程序陷入了死循环。...原创 2021-04-01 15:31:00 · 2128 阅读 · 5 评论 -
Vue——选项卡组件
普通选项卡组件 <div id="app"> <b-tab :list="carList"></b-tab> </div><script>Vue.component('b-tab', { props:["list"], template:` <div class="tabs"> <ul .原创 2021-03-17 19:24:32 · 739 阅读 · 0 评论 -
Vue选项卡
<div id="app"> <div class="tabs"> <ul class="tab flex"> <li @click="activeIndex=index" :class="{active:activeIndex===index}" v-for="(item,index) in data">{{it...原创 2021-03-11 18:55:40 · 56 阅读 · 0 评论 -
Vue跑马灯效果
<div id = "app"> <input type="button" value="动起来" @click="lang"> <input type="button" value="停止" @click="stop"> <h4>{{msg}}</h4></div>var vm = new Vue({ el:"#app", data:{ msg:'猥琐发育,别浪!', intervalId:null //在dat原创 2021-03-04 17:31:53 · 43 阅读 · 1 评论