feat: fontSize setting Example

Hufe921 · Mar 21, 2023 · 3f218f6 · 3f218f6
1 parent d951532
commit 3f218f6
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 2 deletions.
diff --git a/index.html b/index.html
@@ -51,6 +51,29 @@
             </ul>
           </div>
         </div>
+        <div class="menu-item__size">
+          <span class="select" title="字体">小四</span>
+          <div class="options">
+            <ul>
+              <li data-size="56">初号</li>
+              <li data-size="48">小初</li>
+              <li data-size="34">一号</li>
+              <li data-size="32">小一</li>
+              <li data-size="29">二号</li>
+              <li data-size="24">小二</li>
+              <li data-size="21">三号</li>
+              <li data-size="20">小三</li>
+              <li data-size="18">四号</li>
+              <li data-size="16">小四</li>
+              <li data-size="14">五号</li>
+              <li data-size="12">小五</li>
+              <li data-size="10">六号</li>
+              <li data-size="8">小六</li>
+              <li data-size="7">七号</li>
+              <li data-size="6">八号</li>
+            </ul>
+          </div>
+        </div>
         <div class="menu-item__size-add">
           <i></i>
         </div>

diff --git a/src/main.ts b/src/main.ts
@@ -81,6 +81,20 @@ window.onload = function () {
     instance.command.executeFont(li.dataset.family!)
   }
 
+  const sizeSetDom = document.querySelector<HTMLDivElement>('.menu-item__size')!
+  const sizeSelectDom = sizeSetDom.querySelector<HTMLDivElement>('.select')!
+  const sizeOptionDom = sizeSetDom.querySelector<HTMLDivElement>('.options')!
+  sizeSetDom.title = `设置字号`
+  sizeSetDom.onclick = function () {
+    console.log('size')
+    sizeOptionDom.classList.toggle('visible')
+  }
+  sizeOptionDom.onclick = function (evt) {
+    const li = evt.target as HTMLLIElement
+    const size = Number(li.dataset.size!) as number
+    instance.command.executeSize(size)
+  }
+
   const sizeAddDom = document.querySelector<HTMLDivElement>('.menu-item__size-add')!
   sizeAddDom.title = `增大字号(${isApple ? '⌘' : 'Ctrl'}+[)`
   sizeAddDom.onclick = function () {
@@ -984,6 +998,12 @@ window.onload = function () {
       fontSelectDom.style.fontFamily = payload.font
       curFontDom.classList.add('active')
     }
+    sizeOptionDom.querySelectorAll<HTMLLIElement>('li').forEach(li => li.classList.remove('active'))
+    const curSizeDom = sizeOptionDom.querySelector<HTMLLIElement>(`[data-size='${payload.size}']`)
+    if (curSizeDom) {
+      sizeSelectDom.innerText = curSizeDom.innerText
+      curSizeDom.classList.add('active')
+    }
     payload.bold ? boldDom.classList.add('active') : boldDom.classList.remove('active')
     payload.italic ? italicDom.classList.add('active') : italicDom.classList.remove('active')
     payload.underline ? underlineDom.classList.add('active') : underlineDom.classList.remove('active')

diff --git a/src/style.css b/src/style.css
@@ -156,12 +156,16 @@ ul {
   background-color: #e2e6ed;
 }
 
-.menu-item .menu-item__font {
+.menu-item .menu-item__font,.menu-item .menu-item__size {
   width: 65px;
   position: relative;
 }
 
-.menu-item__font .select {
+.menu-item .menu-item__size{
+  text-align: center;
+}
+
+.menu-item__font .select,.menu-item__size .select {
   width: 100%;
   height: 100%;
 }