vue
時間不夠以後
越努力越幸运……
展开
-
通过render自定义复杂的tree组件
1. 自定义全局函数监控组件宽高变化;2. 完成多模版链路配置;3. 完成数据之间的拖拽;原创 2022-08-22 18:29:24 · 327 阅读 · 0 评论 -
爷孙通信 及 组件自调用
组件自己调用自己父组件<template> <div> <detail-list :list="categoryList"></detail-list> </div></template><script>import DetailList from './detailList.vue'export default { components: { DetailList }, data...原创 2022-03-28 19:55:39 · 1274 阅读 · 0 评论 -
vue 全屏效果实现
安装依赖 npm install --save screenfull在需要的界面导入 import screenfull from 'screenfull'实现效果具体实现<template> <div> <div ref="content" class="content"> <Tooltip :content="isFullscreen ? `取消全屏` : `全屏`" placement="bottom"> .原创 2022-01-07 11:28:49 · 708 阅读 · 0 评论 -
iview poptip 外部input的实现
在开发中,我们期望带有poptip的input可以占满100%的宽度(图1),但实际使用的时候poptip包含组件的方法,会发现并没有达到期望的效果(图2)图1图2解决方案:将input移出<template> <br> <br> <Row> <Col span="8" style="border:1px solid #bed742;"> <Input v-model="value1" :aut原创 2021-12-27 20:46:55 · 398 阅读 · 0 评论 -
canvas 封装chart —— 绘制权重比例得分图
废话不多说,先整目标效果图开发需求:期望上述完成效果图的组件封装数据格式: // 其中颜色可传可不传,不传的话,按照封装的组件中,随机生成颜色 scores: [60, 60, 50, 20, 10, 32, 88], // 必须的 // 格式1 myOptions: { radius: 60, width: 300, height: 200, data: [ { weighting: 20, title: '语文' }, { weighti原创 2021-12-15 15:20:47 · 1570 阅读 · 0 评论 -
vue 项目中 v-for渲染的对应card点击切换显示,且对应card加选中样式
默认展示效果点击对应卡片:<template> <Row :gutter="8" style="margin-top: 14px;clear: both;"> <Col :xs="24" :sm="12" :md="8" :lg="4" v-for="(item, index) in curPageData" :key="index" > <Card s.原创 2021-12-02 11:49:06 · 916 阅读 · 0 评论 -
iview - tree节点的相关操作
最新有一个新的需求,即在iview tree的自定义节点基础上,对当前节点进行相关的操作,参考相关博客,整理了以下两种方案。右键弹出相关操作按钮 参考博客实现细节:<template> <div> <Tree :data="kindData" :render="renderContent" ></Tree> <Button type="primary" @click=原创 2021-11-09 18:11:00 · 1328 阅读 · 0 评论 -
嵌套tabs的使用:外层切换,导致内层tabs显示空白的问题
异常显示效果:根据iview官网中对tabs的属性,当嵌套使用 Tabs,设置该属性指向对应 Tabs 的 name 字段使用方法:<Tabs type="card" name="outTabs" value="tab1-1"> <TabPane label="tab1-1" name="tab1-1" tab="outTabs"> <Tabs name="innerTabs" value="tab2-1"> <TabPane label原创 2021-10-15 16:15:10 · 767 阅读 · 0 评论 -
iview-table实现自适应高度渲染表格条数
实现效果:<template> <div :style="{ height: scrollerHeight + 'px' }"> <div> <Input v-model="searchForm.name" icon="md-search" style="width: 30%;" @keyup.enter.native="search()"></Input> </div> <br>原创 2021-10-13 18:02:44 · 373 阅读 · 0 评论 -
iview-select 鼠标移入option,显示对应操作
目标效果:<template> <Select v-model="selectObj" filterable clearable style="width: 300px;" > <OptionGroup label="--- 测试1 ---"> <Option v-for="item in selectOptions1" :value="item.value"原创 2021-09-29 15:54:36 · 405 阅读 · 0 评论 -
vue路由跳转白屏问题
当前问题: 比如当前路由为: `/projectDetail?Id=1&name=页面1` 通过页面改变了路由参数Id `/projectDetail?Id=2&name=页面1` 此时做的操作是: this.$router.push({ name: 'projectDetail', query: { Id: this.id, name: this.name } }) this.$router.go(0) 在这种情况下,会导致页面整体刷新,且出原创 2021-09-23 15:10:04 · 6839 阅读 · 0 评论 -
vue - axios 取消仍在pending中的接口
需求:tabs切换时,调用相同接口(参数不同)渲染图表数据。(每 3s 请求一次)存在问题:在tabs切换的时候,因为定时器的原因,接口数据仍在pending,导致切换之后的图表第一条数据仍为上一个tabs的数据解决方案:第二次请求接口时,取消上一次请求。axios官方手册第一次未结束,不允许第二次请求定义一个变量,判断此时tabs是否切换,做对应的数据渲染具体js实现:取消上一次接口请求实现细节import axios from 'axios'export原创 2021-08-06 16:07:22 · 1650 阅读 · 1 评论 -
js计算时间,返回 「 x 天 x 小时 x 分钟 」的格式
显示效果:由于后台直接返回的是毫秒的时间戳,则计算如下:formatter (val) { var timediff = val / 1000 // 计算天数 var days = Math.floor(timediff / 86400) // 计算小时数 var remain = timediff % 86400 var hours = Math.floor(remain / 3600) // 计算分钟数 remain = remain % 3600 var min原创 2020-08-05 13:13:32 · 381 阅读 · 0 评论 -
基于axios请求接口获取数据,封装APEXCHARTS
在 博客 的基础上,对页面的axios请求获取的数据进行封装csLine.vue<template> <myCharts :interval="time" :url="urlData" :config="config" :height="height" ></myCharts></template><script>import myCharts from './myCh原创 2020-07-08 19:32:10 · 358 阅读 · 0 评论 -
基于APEXCHARTS图表组件简单封装,vue页面使用时代码更优化
封装界面myChart.vue<template> <vue-apex-charts :height="currentHeight" :options="chartOptions" :series="series" ></vue-apex-charts></template><script>import VueApexCharts from "vue-apexcharts"let timerId = null export de原创 2020-07-08 14:53:21 · 770 阅读 · 1 评论 -
使用apexcharts组件的折线图(smooth的面积曲线)
引入组件import VueApexCharts from 'vue-apexcharts'页面使用组件 <template> <vue-apex-charts class="vx-col w-1/3" height=250 type="area" :options..原创 2020-07-01 21:00:38 · 1380 阅读 · 0 评论 -
iview中 Tabs 标签页 指定显示对应的TabPane页面以及高度随内容撑开问题
tab高度原创 2020-06-19 11:12:21 · 5930 阅读 · 2 评论 -
iview Model 高度默认内容撑开,只有超过指定高度才显示滚动条
<Modal v-model="errorDialog" width="70%" title="信息详情"> <div style="max-height:500px;overflow-y:auto;overflow-x:hidden;">{{errorMessage}}</div></Modal>errorMessage: '',errorDialog: false,showMore (content) { this.errorDial原创 2020-06-18 14:59:16 · 3375 阅读 · 2 评论 -
vue开发中界面刷新问题
vue界面设计界面中,经常会遇到页面刷新的问题,刷新会有下面两中情况:1> 界面处于一级界面,没有从其他界面拿到参数。2> 界面处于二级界面,即有从其他界面拿到参数。比如:在一级页面点击了表单的某一行,进入二级界面,显示的有上一个界面上 ‘ 当前查看的信息 ’ 里面,有上一页的数据,那么在这个界面,就需要有上一页界面传来的ID,以便二级页面在刷新等操作的时候,依旧可以正确的拿到页...原创 2019-12-06 22:15:57 · 939 阅读 · 0 评论 -
vue项目中——阿里图标库的使用
方法一在阿里图标库下将需要的图标添加至项目在项目中Font Class中会生成一个在线的css链接在index.html 中引入这个外部的css <link rel="stylesheet" href="http://at.alicdn.com/t/font_1292182_cyd0mqf6jlp.css"> // 需要记住的是,这个外部的css链接在添...原创 2019-09-19 17:20:57 · 356 阅读 · 0 评论 -
Vue中的route和router
1. $router是VueRouter的一个对象,通过Vue.use(VueRouter)和Vue构造函数得到的一个router的实例对象,这个对象是一个全局的对象,它包含了所有的路由,包含了许多关键的对象和属性。配置路由时path有时候会加 ‘/’ 有时候不加,以’/'开头的会被当作根路径,就不会一直嵌套之前的路径。 //比如当前路径是homepath:'name' //==...原创 2019-07-17 10:47:15 · 153 阅读 · 0 评论 -
vue中的组件和prop
1 组件是可复用的 Vue实例,所以他们是与new Vue接受相同的选项,例如data、computed、watch、methods以及生命周期钩子等。仅有的例外是el这样的实例特有的选项。2 组件实例的作用域是孤立的。这意味着不能(也不应该)在子组件的模板内直接引用父组件的数据。父组件的数据需要通过prop才能下发到子组件中。3 也就是说prop是子组件访问父组件数据的唯一接口。一个组件可...原创 2019-06-20 20:21:24 · 782 阅读 · 0 评论