一、Directives 指令两种写法：1、声明一个全局指令 Vue.directive('x', directiveOptions) 就可以在任何组件里使用v-x了例如：声明一个全局指令 在App.vue里点击图片,在HelloWorld.vue点击标题。都会打印x 2、声明一个局部指令 new Vue({
...,
directives: {
"x"
转载
2024-06-06 19:16:00
326阅读
element-ui自带的图标库还是不够全，还是需要需要引入第三方icon，自己在用的时候一直有些问题，参考了些教程，详细地记录补充下对于我们来说，首选的当然是阿里icon库教程：1.打开阿里icon，注册 >登录>图标管理>我的项目 图标管理>我的项目，点进去新建项目 新建项目项目名称随便写。前缀注意，不要跟element-ui自带的icon(前缀为：
转载
2024-03-12 13:00:25
742阅读
背景最近一直在着手做一个与业务强相关的组件库，一直在思考要从哪里下手，怎么来设计这个组件库，因为业务上一直在使用ElementUI（以下简称Element），于是想参考了一下Element组件库的设计，看看Element构建方式，并且总结成了这篇文章。 Element的目录结构废话不多说，先看看目录结构，从目录结构入手，一步步进行分解。├─build // 构建相关的脚本和配置
├─exampl
转载
2024-08-16 19:51:20
155阅读
我们使用element-ui、vue开发网站的时候，往往图标是起着很重要的作用。1.傻瓜式引用：由于这种方法及其简单 省去了很多繁琐的步骤，a.引入项目生成的，图标地址。b.使用 <i class="iconfont"></i>
2.笨拙式引用：
1. 先注册，再登录、找到图标管理、我的项目2. 点紫色的这个创建自己的项目3. 图中画红线的地方很重要
在 Vue 生态里， Element UI 是排名前列的组件库。 在 Vue 发布到 3.0 时，Element 也发布了对应的组件库。也就是 Element Plus 。随之而来的用法也跟着变了。比如本文要讲的 el-icon 的用法。 在 Element Plus 里，Icon 图标 的用法和以前不一样了。虽然官方文档也有说明怎么用，但不是非常详细，可能会给新手带来一丢丢障碍。本文将花几分钟
转载
2024-08-18 16:48:08
324阅读
Element UI 简介Element UI 是一套基于 Vue 的桌面端组件库，封装好了很多常用的 UI 组件，开发者可以使用 ElementUI 快速搭建一个网站。官网：https://element.eleme.cn/官网中有各个组件使用的详细教程，非常全面，楠哥写这篇教程的目的是帮助大家快速上手 Element UI 的使用，大家在实际开发中可以结合官网文档来完成具体业务代码的
转载
2024-05-27 14:47:32
89阅读
1、document.write只能在页面加载过程中才能动态创建。 2、可以调用document的createElement方法来创建具有指定标签的DOM对象，然后通过调用某个元素的appendChild方法将新创建元素添加到相应的元素下。function showit() {
var divMain = document.getElementById("divM
转载
2024-06-26 12:58:54
85阅读
文章目录前言一、button组件二、属性1，样式相关的属性2.功能性三、button-group 前言今天主要是解析button按钮组件，相对来说是个很简单的组件。但是我想介绍一下我学习源码的方法，也欢迎讨论学习的方法。 我会自己搭一个vue2的框架，然后引入放在component文件夹下的组件,组件与源码中组件结构保持一致，且兼顾按需导入和全局导入。 然后main.js全局导入，并通过路由分别
转载
2024-03-30 09:39:17
601阅读
项目内可能会经常涉及到图标使用的问题，我比较常用的是阿里的图标库。要使用图标的话，需要先对图标进行下载，下面是下载图标库及使用的步骤：获取图标1.需要进入到阿里图标矢量库官网，点击我的项目：2.点击新建项目：3.选择下方选中的是你图标class的前缀 为 icon4.新建项目后往购物车内添加图标，将你需要的添加完成后，打开购物车将其添加到项目，选中项目，确认即可5.就可以看你添加的七个
转载
2024-02-19 11:23:19
325阅读
前言element-ui 组件库之所以受欢迎，除了组件丰富，文档友好之外，还得益于它的精美的设计。之前在组件库的整体设计文章中提到，element-ui 背后有一只强大的设计团队，他们为组件库了制定了一套设计规范。需求分析当我们去设计一套组件库的时候，首先要考虑颜色、字体、边框、图标这些基础元素的设计，它们是构建各个组件的基石，如果没有做好这些基础设计，那么做出来的组件库看上去一定很山寨。这些基础
转载
2024-06-02 16:29:31
2318阅读
一、功能概述 img
本章记录一下基于Vue实现一个的tabs选项卡切换组件(iview组件库tabs组件源码)。需要将实现的功能一步一步细化拆解出来，然后逐步实现。目前实现的功能包括：实现基础选项卡切换功能。实现当前选中的页签底部条高亮显示并且加入移动的动画。当空间不足时，显示左右箭头点击后可以进行移动页签。... 后续有时间还会继续累加功能。二、疑问?️不管是elemen
转载
2024-08-22 14:06:35
334阅读
简介
Button(按钮)可能是最简单的一个组件了(Icon组件表示不服，我TM连点击事件都没)，因为Button涉及到的东西真的不多，无非就是响应点击事件和具体的样式编写，最多加一个loading状态禁止点击，下图是Element的Button示意图，官网代码点此
主要就分为直角，圆角，圆形按钮这几种，这里的按钮颜色看着很舒服，
转载
2024-04-05 00:02:47
872阅读
这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助本篇文章记录仿写一个el-button组件细节，从而有助于大家更好理解饿了么ui对应组件具体工作细节。本文是elementui源码学习仿写系列的又一篇文章，后续空闲了会不断更新并仿写其他组件。源码在github上，大家可以拉下来，npm start运行跑起来，结合注释有助于更好的理解什么是Button组件按钮用于点击，一般是做事件的响应。
转载
2024-05-11 16:50:58
65阅读
一、超链接概念： 超链接也叫 URL 中文翻译为资源定址器.这个定址器的功能主要告诉浏览器根据 URL的地址找到所需的资源。作用于连接资源 二、超链接的常用属性： 1、href=指定目的地，当有了href属性才有点击效果，值不同解析方式也不同，如果该值中没有指定过任何协议（比如http协议），按照默认的file协议解析 2、title="注释"，就相当
转载
2024-07-10 07:18:37
133阅读
过props接过来的，在本子页面中定义了另一个空数组赋值过来，需要
转载
2024-03-28 08:47:35
181阅读
使用vue开发项目，用到elementUI，根据官网的写法，我们可以自定义主题来适应我们的项目要求，下面来介绍一下两种方法实现的具体步骤，（可以参考官方文档自定义主题官方文档），先说项目中没有使用scss编写，用主题工具的方法（使用的较多）第一种方法：使用命令行主题工具使用vue-cli安装完项目并引入element-ui（具体可参考第二种方法中的介绍）一、安装工具1，安装主题工具npm i el
转载
2024-03-22 06:45:42
107阅读
【Vue.js + Element UI】实现文件上传代码实例Form.vue<template>
<!-- el-dialog: 弹出对话框组件
title: 对话框标题
visible: 是否显示
-->
<el-dialog
:title="title"
:visible.sync="dialogForm
转载
2024-10-12 16:07:41
63阅读
文章目录引用el-autocomplete触发带输入建议的两种方式转成输入建议回调的数据结构增加回车触发事件解决回车后建议输入框没消失的bug element UI的带输入建议官方文档：https://element.eleme.cn/#/zh-CN/component/input建议先看官方文档，这里是官方文档的适当补充引用el-autocomplete1、在需要的地方引用<el-aut
前言这可能是目前最便捷、最合适的 Icon 使用方式了，特别是在 Vue3 中，等等，你以为它只是适用于 Vue3？不，不要被标题欺骗，它支持 Vue2/Vue3、React、Preact、Solid、Svelte 等多种主流框架，同样，它也支持 Vite、Roullp、Webpack、Nuxt、VueCLI、Svelte Kit、Svelte + Vite、Next.js 等多种主流构建工具。之
转载
2024-06-21 13:00:44
867阅读
在使用selenium webdriver进行元素定位时，通常使用findElement或findElements方法结合By类返回的元素句柄来定位元素。其中By类的常用定位方式共八种，现分别介绍如下。1. By.name()假设我们要测试的页面源码如下： <button id="gbqfba" aria-label="Google Search" name="btnK" class="gb
转载
2024-06-11 19:41:36
75阅读
