{"id":51,"date":"2023-08-15T11:16:08","date_gmt":"2023-08-15T03:16:08","guid":{"rendered":"https:\/\/xiuxiejiang.com\/?p=51"},"modified":"2023-08-29T16:05:56","modified_gmt":"2023-08-29T08:05:56","slug":"react-nixie-tube","status":"publish","type":"post","link":"https:\/\/xiuxiejiang.com\/index.php\/2023\/08\/15\/react-nixie-tube\/","title":{"rendered":"react \u7535\u5b50\u7ba1\/\u6570\u7801\u7ba1"},"content":{"rendered":"\n

\u5176\u539f\u7406\uff0c\u8fd8\u662f\u5229\u7528border\u5c5e\u6027\u6765\u5b9e\u73b0\u8fb9\u7ebf\u4e24\u7aef\u7684\u659c\u8fb9\u3002\u4e24\u4e2a\u8fb9\u4ea4\u53c9\u7684\u5730\u5740\u5373\u4e3a\u659c\u8fb9\u3002\u4f8b\u5982\uff0c\u4ee5\u4e0b\u662f\u4e00\u4e2a\u5bbd100px\uff0c\u8fb940px\u7684\u6b63\u65b9\u5f62\u3002\u89c2\u5bdf\u4e24\u6761\u76f8\u90bb\u8fb9\u76f8\u4ea4\u7684\u5730\u65b9\uff0c\u662f\u4e00\u6761\u659c\u8fb9\u3002<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n
<div class=\"box\"><\/div> \n.box{\n  margin:20px;\n  width: 100px;\n  height: 100px;\n  border-left: 40px solid red;\n  border-right: 40px solid red;\n  border-top: 40px solid black;\n  border-bottom: 40px solid black;\n}<\/code><\/pre>\n\n\n\n
<\/p>\n\n\n\n
\u4f46\u662f\uff0c\u8fd9\u6837\u6709\u4e2a\u95ee\u9898\u662f\u4e24\u4e2a\u8fb9\u4e4b\u95f4\u6ca1\u6709\u7a7a\u9699\uff0c\u65e0\u6cd5\u8fbe\u5230\u6a21\u62df\u6548\u679c\uff0c\u6240\u4ee5\u4e03\u6761\u8fb9\u9700\u8981\u5404\u81ea\u6a21\u62df\u3002<\/p>\n\n\n\n
<\/p>\n\n\n\n
\u9996\u5148\uff0c\u5047\u8bbe\u6bcf\u4e2a\u201c\u7ba1\u201d\u6709\u4e2a\u4e00\u4e2a\u7f16\u53f7<\/p>\n\n\n
\n
\"\"<\/figure>\n<\/div>\n\n\n
\u6211\u4eec\u7528”.d1″, “.d2″\u2026\u2026\u6765\u547d\u540d\u5404\u4e2a\u8fb9\u7684\u6837\u5f0f\u3002\u6211\u4eec\u5206\u522b\u7ed9\u5404\u4e2a\u522b\u8bbe\u5b9a\u5bbd\u3001\u9ad8\u3001\u4f4d\u79fb\u548c\u5b9a\u4f4d\u3002<\/p>\n\n\n\n
\u4f8b\u59821\u53f7\u8fb9\uff1a<\/p>\n\n\n\n
<\/p>\n\n\n\n
.d1 {\n    height: 0;\n    width: calc($boxW - $space * 2); \/\/ \u7ebf\u5bbd\u5ea6\uff0c $space\u662f\u4e24\u4e2a\u7ba1\u4e4b\u95f4\u76f8\u90bb\u7684\u7f1d\u9699\uff0c\u51cf\u6389$space*2 \u6b63\u662f\u4e3a\u4e86\u51cf\u6389\u7f1d\u9699\u5bbd\u5ea6\u3002\n    position: absolute;              \/\/ \u4ee5\u4e0b\u56db\u884c\u662f\u5b9a\u4f4d\uff0c\u56fa\u5b9a\u5728\u9876\u90e8\n    top: 0;\n    left: math.div($space, 1);\n    right: 0;\n    border: $with solid $color;      \/\/ \u8fd9\u56db\u884c\u662f\u753b\u8fb9\u7ebf\u3002\n    border-left-color: transparent;\n    border-right-color: transparent;\n    border-bottom: 0;\n  }<\/pre>\n\n\n\n
<\/p>\n\n\n\n
\u5b8c\u6574\u4ee3\u7801\u5982\u4e0b\u3002<\/p>\n\n\n\n
\u6837\u5f0f\u4ee3\u7801\uff08SASS\u8bed\u6cd5\uff09<\/p>\n\n\n\n
@use \"sass:math\";\n\n.nixie-tube {\n  $size: 1em;           \/\/ \u5b57\u7b26\u5bbd\u5ea6\n  $with: 0.2em;         \/\/ \u7ebf\u5bbd\n  $color: #000;       \/\/ \u7ebf\u989c\u8272\n  $space: 0.15em;       \/\/ \u7ebf\u4e4b\u95f4\u7684\u95f4\u8ddd\n\n  $boxW: $size * 0.8;   \n  $boxH: $size * 1.2;\n  margin-right: 2px;\n\n  height: $boxH;\n  width: $boxW;\n  position: relative;\n  display: inline-block;\n  line-height: 1;\n  &.nixie-text-wrapper {\n    width: auto;\n  }\n  \/* \u6570\u503c 1 \u9760\u5de6\u504f\u79fb 3\/8, \u4ee5\u4fbf\u770b\u8d77\u6765\u4e0d\u8981\u8ddf\u53f3\u4fa7\u7684\u6570\u5b57\u592a\u8fd1 *\/\n  &.n-1 {\n    transform: translateX(calc($boxW * -0.375));\n  }\n  \/* \u975e\u6570\u5b57\u7c7b\u578b\uff0c\u589e\u52a0\u89c6\u89c9\u8bef\u5dee *\/\n  .nixie-text {\n    font-size: calc($boxH + 0.1em);\n  }\n  \/* \u6bcf\u4e00\u4e2a\u7ba1\u7684\u4f4d\u7f6e\u3001\u5bbd\u5ea6 *\/\n  .d1 {\n    height: 0;\n    width: calc($boxW - $space * 2);\n    position: absolute;\n    top: 0;\n    left: math.div($space, 1);\n\n    right: 0;\n    border: $with solid $color;\n    border-left-color: transparent;\n    border-right-color: transparent;\n    border-bottom: 0;\n  }\n  .d2 {\n    height: $with;\n    width: calc($boxW - $space * 2);\n\n    border: none;\n    position: absolute;\n    top: calc(($boxH - $with) \/ 2);\n    left: math.div($space, 1);\n    \/* \u7531\u4e8e\u7ebf\u4e24\u7aef\u4e0d\u662f\u659c\u8fb9\uff0c\u6240\u4ee5\u4e0d\u80fd\u7528\u5e38\u89c4\u65b9\u6cd5\u3002\u6539\u7528before\u548cafter\u4e24\u4e2a\u4f2a\u5143\u7d20\u6765\u6a21\u62df\u4e09\u89d2\u5f62\uff0c\u56fa\u5b9a\u5728\u7ebf\u7684\u4e24\u7aef\u3002 *\/\n    &:before {\n      content: \" \";\n      height: 0;\n      position: absolute;\n      top: 0;\n      left: 0;\n      right: 0;\n      border: calc(math.div($with, 2) + 0.6px) solid $color;\n      border-left-color: transparent;\n      border-right-color: transparent;\n      border-top: 0;\n    }\n    &:after {\n      content: \" \";\n      height: 0;\n      position: absolute;\n\n      left: 0;\n      right: 0;\n      bottom: 0;\n      \/\/ top: calc(math.div($with, 2) - 0.5px);\n      border: calc(math.div($with, 2) + 0.6px) solid $color;\n      border-left-color: transparent;\n      border-right-color: transparent;\n      border-bottom: 0;\n    }\n  }\n  .d3 {\n    height: 0;\n    width: calc($boxW - $space * 2);\n    position: absolute;\n    bottom: 0;\n    left: math.div($space, 1);\n\n    right: 0;\n    border: $with solid $color;\n    border-left-color: transparent;\n    border-right-color: transparent;\n    border-top: 0;\n  }\n  .d4,\n  .d6 {\n    width: 0;\n    position: absolute;\n    top: 0;\n    height: math.div($boxH, 2);\n    left: 0;\n\n    border: $with solid $color;\n    border-top-color: transparent;\n    border-bottom-color: transparent;\n    border-right: 0;\n  }\n  .d5,\n  .d7 {\n    width: 0;\n    position: absolute;\n    top: 0;\n    height: math.div($boxH, 2);\n    right: 0;\n\n    border: $with solid $color;\n    border-top-color: transparent;\n    border-bottom-color: transparent;\n    border-left: 0;\n  }\n  .d6,\n  .d7 {\n    top: calc(($boxH) \/ 2);\n  }\n\n}\n<\/pre>\n\n\n\n
react\u90e8\u5206\u76f8\u5bf9\u7b80\u5355<\/p>\n\n\n\n
import '.\/index.scss'\n\n\nexport default function NixieTube (props) {\n\n    let number = props.number;\n\n    \/\/ \u5982\u679c\u4e0d\u662f\u6570\u5b57\uff0c\u5219\u76f4\u63a5\u663e\u793a\u6587\u5b57\u3002\n    if (isNaN(number)) {\n        return (<div className='nixie-tube nixie-text-wrapper'>\n            <div className='nixie-text'>{number}<\/div>\n\n        <\/div>)\n    }\n    number = parseInt(number);\n    return (\n        <div className={'nixie-tube n-' + number}>\n            {[2, 3, 5, 6, 7, 8, 9, 0].includes(number) && <div className='d1'><\/div>}\n            {[2, 3, 4, 5, 6, 8, 9].includes(number) && <div className='d2'><\/div>}\n            {[2, 3, 5, 6, 8, 9, 0].includes(number) && <div className='d3'><\/div>}\n            {[4, 5, 6, 8, 9, 0].includes(number) && <div className='d4'><\/div>}\n            {[1, 2, 3, 4, 7, 8, 9, 0].includes(number) && <div className='d5'><\/div>}\n            {[2, 6, 8, 0].includes(number) && <div className='d6'><\/div>}\n            {[1, 3, 4, 5, 6, 7, 8, 9, 0].includes(number) && <div className='d7'><\/div>}\n\n        <\/div>\n\n    )\n\n}<\/pre>\n\n\n\n
\u4f7f\u7528\u65b9\u6cd5\uff1a<\/p>\n\n\n\n
\u7531\u4e8e\u4ee5\u4e0a\u5b9e\u73b0\u4ec5\u5b9e\u73b0\u4e86\u5355\u4e2a\u5b57\u7b26\u7684\u663e\u793a\uff0c\u5efa\u8bae\u4e8c\u6b21\u5c01\u88c5\uff0c\u53ef\u4ee5\u76f4\u63a5\u663e\u793a\u4e00\u6bb5\u6587\u5b57<\/p>\n\n\n\n
import Nixietube from \"@\/components\/nixietube\/index\";\n\nexport default function (props) {\n\n    const renderNixietube = (text) => {\n\n        if (!text) {\n            return null;\n        }\n        let chars = text.split('').map((c, i) => {\n            return <Nixietube number={c} key={i}><\/Nixietube>\n        });\n\n        return <div className=\"nixietube-container\">{chars}<\/div>\n\n    }\n\n    return renderNixietube(\"\u8fd9\u662f\u6570\u7801\u7ba1\uff1a123456789\" );\n}<\/pre>\n\n\n\n
\u5b9e\u9645\u663e\u793a\u6548\u679c<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\u5176\u4ed6\u8981\u6ce8\u610f\u7684\u5730\u65b9\u3002\u5b57\u7b26\u201c1\u201d\u6bd4\u8f83\u72ed\u7a84\uff0c\u770b\u8d77\u6765\u4f1a\u8d34\u8fd1\u53f3\u4fa7\u6570\u5b57\uff0c\u540c\u65f6\u8ddf\u5de6\u4fa7\u6570\u5b57\u8ddd\u79bb\u8f83\u8fdc\uff0c\u770b\u8d77\u6765\u4f1a\u5f88\u5947\u602a\u3002\u6240\u4ee5\u5199\u6837\u5f0f\u65f6\uff0c\u9002\u5f53\u5c06\u5b57\u7b26\u201c1\u201d\u5411\u5de6\u504f\u79fb30%\u5de6\u53f3\uff0c\u8fd9\u6837\u770b\u8d77\u6765\u4f1a\u534f\u8c03\u5f88\u591a\u3002<\/p>\n\n\n\n
<\/p>\n","protected":false},"excerpt":{"rendered":"
\u5176\u539f\u7406\uff0c\u8fd8\u662f\u5229\u7528border\u5c5e\u6027\u6765\u5b9e\u73b0\u8fb9\u7ebf\u4e24\u7aef\u7684\u659c\u8fb9\u3002\u4e24\u4e2a\u8fb9\u4ea4\u53c9\u7684…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[16],"tags":[17,18,19],"class_list":["post-51","post","type-post","status-publish","format-standard","hentry","category-react","tag-react","tag-18","tag-19"],"_links":{"self":[{"href":"https:\/\/xiuxiejiang.com\/index.php\/wp-json\/wp\/v2\/posts\/51","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/xiuxiejiang.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/xiuxiejiang.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/xiuxiejiang.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/xiuxiejiang.com\/index.php\/wp-json\/wp\/v2\/comments?post=51"}],"version-history":[{"count":9,"href":"https:\/\/xiuxiejiang.com\/index.php\/wp-json\/wp\/v2\/posts\/51\/revisions"}],"predecessor-version":[{"id":69,"href":"https:\/\/xiuxiejiang.com\/index.php\/wp-json\/wp\/v2\/posts\/51\/revisions\/69"}],"wp:attachment":[{"href":"https:\/\/xiuxiejiang.com\/index.php\/wp-json\/wp\/v2\/media?parent=51"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/xiuxiejiang.com\/index.php\/wp-json\/wp\/v2\/categories?post=51"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/xiuxiejiang.com\/index.php\/wp-json\/wp\/v2\/tags?post=51"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}