随笔分类 - Vue的技术
1
摘要：开始使用 /*不使用script-setup语法糖*/ <script> import { defineComponent } from "vue" export default defineComponent({ name: 'app', }) </script> /*使用script-set
阅读全文
摘要：假设我们是这样的目录结构 我们可以这样在index,js中导入不同的模块 但是这样如果我们新增一个模块就要重新导入一次，相对来说增加了很多不必要的步骤，也容易出错 我们可以这样来动态的导入模块，就不需要新增一次就要进行一次导入 import Vue from 'vue' import Vuex fr
阅读全文
摘要：前端pc版的简单适配 我们都知道对于前端pc版本的适配是一个难题，大部分都是做的媒体查询。但是有时间公司不要媒体查询 就是需要不管多大的屏幕都是满屏显示。我就在考虑为啥不用rem给pc端做个适配。 我是基于设计图是1920的做的简单的js适配。 1 2 3 4 5 6 7 8 9 10 11 12
阅读全文
摘要：let pending = []; //声明一个数组用于存储每个请求的取消函数和axios标识 let cancelToken = axios.CancelToken; let removePending = (config) => { for(let p in pending){ if(pendi
阅读全文
摘要：新建echarts.js import * as echarts from "echarts/core"; import { LineChart, BarChart, SunburstChart } from "echarts/charts"; import { TitleComponent, To
阅读全文
摘要：1.给vue组件绑定事件时候，必须加上native ，否则会认为监听的是来自Item组件自定义的事件， 2.prevent 是用来阻止默认的 ，相当于原生的event.preventDefault() this指向组件的实例。 $el指向当前组件的DOM元素。
阅读全文
摘要：开始时间小于结束时间，结束时间大于开始时间 <el-col :span="12"> <el-form-item label="开始时间" prop="begin_time"> <el-date-picker type="date" v-model="form.begin_time" placehol
阅读全文
摘要：最近做报表页面，基本都是列表页面，所以想用mixins。但是接口的url不同，于是考虑怎么才能传入参数去适配各个页面。后来发现mixin文件可以写个函数，接受传递过来的参数，然后return一个对象。大概如下。 mixin.js export default function(config) { l
阅读全文
摘要：首先先从下面的网址拿到想要地区的json数据 echarts地图各个省市级json数据 Vue代码 <template> <div class="container" style="height: 100%" ref="container"></div> </template> <script> c
阅读全文
摘要：一、Vuex是什么？Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。 什么情况下我应该使用 Vuex？Vuex 可以帮助我们管理共享状态，并附带了更多的概念和框架。这需要对短期和长期效益进行权
阅读全文
摘要：最近在用echarts进行前台图表展示，发现每次加载如果数据不变，则图表不变化，因此进行了一些尝试。 首先，简要说一下我理解的echarts： 1、引入echarts的js文件； 2、通过var mychartDiv=document.getElementById("id")获取div对象,然后在此
阅读全文
摘要：在遍历数据时 前端手动增加字段用来暂存点赞或刷新的数据 this.list.forEach(element => { if(!element.Praise){ //点赞数量 element.Praise = {Count:0,Data:[]} } if(!element.Comment){ //评论
阅读全文
摘要：过渡效果在交互体验中的重要性不言而喻。以往我们使用js或Jquery添加或移除元素的类（class），搭配CSS中定义好的样式，再引用一些javascript库之后，可以做作出非常复杂，惊艳的动态效果，不过这套方法还是太繁琐。 vue.js内置了一套过渡系统，可以在元素从DOM中插入或移除时自动应用
阅读全文
摘要：线上页面代码 <el-row :gutter="20"> <el-form-item label="详细地址:" prop="area"> <el-col :span="4"> <el-select v-model="address1" placeholder="省"> <el-option v-f
阅读全文
摘要：Vue祖孙组件怎么传值 先看基础 祖孙组件，也就是 3 层嵌套的组件。关于 vue 中父子组件之间的数据传递是通过 props 和 $emit 实现，参考Vue 父子组件传值。 那祖孙组件之间传值怎么实现，先了解下面的几个 vue 属性。 $props 当前组件接收到的 props 对象。Vue 实
阅读全文
摘要：Table组件提供了一个summary-method方法用来生成合计行的内容，一般返回的都是字符串。如果想返回html形式的内容，可以通过函数形式返回。 比如现在需要在最后一个位置返回一个按钮 实现： 如果想要在按钮上绑定事件，可以用onclick的方式，将组件内的方法注册到window上即可 如果
阅读全文
摘要：vue在路由中定义了id如果没有id控制台警告 解决办法 { name: "index", path: '/p/:id?', component: resolve =>void(require(['../components/admin/layout/index.vue'], resolve)) }
阅读全文
摘要：话不多说上代码 <MouduleTable :tableData="tableData" height="30vh"> <el-table-column label="沟通日期" prop="interview_time"> <template slot-scope="{ row }"> <el-d
阅读全文
摘要：我没拿tabs标签切换举例 一个小栗子 <template> <div> <el-tabs v-model="activeName"> <el-tab-pane v-for="item in panes" :key="item.key" :label="item.label" :name="item
阅读全文
摘要：我们有一对不同的组件，它们的作用是通过切换状态（Boolean类型）来展示或者隐藏模态框或提示框。这些提示框和模态框除了功能相似以外，没有其他共同点：它们看起来不一样，用法不一样，但是逻辑一样。 // 模态框 const Modal = { template: '#modal', data() {
阅读全文
1
浙公网安备 33010602011771号