วิเคราะห์กระบวนการดำเนินการ เลื่อนเมาส์ไปที่โหนดเพื่อตรวจสอบว่ามีโหนดอยู่เพื่อเปิดใช้งานการใช้งาน คำแนะนำเครื่องมือ (ชื่อคลาส คุณลักษณะ ฯลฯ) ตรวจหาหัวข้อและตำแหน่ง (ชื่อคลาส คุณลักษณะ ฯลฯ) ฟองอากาศเพื่อเรียนรู้จากผู้อื่น
ก่อนอื่นเรามาดู รูปแบบคำแนะนำเครื่องมือของ element-ui กันก่อน
แน่นอนว่า ตำแหน่งของบับเบิล จะถูกเพิ่มผ่าน สคริปต์จาวาสคริปต์
โดยไม่ต้องกังวลใจอีกต่อไป มาตั้งความคาดหวังกันก่อน ไม่จำเป็นต้องใช้สคริปต์ JavaScript เลย ไม่จำเป็นต้องเพิ่มองค์ประกอบใหม่** (ใช้หลังและก่อนองค์ประกอบหลอก)** ไม่จำเป็นต้องจับคู่ชื่อคลาส โดยใช้ตัวเลือกแอตทริบิวต์โดยตรง** ([attr ])** รองรับรูปแบบเริ่มต้น** (เมื่อแท็กไม่ได้กำหนดธีมและตำแหน่ง)** จำเป็น** (กำหนดโดยตรงในแท็กแล้วปล่อยให้เป็น CSS เพื่อจับคู่)** ใช้ sass เพื่อใช้ ธีมและตำแหน่ง ของฟองสบู่ การพัฒนาตัวประมวลผลล่วงหน้า (นักเรียนที่ไม่เข้าใจสามารถแปลงเป็น CSS ได้) ข้อกำหนดคำสั่งคำจำกัดความ html
ประกาศความจำเป็น<button tooltip='I am a content duck' effect='light'position='top-left'>ซ้ายบน</button>
เขียนสองสามปุ่มก่อน
องค์ประกอบอ้างอิงสไตล์-ui
<div class=container> <div class=top> <button tooltip=topposition=top-left effect=light>top left</button> <button tooltip=top left ตำแหน่งซ้ายบน=top>top</button> < เคล็ดลับเครื่องมือปุ่ม=ตำแหน่งบนขวา=บนขวา>บนขวา</ปุ่ม> </div> <div class=left> <ปุ่ม เคล็ดลับเครื่องมือ=ซ้ายบน ซ้ายบน ซ้ายบน ซ้ายบน ซ้ายบน ซ้ายบน ซ้ายบน ตำแหน่งซ้ายบน ซ้ายบน ตำแหน่ง=ซ้ายบน>ซ้าย บน</ปุ่ม> <button tooltip=leftposition=left effect=light>left</button> < คำแนะนำปุ่ม = ตำแหน่งซ้ายและขวา = ซ้ายล่าง > ซ้ายล่าง </ ปุ่ม> </div> <div class=right> <button เคล็ดลับเครื่องมือ=ขวาบน ขวาบน ขวาบน ขวาบน ขวาบน ขวาบน ขวาบน ขวาบน ตำแหน่ง=ขวาบน>ขวาบน</ปุ่ม> <คำแนะนำเครื่องมือ=ตำแหน่งขวา=ขวา ผล=แสง>ขวา</ปุ่ม> < เคล็ดลับเครื่องมือของปุ่ม=ขวา ตำแหน่งล่าง=ขวาล่าง> ขวาล่าง</ปุ่ม> </div> <div class=bottom> <คำแนะนำเครื่องมือของปุ่ม=ซ้ายล่าง ตำแหน่งซ้ายล่าง=ล่างซ้าย>ซ้ายล่าง</ปุ่ม> <ปุ่ม เคล็ดลับเครื่องมือ=ตำแหน่งล่างสุด=เอฟเฟกต์ล่าง=แสง>ล่างสุด</button> <คำแนะนำเครื่องมือของปุ่ม=ตำแหน่งล่างขวา>ล่างขวา</ปุ่ม> </div></div>การใช้ตรรกะโค้ดคอร์ CSS
วางเมาส์เหนือเพื่อติดตามการเคลื่อนไหวของเมาส์เข้าและออก **[คำแนะนำเครื่องมือ]** จับคู่ป้ายกำกับที่มีแอตทริบิวต์นี้ หลัง คือฟองอากาศ และ ก่อนหน้า คือสามเหลี่ยม
/* จับคู่องค์ประกอบกับแอตทริบิวต์คำแนะนำเครื่องมือ */[คำแนะนำเครื่องมือ] { ตำแหน่ง: สัมพันธ์; /* รูปแบบเริ่มต้นของฟองอากาศ*/ &::หลัง { แสดง: ไม่มี; เนื้อหา: attr(คำแนะนำเครื่องมือ); / & ::before { display: none; content: ''; } /* เลื่อนเมาส์ไปที่องค์ประกอบเพื่อแสดงฟองอากาศและรูปสามเหลี่ยม */ &:hover { &::after { display: block } &::before { จอแสดงผล: บล็อก; -ตอนนี้เอฟเฟกต์จะมีผลหลังจากเลื่อนเมาส์เข้าไปแล้ว
เพื่อให้เห็นผลได้ง่าย การทดสอบสามารถตั้งค่าเริ่มต้นฟองอากาศและสามเหลี่ยมที่จะบล็อกได้
/* รูปแบบเริ่มต้นของฟองอากาศ*/&::before { display: block; content: attr(tooltip);}/* รูปแบบเริ่มต้นของสามเหลี่ยม*/&::before { display: block;ผลกระทบในปัจจุบันมีดังนี้
แน่นอนว่าจอแสดงผลหลักถูกตั้งค่าไว้ที่ตำแหน่งที่แน่นอน
/* รูปแบบเริ่มต้นของบับเบิ้ล */::after { display: block; content: attr (tooltip); ความกว้าง: 200px; รัศมีเส้นขอบ: 4px; กล่องเงา: 0 10px 20px -5px rgba (0, 0, 0, 0.4); z-index: 100; @extend .tooltip-theme-dark; /* สืบทอดธีมเริ่มต้น (ข้อความสีขาวบนพื้นหลังสีดำ) */ }/* รูปแบบเริ่มต้นของสามเหลี่ยม */&::before { display: บล็อก เนื้อหา : ''; ตำแหน่ง: สัมบูรณ์; เส้นขอบ: 5px ทึบ ดัชนี z: 100; @extend .triangle-theme-dark; -ผลกระทบในปัจจุบันมีดังนี้
กำหนดสองธีมแต่ละหัวข้อ
$white: #fff;$black: #313131;/* Bubble theme*/.tooltip-theme-dark { color: $white; background-color: $black;}.tooltip-theme-light { color: $black; สีพื้นหลัง: $white; border: 1px solid $black;}/* ธีมสามเหลี่ยม*/.triangle-theme-dark { border-top-color: $black;}.triangle-theme-light { border-top-color: $black; /* เหมือนกับสีเข้มในตอนนี้*/} ปรับแต่งตำแหน่งฟองอากาศและสามเหลี่ยม (ตัวอย่างเฉพาะทิศทางเดียว) /* ตำแหน่งบับเบิ้ล*//*----Top----*/.tooltip-placement-top { ด้านล่าง: calc (100% + 10px); ซ้าย: 50%; );}.tooltip-placement-top-right { ล่าง: คำนวณ (100% + 10px); ซ้าย: 100%; แปลงร่าง: แปล (-100%, 0)}.tooltip-placement-top-left { ด้านล่าง: คำนวณ (100% + 10px); ซ้าย: 0; แปลง: แปล (0, 0)}/* ตำแหน่งสามเหลี่ยม*//*----top-- --*/.triangle-placement-top { ด้านล่าง: คำนวณ (100% + 5px); ซ้าย: 50%; แปลง: แปล (-50%, 0);}.triangle-placement-top-left { ด้านล่าง: คำนวณ (100% + 5px); ซ้าย: 10px;}.triangle-placement-top-right { ด้านล่าง: คำนวณ (100% + 5px); ขวา: 10px;} สถานที่ถ่ายภาพ, วัตถุนี่เป็นโค้ดหลักด้วย ใช้ตัวเลือกแอตทริบิวต์เพื่อจับคู่ค่าบนป้ายกำกับ จากนั้นตั้งค่าสไตล์ที่แตกต่างกัน
จับคู่ฟองอากาศ ธีมสามเหลี่ยม
&[เอฟเฟกต์=แสง] { &::หลัง { @extend .tooltip-theme-light; } &::before { @extend .triangle-theme-light }}จับคู่ตำแหน่งฟองและสามเหลี่ยม 12 ตำแหน่ง
@ แต่ละ $placement ในด้านบน ขวาบน ซ้ายบน ขวา ขวาบน ขวาล่าง ล่าง ล่างขวา ล่างซ้าย ซ้าย ซ้ายบน ซ้ายล่าง { &[placement=# {$placement}] { &::after { @extend .tooltip-placement-#{$placement}; } &::before { @extend .triangle-placement-#{$placement};หากป้ายกำกับไม่มีแอตทริบิวต์ตำแหน่ง / ว่างเปล่า ระบบจะสืบทอดตำแหน่งบนสุดตามค่าเริ่มต้น
&:not([ตำแหน่ง]),&[placement=] { &::after { @extend .tooltip-placement-top; } &::before { @extend .triangle-placement-top;ผลกระทบในปัจจุบันมีดังนี้
มาทำให้ข้อความยาวขึ้นและเพิ่ม display:none ให้กับสไตล์เริ่มต้นของฟองอากาศและสามเหลี่ยม
แบ่งออกเป็นสี่ทิศทาง ขึ้น ลง ซ้าย ขวา สี่ภาพเคลื่อนไหว
@keyframes anime-top { จาก { opacity: .5; ด้านล่าง: 150%; }}@keyframes anime-bottom { จาก { opacity: .5; top: 150%; .5; ขวา: 150%; }}@keyframes อะนิเมะ-ขวา { จาก { ความทึบ: .5; ซ้าย: 150%;จับคู่ตำแหน่งบับเบิลเพื่อกำหนดว่าแอนิเมชันใดที่จะดำเนินการ ใช้ **[attr^=]** เพื่อเลือก เช่น จับคู่ด้านซ้ายบนและด้านขวาบนได้
/* ตั้งค่าภาพเคลื่อนไหว*/@แต่ละ $placement ที่ด้านบน ขวา ล่าง ซ้าย { &[placement^=#{$placement}] { &::after, &::before { Animation: anime-#{$placement} ไปข้างหน้าอย่างง่ายดาย 300ms;ผลสุดท้ายมีดังนี้
สิ่งที่แนบมาด้วยคือที่อยู่ codepen codepen.io/anon/pen/yR…
สรุปข้างต้นคือการใช้ CSS ล้วนๆ (ไม่มีสคริปต์) เอฟเฟกต์ข้อความคำแนะนำคำสั่ง Html ที่บรรณาธิการแนะนำ ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ หากคุณมีคำถามใดๆ โปรดฝากข้อความถึงฉัน แล้วโปรแกรมแก้ไขจะตอบกลับคุณ เวลา. ฉันอยากจะขอบคุณทุกคนที่ให้การสนับสนุนเว็บไซต์ศิลปะการต่อสู้ VeVb!
หากคุณคิดว่าบทความนี้มีประโยชน์สำหรับคุณ คุณสามารถพิมพ์ซ้ำได้ โปรดระบุแหล่งที่มา ขอขอบคุณ!