-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathVue-UI.html
1 lines (1 loc) · 36.2 KB
/
Vue-UI.html
1
<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=2"><meta name="theme-color" content="#222"><meta name="generator" content="Hexo 5.4.0"><link rel="apple-touch-icon" sizes="180x180" href="/images/favicon-32x32.png"><link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32.png"><link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16.png"><link rel="mask-icon" href="/images/favicon-32x32.png" color="#222"><link rel="stylesheet" href="/css/main.css"><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/css/all.min.css" integrity="sha256-2H3fkXt6FEmrReK448mDVGKb3WW2ZZw35gI7vqHOE4Y=" crossorigin="anonymous"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/animate.min.css" integrity="sha256-PR7ttpcvz8qrF57fur/yAx1qXMFJeJFiA6pSzWi0OIE=" crossorigin="anonymous"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/[email protected]/dist/jquery.fancybox.min.css" integrity="sha256-Vzbj7sDDS/woiFS3uNKo8eIuni59rjyNGtXfstRzStA=" crossorigin="anonymous"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/nprogress.css" integrity="sha256-no0c5ccDODBwp+9hSmV5VvPpKwHCpbVzXHexIkupM6U=" crossorigin="anonymous"><script src="https://cdn.jsdelivr.net/npm/[email protected]/nprogress.js" integrity="sha256-a5YRB27CcBwBFcT5EF/f3E4vzIqyHrSR878nseNYw64=" crossorigin="anonymous"></script><script class="next-config" data-name="main" type="application/json">{"hostname":"www.wrysmile.cn","root":"/","images":"/images","scheme":"Gemini","version":"8.5.0","exturl":false,"sidebar":{"position":"left","display":"post","padding":18,"offset":12},"copycode":true,"bookmark":{"enable":true,"color":"#222","save":"manual"},"fancybox":true,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"fadeInDown","post_body":"fadeInDown","coll_header":"fadeInLeft","sidebar":"fadeInUp"}},"prism":false,"i18n":{"placeholder":"搜索...","empty":"没有找到任何搜索结果：${query}","hits_time":"找到 ${hits} 个搜索结果（用时 ${time} 毫秒）","hits":"找到 ${hits} 个搜索结果"},"path":"/search.xml","localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false}}</script><script src="/js/config.js"></script><meta name="description" content="不会偷懒的程序员不是一个好的程序员 (bushi 但是，有现成封装好的组件库为什么不用呢？ 本文主要以 Ant Design Vue 为例"><meta property="og:type" content="article"><meta property="og:title" content="Vue开发：组件库美化项目"><meta property="og:url" content="https://www.wrysmile.cn/Vue-UI.html"><meta property="og:site_name" content="Wrysmile 的博客"><meta property="og:description" content="不会偷懒的程序员不是一个好的程序员 (bushi 但是，有现成封装好的组件库为什么不用呢？ 本文主要以 Ant Design Vue 为例"><meta property="og:locale" content="zh_CN"><meta property="og:image" content="https://s4.ax1x.com/2022/01/13/7M9OuF.png"><meta property="article:published_time" content="2022-01-12T16:17:42.000Z"><meta property="article:modified_time" content="2023-01-31T10:23:56.182Z"><meta property="article:author" content="Zhang Yangeng"><meta property="article:tag" content="组件库"><meta property="article:tag" content="前端"><meta property="article:tag" content="Vue"><meta name="twitter:card" content="summary"><meta name="twitter:image" content="https://s4.ax1x.com/2022/01/13/7M9OuF.png"><link rel="canonical" href="https://www.wrysmile.cn/Vue-UI.html"><script class="next-config" data-name="page" type="application/json">{"sidebar":"","isHome":false,"isPost":true,"lang":"zh-CN","comments":true,"permalink":"https://www.wrysmile.cn/Vue-UI.html","path":"Vue-UI.html","title":"Vue开发：组件库美化项目"}</script><script class="next-config" data-name="calendar" type="application/json">""</script><title>Vue开发：组件库美化项目 | Wrysmile 的博客</title><script>!function(e,t,o,c,i,a,n){e.DaoVoiceObject=i,e[i]=e[i]||function(){(e[i].q=e[i].q||[]).push(arguments)},e[i].l=+new Date,a=t.createElement(o),n=t.getElementsByTagName(o)[0],a.async=1,a.src=c,a.charset="utf-8",n.parentNode.insertBefore(a,n)}(window,document,"script",("https:"==document.location.protocol?"https:":"http:")+"//widget.daovoice.io/widget/13e39436.js","daovoice"),daovoice("init",{app_id:"13e39436"}),daovoice("update")</script><noscript><link rel="stylesheet" href="/css/noscript.css"></noscript><link rel="alternate" href="/atom.xml" title="Wrysmile 的博客" type="application/atom+xml"></head><body itemscope itemtype="http://schema.org/WebPage" class="use-motion"><div class="headband"></div><main class="main"><header class="header" itemscope itemtype="http://schema.org/WPHeader"><div class="header-inner"><div class="site-brand-container"><div class="site-nav-toggle"><div class="toggle" aria-label="切换导航栏" role="button"><span class="toggle-line"></span> <span class="toggle-line"></span> <span class="toggle-line"></span></div></div><div class="site-meta"><a href="/" class="brand" rel="start"><i class="logo-line"></i><h1 class="site-title">Wrysmile 的博客</h1><i class="logo-line"></i></a><p class="site-subtitle" itemprop="description">欢迎来到我的个人小屋</p><img class="custom-logo-image" src="/images/favicon-32x32.png" alt="Wrysmile 的博客"></div><div class="site-nav-right"><div class="toggle popup-trigger"><i class="fa fa-search fa-fw fa-lg"></i></div></div></div><nav class="site-nav"><ul class="main-menu menu"><li class="menu-item menu-item-home"><a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a></li><li class="menu-item menu-item-about"><a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a></li><li class="menu-item menu-item-tags"><a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a></li><li class="menu-item menu-item-categories"><a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a></li><li class="menu-item menu-item-archives"><a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a></li><li class="menu-item menu-item-search"><a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索</a></li></ul></nav><div class="search-pop-overlay"><div class="popup search-popup"><div class="search-header"><span class="search-icon"><i class="fa fa-search"></i></span><div class="search-input-container"><input autocomplete="off" autocapitalize="off" maxlength="80" placeholder="搜索..." spellcheck="false" type="search" class="search-input"></div><span class="popup-btn-close" role="button"><i class="fa fa-times-circle"></i></span></div><div class="search-result-container no-result"><div class="search-result-icon"><i class="fa fa-spinner fa-pulse fa-5x"></i></div></div></div></div></div><div class="toggle sidebar-toggle" role="button"><span class="toggle-line"></span> <span class="toggle-line"></span> <span class="toggle-line"></span></div><aside class="sidebar"><div class="sidebar-inner sidebar-nav-active sidebar-toc-active"><ul class="sidebar-nav"><li class="sidebar-nav-toc">文章目录</li><li class="sidebar-nav-overview">站点概览</li></ul><div class="sidebar-panel-container"><div class="post-toc-wrap sidebar-panel"><div class="post-toc animated"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link"><span class="nav-text">组件</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#Button"><span class="nav-text">Button</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#1-DatePicker"><span class="nav-text">1.DatePicker</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#2-Table"><span class="nav-text">2.Table</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%AE%BE%E7%BD%AE%E5%A4%8D%E9%80%89%E6%A1%86"><span class="nav-text">设置复选框</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E4%BF%AE%E6%94%B9%E5%A4%8D%E9%80%89%E6%A1%86"><span class="nav-text">修改复选框</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#ToolTip"><span class="nav-text">ToolTip</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#1-%E5%8C%85%E8%A3%B9%E5%85%83%E7%B4%A0%E8%A2%AB%E7%A6%81%E7%94%A8%E6%97%B6%E6%97%A0%E6%B3%95%E6%98%BE%E7%A4%BAToolTip"><span class="nav-text">(1).包裹元素被禁用时无法显示ToolTip</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#Tree"><span class="nav-text">Tree</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#1-%E8%87%AA%E5%AE%9A%E4%B9%89%E8%8A%82%E7%82%B9"><span class="nav-text">(1).自定义节点</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#2-TypeScript%E7%B1%BB%E5%9E%8B%E5%AE%9A%E4%B9%89"><span class="nav-text">(2).TypeScript类型定义</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#3-Flex%E5%B8%83%E5%B1%80%E5%BD%B1%E5%93%8D%E7%AB%96%E5%90%91%E6%BB%9A%E5%8A%A8%E6%9D%A1"><span class="nav-text">(3).Flex布局影响竖向滚动条</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#4-%E5%8F%8C%E5%87%BB%E4%BA%8B%E4%BB%B6"><span class="nav-text">(4).双击事件</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#Tree-Select"><span class="nav-text">Tree-Select</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#1-%E6%A8%AA%E7%BA%BF%E6%BB%9A%E5%8A%A8%E4%B8%A2%E5%A4%B1%E9%97%AE%E9%A2%98"><span class="nav-text">(1).横线滚动丢失问题</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#3-Select"><span class="nav-text">3.Select</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link"><span class="nav-text">快速设置样式</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%B3%A8%E6%84%8F1"><span class="nav-text">注意1</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%B3%A8%E6%84%8F2"><span class="nav-text">注意2</span></a></li></ol></li></ol></div></div><div class="site-overview-wrap sidebar-panel"><div class="site-author site-overview-item animated" itemprop="author" itemscope itemtype="http://schema.org/Person"><img class="site-author-image" itemprop="image" alt="Zhang Yangeng" src="/images/avatar.jpg"><p class="site-author-name" itemprop="name">Zhang Yangeng</p><div class="site-description" itemprop="description">保持独立思考，不卑不亢不怂，长成自己想要的样子！</div></div><div class="site-state-wrap site-overview-item animated"><nav class="site-state"><div class="site-state-item site-state-posts"><a href="/archives/"><span class="site-state-item-count">69</span> <span class="site-state-item-name">日志</span></a></div><div class="site-state-item site-state-categories"><a href="/categories/"><span class="site-state-item-count">13</span> <span class="site-state-item-name">分类</span></a></div><div class="site-state-item site-state-tags"><a href="/tags/"><span class="site-state-item-count">52</span> <span class="site-state-item-name">标签</span></a></div></nav></div><div class="links-of-author site-overview-item animated"><span class="links-of-author-item"><a href="https://github.com/zhangyangeng" title="GitHub → https://github.com/zhangyangeng" rel="external nofollow noopener noreferrer" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a> </span><span class="links-of-author-item"><a href="https://weibo.com/u/2294901673" title="weibo → https://weibo.com/u/2294901673" rel="external nofollow noopener noreferrer" target="_blank"><i class="fab fa-weibo fa-fw"></i>weibo</a></span></div><div class="cc-license site-overview-item animated" itemprop="license"><a href="https://creativecommons.org/licenses/by-nc-sa/4.0/zh-cn" class="cc-opacity" rel="external nofollow noopener noreferrer" target="_blank"><img src="https://cdn.jsdelivr.net/npm/@creativecommons/[email protected]/assets/license_badges/small/by_nc_sa.svg" alt="Creative Commons"></a></div><div class="links-of-blogroll site-overview-item animated"><div class="links-of-blogroll-title"><i class="fa fa-globe fa-fw"></i> 推荐网站</div><ul class="links-of-blogroll-list"><li class="links-of-blogroll-item"><a href="http://topbook.cc/" title="http://topbook.cc/" rel="external nofollow noopener noreferrer" target="_blank">Topbook</a></li></ul></div></div></div></div></aside><div class="sidebar-dimmer"></div></header><div class="back-to-top" role="button" aria-label="返回顶部"><i class="fa fa-arrow-up"></i> <span>0%</span></div><div class="reading-progress-bar"></div><a role="button" class="book-mark-link book-mark-link-fixed"></a><noscript><div class="noscript-warning">Theme NexT works best with JavaScript enabled</div></noscript><div class="main-inner post posts-expand"><div class="post-block"><article itemscope itemtype="http://schema.org/Article" class="post-content" lang="zh-CN"><link itemprop="mainEntityOfPage" href="https://www.wrysmile.cn/Vue-UI.html"><span hidden itemprop="author" itemscope itemtype="http://schema.org/Person"><meta itemprop="image" content="/images/avatar.jpg"><meta itemprop="name" content="Zhang Yangeng"><meta itemprop="description" content="保持独立思考，不卑不亢不怂，长成自己想要的样子！"></span><span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization"><meta itemprop="name" content="Wrysmile 的博客"></span><header class="post-header"><h1 class="post-title" itemprop="name headline">Vue开发：组件库美化项目</h1><div class="post-meta-container"><div class="post-meta"><span class="post-meta-item"><span class="post-meta-item-icon"><i class="far fa-calendar"></i> </span><span class="post-meta-item-text">发表于</span> <time title="创建时间：2022-01-13 00:17:42" itemprop="dateCreated datePublished" datetime="2022-01-13T00:17:42+08:00">2022-01-13</time> </span><span class="post-meta-item"><span class="post-meta-item-icon"><i class="far fa-calendar-check"></i> </span><span class="post-meta-item-text">更新于</span> <time title="修改时间：2023-01-31 18:23:56" itemprop="dateModified" datetime="2023-01-31T18:23:56+08:00">2023-01-31</time> </span><span class="post-meta-item"><span class="post-meta-item-icon"><i class="far fa-folder"></i> </span><span class="post-meta-item-text">分类于</span> <span itemprop="about" itemscope itemtype="http://schema.org/Thing"><a href="/categories/Vue%E5%BC%80%E5%8F%91/" itemprop="url" rel="index"><span itemprop="name">Vue开发</span></a> </span></span><span id="/Vue-UI.html" class="post-meta-item leancloud_visitors" data-flag-title="Vue开发：组件库美化项目" title="阅读次数"><span class="post-meta-item-icon"><i class="far fa-eye"></i> </span><span class="post-meta-item-text">阅读次数：</span> <span class="leancloud-visitors-count"></span></span></div><div class="post-meta"><span class="post-meta-item" title="本文字数"><span class="post-meta-item-icon"><i class="far fa-file-word"></i> </span><span class="post-meta-item-text">本文字数：</span> <span>3.1k</span> </span><span class="post-meta-item" title="阅读时长"><span class="post-meta-item-icon"><i class="far fa-clock"></i> </span><span class="post-meta-item-text">阅读时长 ≈</span> <span>3 分钟</span></span></div></div></header><div class="post-body" itemprop="articleBody"><p><img src="https://s4.ax1x.com/2022/01/13/7M9OuF.png" alt></p><center>不会偷懒的程序员不是一个好的程序员 (bushi</center><center>但是，有现成封装好的组件库为什么不用呢？</center><center>本文主要以 <strong style="color:red">Ant Design Vue</strong> 为例</center><span id="more"></span><h1>组件</h1><h2 id="Button">Button</h2><blockquote><p>根据 Ant Design 设计规范要求，我们会在按钮内(文本按钮和链接按钮除外)只有两个汉字时自动添加空格，如果你不需要这个特性，可以设置 ConfigProvider 的 autoInsertSpaceInButton 为 false。<br>——引自 Ant Design Vue 官网</p></blockquote><p>为了美观，官方会自动在文字中间添加空格，但有时我们可能并不需要，可以如下进行操作：</p><p>从 <strong>Antd</strong> 中引入 <code>ConfigProvider</code> 组件，然后将该 Button 包裹在 <code>ConfigProvider</code> 组件中，并设置 <code>autoInsertSpaceInButton</code> 属性即可</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">a-config-provider</span> <span class="attr">:autoInsertSpaceInButton</span>=<span class="string">"false"</span>></span> </span><br><span class="line"> <span class="tag"><<span class="name">a-button</span> <span class="attr">type</span>=<span class="string">"primary"</span>></span></span><br><span class="line"> 按钮</span><br><span class="line"> <span class="tag"></<span class="name">a-button</span>></span></span><br><span class="line"><span class="tag"></<span class="name">a-config-provider</span>></span></span><br></pre></td></tr></table></figure><h2 id="1-DatePicker">1.DatePicker</h2><p>该组件中可以通过 <code>disabled-date</code> 来限制可选择日期的范围，其通过箭头函数来返回需要限制的条件，官方写法如下：</p><figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> disabledDate = <span class="function">(<span class="params">current: Dayjs</span>) =></span> {</span><br><span class="line"> <span class="comment">// Can not select days before today and today</span></span><br><span class="line"> <span class="keyword">return</span> current && current < dayjs().endOf(<span class="string">'day'</span>);</span><br><span class="line">};</span><br></pre></td></tr></table></figure><p>参数 <code>current</code> 指的是当前时间选择面板的日期，语句 <code>dayjs().endOf('day')</code> 指的是返回当前 dayjs 对象并设置为时间末尾</p><p>整个返回语句表明今天和比时间末尾小的时间都不可以选择</p><h2 id="2-Table">2.Table</h2><p><a target="_blank" rel="external nofollow noopener noreferrer" href="https://blog.csdn.net/weixin_41301816/article/details/121055948">ant design 表格columns配置解析(text, record)</a></p><h3 id="设置复选框">设置复选框</h3><p>需要给表格设置复选框时，如果从后台接收的源数据没有key值，则需要给源数据中指定 key 值用于区分选中的是哪一行</p><figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// this.historyList 从后台获取的源数据</span></span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">let</span> i: <span class="built_in">number</span> = <span class="number">0</span>; i < <span class="built_in">this</span>.historyList.length; i++) {</span><br><span class="line"> <span class="built_in">this</span>.historyList[i].key = i;</span><br><span class="line">}</span><br></pre></td></tr></table></figure><h3 id="修改复选框">修改复选框</h3><p><strong>现象</strong>：在 Antd 组件库表格中的复选框默认大小为<strong>16px</strong>，当开发人员手动修改复选框大小时，会发现复选框的对号位置整体偏右下了</p><p><strong>原因</strong>：造成该现象是因为修改宽高时真正变化的时右侧宽度和底部高度，而对号相对于复选框定位时，实际并没有变化，所以感官上感觉是偏右下移动了</p><p><strong>方法</strong>：只需要修改 <code>.ant-checkbox-inner::after</code> 该class中的left和top值让其重新定位即可解决</p><h2 id="ToolTip">ToolTip</h2><h3 id="1-包裹元素被禁用时无法显示ToolTip">(1).包裹元素被禁用时无法显示ToolTip</h3><p>当 ToolTip 标签包裹的元素被禁用时就无法正常显示，如：</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">ToolTip</span> <span class="attr">:title</span>=<span class="string">"标题"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">a-button</span> <span class="attr">type</span>=<span class="string">"default"</span> <span class="attr">:disabled</span>=<span class="string">"true"</span>></span>禁用<span class="tag"></<span class="name">a-button</span>></span></span><br><span class="line"><span class="tag"></<span class="name">ToolTip</span>></span></span><br></pre></td></tr></table></figure><p>这时只要给被禁用元素套一层容器即可，<code><div>/<span></code> 等都可：</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">ToolTip</span> <span class="attr">:title</span>=<span class="string">"标题"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">span</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">a-button</span> <span class="attr">type</span>=<span class="string">"default"</span> <span class="attr">:disabled</span>=<span class="string">"true"</span>></span>禁用<span class="tag"></<span class="name">a-button</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">span</span>></span></span><br><span class="line"><span class="tag"></<span class="name">ToolTip</span>></span></span><br></pre></td></tr></table></figure><h2 id="Tree">Tree</h2><h3 id="1-自定义节点">(1).自定义节点</h3><blockquote><p>在官网的案例及API中，只提到了如何自定义切换图标以及节点图标，唯独没有提到如何自定义节点，以下记录使用插槽来自定义节点使其具备添加删除按钮等</p></blockquote><h3 id="2-TypeScript类型定义">(2).TypeScript类型定义</h3><p>在 <strong>TypeScript</strong> 中需要给变量定义类型，包括函数参数返回值等，而针对于 tree 这个组件中，可能需要定义的类型如下：</p><ul class="lvl-0"><li class="lvl-2"><p><code>DataNode</code> ：表示树的每一个节点信息</p></li><li class="lvl-2"><p><code>EventDataNode</code> ：表示某些事件中的节点信息，如 <code>select()/expand()</code> 等事件</p></li><li class="lvl-2"><p><code>AntTreeNodeSelectedEvent</code> ：表示某些事件中返回的 Event 类型，如 <code>select()</code> 事件中的第二个参数就是该类型</p></li></ul><h3 id="3-Flex布局影响竖向滚动条">(3).Flex布局影响竖向滚动条</h3><p>如果该组件的父元素使用了 <strong>Flex</strong> 布局时，当该组件的层级较多时，会导致超出父元素的高度，这时并不会出现竖向滚动条</p><p>如果给 <code><a-tree></code> 的父元素设置高度时就不会超出父元素且会正常显示竖向滚动条，但此时高度固定</p><p>因此可以将高度设置为0，即 <code>height: 0;</code> ，这时高度就不是固定的了，会自动根据 <code>flex-grow: 1;</code> 来进行计算（该方法参考自<a target="_blank" rel="external nofollow noopener noreferrer" href="https://www.cnblogs.com/strangerqt/p/6090173.html">@winenr123</a>）</p><h3 id="4-双击事件">(4).双击事件</h3><p>公司项目前端框架从 Angular 迁移到了 Vue3，所用组件库从 ng-zorro 迁移到了 ant design vue</p><p>在之前的组件库中是可以给树的节点绑定双击事件的，但现在的组件库中貌似并没有提供双击事件（至少在文档中是看不到的）</p><p>实际上如果查看源代码是有的，如下：</p><p>可以看到该该事件和 <code>select()</code> 类似的，同样接收两个参数</p><h2 id="Tree-Select">Tree-Select</h2><h3 id="1-横线滚动丢失问题">(1).横线滚动丢失问题</h3><p>将该组件放入某些布局时，会导致下拉框中的内容无法横向滚动</p><p>这时需要使用<code>dropdownClassName=“tree-select-dropdown”</code> 字段给该组件设置class类名</p><p>然后修改相应样式来覆盖点原本的样式（需要放置在全局样式中）</p><figure class="highlight scss"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 修复tree-select组件下拉框无横向滚动条问题</span></span><br><span class="line"><span class="selector-class">.tree-select-dropdown</span> {</span><br><span class="line"> <span class="selector-class">.ant-select-tree-list-holder</span> {</span><br><span class="line"> & > <span class="selector-tag">div</span> {</span><br><span class="line"> <span class="attribute">overflow</span>: unset <span class="meta">!important</span>;</span><br><span class="line"> <span class="selector-class">.ant-select-tree-node-content-wrapper</span> {</span><br><span class="line"> <span class="attribute">white-space</span>: nowrap;</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure><h2 id="3-Select">3.Select</h2><p>关于 placeholder 的显示，Angular 和 Vue 下是不同的</p><ul class="lvl-0"><li class="lvl-2"><p>前者只需要将 value 为 <code>''</code> 即可显示 placeholder</p></li><li class="lvl-2"><p>而后者需要将 value 设置为 <code>undefined</code> 才可以正常显示 placeholder</p></li></ul><h1>快速设置样式</h1><p>在 <strong>Angular</strong> 中可以使用 <code>:host ::ng-deep .ant-upload-drag</code> 来跳过DOM的层层嵌套直接定位到 <strong>upload</strong> 组件</p><p>在 <strong>Vue</strong> 中可以使用 <code>:deep(.ant-upload-drag)</code> 来跳过DOM的层层嵌套直接定位到 <strong>upload</strong> 组件</p><h2 id="注意1">注意1</h2><p>之前的 <code>::v-deep</code> 虽然可以使用，但会在控制台警告被废弃</p><h2 id="注意2">注意2</h2><p>虽然在样式标签中使用了 <code>scoped</code> 来限制当前的样式只应用于当前的组件</p><p>但是当需要使用 <code>:deep</code> 来修改组件库样式时，如果子组件也使用了和父组件一样的组件库时，父组件修改的样式就会覆盖到子组件上</p><p>所以需要在子组件的样式前面限定一样，这个样式只作用于某一容器中的组件中</p></div><footer class="post-footer"><div class="my_post_copyright"><script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script><script src="https://cdn.bootcss.com/jquery/2.0.0/jquery.min.js"></script><script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script><p><span>本文标题:</span><a href="/Vue-UI.html">Vue开发：组件库美化项目</a></p><p><span>文章作者:</span><a href="/" title="访问 Zhang Yangeng 的个人博客">Zhang Yangeng</a></p><p><span>发布时间:</span>2022年01月13日 - 00:01</p><p><span>最后更新:</span>2023年01月31日 - 18:01</p><p><span>许可协议:</span><i class="fab fa-creative-commons"></i> <a rel="external nofollow noopener noreferrer" href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank" title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0 国际</a></p><p><span>注意事项:</span>转载请保留原文链接及作者，请尊重作者的劳动成果</p><p><span>原始链接:</span><a href="/Vue-UI.html" title="Vue开发：组件库美化项目">https://www.wrysmile.cn/Vue-UI.html</a> <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://www.wrysmile.cn/Vue-UI.html" aria-label="复制成功！"></i></span></p></div><script>var clipboard=new Clipboard(".fa-clipboard");$(".fa-clipboard").click(function(){clipboard.on("success",function(){swal({title:"",text:"复制成功",icon:"success",showConfirmButton:!0})})})</script><div class="reward-container"><div>坚持原创技术分享，您的支持将是对我最大的鼓励！</div><button onclick='document.querySelector(".post-reward").classList.toggle("active")'>赞赏</button><div class="post-reward"><div><img src="https://s2.ax1x.com/2019/01/28/kKrX7T.png" alt="Zhang Yangeng 微信"> <span>微信</span></div><div><img src="https://i.loli.net/2019/01/25/5c4ac75f2e5b7.jpg" alt="Zhang Yangeng 支付宝"> <span>支付宝</span></div></div></div><div class="post-tags"><a href="/tags/%E7%BB%84%E4%BB%B6%E5%BA%93/" rel="tag"><i class="fa fa-tag"></i> 组件库</a> <a href="/tags/%E5%89%8D%E7%AB%AF/" rel="tag"><i class="fa fa-tag"></i> 前端</a> <a href="/tags/Vue/" rel="tag"><i class="fa fa-tag"></i> Vue</a></div><div class="post-nav"><div class="post-nav-item"><a href="/Vue-basics.html" rel="prev" title="Vue开发：基础内容"><i class="fa fa-chevron-left"></i> Vue开发：基础内容</a></div><div class="post-nav-item"><a href="/Vue-i18n.html" rel="next" title="Vue开发：国际化项目">Vue开发：国际化项目 <i class="fa fa-chevron-right"></i></a></div></div></footer></article></div><div class="comments" id="lv-container" data-id="city" data-uid="MTAyMC80MjQ5Ni8xOTA0Mw=="></div></div></main><footer class="footer"><div class="footer-inner"><div class="copyright">© 2019 – <span itemprop="copyrightYear">2023</span> <span class="with-love"><i class="fa fa-heart"></i> </span><span class="author" itemprop="copyrightHolder">Wrysmile</span></div><div class="wordcount"><span class="post-meta-item"><span class="post-meta-item-icon"><i class="fa fa-chart-line"></i> </span><span>站点总字数：</span> <span title="站点总字数">413k</span> </span><span class="post-meta-item"><span class="post-meta-item-icon"><i class="fa fa-coffee"></i> </span><span>站点阅读时长 ≈</span> <span title="站点阅读时长">6:15</span></span></div><div class="busuanzi-count"><span class="post-meta-item" id="busuanzi_container_site_uv"><span class="post-meta-item-icon"><i class="fa fa-user"></i> </span><span class="site-uv" title="总访客量"><span id="busuanzi_value_site_uv"></span> </span></span><span class="post-meta-item" id="busuanzi_container_site_pv"><span class="post-meta-item-icon"><i class="fa fa-eye"></i> </span><span class="site-pv" title="总访问量"><span id="busuanzi_value_site_pv"></span></span></span></div><script color="0,0,255" opacity="0.5" zindex="-1" count="99" src="https://cdn.jsdelivr.net/npm/canvas-nest.js@1/dist/canvas-nest.js"></script><script type="text/javascript">!function(e,r){function t(){for(var e=0;e<n.length;e++)n[e].alpha<=0?(r.body.removeChild(n[e].el),n.splice(e,1)):(n[e].y--,n[e].scale+=.004,n[e].alpha-=.013,n[e].el.style.cssText="left:"+n[e].x+"px;top:"+n[e].y+"px;opacity:"+n[e].alpha+";transform:scale("+n[e].scale+","+n[e].scale+") rotate(45deg);background:"+n[e].color+";z-index:99999");requestAnimationFrame(t)}var o,n=[];e.requestAnimationFrame=e.requestAnimationFrame||e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame||e.oRequestAnimationFrame||e.msRequestAnimationFrame||function(e){setTimeout(e,1e3/60)},function(t){var a=r.createElement("style");a.type="text/css";try{a.appendChild(r.createTextNode(t))}catch(e){a.styleSheet.cssText=t}r.getElementsByTagName("head")[0].appendChild(a)}(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"),o="function"==typeof e.onclick&&e.onclick,e.onclick=function(e){var t,a;o&&o(),t=e,(a=r.createElement("div")).className="heart",n.push({el:a,x:t.clientX-5,y:t.clientY-5,scale:1,alpha:1,color:"rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"}),r.body.appendChild(a)},t()}(window,document)</script><script type="text/javascript">var titleTime,OriginTitle=document.title;document.addEventListener("visibilitychange",function(){document.hidden?($('[rel="icon"]').attr("href","/img/TEP.ico"),document.title="╭(°A°`)╮ 页面崩溃啦 ~",clearTimeout(titleTime)):($('[rel="icon"]').attr("href","/favicon.ico"),document.title="(ฅ>ω<*ฅ) 噫又好了~"+OriginTitle,titleTime=setTimeout(function(){document.title=OriginTitle},2e3))})</script></div></footer><script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/anime.min.js" integrity="sha256-XL2inqUJaslATFnHdJOi9GfQ60on8Wx1C2H8DYiN1xY=" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/@fancyapps/[email protected]/dist/jquery.fancybox.min.js" integrity="sha256-yt2kYMy0w8AbtF89WXb2P1rfjcP/HTHLT7097U8Y5b8=" crossorigin="anonymous"></script><script src="/js/comments.js"></script><script src="/js/utils.js"></script><script src="/js/motion.js"></script><script src="/js/next-boot.js"></script><script src="/js/bookmark.js"></script><script src="/js/third-party/search/local-search.js"></script><script class="next-config" data-name="nprogress" type="application/json">{"enable":true,"spinner":false}</script><script src="/js/third-party/nprogress.js"></script><script async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script><script class="next-config" data-name="leancloud_visitors" type="application/json">{"enable":true,"app_id":"mzhbgeWR9BA3SvqtvaAJulC1-gzGzoHsz","app_key":"xcGndtx2gmyop5yrT6euUk9G","server_url":null,"security":false}</script><script src="/js/third-party/statistics/lean-analytics.js"></script><script src="/js/third-party/comments/livere.js"></script></body></html>