分类：vue自定义组件

2021
10-12

Vue使用v-model封装el-pagination组件的全过程

使用v-model绑定分页信息对象，分页信息对象包括3个核心属性参数，分页事件直接绑定查询数据的方法，消除父组件的handleSizeChange和handleCurrentChange的绑定事件方法。1、前言  通过封装el-pagination组件开发自定义分页组件的类似文章网上已经有很多了，但看了一圈，总是不如意，于是决定还是自己动手搞一个。2、背景2.1、常规分页处理方法  利用el-pagination组件的常规做法如下：  模板... 继续阅读 >

2021
07-09

Vue自定义组件使用事件修饰符的踩坑记录

前言今天在使用自写组件时，突然遇到久违的冒泡事件，就想着使用Vue自带的事件修饰符(.stop)，本以为可以就此解决冒泡，却遇到这个问题。脑中一片问号？？？？这是什么鬼，我是按照Vue文档写的啊(吐血)于是，我开始踏上了解决错误的路程程序员常规操作：打开浏览器?百度/谷歌搜一搜，发现搜出来的东西不少，没一个是能解决我的问题的答案，没办法Vue文档走起！！！！看了至少几十遍Vue文档的我，自以为没有看漏什么东西，确信Vue文... 继续阅读 >

2021
01-08

vue3中轻松实现switch功能组件的全过程

what编程语言里面，除了使用if语句来做条件判断，还有另外一个常用的就是switch了。而在vue中，官方已经帮助我们实现了v-if这个指令，但是还没有switch，那我们能不能自己实现一个呢？这篇文章就是来探索这个问题，并且最终实现一个Switch组件以终为始先来看看我们希望用户是如何使用Switch的用js的方式来对比一下：用户可以通过一个VSwitch组件来应用switch功能通过case来确定匹配的条件然后每一个case匹... 继续阅读 >

2020
09-24

使用Vue 自定义文件选择器组件的实例代码

本文GitHub https://github.com/qq44924588...上已经收录，更多往期高赞文章的分类，也整理了很多我的文档，和教程资料。欢迎Star和完善，大家面试可以参照考点复习，希望我们一起有点东西。文件选择元素是web上最难看的input类型之一。它们在每个浏览器中实现的方式不同，而且通常非常难看。这里有一个解决办法，就是把它封装成一个组件。安装如果你尚未设置项目，可以使用vue-cli的webpack-simple模板启动一个新项... 继续阅读 >

2020
09-23

Vue.js 中制作自定义选择组件的代码附演示demo

 定制select标签的设计非常困难。有时候，如果不使用样式化的div和自定义JavaScript的结合来构建自己的脚本，那是不可能的。在本文中，你将学习如何构建使用完全自定义CSS设置样式的Vue.js组件。 Demo:https://codesandbox.io/s/custom-vuejs-select-component-8nqgdHTML<template><divclass="custom-select":tabindex="tabindex"@blur="open=false"><divclass="selected":class="{open:open... 继续阅读 >