云中客的博客

以最简单的input组件为例，父组件：<template> <div> <MInput v-model="fNumber" @input="changeFNumber"/> </div></template><script setup>import { ref } from "vue";import MInput from './input.vue'const fNumber = ref('23424'

可以在父路由中的component中写component:()=>import('@views/fillout')，就可以正常显示出子路由的内容，不然会发现页面中该是子路由显示内容的地方是空白的。...

最近的项目中需要一个类似于element但又有多种定制化功能的弹出框，但element给的弹出框只支持点击或者鼠标悬浮唤醒，而项目中需要的是右击，或者嵌套操作，所以就自己写了一个，成果如下图。我按照个人完成的整个思路去介绍。步骤一：首先找到点击的这个dom,然后通过计算这个dom的宽高等属性将这个弹窗定位，如何点击后获取这个dom的尺寸和定位呢？这里我是这样写的&lt...

<div class="demo" @contextmenu.prevent="getDemo($event)"></div>export default { methods: { getDemo(e) { console.log(e.toElement.className) } }} ...

众所周知，vue提供了很多套组件间传值的方法，父子组件直接用props和$emit就好，大型项目则用vuex，但有一种更适合在小项目中使用的非父子组件传值方法，即bus总线机制。它的用法的实现原理是前端面试中常考的。在第一次换工作的时候，几乎所有面试官都问了有关vue组件传值的几种方法，所以掌握这个知识点是很重要的。 这种方法的原理是通过一个空的Vue实例作为中央事件总线...

最近在中控项目中遇到一个问题，就是需要轮播显示数据，网上给的教程都是定高的，所以就自己写了一个，效果如下：对于这种轮播的功能，其实应该根据是否定高去分为两种情况用不同的方案去处理。一、不定高轮播 我在看了很多博客之后发现他们给的方案都是定高的，这种你可能一搜一大把，我就只分享别人没有说过或者不容易找到的情况吧。我暂且将轮播的部分称为轮播区域，将轮播区域之外的地方...

      vue的v-model是一个非常好用的双向绑定指令，不难想象因为它帮我们简化了多少逻辑代码。但在最近，测试反馈给我一个问题：在搜索时，只填搜索内容而不点击搜索按钮，接着点击翻页，会有报错说该条件下的搜索结果不存在（就是如下的巨简单无奇的搜索框）。      这里我先说明一下我们项目的搜索和分页机制。我们项目的分页是我们在每次点击页码，将页码数字和各种搜索条件传给后端，再将后端的...

    因为很多页面需要用到&lt;keep-alive&gt;，我就用其将承载页面的父组件包裹了，但这也带来了一些问题。比如新写的页面中，进入下个页面还在调用上个页面的数据（以前没有遇到过，不清楚是是什么原因），即已经切换路由却无法自己destory掉，打日志发现确实没有跑destoryed这个生命周期函数。    如何解决：在需要删除的组件中的deactivated生命周期函数中手动调用t...

     之前做的项目中使用了element的选择器，然而由于选项太多不好找就更换为带输入建议的输入框但我们接口要求并非是传入公司名称，而是传入这个注册公司的id，后端传入的数据结构经过转换后大致是这样的：companyList = [ { company_id: 1, comopany_name: '腾讯' }, { company_id: 2, comopany_...

最近产品添加了上传文件的功能，我也是刚开始做有关上传的东西，所以这两天收获蛮多，在博客中记录一下心得。一. 基础用法 饿了么在官网把基础用法的API 和示例写的很清楚，这里为节约有效资源的时间，不再赘述，只做补充。 首先，不要被这句“只能传咘啦咘啦”的给骗了，我刚开始就是被这句话迷惑，去找了其他插件，结果由于文档不详细，又换了回来。其实从某种方面来说，文件上传时没有...

      操作元素的class列表和内联样式是数据绑定的一个常见需求。因为它们都是属性，所以我们可以用v-bind处理它们：只需要通过表达式计算出字符串的结果即可。由于字符串拼接麻烦易错，因此Vue中表达式结果的类型除了字符串之外，还可以是对象或数组。绑定HTML Class （v-bind:style) 1.对象语法我们可以传给 v-bind:class 一个对象，以动态地切换...

    最简单的按大小排序，需要添加prop,不然无法使用&lt;el-table-column label="人次" align="center" sortable prop="times" width="100px"&gt; 

       依旧是公司里那个Vue+Element UI的项目。今天遇到了一个新的问题：表单中某个选择器的值不同，控制着下面表单内容是否显示。放图：        大概就是这个样子。由后台返回的“发放方式”的数值，控制下面几个input框是否显示。这个实现比较简单，只需要把下面几个框用一个&lt;dev&gt;包裹起来，加上一个v-show=""的判断条件即可，但它们的表单验证让...

最近用的Vue+Element UI时，有些地方需要用到省市区三联选择器，网上安装并尝试了多种类似的插件，但都因为无法正常实现或是没有眼缘而弃用了。最后选择的是V-Distpicker这种，配置和使用起来还算是比较简单的，下面就分享一下其用法和需要注意的点（需要踩过的坑）。1.使用方法 安装和文档，请查看官网https://distpicker.pigjian.com/...