有了 CSS 自定义属性（或称为 “CSS 变量”），可以不借助 css 预处理器即可实现样式的定制，且是运行时的。也就是说，可以通过 CSS 自定义属性实现插件的样式定制甚至网页深色模式的跟随，本博客评论框中的 emoji 就是基于这个插件，它可以跟随本博客的深色模式。
:root { --e-color-border: #e1e1e1; /* EmojiPopover border color */ --e-color-emoji-text: #666; /* text emoji font color */ --e-color-border-emoji-hover: #e1e1e1; /* emoji hover border color */ --e-color-bg: #fff; /* EmojiPopover background color */ --e-bg-emoji-hover: #f8f8f8; /* emoji hover background color */ --e-size-emoji-text: 16px; /* text emoji font size */ --e-width-emoji-img: 20px; /* image emoji width */ --e-height-emoji-img: 20px; /* image emoji height */ --e-max-width: 288px; /* EmojiPopover max width */ } .emoji-wrap { display: none; position: absolute; padding: 8px; max-width: var(--e-max-width); background-color: var(--e-color-bg); border: 1px solid var(--e-color-border); border-radius: 4px; z-index: 3; &::before, &::after { position: absolute; content: ''; margin: 0; width: 0; height: 0; } &:after { top: -9px; left: 14px; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 8px solid var(--e-color-border); } &::before { top: -8px; left: 14px; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 8px solid var(--e-color-bg); z-index: 1; } } .emoji-list { display: flex; flex-wrap: wrap; } .emoji-item { display: flex; justify-content: center; align-items: center; padding: 6px 6px; color: var(--e-color-emoji-text); cursor: pointer; box-sizing: border-box; border: 1px solid transparent; border-radius: 4px; user-select: none; &:hover { background: var(--e-bg-emoji-hover); border-color: var(--e-color-border-emoji-hover); & > .emoji-text { transform: scale(1.2); transition: transform 0.15s cubic-bezier(0.2, 0, 0.13, 2); } } } .emoji-text { font-size: var(--e-size-emoji-text); font-weight: 500; line-height: 1.2em; white-space: nowrap; } .emoji-img { width: var(--e-width-emoji-img); height: var(--e-height-emoji-img); } .emoji-mask { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 2; display: block; cursor: default; content: ' '; background: transparent; z-index: -1; } .anim-scale-in { animation-name: scale-in; animation-duration: 0.15s; animation-timing-function: cubic-bezier(0.2, 0, 0.13, 1.5); } @keyframes scale-in { 0% { opacity: 0; transform: scale(0.5); } 100% { opacity: 1; transform: scale(1); } }全局插件样式
你可以重写这些 CSS 变量（CSS 自定义属性）来定制样式。
:root { --e-color-border: #e1e1e1; /* EmojiPopover border color */ --e-color-emoji-text: #666; /* text emoji font color */ --e-color-border-emoji-hover: #e1e1e1; /* emoji hover border color */ --e-color-bg: #fff; /* EmojiPopover background color */ --e-bg-emoji-hover: #f8f8f8; /* emoji hover background color */ --e-size-emoji-text: 16px; /* text emoji font size */ --e-width-emoji-img: 20px; /* image emoji width */ --e-height-emoji-img: 20px; /* image emoji height */ --e-max-width: 288px; /* EmojiPopover max width */ }指定实例样式
如果有多个实例，你可以通过 css 变量 scope 应用到指定实例。
.<custom-class-name> { --e-color-border: #e1e1e1; /* EmojiPopover border color */ --e-color-emoji-text: #666; /* text emoji font color */ --e-color-border-emoji-hover: #e1e1e1; /* emoji hover border color */ --e-color-bg: #fff; /* EmojiPopover background color */ --e-bg-emoji-hover: #f8f8f8; /* emoji hover background color */ --e-size-emoji-text: 16px; /* text emoji font size */ --e-width-emoji-img: 20px; /* image emoji width */ --e-height-emoji-img: 20px; /* image emoji height */ --e-max-width: 288px; /* EmojiPopover max width */ }使用你的 CSS
Emoji Popover 生成非常简单的 DOM 结构，你也可以使用自己的样式而不是导入 style.css。
编写示例网页 ├─example │ ├─index.html │ └─index.css首先安装已经发布到 npm 的表情弹窗插件
npm i emoji-popover example/index.html<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta content="width=device-width, initial-scale=1.0" /> <title>DEMO · emoji-popover</title> </head> <body> <div> <div> <input type="text" /> <button>系统表情</button> </div> <div> <input type="text" /> <button>文本表情</button> </div> <div> <input type="text" /> <button>网络图片</button> </div> </div> <script type="module"> import EmojiPopover from 'emoji-popover' import '../node_modules/emoji-popover/dist/style.css' import './index.css' const e1 = new EmojiPopover({ button: '.e-btn', container: 'body', targetElement: '.e-input', emojiList: [ { value: '