、abbr

abbr 全稱是 abbreviations，意思是縮寫。應(yīng)用場景也很簡單，為一些文章中的縮寫增加注釋。

以前在文章中對于縮寫的解釋經(jīng)常會這么做：

DAU（Daily Active User），日活躍用戶數(shù) ......

那我們用 abbr 標(biāo)簽?zāi)兀?/span>

<abbr title="Daily Active User">
    DAU
</abbr>
<span>，日活躍用戶數(shù) ......</span>

展示的效果如下：

這個標(biāo)簽就可以把全稱隱藏掉，弱化信息量，讓真正不知道該縮寫的用戶主動去獲取縮寫的具體意思，這個在 markdown 里經(jīng)常會出現(xiàn)。

二、mark

<mark/> 在 markdown 中也是很常用的，用于將包裹的文本高亮展示。

<mark>高亮文本</mark>

效果如下：

如果全文統(tǒng)一高亮樣式，可以專門對 mark 標(biāo)簽進(jìn)行樣式重置，這樣就不用對你用的每個 div 加一個 highlight 的類名了，又不語義化，又徒增文檔大小。

三、sup、sub

<sup/>和<sub/>分別表示上標(biāo)和下標(biāo)，在 markdown 中出現(xiàn)得也很頻繁，比如數(shù)學(xué)公式和引用。

<div>3<sup>[2]</sup></div>
<div>4<sub>2</sub></div>

效果如下：

上標(biāo)和下標(biāo)的樣式原理也比較簡單，主要就是利用了 vertical-align 的 top 和 sub 屬性值，然后將字號縮小，不過有現(xiàn)成的標(biāo)簽，干嘛不用呢？

四、figure

figure 是用于包裹其它標(biāo)簽的內(nèi)容的，然后再利用另一個標(biāo)簽 figcaption ，可以對包裹的內(nèi)容進(jìn)行一個文本描述，例如：

<figure>
    <img src="/media/cc0-images/elephant-660-480.jpg"
         alt="大象">
    <figcaption>這是一張大象的照片</figcaption>
</figure>

效果如下：

那要是圖片掛了呢？

再友好點處理，我們把 img 標(biāo)簽的 alt 屬性去掉。

漂亮，終于把我一直厭煩的圖裂 icon 給干掉了，樣式還巨好看。

當(dāng)然不止能包裹 img 標(biāo)簽，其它任何都是可以的。

嘿嘿，給大家在本文來個實戰(zhàn)，下面這個可以點擊，樣式也是利用了 figure 這個標(biāo)簽。

我是figure標(biāo)簽產(chǎn)生的

五、progress

說到 <progress/> 這個標(biāo)簽就很有意思了，去年有段時間我做的業(yè)務(wù)里涉及到了進(jìn)度條，當(dāng)時是前同事做的，然后有一些性能問題，我就在研究如何優(yōu)化，減少進(jìn)度條改變帶來的性能問題。

雖然最后問題是解決了，但是也有幸收到了張鑫旭大佬的評論，他告訴我 progress 這個標(biāo)簽就足夠了，既有語義化，又有進(jìn)度條的功能，性能還好，兼容性也很不錯。后來經(jīng)過一番嘗試，還真是，當(dāng)時是我孤陋寡聞了，也安利給大家。

<!-- 進(jìn)度條最大值為100，當(dāng)前進(jìn)度為60，即60% -->
<progress max="100" value="60"/>

瀏覽器自帶的樣式就已經(jīng)很好看了，效果如下：

業(yè)務(wù)中我們也就可以通過控制 value 屬性，來改變進(jìn)度條的進(jìn)度了。

六、area

area 這個標(biāo)簽也非常有意思，它的作用是為圖片提供點擊熱區(qū)，可以自己規(guī)定一張圖的哪些區(qū)域可點擊，且點擊后跳轉(zhuǎn)的鏈接，也可以設(shè)置成點擊下載文件，我們來舉個例子：

  <img src="example.png" width="100" height="100" alt="" usemap="#map">

  <map name="map">
    <area shape="rect" coords="0,0,100,50" alt="baidu" href="https://www.baidu.com">
    <area shape="rect" coords="0,50,100,100" alt="sougou" href="https://www.sogou.com/">
  </map>

area 一般要搭配 map 標(biāo)簽一起使用，每個 area 標(biāo)簽表示一個熱區(qū)，例如上面代碼中，我們定義了兩個熱區(qū)，熱區(qū)形狀都為rect（矩形），他們的熱區(qū)分別是：

• 坐標(biāo) (0,0) 到坐標(biāo) (100,50) 的一個矩形
• 坐標(biāo) (0,50) 到坐標(biāo) (100,100) 的一個矩形

我們都知道，默認(rèn)的坐標(biāo)軸是這樣的：

因此，我們劃分的兩個熱區(qū)就是:

最后再來看一下我們的實際效果：

i

七、details

details 字面意思是 "詳情"，在 markdown 里也經(jīng)常用，用該標(biāo)簽包裹了的內(nèi)容默認(rèn)會被隱藏，只留下一個簡述的文字，我們點擊以后才會展示詳細(xì)的內(nèi)容。

<details>
  <p>我是一段被隱藏的內(nèi)容</p>
</details>

效果如下：

這還沒有加任何一行的 js 代碼，我們點擊后，details 標(biāo)簽上會多一個 open 的屬性，被隱藏的內(nèi)容就展示出來了。

默認(rèn)情況下，簡要文字為 "詳情"，想要修改這個文字，要搭配 summary 標(biāo)簽來使用。

<details>
  <summary>點擊查看更多</summary>
  <p>我是一段被隱藏的內(nèi)容</p>
</details>

就搞定了！

八、dialog

瀏覽器自帶彈窗方法 alert、confirm、prompt，樣式固定且每個瀏覽器不同，同時還會阻塞頁面運行，除了這個還提供了一個 dialog 標(biāo)簽，它的使用方式有點類似于現(xiàn)在各大組件庫的 Modal 組件了，瀏覽器還為該標(biāo)簽提供了原生的 dom 方法：showModal、close，可以直接控制彈窗的展示和隱藏。

<dialog id="dialog">
    <input type="text">
    <button id="close">ok</button>
</dialog>
<button id="openBtn">打開彈框</button>

<script>
    const dialog = document.getElementById('dialog')
    const openBtn = document.getElementById('openBtn')
    const closeBtn = document.getElementById('close')
  
    openBtn.addEventListener('click', () => {
        // 打開彈框
        dialog.showModal()
    })
    closeBtn.addEventListener('click', () => {
        // 隱藏彈框
        dialog.close()
    })
</script>

效果如下：

細(xì)心的你有沒有發(fā)現(xiàn)，這原生的彈框還自帶背景蒙層，點擊是關(guān)閉不掉的，但起碼它不會阻塞頁面。

然后我們在彈窗展示時，也可以通過 esc 鍵來關(guān)閉彈窗。

九、datalist

datalist 是用于給輸入框提供可選值的一個列表標(biāo)簽，類似咱們常用的 Select 組件。

我可以用其實現(xiàn)一個 "輸入聯(lián)想" 的功能。

<label> 輸入C開頭的英文單詞：</label>
<input list="c_words"/>

<datalist id="c_words">
  <option value="China">
  <option value="Click">
  <option value="Close">
  <option value="Const">
  <option value="Count">
</datalist>

來試一試：

剛點擊時會把所有推薦的選項都列出來，然后根據(jù)后面輸入的內(nèi)容，會過濾掉不匹配的選項，比如我輸入 cl，會過濾掉不是 cl 開頭的單詞，最后只剩下 Click 和 Close 了。

最后我發(fā)現(xiàn)，他這個下拉框有點好看啊？為啥這原生的 input 框默認(rèn)樣式那么丑，啥時候改改。

十、fieldset

fieldset 標(biāo)簽是用于分組管理 form 表單內(nèi)的元素的，若 fieldset 設(shè)置了 disabled 屬性，則被其包裹的所有表單元素都會被禁用置灰，且不會隨著表單一起提交上去，是的就成了擺設(shè)。

什么意思呢？看個例子：

<form action="/example">
  <fieldset disabled>
    <legend>被禁用區(qū)域</legend>
    <label>ID：</label>
    <input type="text" name="id" value="1">
    <label>郵箱：</label>
    <input type="text" name="email" value="1234567@163.com">
  </fieldset>
  <label>名字：</label>
  <input type="text" name="name">
  <button type="submit">提交</button>
</form>

這里我們把 ID 和 郵箱 的表單包裹了起來，且設(shè)置了 disabled，只開放了一個 name 的輸入控件，此時界面如下：

可以看到除了 name 輸入框，其它的兩個輸入框都被禁用了，此時點提交會是什么樣子呢？

嗯，只提交了 name 字段。

十一、noscript

這個標(biāo)簽是在瀏覽器不支持或禁用了 javascript 時才展示的，大多用于對 js 強依賴的應(yīng)用，比如現(xiàn)在大部分的 SPA 頁面，一旦不支持 javascript，頁面基本上什么內(nèi)容都沒了，此時可以靠這個標(biāo)簽做友好提示。

一般我們不需要特地去使用，大多都是在打包過程中自動插入到 html 靜態(tài)文件里去的，例如：

// init.js
const root = document.getElementById('root')
const button = document.createElement('button')
button.innerText = '點擊出彈窗'
root.appendChild(button)

<!-- index.html -->
<script defer src="./init.js"></script>

<noscript>
  不好意思，你的瀏覽器不支持或禁用了 JavaScript，請更換瀏覽器或啟用 JavaScript
</noscript>

<div id="root"></div>

未禁用 javascript 時，頁面是這樣的：

禁用了 javascript 時，是這樣的：

日常開發(fā)時，彈窗是一個經(jīng)常使用的功能，而且重復(fù)性極高，你可能會遇到下面這些問題:
1、一個頁面內(nèi)多個彈窗, 要維護(hù)多套彈窗狀態(tài),看的眼花繚亂
2、彈窗內(nèi)容比較簡單，聲明變量 + 模板語法的方式寫起來比較麻煩

關(guān)于這些問題, 我首先想到的是應(yīng)該弄一個即用即走的Dialog，不用去單獨維護(hù)它的狀態(tài)，使用Dialog({ xxx })這種形式去調(diào)用它，例如下面這種配置的方式：

Dialog({
    title: 'xxx',
    render: () => xxx
})

其中render可以是一個html字符串，也可以是jsx(需要配置對jsx的支持)，這樣可以對內(nèi)容區(qū)域?qū)崿F(xiàn)自定義。

通過配置項調(diào)用

各大主流的ui庫基本都實現(xiàn)了這種調(diào)用方式：

• Ant Design Vue的 Modal
• Element-plus的 MessageBox

之前沒有注意到Element-plus的MessageBox可以使用jsx，大部分場景下,用它來代替Dialog還是很方便的。
示例代碼:

<script lang="jsx" setup>
import { reactive, ref } from 'vue';
import { ElMessageBox, ElForm, ElFormItem, ElInput } from 'element-plus'

const formRef = ref(null)
const form = reactive({ height: '', width: '' })
const rules = reactive({
  height: {
    required: true,
    trigger: 'blur'
  },
  width: {
    required: true,
    trigger: 'blur'
  }
})

function openMessageBox() {
  ElMessageBox({
    title: 'Message',
    showCancelButton: true,
    // message如果不是函數(shù)形式 綁定ref會失敗
    message: () =>
      <ElForm
        ref={formRef}
        model={form}
        rules={rules}
      >
        <ElFormItem label="height" prop="height">
          <ElInput v-model={form.height}></ElInput>
        </ElFormItem>
        <ElFormItem label="width" prop="width">
          <ElInput v-model={form.width}></ElInput>
        </ElFormItem>
      </ElForm>
    ,
    beforeClose: (action, instance, done) => {
      console.log(action, instance)
      formRef.value && formRef.value.validate(status => {
        console.log('校驗狀態(tài): ', status)
        if (status || action==='cancel') done()
      })
    }
  })
}
</script>

<template>
  <div class="container">
    <button @click="openMessageBox">
      打開messagebox
    </button>
  </div>
</template>

效果如下:

vueuse的createTemplatePromise

如果你不想使用jsx，而是想使用模板，vue的hooks工具庫vueuse中提供了 createTemplatePromise 這個函數(shù)用來創(chuàng)建對話框、模態(tài)框、Toast 等，并且完全使用的是template的方式，因此自定義程度更高，并且沒有任何額外成本(不需要jsx)。
下面是一個createTemplatePromise結(jié)合el-dialog的例子(當(dāng)然也可以結(jié)合其它的dialog或者自定義dialog)：

<script lang="jsx" setup>
import { createTemplatePromise } from '@vueuse/core'
import { ElDialog, ElButton } from 'element-plus'

const TemplatePromise = createTemplatePromise()

async function open(idx) {
  console.log(idx, 'Before')
  const result = await TemplatePromise.start('Title', `Hello ${idx}`)
  console.log(idx, 'After', result)
}

function asyncFn() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve('ok')
    }, 1000)
  })
}
</script>

<template>
  <div class="container">
    <button @click="open(1); open(2)">
      打開兩個彈框
    </button>
  </div>
  <TemplatePromise v-slot="{ resolve, args, isResolving }">
    <el-dialog :modelValue="true" :title="args[0]">
      <div>Dialog {{ args[1] }}</div>
      <p>可以打開控制臺查看logs</p>
      <div class="flex gap-2 justify-end">
        <el-button @click="resolve('cancel')">
          取消
        </el-button>
        <el-button type="primary" :disabled="isResolving" @click="resolve(asyncFn())">
          {{ isResolving ? 'loading...' : '確認(rèn)' }}
        </el-button>
      </div>
    </el-dialog>
  </TemplatePromise>
</template>

效果如圖:

Promise化Dialog的優(yōu)點

這樣有小伙伴可能會說, 這看起來和原來用dialog也沒有很大區(qū)別啊, 也要寫模版 + 函數(shù)方法. 那么讓dialog變成這樣有什么好處呢?
1、最大的好處是彈窗變得可編程了, 通過函數(shù)調(diào)用的方式來控制UI. 不用再單獨聲明變量控制顯隱, 也不用單獨再去控制按鈕的禁用、loading等狀態(tài). 例如以上的例子中, 我們可以輕松的處理button的loading狀態(tài)(不用再額外聲明變量), 用Promise讓Dialog的UI和狀態(tài)實現(xiàn)了內(nèi)聚.
2、相比第一種方式, 對UI的可自定義程度更高.

作者：隔壁老王z
鏈接：https://juejin.cn/post/7293173815181738022