npm install --registry=https:\/\/registry.npm.taobao.org<\/a><\/p>\n\u5de5\u7a0b\u521d\u59cb\u5316<\/h2>\n\ncmd \u4e00\u4e2a\u6587\u4ef6\u5939<\/li>\nvue create myproject<\/li>\nManually select features<\/li>\nBabel<\/li>\nRouter<\/li>\nVuex<\/li>\nCSS Pre-processors<\/li>\nLinter \/ Formatter<\/li>\n3.x<\/li>\nn<\/li>\nSass\/SCSS (with dart-sass)<\/li>\nESLint + Standard config<\/li>\nLint on save<\/li>\nIn dedicated config files<\/li>\nn<\/li>\nnpm<\/li>\n\u56de\u8f66<\/li>\n\u6253\u5f00 myproject \u9879\u76ee,\u5c06.git .gitignore \u5220\u9664<\/li>\n<\/ul>\n<\/p>\n<\/p><\/noscript>\n\u5de5\u7a0b\u76ee\u5f55\u4ee3\u7801\u7b80\u4ecb\u53ca\u6574\u7406<\/h2>\n<\/p>\n<\/p><\/noscript>\n\u5b89\u88c5\u63d2\u4ef6 ESLint \/ Vetur\nESLint : \u63d0\u793a\u8bed\u6cd5,\u8bed\u6cd5\u6821\u9a8c,\u7b26\u5408\u89c4\u8303\nVetur : \u8bc6\u522b Vue \u4e0a\u7684\u8bed\u6cd5,\u8ba9\u6587\u4ef6\u9ad8\u4eae\u663e\u793a\nnode_modules \u653e\u7684\u4e00\u4e9b\u4f9d\u8d56\u5305\n\u83b7\u53d6 : npm install \u5b89\u88c5\u4f9d\u8d56\npublic : \u5b58\u653e\u7684\u662f\u9ed8\u8ba4\u7684 html \u6a21\u677f\n.editorconfig : \u7f16\u8f91\u5668\u7684\u4e00\u4e9b\u9ed8\u8ba4\u914d\u7f6e\nbabel.config.js : vue \u7684\u4e00\u4e9b\u7528\u5230 babel \u7684\u914d\u7f6e\npackage.json : \u5b58\u653e\u7684\u662f\u4e00\u4e9b\u4f9d\u8d56\u5305\npackage-lock.json : \u4fdd\u8bc1\u591a\u4eba\u534f\u4f5c,\u5b89\u88c5\u4f9d\u8d56\u6709\u56fa\u5b9a\u7684\u7248\u672c\nsrc \u76ee\u5f55 : (\u6e90\u4ee3\u7801\u76ee\u5f55)\n\u5165\u53e3\u6587\u4ef6 : main.js\n\u5c06 App.vue \u6539\u6210<\/p>\n<template>\n<div id="app">123<\/div>\n<\/template>\n<style lang="scss">\n<\/style><\/code><\/pre>\n\u5c06 asstes component \u7684\u5185\u5bb9\u6587\u4ef6\u5220\u4e86\n\u5c06 router->index.js \u2193\u5220\u6389\nimport HomeView from '..\/views\/HomeView.vue'<\/p>\n<\/p>\n<\/p><\/noscript>\n\n\u5c06 views \u7684\u5185\u5bb9\u6587\u4ef6\u5220\u4e86<\/li>\n<\/ul>\n\u57fa\u7840\u6837\u5f0f\u96c6\u6210\u53ca\u5f00\u53d1\u6a21\u62df\u5668\u7684\u4f7f\u7528<\/h2>\n\u4e3a\u4e86\u8ba9\u6211\u4eec\u7684\u6837\u5f0f\u5728\u6240\u6709\u6d4f\u89c8\u5668\u4e0a\u4fdd\u6301\u4e00\u81f4\nnpm install normalize.css@8.0.1 --save<\/p>\n\nmain.js : import 'normalize.css'\n\u5728 src \u4e2d\u521b\u5efa style\/base.css\nhtml{\nfont-size: 100px;\n}\n\/\/ 1rem=html font-size<\/li>\n<\/ul>\n\u79ef\u7d2f\u5199\u6cd5<\/h2>\n\u9002\u5f53\u4f7f\u7528> \u5b50\u5143\u7d20\u9009\u62e9\u5668<\/h3>\n.h_menu .menu_box > ul > li {}<\/p>\n\n\u907f\u514d\u5f71\u54cd\u4e09\u7ea7\u76ee\u5f55\u7684 ul li , A>B \u53ea\u9009\u62e9\u4e00\u4ee3\u3002<\/li>\n<\/ul>\n<\/p>\n<\/p><\/noscript>\n\u4f7f\u7528 v-for \u5faa\u73af\u5982\u4f55\u7ed9\u4e0d\u540c\u5143\u7d20\u8bbe\u7f6e\u4e0d\u540c\u6837\u5f0f<\/h3>\n <div v-for="(item,index) in list" :key="index" :class="'list-' + (index + 1)">\n <img :src="item.url" alt="" class="five_img"\/>\n <\/div><\/code><\/pre>\n\u6587\u5b57\u591a\u65f6,\u9690\u85cf<\/h3>\n.main_content ul li .svg_text {\n width: 86px;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;<\/code><\/pre>\n<\/p>\n<\/p><\/noscript>\n\u8bbe\u7f6e 5 \u500d\u6570\u7684\u5143\u7d20\u7684\u6837\u5f0f<\/h3>\n.main_content ul li:nth-child(5n) {\n margin-right: 0;\n}<\/code><\/pre>\nel-cascader-panel \u7ea7\u8054\u9009\u62e9\u5668\u6837\u5f0f\u66f4\u6539<\/h3>\n<\/p>\n<\/p><\/noscript>\n <div class="h_menu">\n <div class="menu_box">\n <el-cascader-panel :options="findOptions" :props="props"\/>\n <\/div>\n<\/div><\/code><\/pre>\n\/*\u4e8c\u7ea7\u76ee\u5f55*\/\n.topbar .shortcut-links {\n width: 600px;\n margin: 0 auto;\n}\n\n.topbar .shortcut-links > ul > li {\n float: left;\n padding: 13px 20px;\n line-height: 31px;\n font-size: 14px;\n position: relative;\n}\n\n.topbar .shortcut-links > ul > li:hover .h_menu {\n display: block;\n}\n.topbar .shortcut-links > ul > li .h_menu {\n position: absolute;\n left: 0;\n display: none;\n width: 152px;\n margin-top: 13px;\n z-index: 9999;\n}\n.topbar .shortcut-links > ul > li .h_menu .menu_box {\n background: #ffffff;\n width: 152px;\n box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);\n padding: 8px 0 8px 0;\n \/*float: left;*\/\n}\n\n.topbar .shortcut-links > ul > li .h_menu .menu_box >a {\n height: 45px;\n line-height: 45px;\n font-size: 14px;\n padding-left: 20px;\n \/*padding-top: 5px;*\/\n display: block;\n}\n<\/code><\/pre>\nstyle\n\/*\u53d6\u6d88\u8fb9\u6846*\/\n.el-cascader-panel.is-bordered {\n border: none;\n border-radius: 0;\n}\n\n.el-cascader-menu {\n color: #1c1f21;\n font-size: 14px;\n min-width: 152px;\n}\n\n.el-cascader-menu__list {\n padding: 0;\n}\n\n.el-cascader-node.in-active-path, .el-cascader-node.is-active, .el-cascader-node.is-selectable.in-checked-path {\n color: #1c1f21;\n font-weight: normal;\n}\n\/*item \u60ac\u6302\u9ec4\u8272\u80cc\u666f\u5bbd\u95f4\u8ddd*\/\n.el-cascader-node {\n padding-left: 20px;\n height: 45px;\n line-height: 45px;\n}\n\/*\u4e8c\u7ea7\u76ee\u5f55\u7684\u9ad8\u5ea6*\/\n.el-cascader-menu__wrap.el-scrollbar__wrap {\n height: 478px;\n}\n\n.el-cascader-menu:last-child .el-cascader-node {\n padding-right: 0;\n}\n\/*item \u60ac\u6302\u9ec4\u8272\u80cc\u666f*\/\n.el-cascader-node:not(.is-disabled):focus, .el-cascader-node:not(.is-disabled):hover {\n background-color: rgb(255, 242, 0);\n}\n\/*item \u53f3\u8fb9\u7684\u5c0f\u7bad\u5934\u989c\u8272\u6539\u4e3a\u9ec4\u8272[\u9690\u85cf]*\/\n.el-cascader-node:not(.is-disabled):focus, .el-cascader-node:not(.is-disabled):hover .el-icon {\n color: rgb(255, 242, 0);\n}\n\n.el-cascader-node__label {\n padding: 0;\n}\n\n.el-cascader-node__postfix {\n position: absolute;\n right: 0;\n}\n\/*\u6eda\u52a8\u6761\u5230\u9876\u90e8,\u4e0b\u90e8\u7684\u95f4\u8ddd*\/\n.el-scrollbar__bar {\n position: absolute;\n right: 0;\n bottom: 0;\n z-index: 1;\n border-radius: 4px;\n}<\/code><\/pre>\n<\/p>\n<\/p><\/noscript>\n <el-cascader-panel :options="findOptions" :props="props"\/><\/code><\/pre>\n\/*\u4e8c\u7ea7\u76ee\u5f55\u7684\u9ad8\u5ea6*\/\n\/deep\/.el-cascader-menu__wrap.el-scrollbar__wrap {\n height: 490px;\n}\n\/*item \u60ac\u6302\u9ec4\u8272\u80cc\u666f\u5bbd\u95f4\u8ddd*\/\n\/deep\/.el-cascader-node {\nheight: 45px;\n width: 165px;\n padding: 0;\n margin-left: 10px;\n}\n\/*item \u60ac\u6302\u9ec4\u8272\u80cc\u666f*\/\n\/deep\/ .el-cascader-node:not(.is-disabled):hover {\n background: #fff200;\n border-radius: 8px;\n}\n\/*\u70b9\u51fb\u540e\u6539\u53d8\u989c\u8272,\u7c97\u7ec6\u53d6\u6d88\u70b9\u51fb\u6548\u679c*\/\n\/deep\/.el-cascader-node.is-active{\ncolor: #222222;\n font-weight: normal;\n}\n\/*item \u5de6\u8fb9\u6709\u4e2a\u5c0f\u52fe\u221a*\/\n\/deep\/.el-icon svg {\n height: 0;\n width: 0;\n}\n\/*\u53d1\u73b0\u7684\u4e8c\u7ea7\u76ee\u5f55\u6d88\u5931*\/\n.el-cascader-panel{\n display: none;\n}\n\/*\u53d6\u6d88\u8fb9\u6846*\/\n.el-cascader-panel.is-bordered {\n border: none;\n}\n\/*\u60ac\u6302'\u53d1\u73b0'\u76ee\u5f55,\u51fa\u73b0\u4e8c\u7ea7\u76ee\u5f55*\/\n.topbar .shortcut-links > ul > li:nth-child(2):hover .el-cascader-panel{\n display: block;\n background-color: #f8f8f8;\n border-radius: 8px 0 8px 8px;\n}<\/code><\/pre>\n\u626b\u4e8c\u7ef4\u7801\u767b\u5f55\u548c\u5bc6\u7801\u767b\u5f55\u9875\u9762\u7684\u5207\u6362<\/h3>\n@click="handleChangeToLogin()"<\/code><\/pre>\n handleChangeToLogin () {\n const qr = document.getElementById('qr_code')\n const login = document.getElementById('login')\n qr.style.display = 'none';\n if (qr.style.display === 'none') {\n login.style.display = 'block'\n }\n },\n handleChangeToQr () {\n const qr = document.getElementById('qr_code')\n const login = document.getElementById('login')\n login.style.display = 'none'\n if (login.style.display === 'none') {\n qr.style.display = 'block'\n }\n }<\/code><\/pre>\n\u767b\u5f55\u6846\u7684\u6ed1\u5757\u9a8c\u8bc1<\/h3>\n<\/p>\n<\/p><\/noscript>\n<\/slider><\/p>\n<template>\n <div ref="dragDiv" class="drag">\n <div class="drag_bg"><\/div>\n <div class="drag_text">{{ confirmWords }}<\/div>\n <div ref="moveDiv" :class="{'handler_ok_bg':confirmSuccess}" class="handler handler_bg"\n style="position: absolute;top: 0;left: 0;" @mousedown="mouseDownFn($event)"><\/div>\n <\/div>\n<\/template>\n\n<script>\nexport default {\n data () {\n return {\n beginClientX: 0, \/*\u8ddd\u79bb\u5c4f\u5e55\u5de6\u7aef\u8ddd\u79bb*\/\n mouseMoveState: false, \/*\u89e6\u53d1\u62d6\u52a8\u72b6\u6001 \u5224\u65ad*\/\n maxWidth: '', \/*\u62d6\u52a8\u6700\u5927\u5bbd\u5ea6\uff0c\u4f9d\u636e\u6ed1\u5757\u5bbd\u5ea6\u7b97\u51fa\u6765\u7684*\/\n confirmWords: '\u8bf7\u6309\u4f4f\u6ed1\u5757,\u62d6\u52a8\u5230\u6700\u53f3\u8fb9', \/*\u6ed1\u5757\u6587\u5b57*\/\n confirmSuccess: false \/*\u9a8c\u8bc1\u6210\u529f\u5224\u65ad*\/\n }\n },\n methods: {\n \/\/mousedown \u4e8b\u4ef6\n mouseDownFn: function (e) {\n if (!this.confirmSuccess) {\n e.preventDefault && e.preventDefault() \/\/\u963b\u6b62\u6587\u5b57\u9009\u4e2d\u7b49 \u6d4f\u89c8\u5668\u9ed8\u8ba4\u4e8b\u4ef6\n this.mouseMoveState = true\n this.beginClientX = e.clientX\n }\n },\n \/\/\u9a8c\u8bc1\u6210\u529f\u51fd\u6570\n successFunction () {\n this.confirmSuccess = true\n this.confirmWords = '\u9a8c\u8bc1\u901a\u8fc7'\n if (window.addEventListener) {\n document.getElementsByTagName('html')[0].removeEventListener('mousemove', this.mouseMoveFn)\n document.getElementsByTagName('html')[0].removeEventListener('mouseup', this.moseUpFn)\n } else {\n document.getElementsByTagName('html')[0].removeEventListener('mouseup', () => {\n })\n }\n document.getElementsByClassName('drag_text')[0].style.color = '#fff'\n document.getElementsByClassName('handler')[0].style.left = this.maxWidth + 'px'\n document.getElementsByClassName('drag_bg')[0].style.width = this.maxWidth + 'px'\n },\n \/\/mousemove \u4e8b\u4ef6\n mouseMoveFn (e) {\n if (this.mouseMoveState) {\n let width = e.clientX - this.beginClientX\n if (width > 0 && width <= this.maxWidth) {\n document.getElementsByClassName('handler')[0].style.left = width + 'px'\n document.getElementsByClassName('drag_bg')[0].style.width = width + 'px'\n } else if (width > this.maxWidth) {\n this.successFunction()\n }\n }\n },\n \/\/mouseup \u4e8b\u4ef6\n moseUpFn (e) {\n this.mouseMoveState = false\n var width = e.clientX - this.beginClientX\n if (width < this.maxWidth) {\n document.getElementsByClassName('handler')[0].style.left = 0 + 'px'\n document.getElementsByClassName('drag_bg')[0].style.width = 0 + 'px'\n }\n }\n },\n mounted () {\n this.maxWidth = this.$refs.dragDiv.clientWidth - this.$refs.moveDiv.clientWidth\n document.getElementsByTagName('html')[0].addEventListener('mousemove', this.mouseMoveFn)\n document.getElementsByTagName('html')[0].addEventListener('mouseup', this.moseUpFn)\n }\n}\n<\/script>\n<style scoped>\n.drag {\n position: relative;\n background-color: #e8e8e8;\n width: 100%;\n height: 32px;\n line-height: 32px;\n text-align: center;\n border: 1px solid #ccc;\n\n}\n\n.handler {\n width: 40px;\n height: 32px;\n border: 1px solid #ccc;\n cursor: move;\n margin-top: -1px;\n margin-left: -1px;\n}\n\n.handler_bg {\n background: #fff url('..\/assets\/images\/arrow-r.png') no-repeat center;\n background-size: 25px;\n}\n\n.handler_ok_bg {\n background: #fff url('..\/assets\/images\/\u221a.png') no-repeat center;\n background-size: 18px;\n}\n\n.drag_bg {\n background-color: #7ac23c;\n height: 32px;\n width: 0;\n}\n\n.drag_text {\n position: absolute;\n top: 0;\n width: 100%;\n font-size: 12px;\n color: #706f6f;\n}\n\n<\/style>\n<\/code><\/pre>\nel-input \u805a\u7126\u540e\u80cc\u666f\u53d8\u767d<\/h3>\n<\/p>\n<\/p><\/noscript>\n.el-input__wrapper.is-focus {\n box-shadow: 0 0 0 1px #dcdfe6 inset;\n background-color: #fff;\n}<\/code><\/pre>\nel-input placeholder \u989c\u8272\u8bbe\u7f6e<\/h3>\n.el-input__inner::placeholder{\n color: #666666;\n}<\/code><\/pre>\n\u5224\u65ad el-checked \u662f\u5426\u9009\u4e2d,\u672a\u9009\u4e2d\u5219\u63d0\u793a\u8bf7\u52fe\u9009<\/h3>\n<\/p>\n<\/p><\/noscript>\nexport default {\nmounted() {\n const pleaseFit=document.getElementById('pleaseFit');\n $(".el-checkbox input").change(() => {\n if ($(".el-checkbox input[type='checkbox']").is(':checked') == true) {\n pleaseFit.style.display='none'\n } else {\n pleaseFit.style.display='block'\n }\n })\n }\n }<\/code><\/pre>\nel-input \u5728 style \u5168\u5c40\u6837\u5f0f,\u4f1a\u5f71\u54cd\u5230\u5176\u4ed6\u4e0d\u7b26\u5408\u8be5\u6837\u5f0f\u7684\u4f4d\u7f6e<\/h3>\n\n\u53ef\u4ee5\u5728 style scoped> \u5199,\u52a0\u4e0a\/deep\/<\/li>\n<\/ul>\n<\/p>\n<\/p><\/noscript>\n\/deep\/ .el-input__wrapper {\n box-shadow: 0 0 0 0 inset;\n background-color: rgb(255, 242, 0);\n}<\/code><\/pre>\nel-carousel \u8d70\u9a6c\u706f\u4fee\u6539 Carousel \u5de6\u53f3\u4e24\u4fa7\u7bad\u5934\u5b57\u4f53\u5927\u5c0f<\/h3>\n\/deep\/.el-carousel__arrow i {\n font-size: 29px !important;\n }<\/code><\/pre>\n\u9875\u9762\u5411\u4e0b\u6ed1\u52a8\u5bfc\u822a\u680f\u56fa\u5b9a<\/h3>\n<\/p>\n<\/p><\/noscript>\n.main_nav_fixed {\n position: sticky;\n top: 0;\n z-index: 999;\n}<\/code><\/pre>\n\u56fa\u5b9a\u5728\u53f3\u65b9\u7684,\u60ac\u6302\u51fa\u73b0\u4e8c\u7ef4\u7801<\/h3>\n<\/p>\n<\/p><\/noscript>\n<div class="share_box">\n <img src="..\/..\/assets\/images\/share_qr.png" alt=""\/>\n <\/div><\/code><\/pre>\n.share_box{\n width: 70px;\n height: 131px;\n top: 300px;\n right: 10px;\n cursor: pointer;\n position: fixed;\n z-index: 999;\n background: url("..\/..\/assets\/images\/share_wx.jpg") no-repeat;\n background-size: 100% 100%;\n}\n.share_box img{\n width: 100px;\n height: 100px;\n display: none;\n}\n.share_box:hover img {\n position: absolute;\n top: 50%;\n margin-top: -50px;\n right: 82px;\n display: block !important;\n}<\/code><\/pre>\nnth-child(n)\u6307\u7684\u662f\u5728\u7236\u5143\u7d20\u4e2d\u6240\u6709\u7684\u5143\u7d20\u7684\u987a\u5e8f<\/h3>\n\n\u5199\u4ee3\u7801\u8981\u6839\u636e\u76d2\u5b50\u4ee5\u53ca\u5185\u5bb9\u5199<\/li>\nbottom\uff1a0\uff1b\u8981\u76f8\u5bf9\u4e8e\u7236\u5143\u7d20\u7684 height \u5b9e\u73b0\uff0c\u5982\u679c\u7236\u7236\u5143\u7d20\u7684 height \u5927\u4e8e\u7236\u5143\u7d20\u7684 height\uff0c\uff0c\u5219\u4f1a\u6309\u7167\u7236\u7236\u5143\u7d20\u7684 height \u6765\u5b9e\u73b0 bottom\uff1a0\uff1b\u6765\u5b9e\u73b0\u3002\u3010\u9002\u5f53\u5220\u9664\u7236\u7236\u5143\u7d20\u7684 height\uff0c\u4e00\u677f\u5757\u901a\u5e38\u4e0d\u7528\u8bbe\u7f6e\u603b height\u3011<\/li>\n<\/ul>\n\u60ac\u6302\u56fe\u7247\u7f13\u7f13\u653e\u5927\u7684\u52a8\u753b\u6548\u679c<\/h3>\n<\/p>\n<\/p><\/noscript>\n.gc_project .item_img > img {\n width: 100%;\n height: 100%;\n transition: all 0.3s;\n}\n.gc_project .item_img > img:hover {\n transform: scale(1.05);\n box-shadow: rgb(0 0 0 \/ 23%) 0 4px 14px 0;\n}<\/code><\/pre>\n\u6eda\u52a8\u6761\u4fee\u6539<\/h3>\n<\/p>\n<\/p><\/noscript>\n.mleft::-webkit-scrollbar{\n width: 6px;\n background-color: #f8f8f8;\n\n}\n.mleft::-webkit-scrollbar-thumb{\n width: 6px;\n background-color: #adacac;\n border-radius: 4px;\n}<\/code><\/pre>\nhead \u533a '\u53d1\u73b0' \u5b9e\u73b0\u4ea4\u4e92\u6548\u679c [\u8be5\u9996\u9875\u6700\u607c\u706b\u7684]<\/h2>\n<\/p>\n<\/p><\/noscript>\ntodo head \u533a'\u53d1\u73b0'\u4ea4\u4e92\u5b9e\u73b0\u601d\u8def:<\/h3>\n\n\u2460\u89c2\u5bdf\u8be5\u533a\u7ed3\u6784,\u4e00\u4e2a\u5927\u6a21\u5757,\u5176\u4e2d\u5206\u4e3a\u5de6\u4e2d\u53f3\u4e09\u4e2a\u6a21\u5757,\u5e76\u4f9d\u6b21\u5199\u51fa\u4e09\u4e2a\u6a21\u5757\u7684\u4ee3\u7801,<\/li>\n\u2461\u5de6\u4fa7\u533a\u57df: \u8981\u5c55\u793a\u7684\u6548\u679c\u6709: \u9f20\u6807\u4e0a\u4e0b\u79fb\u52a8,\u6240\u7ecf\u7684 menuItem \u4f1a\u5c55\u73b0\u9ec4\u8272\u80cc\u666f, \u5219\u5f15\u7528 vue \u7684 ref \u5c5e\u6027\u5bf9 DOM \u5143\u7d20\u8fdb\u884c\u52a8\u6001\u7ed1\u5b9a.\n\n\u6ce8\u610f:ref \u9700\u8981\u5728 dom \u6e32\u67d3\u5b8c\u6210\u540e\u624d\u4f1a\u6709,\u5728\u4f7f\u7528\u7684\u65f6\u5019\u786e\u4fdd dom \u5df2\u7ecf\u6e32\u67d3\u5b8c\u6210, \u6bd4\u5982\u5728\u751f\u547d\u5468\u671f mounted(){}\u94a9\u5b50\u4e2d\u8c03\u7528. this.$refs.xxx:\u51cf\u5c11\u83b7\u53d6 dom \u8282\u70b9\u7684\u6d88\u8017<\/li>\n<\/ul>\n<\/li>\n\u2462\u5de6\u4fa7\u533a\u57df\u8fc7\u6ee4\u5230\u53f3\u4fa7\u533a\u57df,\u5c55\u793a\u5bf9\u5e94\u7684\u8be6\u60c5\u9875: mleftIn(item,index)\u51fd\u6570\u901a\u8fc7\u4f20\u8f93 v-for \u5faa\u73af\u4e2d\u6570\u7ec4 menuList \u7684 item \u6bcf\u4e00\u9879\u4e3a\u5a92\u4ecb, \u800c\u6570\u636e\u4e2d menuList \u4e2d\u5305\u542b\u5de6\u4fa7\u6570\u636e menuItem \u4e0e\u53f3\u4fa7\u6bcf\u4e00\u9875\u7684\u6807\u9898 menu \u76f8\u540c, \u4ece\u800c\u5c06\u5de6\u4fa7\u548c\u53f3\u4fa7\u6570\u636e\u7ed1\u5b9a, \u6545\u800c\u5f62\u6210\u4ece\u5de6\u4fa7\u8fc7\u6ee4\u5230\u53f3\u4fa7\u533a\u57df\u662f\u56fa\u5b9a\u7684\u8be6\u60c5\u9875\u5185\u5bb9.<\/li>\n\u2463\u9875\u9762\u7b2c\u4e8c\u6b21\u672a\u5237\u65b0\u4e4b\u524d(\u9996\u6b21\u8fdb\u5165\u9875\u9762\u6e32\u67d3), \u9f20\u6807\u60ac\u6302'\u53d1\u73b0',\u8981\u51fa\u73b0\u7b2c\u4e00\u4e2a'\u7cbe\u9009'\u8be6\u60c5\u9875\u53ca'\u7cbe\u9009'item \u80cc\u666f\u53d8\u9ec4: \u9f20\u6807\u79fb\u51fa\u8be5\u5143\u7d20[\u4e8c\u7ea7\u76ee\u5f55\u6574\u4e2a\u5927\u6a21\u5757]\u4e4b\u5916,\u5219\u89e6\u53d1 mouseleave \u4e8b\u4ef6,\u521d\u59cb\u5316\u6570\u636e.<\/li>\n\u2464\u7b2c\u4e8c\u6b21\u9875\u9762\u5237\u65b0\u4e4b\u540e,\u521d\u59cb\u5316\u6570\u636e: \u91c7\u7528 mounted \u751f\u547d\u5468\u671f[\u6e32\u67d3\u6210 html \u540e\u8c03\u7528]: \u4f7f\u9f20\u6807\u60ac\u6302'\u53d1\u73b0',\u7b2c\u4e00\u4e2a menu-item \u663e\u793a\u9ec4\u8272<\/li>\n<\/ul>\n <li class="find">\n <a href="#">\u53d1\u73b0<\/a>\n <div class="h_menu" @mouseleave="mleftLeave()">\n <div class="menu_box mleft">\n <!-- <a href="">\u7cbe\u9009<\/a>-->\n <a v-for="(item,index) in menuList" :key="index" :ref="'test'+index" href="javascript:;"\n @mouseover="mleftIn(item,index)">{{ item.menu }}<\/a>\n <!-- <el-cascader-panel :options="findOptions" :props="props" \/>-->\n <\/div>\n <div class="mright">\n <div class="cate-box">\n <a class="cate-title" href="">\n <img :src="data.url" alt="">\n <span>{{ data.menu }}<\/span>\n <\/a>\n <div class="subCate">\n <a v-for="(itemOne) in data.items" :key="itemOne">{{ itemOne.text }}<\/a>\n <\/div>\n <\/div>\n <\/div>\n <div class="right_bar">\n <div class="icons">\n <a>\n <span class="icon-box">\n <span class="tangle-1"><\/span>\n <span class="tangle-2"><\/span>\n <i class="ani-star"><\/i>\n <span class="tangle-3"><\/span>\n <\/span>\n <span class="icon-text">\u6536\u85cf\u5939<\/span>\n <\/a>\n <a>\n <img alt="" src="..\/assets\/images\/icon-header-discover-designer.png">\n <span>\u8bbe\u8ba1\u5e08<\/span>\n <\/a>\n <a>\n <img alt="" src="..\/assets\/images\/icon-header-discover-focus.png">\n <span>\u699c\u5355<\/span>\n <!-- <sup class="subNavDot"><\/sup>-->\n <\/a>\n <\/div>\n <div class="ad_box">\n\n <\/div>\n <\/div>\n <\/div>\n <\/li><\/code><\/pre>\n data: {},\n menuList: [\n {\n menu: '\u7cbe\u9009',\n url: require('..\/assets\/images\/zuanshi.png'),\n items: [\n { text: '\u8fd0\u8425\u8bbe\u8ba1' },\n { text: '\u5305\u88c5' },\n { text: '\u52a8\u753b\/\u5f71\u89c6' },\n { text: '\u4eba\u50cf\u6444\u5f71' },\n { text: '\u5546\u4e1a\u63d2\u753b' },\n { text: '\u7535\u5546' },\n { text: 'APP \u754c\u9762' },\n { text: '\u827a\u672f\u63d2\u753b' },\n { text: '\u5bb6\u88c5\u8bbe\u8ba1' },\n { text: '\u6d77\u62a5' },\n { text: '\u6587\u7ae0' }\n ]\n },\n { menu: '\u5e73\u9762' },\n { menu: 'UI' },\n { menu: '\u7f51\u9875' },\n { menu: '\u63d2\u753b' },\n { menu: '\u52a8\u6f2b' },\n { menu: '\u6444\u5f71' },\n { menu: '\u7a7a\u95f4' },\n { menu: '\u5de5\u4e1a\/\u4ea7\u54c1' },\n { menu: '\u4e09\u7ef4' },\n { menu: '\u5f71\u89c6' },\n { menu: '\u624b\u5de5\u827a' },\n { menu: '\u7eaf\u827a\u672f' },\n { menu: '\u670d\u88c5' },\n { menu: '\u5176\u4ed6' }\n ],<\/code><\/pre>\n \/\/\u6e32\u67d3\u6210 html \u4e4b\u524d\u8c03\u7528,\u521d\u59cb\u5316\u4e00\u4e9b\u5c5e\u6027\u503c [\u9f20\u6807\u60ac\u6302'\u53d1\u73b0',\u5c31\u51fa\u73b0\u7b2c\u4e00\u4e2a\u7cbe\u9009\u9875\u9762]\n created () {\n this.data = this.menuList[0]\n },\n \/\/\u6e32\u67d3\u6210 html \u540e\u8c03\u7528 [\u9f20\u6807\u60ac\u6302'\u53d1\u73b0',\u7b2c\u4e00\u4e2a menu-item \u663e\u793a\u9ec4\u8272](\u9875\u9762\u5237\u65b0\u4e86\u4e4b\u540e\u7684)\n mounted () {\n this.$refs['test' + 0][0].style.backgroundColor = 'rgb(255, 242, 0)'\n },\n methods: {\n \/\/\u9f20\u6807\u8fdb\u5165\u51fd\u6570\n mleftIn (item, index) {\n \/\/\u83b7\u53d6 menuList \u4e2d\u6bcf\u4e2a menuItem \u5b57\u7b26\u4e32\u7684\u957f\u5ea6\n let menuSize = this.menuList.length\n for (let i = 0; i < menuSize; i++) {\n \/\/for \u5faa\u73af,i \u5982\u679c\u5c0f\u4e8e menuSize,\u5219\u7f6e\u4e8e menuItem \u989c\u8272\u4e3a\u7070\u8272,\u5b9e\u73b0\u5207\u6362\u6548\u679c\n this.$refs['test' + i][0].style.backgroundColor = '#f8f8f8'\n }\n \/\/\u8df3\u51fa for \u5faa\u73af,\u7531\u5de6\u4fa7\u79fb\u5411\u53f3\u4fa7\u8be6\u60c5\u9875\u65f6,\u5176 menuItem \u7684\u989c\u8272\u4e3a\u9ec4\u8272\n this.$refs['test' + index][0].style.backgroundColor = 'rgb(255, 242, 0)'\n \/\/\u5c06\u53f3\u4fa7\u6570\u636e\u8bbe\u7f6e\u4e3a item,\u663e\u793a\u6570\u636e\n this.data = item\n },\n \/\/\u9f20\u6807\u8fdb\u5165\u51fd\u6570\n \/\/\u6ce8\u610f: mouseleave:\u662f\u9f20\u6807\u79fb\u51fa\u8be5\u5143\u7d20\u4e4b\u5916,\u5219\u89e6\u53d1 mouseleave \u4e8b\u4ef6\n \/\/ mouseout : \u662f\u5f53\u6307\u9488\u79bb\u5f00\u8be5\u5143\u7d20\u53ca\u5176\u6240\u6709\u540e\u4ee3\u65f6\uff0c\u4f1a\u89e6\u53d1 mouseleave\n \/\/ \u800c\u5f53\u6307\u9488\u79bb\u5f00\u5143\u7d20\u6216\u79bb\u5f00\u5143\u7d20\u7684\u540e\u4ee3\uff08\u5373\u4f7f\u6307\u9488\u4ecd\u5728\u5143\u7d20\u5185\uff09\u65f6\uff0c\u4e5f\u4f1a\u89e6\u53d1 mouseout \u4e8b\u4ef6\n mleftLeave () {\n \/\/\u83b7\u53d6 menuList \u4e2d\u6bcf\u4e2a menuItem \u5b57\u7b26\u4e32\u7684\u957f\u5ea6\n let menuSize = this.menuList.length\n for (let i = 0; i < menuSize; i++) {\n this.$refs['test' + i][0].style.backgroundColor = '#f8f8f8'\n }\n \/\/ \u8df3\u51fa\u5faa\u73af,\u6d4f\u89c8\u5b8c'\u53d1\u73b0',\u9f20\u6807\u79fb\u51fa,\u7f6e\u4e8e\u53f3\u4fa7\u6570\u636e\u4e3a\u7b2c\u4e00\u4e2a\u7cbe\u9009\u6570\u636e\n this.data = this.menuList[0]\n \/\/\u9f20\u6807\u79fb\u51fa\u4e8b\u4ef6,\u7f6e\u4e8e\u7b2c\u4e00\u4e2a menuitem \u4e3a\u9ec4\u8272[\u672a\u5237\u65b0\u65f6\u7684\u8bbe\u7f6e]\n this.$refs['test' + 0][0].style.backgroundColor = 'rgb(255, 242, 0)'\n\n \/\/ this.data = {}\n \/\/ this.$refs['test'+index][0].style.backgroundColor = '#f8f8f8'\n \/\/ console.log('\u6eda\u51fa\u53bb')\n },\n}<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"\u4e0b\u8f7d\u4f9d\u8d56\u901f\u5ea6\u5feb npm install –registry=https:\/\/registry.npm.tao […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[],"class_list":["post-3462","post","type-post","status-publish","format-standard","hentry","category-web"],"_links":{"self":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/3462","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3462"}],"version-history":[{"count":38,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/3462\/revisions"}],"predecessor-version":[{"id":3558,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/3462\/revisions\/3558"}],"wp:attachment":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3462"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=3462"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=3462"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
<\/p>\n<\/p><\/noscript>\n\u5de5\u7a0b\u76ee\u5f55\u4ee3\u7801\u7b80\u4ecb\u53ca\u6574\u7406<\/h2>\n<\/p>\n<\/p><\/noscript>\n\u5b89\u88c5\u63d2\u4ef6 ESLint \/ Vetur\nESLint : \u63d0\u793a\u8bed\u6cd5,\u8bed\u6cd5\u6821\u9a8c,\u7b26\u5408\u89c4\u8303\nVetur : \u8bc6\u522b Vue \u4e0a\u7684\u8bed\u6cd5,\u8ba9\u6587\u4ef6\u9ad8\u4eae\u663e\u793a\nnode_modules \u653e\u7684\u4e00\u4e9b\u4f9d\u8d56\u5305\n\u83b7\u53d6 : npm install \u5b89\u88c5\u4f9d\u8d56\npublic : \u5b58\u653e\u7684\u662f\u9ed8\u8ba4\u7684 html \u6a21\u677f\n.editorconfig : \u7f16\u8f91\u5668\u7684\u4e00\u4e9b\u9ed8\u8ba4\u914d\u7f6e\nbabel.config.js : vue \u7684\u4e00\u4e9b\u7528\u5230 babel \u7684\u914d\u7f6e\npackage.json : \u5b58\u653e\u7684\u662f\u4e00\u4e9b\u4f9d\u8d56\u5305\npackage-lock.json : \u4fdd\u8bc1\u591a\u4eba\u534f\u4f5c,\u5b89\u88c5\u4f9d\u8d56\u6709\u56fa\u5b9a\u7684\u7248\u672c\nsrc \u76ee\u5f55 : (\u6e90\u4ee3\u7801\u76ee\u5f55)\n\u5165\u53e3\u6587\u4ef6 : main.js\n\u5c06 App.vue \u6539\u6210<\/p>\n<template>\n<div id="app">123<\/div>\n<\/template>\n<style lang="scss">\n<\/style><\/code><\/pre>\n\u5c06 asstes component \u7684\u5185\u5bb9\u6587\u4ef6\u5220\u4e86\n\u5c06 router->index.js \u2193\u5220\u6389\nimport HomeView from '..\/views\/HomeView.vue'<\/p>\n<\/p>\n<\/p><\/noscript>\n\n\u5c06 views \u7684\u5185\u5bb9\u6587\u4ef6\u5220\u4e86<\/li>\n<\/ul>\n\u57fa\u7840\u6837\u5f0f\u96c6\u6210\u53ca\u5f00\u53d1\u6a21\u62df\u5668\u7684\u4f7f\u7528<\/h2>\n\u4e3a\u4e86\u8ba9\u6211\u4eec\u7684\u6837\u5f0f\u5728\u6240\u6709\u6d4f\u89c8\u5668\u4e0a\u4fdd\u6301\u4e00\u81f4\nnpm install normalize.css@8.0.1 --save<\/p>\n\nmain.js : import 'normalize.css'\n\u5728 src \u4e2d\u521b\u5efa style\/base.css\nhtml{\nfont-size: 100px;\n}\n\/\/ 1rem=html font-size<\/li>\n<\/ul>\n\u79ef\u7d2f\u5199\u6cd5<\/h2>\n\u9002\u5f53\u4f7f\u7528> \u5b50\u5143\u7d20\u9009\u62e9\u5668<\/h3>\n.h_menu .menu_box > ul > li {}<\/p>\n\n\u907f\u514d\u5f71\u54cd\u4e09\u7ea7\u76ee\u5f55\u7684 ul li , A>B \u53ea\u9009\u62e9\u4e00\u4ee3\u3002<\/li>\n<\/ul>\n<\/p>\n<\/p><\/noscript>\n\u4f7f\u7528 v-for \u5faa\u73af\u5982\u4f55\u7ed9\u4e0d\u540c\u5143\u7d20\u8bbe\u7f6e\u4e0d\u540c\u6837\u5f0f<\/h3>\n <div v-for="(item,index) in list" :key="index" :class="'list-' + (index + 1)">\n <img :src="item.url" alt="" class="five_img"\/>\n <\/div><\/code><\/pre>\n\u6587\u5b57\u591a\u65f6,\u9690\u85cf<\/h3>\n.main_content ul li .svg_text {\n width: 86px;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;<\/code><\/pre>\n<\/p>\n<\/p><\/noscript>\n\u8bbe\u7f6e 5 \u500d\u6570\u7684\u5143\u7d20\u7684\u6837\u5f0f<\/h3>\n.main_content ul li:nth-child(5n) {\n margin-right: 0;\n}<\/code><\/pre>\nel-cascader-panel \u7ea7\u8054\u9009\u62e9\u5668\u6837\u5f0f\u66f4\u6539<\/h3>\n<\/p>\n<\/p><\/noscript>\n <div class="h_menu">\n <div class="menu_box">\n <el-cascader-panel :options="findOptions" :props="props"\/>\n <\/div>\n<\/div><\/code><\/pre>\n\/*\u4e8c\u7ea7\u76ee\u5f55*\/\n.topbar .shortcut-links {\n width: 600px;\n margin: 0 auto;\n}\n\n.topbar .shortcut-links > ul > li {\n float: left;\n padding: 13px 20px;\n line-height: 31px;\n font-size: 14px;\n position: relative;\n}\n\n.topbar .shortcut-links > ul > li:hover .h_menu {\n display: block;\n}\n.topbar .shortcut-links > ul > li .h_menu {\n position: absolute;\n left: 0;\n display: none;\n width: 152px;\n margin-top: 13px;\n z-index: 9999;\n}\n.topbar .shortcut-links > ul > li .h_menu .menu_box {\n background: #ffffff;\n width: 152px;\n box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);\n padding: 8px 0 8px 0;\n \/*float: left;*\/\n}\n\n.topbar .shortcut-links > ul > li .h_menu .menu_box >a {\n height: 45px;\n line-height: 45px;\n font-size: 14px;\n padding-left: 20px;\n \/*padding-top: 5px;*\/\n display: block;\n}\n<\/code><\/pre>\nstyle\n\/*\u53d6\u6d88\u8fb9\u6846*\/\n.el-cascader-panel.is-bordered {\n border: none;\n border-radius: 0;\n}\n\n.el-cascader-menu {\n color: #1c1f21;\n font-size: 14px;\n min-width: 152px;\n}\n\n.el-cascader-menu__list {\n padding: 0;\n}\n\n.el-cascader-node.in-active-path, .el-cascader-node.is-active, .el-cascader-node.is-selectable.in-checked-path {\n color: #1c1f21;\n font-weight: normal;\n}\n\/*item \u60ac\u6302\u9ec4\u8272\u80cc\u666f\u5bbd\u95f4\u8ddd*\/\n.el-cascader-node {\n padding-left: 20px;\n height: 45px;\n line-height: 45px;\n}\n\/*\u4e8c\u7ea7\u76ee\u5f55\u7684\u9ad8\u5ea6*\/\n.el-cascader-menu__wrap.el-scrollbar__wrap {\n height: 478px;\n}\n\n.el-cascader-menu:last-child .el-cascader-node {\n padding-right: 0;\n}\n\/*item \u60ac\u6302\u9ec4\u8272\u80cc\u666f*\/\n.el-cascader-node:not(.is-disabled):focus, .el-cascader-node:not(.is-disabled):hover {\n background-color: rgb(255, 242, 0);\n}\n\/*item \u53f3\u8fb9\u7684\u5c0f\u7bad\u5934\u989c\u8272\u6539\u4e3a\u9ec4\u8272[\u9690\u85cf]*\/\n.el-cascader-node:not(.is-disabled):focus, .el-cascader-node:not(.is-disabled):hover .el-icon {\n color: rgb(255, 242, 0);\n}\n\n.el-cascader-node__label {\n padding: 0;\n}\n\n.el-cascader-node__postfix {\n position: absolute;\n right: 0;\n}\n\/*\u6eda\u52a8\u6761\u5230\u9876\u90e8,\u4e0b\u90e8\u7684\u95f4\u8ddd*\/\n.el-scrollbar__bar {\n position: absolute;\n right: 0;\n bottom: 0;\n z-index: 1;\n border-radius: 4px;\n}<\/code><\/pre>\n<\/p>\n<\/p><\/noscript>\n <el-cascader-panel :options="findOptions" :props="props"\/><\/code><\/pre>\n\/*\u4e8c\u7ea7\u76ee\u5f55\u7684\u9ad8\u5ea6*\/\n\/deep\/.el-cascader-menu__wrap.el-scrollbar__wrap {\n height: 490px;\n}\n\/*item \u60ac\u6302\u9ec4\u8272\u80cc\u666f\u5bbd\u95f4\u8ddd*\/\n\/deep\/.el-cascader-node {\nheight: 45px;\n width: 165px;\n padding: 0;\n margin-left: 10px;\n}\n\/*item \u60ac\u6302\u9ec4\u8272\u80cc\u666f*\/\n\/deep\/ .el-cascader-node:not(.is-disabled):hover {\n background: #fff200;\n border-radius: 8px;\n}\n\/*\u70b9\u51fb\u540e\u6539\u53d8\u989c\u8272,\u7c97\u7ec6\u53d6\u6d88\u70b9\u51fb\u6548\u679c*\/\n\/deep\/.el-cascader-node.is-active{\ncolor: #222222;\n font-weight: normal;\n}\n\/*item \u5de6\u8fb9\u6709\u4e2a\u5c0f\u52fe\u221a*\/\n\/deep\/.el-icon svg {\n height: 0;\n width: 0;\n}\n\/*\u53d1\u73b0\u7684\u4e8c\u7ea7\u76ee\u5f55\u6d88\u5931*\/\n.el-cascader-panel{\n display: none;\n}\n\/*\u53d6\u6d88\u8fb9\u6846*\/\n.el-cascader-panel.is-bordered {\n border: none;\n}\n\/*\u60ac\u6302'\u53d1\u73b0'\u76ee\u5f55,\u51fa\u73b0\u4e8c\u7ea7\u76ee\u5f55*\/\n.topbar .shortcut-links > ul > li:nth-child(2):hover .el-cascader-panel{\n display: block;\n background-color: #f8f8f8;\n border-radius: 8px 0 8px 8px;\n}<\/code><\/pre>\n\u626b\u4e8c\u7ef4\u7801\u767b\u5f55\u548c\u5bc6\u7801\u767b\u5f55\u9875\u9762\u7684\u5207\u6362<\/h3>\n@click="handleChangeToLogin()"<\/code><\/pre>\n handleChangeToLogin () {\n const qr = document.getElementById('qr_code')\n const login = document.getElementById('login')\n qr.style.display = 'none';\n if (qr.style.display === 'none') {\n login.style.display = 'block'\n }\n },\n handleChangeToQr () {\n const qr = document.getElementById('qr_code')\n const login = document.getElementById('login')\n login.style.display = 'none'\n if (login.style.display === 'none') {\n qr.style.display = 'block'\n }\n }<\/code><\/pre>\n\u767b\u5f55\u6846\u7684\u6ed1\u5757\u9a8c\u8bc1<\/h3>\n<\/p>\n<\/p><\/noscript>\n<\/slider><\/p>\n<template>\n <div ref="dragDiv" class="drag">\n <div class="drag_bg"><\/div>\n <div class="drag_text">{{ confirmWords }}<\/div>\n <div ref="moveDiv" :class="{'handler_ok_bg':confirmSuccess}" class="handler handler_bg"\n style="position: absolute;top: 0;left: 0;" @mousedown="mouseDownFn($event)"><\/div>\n <\/div>\n<\/template>\n\n<script>\nexport default {\n data () {\n return {\n beginClientX: 0, \/*\u8ddd\u79bb\u5c4f\u5e55\u5de6\u7aef\u8ddd\u79bb*\/\n mouseMoveState: false, \/*\u89e6\u53d1\u62d6\u52a8\u72b6\u6001 \u5224\u65ad*\/\n maxWidth: '', \/*\u62d6\u52a8\u6700\u5927\u5bbd\u5ea6\uff0c\u4f9d\u636e\u6ed1\u5757\u5bbd\u5ea6\u7b97\u51fa\u6765\u7684*\/\n confirmWords: '\u8bf7\u6309\u4f4f\u6ed1\u5757,\u62d6\u52a8\u5230\u6700\u53f3\u8fb9', \/*\u6ed1\u5757\u6587\u5b57*\/\n confirmSuccess: false \/*\u9a8c\u8bc1\u6210\u529f\u5224\u65ad*\/\n }\n },\n methods: {\n \/\/mousedown \u4e8b\u4ef6\n mouseDownFn: function (e) {\n if (!this.confirmSuccess) {\n e.preventDefault && e.preventDefault() \/\/\u963b\u6b62\u6587\u5b57\u9009\u4e2d\u7b49 \u6d4f\u89c8\u5668\u9ed8\u8ba4\u4e8b\u4ef6\n this.mouseMoveState = true\n this.beginClientX = e.clientX\n }\n },\n \/\/\u9a8c\u8bc1\u6210\u529f\u51fd\u6570\n successFunction () {\n this.confirmSuccess = true\n this.confirmWords = '\u9a8c\u8bc1\u901a\u8fc7'\n if (window.addEventListener) {\n document.getElementsByTagName('html')[0].removeEventListener('mousemove', this.mouseMoveFn)\n document.getElementsByTagName('html')[0].removeEventListener('mouseup', this.moseUpFn)\n } else {\n document.getElementsByTagName('html')[0].removeEventListener('mouseup', () => {\n })\n }\n document.getElementsByClassName('drag_text')[0].style.color = '#fff'\n document.getElementsByClassName('handler')[0].style.left = this.maxWidth + 'px'\n document.getElementsByClassName('drag_bg')[0].style.width = this.maxWidth + 'px'\n },\n \/\/mousemove \u4e8b\u4ef6\n mouseMoveFn (e) {\n if (this.mouseMoveState) {\n let width = e.clientX - this.beginClientX\n if (width > 0 && width <= this.maxWidth) {\n document.getElementsByClassName('handler')[0].style.left = width + 'px'\n document.getElementsByClassName('drag_bg')[0].style.width = width + 'px'\n } else if (width > this.maxWidth) {\n this.successFunction()\n }\n }\n },\n \/\/mouseup \u4e8b\u4ef6\n moseUpFn (e) {\n this.mouseMoveState = false\n var width = e.clientX - this.beginClientX\n if (width < this.maxWidth) {\n document.getElementsByClassName('handler')[0].style.left = 0 + 'px'\n document.getElementsByClassName('drag_bg')[0].style.width = 0 + 'px'\n }\n }\n },\n mounted () {\n this.maxWidth = this.$refs.dragDiv.clientWidth - this.$refs.moveDiv.clientWidth\n document.getElementsByTagName('html')[0].addEventListener('mousemove', this.mouseMoveFn)\n document.getElementsByTagName('html')[0].addEventListener('mouseup', this.moseUpFn)\n }\n}\n<\/script>\n<style scoped>\n.drag {\n position: relative;\n background-color: #e8e8e8;\n width: 100%;\n height: 32px;\n line-height: 32px;\n text-align: center;\n border: 1px solid #ccc;\n\n}\n\n.handler {\n width: 40px;\n height: 32px;\n border: 1px solid #ccc;\n cursor: move;\n margin-top: -1px;\n margin-left: -1px;\n}\n\n.handler_bg {\n background: #fff url('..\/assets\/images\/arrow-r.png') no-repeat center;\n background-size: 25px;\n}\n\n.handler_ok_bg {\n background: #fff url('..\/assets\/images\/\u221a.png') no-repeat center;\n background-size: 18px;\n}\n\n.drag_bg {\n background-color: #7ac23c;\n height: 32px;\n width: 0;\n}\n\n.drag_text {\n position: absolute;\n top: 0;\n width: 100%;\n font-size: 12px;\n color: #706f6f;\n}\n\n<\/style>\n<\/code><\/pre>\nel-input \u805a\u7126\u540e\u80cc\u666f\u53d8\u767d<\/h3>\n<\/p>\n<\/p><\/noscript>\n.el-input__wrapper.is-focus {\n box-shadow: 0 0 0 1px #dcdfe6 inset;\n background-color: #fff;\n}<\/code><\/pre>\nel-input placeholder \u989c\u8272\u8bbe\u7f6e<\/h3>\n.el-input__inner::placeholder{\n color: #666666;\n}<\/code><\/pre>\n\u5224\u65ad el-checked \u662f\u5426\u9009\u4e2d,\u672a\u9009\u4e2d\u5219\u63d0\u793a\u8bf7\u52fe\u9009<\/h3>\n<\/p>\n<\/p><\/noscript>\nexport default {\nmounted() {\n const pleaseFit=document.getElementById('pleaseFit');\n $(".el-checkbox input").change(() => {\n if ($(".el-checkbox input[type='checkbox']").is(':checked') == true) {\n pleaseFit.style.display='none'\n } else {\n pleaseFit.style.display='block'\n }\n })\n }\n }<\/code><\/pre>\nel-input \u5728 style \u5168\u5c40\u6837\u5f0f,\u4f1a\u5f71\u54cd\u5230\u5176\u4ed6\u4e0d\u7b26\u5408\u8be5\u6837\u5f0f\u7684\u4f4d\u7f6e<\/h3>\n\n\u53ef\u4ee5\u5728 style scoped> \u5199,\u52a0\u4e0a\/deep\/<\/li>\n<\/ul>\n<\/p>\n<\/p><\/noscript>\n\/deep\/ .el-input__wrapper {\n box-shadow: 0 0 0 0 inset;\n background-color: rgb(255, 242, 0);\n}<\/code><\/pre>\nel-carousel \u8d70\u9a6c\u706f\u4fee\u6539 Carousel \u5de6\u53f3\u4e24\u4fa7\u7bad\u5934\u5b57\u4f53\u5927\u5c0f<\/h3>\n\/deep\/.el-carousel__arrow i {\n font-size: 29px !important;\n }<\/code><\/pre>\n\u9875\u9762\u5411\u4e0b\u6ed1\u52a8\u5bfc\u822a\u680f\u56fa\u5b9a<\/h3>\n<\/p>\n<\/p><\/noscript>\n.main_nav_fixed {\n position: sticky;\n top: 0;\n z-index: 999;\n}<\/code><\/pre>\n\u56fa\u5b9a\u5728\u53f3\u65b9\u7684,\u60ac\u6302\u51fa\u73b0\u4e8c\u7ef4\u7801<\/h3>\n<\/p>\n<\/p><\/noscript>\n<div class="share_box">\n <img src="..\/..\/assets\/images\/share_qr.png" alt=""\/>\n <\/div><\/code><\/pre>\n.share_box{\n width: 70px;\n height: 131px;\n top: 300px;\n right: 10px;\n cursor: pointer;\n position: fixed;\n z-index: 999;\n background: url("..\/..\/assets\/images\/share_wx.jpg") no-repeat;\n background-size: 100% 100%;\n}\n.share_box img{\n width: 100px;\n height: 100px;\n display: none;\n}\n.share_box:hover img {\n position: absolute;\n top: 50%;\n margin-top: -50px;\n right: 82px;\n display: block !important;\n}<\/code><\/pre>\nnth-child(n)\u6307\u7684\u662f\u5728\u7236\u5143\u7d20\u4e2d\u6240\u6709\u7684\u5143\u7d20\u7684\u987a\u5e8f<\/h3>\n\n\u5199\u4ee3\u7801\u8981\u6839\u636e\u76d2\u5b50\u4ee5\u53ca\u5185\u5bb9\u5199<\/li>\nbottom\uff1a0\uff1b\u8981\u76f8\u5bf9\u4e8e\u7236\u5143\u7d20\u7684 height \u5b9e\u73b0\uff0c\u5982\u679c\u7236\u7236\u5143\u7d20\u7684 height \u5927\u4e8e\u7236\u5143\u7d20\u7684 height\uff0c\uff0c\u5219\u4f1a\u6309\u7167\u7236\u7236\u5143\u7d20\u7684 height \u6765\u5b9e\u73b0 bottom\uff1a0\uff1b\u6765\u5b9e\u73b0\u3002\u3010\u9002\u5f53\u5220\u9664\u7236\u7236\u5143\u7d20\u7684 height\uff0c\u4e00\u677f\u5757\u901a\u5e38\u4e0d\u7528\u8bbe\u7f6e\u603b height\u3011<\/li>\n<\/ul>\n\u60ac\u6302\u56fe\u7247\u7f13\u7f13\u653e\u5927\u7684\u52a8\u753b\u6548\u679c<\/h3>\n<\/p>\n<\/p><\/noscript>\n.gc_project .item_img > img {\n width: 100%;\n height: 100%;\n transition: all 0.3s;\n}\n.gc_project .item_img > img:hover {\n transform: scale(1.05);\n box-shadow: rgb(0 0 0 \/ 23%) 0 4px 14px 0;\n}<\/code><\/pre>\n\u6eda\u52a8\u6761\u4fee\u6539<\/h3>\n<\/p>\n<\/p><\/noscript>\n.mleft::-webkit-scrollbar{\n width: 6px;\n background-color: #f8f8f8;\n\n}\n.mleft::-webkit-scrollbar-thumb{\n width: 6px;\n background-color: #adacac;\n border-radius: 4px;\n}<\/code><\/pre>\nhead \u533a '\u53d1\u73b0' \u5b9e\u73b0\u4ea4\u4e92\u6548\u679c [\u8be5\u9996\u9875\u6700\u607c\u706b\u7684]<\/h2>\n<\/p>\n<\/p><\/noscript>\ntodo head \u533a'\u53d1\u73b0'\u4ea4\u4e92\u5b9e\u73b0\u601d\u8def:<\/h3>\n\n\u2460\u89c2\u5bdf\u8be5\u533a\u7ed3\u6784,\u4e00\u4e2a\u5927\u6a21\u5757,\u5176\u4e2d\u5206\u4e3a\u5de6\u4e2d\u53f3\u4e09\u4e2a\u6a21\u5757,\u5e76\u4f9d\u6b21\u5199\u51fa\u4e09\u4e2a\u6a21\u5757\u7684\u4ee3\u7801,<\/li>\n\u2461\u5de6\u4fa7\u533a\u57df: \u8981\u5c55\u793a\u7684\u6548\u679c\u6709: \u9f20\u6807\u4e0a\u4e0b\u79fb\u52a8,\u6240\u7ecf\u7684 menuItem \u4f1a\u5c55\u73b0\u9ec4\u8272\u80cc\u666f, \u5219\u5f15\u7528 vue \u7684 ref \u5c5e\u6027\u5bf9 DOM \u5143\u7d20\u8fdb\u884c\u52a8\u6001\u7ed1\u5b9a.\n\n\u6ce8\u610f:ref \u9700\u8981\u5728 dom \u6e32\u67d3\u5b8c\u6210\u540e\u624d\u4f1a\u6709,\u5728\u4f7f\u7528\u7684\u65f6\u5019\u786e\u4fdd dom \u5df2\u7ecf\u6e32\u67d3\u5b8c\u6210, \u6bd4\u5982\u5728\u751f\u547d\u5468\u671f mounted(){}\u94a9\u5b50\u4e2d\u8c03\u7528. this.$refs.xxx:\u51cf\u5c11\u83b7\u53d6 dom \u8282\u70b9\u7684\u6d88\u8017<\/li>\n<\/ul>\n<\/li>\n\u2462\u5de6\u4fa7\u533a\u57df\u8fc7\u6ee4\u5230\u53f3\u4fa7\u533a\u57df,\u5c55\u793a\u5bf9\u5e94\u7684\u8be6\u60c5\u9875: mleftIn(item,index)\u51fd\u6570\u901a\u8fc7\u4f20\u8f93 v-for \u5faa\u73af\u4e2d\u6570\u7ec4 menuList \u7684 item \u6bcf\u4e00\u9879\u4e3a\u5a92\u4ecb, \u800c\u6570\u636e\u4e2d menuList \u4e2d\u5305\u542b\u5de6\u4fa7\u6570\u636e menuItem \u4e0e\u53f3\u4fa7\u6bcf\u4e00\u9875\u7684\u6807\u9898 menu \u76f8\u540c, \u4ece\u800c\u5c06\u5de6\u4fa7\u548c\u53f3\u4fa7\u6570\u636e\u7ed1\u5b9a, \u6545\u800c\u5f62\u6210\u4ece\u5de6\u4fa7\u8fc7\u6ee4\u5230\u53f3\u4fa7\u533a\u57df\u662f\u56fa\u5b9a\u7684\u8be6\u60c5\u9875\u5185\u5bb9.<\/li>\n\u2463\u9875\u9762\u7b2c\u4e8c\u6b21\u672a\u5237\u65b0\u4e4b\u524d(\u9996\u6b21\u8fdb\u5165\u9875\u9762\u6e32\u67d3), \u9f20\u6807\u60ac\u6302'\u53d1\u73b0',\u8981\u51fa\u73b0\u7b2c\u4e00\u4e2a'\u7cbe\u9009'\u8be6\u60c5\u9875\u53ca'\u7cbe\u9009'item \u80cc\u666f\u53d8\u9ec4: \u9f20\u6807\u79fb\u51fa\u8be5\u5143\u7d20[\u4e8c\u7ea7\u76ee\u5f55\u6574\u4e2a\u5927\u6a21\u5757]\u4e4b\u5916,\u5219\u89e6\u53d1 mouseleave \u4e8b\u4ef6,\u521d\u59cb\u5316\u6570\u636e.<\/li>\n\u2464\u7b2c\u4e8c\u6b21\u9875\u9762\u5237\u65b0\u4e4b\u540e,\u521d\u59cb\u5316\u6570\u636e: \u91c7\u7528 mounted \u751f\u547d\u5468\u671f[\u6e32\u67d3\u6210 html \u540e\u8c03\u7528]: \u4f7f\u9f20\u6807\u60ac\u6302'\u53d1\u73b0',\u7b2c\u4e00\u4e2a menu-item \u663e\u793a\u9ec4\u8272<\/li>\n<\/ul>\n <li class="find">\n <a href="#">\u53d1\u73b0<\/a>\n <div class="h_menu" @mouseleave="mleftLeave()">\n <div class="menu_box mleft">\n <!-- <a href="">\u7cbe\u9009<\/a>-->\n <a v-for="(item,index) in menuList" :key="index" :ref="'test'+index" href="javascript:;"\n @mouseover="mleftIn(item,index)">{{ item.menu }}<\/a>\n <!-- <el-cascader-panel :options="findOptions" :props="props" \/>-->\n <\/div>\n <div class="mright">\n <div class="cate-box">\n <a class="cate-title" href="">\n <img :src="data.url" alt="">\n <span>{{ data.menu }}<\/span>\n <\/a>\n <div class="subCate">\n <a v-for="(itemOne) in data.items" :key="itemOne">{{ itemOne.text }}<\/a>\n <\/div>\n <\/div>\n <\/div>\n <div class="right_bar">\n <div class="icons">\n <a>\n <span class="icon-box">\n <span class="tangle-1"><\/span>\n <span class="tangle-2"><\/span>\n <i class="ani-star"><\/i>\n <span class="tangle-3"><\/span>\n <\/span>\n <span class="icon-text">\u6536\u85cf\u5939<\/span>\n <\/a>\n <a>\n <img alt="" src="..\/assets\/images\/icon-header-discover-designer.png">\n <span>\u8bbe\u8ba1\u5e08<\/span>\n <\/a>\n <a>\n <img alt="" src="..\/assets\/images\/icon-header-discover-focus.png">\n <span>\u699c\u5355<\/span>\n <!-- <sup class="subNavDot"><\/sup>-->\n <\/a>\n <\/div>\n <div class="ad_box">\n\n <\/div>\n <\/div>\n <\/div>\n <\/li><\/code><\/pre>\n data: {},\n menuList: [\n {\n menu: '\u7cbe\u9009',\n url: require('..\/assets\/images\/zuanshi.png'),\n items: [\n { text: '\u8fd0\u8425\u8bbe\u8ba1' },\n { text: '\u5305\u88c5' },\n { text: '\u52a8\u753b\/\u5f71\u89c6' },\n { text: '\u4eba\u50cf\u6444\u5f71' },\n { text: '\u5546\u4e1a\u63d2\u753b' },\n { text: '\u7535\u5546' },\n { text: 'APP \u754c\u9762' },\n { text: '\u827a\u672f\u63d2\u753b' },\n { text: '\u5bb6\u88c5\u8bbe\u8ba1' },\n { text: '\u6d77\u62a5' },\n { text: '\u6587\u7ae0' }\n ]\n },\n { menu: '\u5e73\u9762' },\n { menu: 'UI' },\n { menu: '\u7f51\u9875' },\n { menu: '\u63d2\u753b' },\n { menu: '\u52a8\u6f2b' },\n { menu: '\u6444\u5f71' },\n { menu: '\u7a7a\u95f4' },\n { menu: '\u5de5\u4e1a\/\u4ea7\u54c1' },\n { menu: '\u4e09\u7ef4' },\n { menu: '\u5f71\u89c6' },\n { menu: '\u624b\u5de5\u827a' },\n { menu: '\u7eaf\u827a\u672f' },\n { menu: '\u670d\u88c5' },\n { menu: '\u5176\u4ed6' }\n ],<\/code><\/pre>\n \/\/\u6e32\u67d3\u6210 html \u4e4b\u524d\u8c03\u7528,\u521d\u59cb\u5316\u4e00\u4e9b\u5c5e\u6027\u503c [\u9f20\u6807\u60ac\u6302'\u53d1\u73b0',\u5c31\u51fa\u73b0\u7b2c\u4e00\u4e2a\u7cbe\u9009\u9875\u9762]\n created () {\n this.data = this.menuList[0]\n },\n \/\/\u6e32\u67d3\u6210 html \u540e\u8c03\u7528 [\u9f20\u6807\u60ac\u6302'\u53d1\u73b0',\u7b2c\u4e00\u4e2a menu-item \u663e\u793a\u9ec4\u8272](\u9875\u9762\u5237\u65b0\u4e86\u4e4b\u540e\u7684)\n mounted () {\n this.$refs['test' + 0][0].style.backgroundColor = 'rgb(255, 242, 0)'\n },\n methods: {\n \/\/\u9f20\u6807\u8fdb\u5165\u51fd\u6570\n mleftIn (item, index) {\n \/\/\u83b7\u53d6 menuList \u4e2d\u6bcf\u4e2a menuItem \u5b57\u7b26\u4e32\u7684\u957f\u5ea6\n let menuSize = this.menuList.length\n for (let i = 0; i < menuSize; i++) {\n \/\/for \u5faa\u73af,i \u5982\u679c\u5c0f\u4e8e menuSize,\u5219\u7f6e\u4e8e menuItem \u989c\u8272\u4e3a\u7070\u8272,\u5b9e\u73b0\u5207\u6362\u6548\u679c\n this.$refs['test' + i][0].style.backgroundColor = '#f8f8f8'\n }\n \/\/\u8df3\u51fa for \u5faa\u73af,\u7531\u5de6\u4fa7\u79fb\u5411\u53f3\u4fa7\u8be6\u60c5\u9875\u65f6,\u5176 menuItem \u7684\u989c\u8272\u4e3a\u9ec4\u8272\n this.$refs['test' + index][0].style.backgroundColor = 'rgb(255, 242, 0)'\n \/\/\u5c06\u53f3\u4fa7\u6570\u636e\u8bbe\u7f6e\u4e3a item,\u663e\u793a\u6570\u636e\n this.data = item\n },\n \/\/\u9f20\u6807\u8fdb\u5165\u51fd\u6570\n \/\/\u6ce8\u610f: mouseleave:\u662f\u9f20\u6807\u79fb\u51fa\u8be5\u5143\u7d20\u4e4b\u5916,\u5219\u89e6\u53d1 mouseleave \u4e8b\u4ef6\n \/\/ mouseout : \u662f\u5f53\u6307\u9488\u79bb\u5f00\u8be5\u5143\u7d20\u53ca\u5176\u6240\u6709\u540e\u4ee3\u65f6\uff0c\u4f1a\u89e6\u53d1 mouseleave\n \/\/ \u800c\u5f53\u6307\u9488\u79bb\u5f00\u5143\u7d20\u6216\u79bb\u5f00\u5143\u7d20\u7684\u540e\u4ee3\uff08\u5373\u4f7f\u6307\u9488\u4ecd\u5728\u5143\u7d20\u5185\uff09\u65f6\uff0c\u4e5f\u4f1a\u89e6\u53d1 mouseout \u4e8b\u4ef6\n mleftLeave () {\n \/\/\u83b7\u53d6 menuList \u4e2d\u6bcf\u4e2a menuItem \u5b57\u7b26\u4e32\u7684\u957f\u5ea6\n let menuSize = this.menuList.length\n for (let i = 0; i < menuSize; i++) {\n this.$refs['test' + i][0].style.backgroundColor = '#f8f8f8'\n }\n \/\/ \u8df3\u51fa\u5faa\u73af,\u6d4f\u89c8\u5b8c'\u53d1\u73b0',\u9f20\u6807\u79fb\u51fa,\u7f6e\u4e8e\u53f3\u4fa7\u6570\u636e\u4e3a\u7b2c\u4e00\u4e2a\u7cbe\u9009\u6570\u636e\n this.data = this.menuList[0]\n \/\/\u9f20\u6807\u79fb\u51fa\u4e8b\u4ef6,\u7f6e\u4e8e\u7b2c\u4e00\u4e2a menuitem \u4e3a\u9ec4\u8272[\u672a\u5237\u65b0\u65f6\u7684\u8bbe\u7f6e]\n this.$refs['test' + 0][0].style.backgroundColor = 'rgb(255, 242, 0)'\n\n \/\/ this.data = {}\n \/\/ this.$refs['test'+index][0].style.backgroundColor = '#f8f8f8'\n \/\/ console.log('\u6eda\u51fa\u53bb')\n },\n}<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"\u4e0b\u8f7d\u4f9d\u8d56\u901f\u5ea6\u5feb npm install –registry=https:\/\/registry.npm.tao […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[],"class_list":["post-3462","post","type-post","status-publish","format-standard","hentry","category-web"],"_links":{"self":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/3462","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3462"}],"version-history":[{"count":38,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/3462\/revisions"}],"predecessor-version":[{"id":3558,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/3462\/revisions\/3558"}],"wp:attachment":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3462"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=3462"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=3462"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
<\/p>\n<\/p><\/noscript>\n\u5b89\u88c5\u63d2\u4ef6 ESLint \/ Vetur\nESLint : \u63d0\u793a\u8bed\u6cd5,\u8bed\u6cd5\u6821\u9a8c,\u7b26\u5408\u89c4\u8303\nVetur : \u8bc6\u522b Vue \u4e0a\u7684\u8bed\u6cd5,\u8ba9\u6587\u4ef6\u9ad8\u4eae\u663e\u793a\nnode_modules \u653e\u7684\u4e00\u4e9b\u4f9d\u8d56\u5305\n\u83b7\u53d6 : npm install \u5b89\u88c5\u4f9d\u8d56\npublic : \u5b58\u653e\u7684\u662f\u9ed8\u8ba4\u7684 html \u6a21\u677f\n.editorconfig : \u7f16\u8f91\u5668\u7684\u4e00\u4e9b\u9ed8\u8ba4\u914d\u7f6e\nbabel.config.js : vue \u7684\u4e00\u4e9b\u7528\u5230 babel \u7684\u914d\u7f6e\npackage.json : \u5b58\u653e\u7684\u662f\u4e00\u4e9b\u4f9d\u8d56\u5305\npackage-lock.json : \u4fdd\u8bc1\u591a\u4eba\u534f\u4f5c,\u5b89\u88c5\u4f9d\u8d56\u6709\u56fa\u5b9a\u7684\u7248\u672c\nsrc \u76ee\u5f55 : (\u6e90\u4ee3\u7801\u76ee\u5f55)\n\u5165\u53e3\u6587\u4ef6 : main.js\n\u5c06 App.vue \u6539\u6210<\/p>\n<template>\n<div id="app">123<\/div>\n<\/template>\n<style lang="scss">\n<\/style><\/code><\/pre>\n\u5c06 asstes component \u7684\u5185\u5bb9\u6587\u4ef6\u5220\u4e86\n\u5c06 router->index.js \u2193\u5220\u6389\nimport HomeView from '..\/views\/HomeView.vue'<\/p>\n<\/p>\n<\/p><\/noscript>\n\n\u5c06 views \u7684\u5185\u5bb9\u6587\u4ef6\u5220\u4e86<\/li>\n<\/ul>\n\u57fa\u7840\u6837\u5f0f\u96c6\u6210\u53ca\u5f00\u53d1\u6a21\u62df\u5668\u7684\u4f7f\u7528<\/h2>\n\u4e3a\u4e86\u8ba9\u6211\u4eec\u7684\u6837\u5f0f\u5728\u6240\u6709\u6d4f\u89c8\u5668\u4e0a\u4fdd\u6301\u4e00\u81f4\nnpm install normalize.css@8.0.1 --save<\/p>\n\nmain.js : import 'normalize.css'\n\u5728 src \u4e2d\u521b\u5efa style\/base.css\nhtml{\nfont-size: 100px;\n}\n\/\/ 1rem=html font-size<\/li>\n<\/ul>\n\u79ef\u7d2f\u5199\u6cd5<\/h2>\n\u9002\u5f53\u4f7f\u7528> \u5b50\u5143\u7d20\u9009\u62e9\u5668<\/h3>\n.h_menu .menu_box > ul > li {}<\/p>\n\n\u907f\u514d\u5f71\u54cd\u4e09\u7ea7\u76ee\u5f55\u7684 ul li , A>B \u53ea\u9009\u62e9\u4e00\u4ee3\u3002<\/li>\n<\/ul>\n<\/p>\n<\/p><\/noscript>\n\u4f7f\u7528 v-for \u5faa\u73af\u5982\u4f55\u7ed9\u4e0d\u540c\u5143\u7d20\u8bbe\u7f6e\u4e0d\u540c\u6837\u5f0f<\/h3>\n <div v-for="(item,index) in list" :key="index" :class="'list-' + (index + 1)">\n <img :src="item.url" alt="" class="five_img"\/>\n <\/div><\/code><\/pre>\n\u6587\u5b57\u591a\u65f6,\u9690\u85cf<\/h3>\n.main_content ul li .svg_text {\n width: 86px;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;<\/code><\/pre>\n<\/p>\n<\/p><\/noscript>\n\u8bbe\u7f6e 5 \u500d\u6570\u7684\u5143\u7d20\u7684\u6837\u5f0f<\/h3>\n.main_content ul li:nth-child(5n) {\n margin-right: 0;\n}<\/code><\/pre>\nel-cascader-panel \u7ea7\u8054\u9009\u62e9\u5668\u6837\u5f0f\u66f4\u6539<\/h3>\n<\/p>\n<\/p><\/noscript>\n <div class="h_menu">\n <div class="menu_box">\n <el-cascader-panel :options="findOptions" :props="props"\/>\n <\/div>\n<\/div><\/code><\/pre>\n\/*\u4e8c\u7ea7\u76ee\u5f55*\/\n.topbar .shortcut-links {\n width: 600px;\n margin: 0 auto;\n}\n\n.topbar .shortcut-links > ul > li {\n float: left;\n padding: 13px 20px;\n line-height: 31px;\n font-size: 14px;\n position: relative;\n}\n\n.topbar .shortcut-links > ul > li:hover .h_menu {\n display: block;\n}\n.topbar .shortcut-links > ul > li .h_menu {\n position: absolute;\n left: 0;\n display: none;\n width: 152px;\n margin-top: 13px;\n z-index: 9999;\n}\n.topbar .shortcut-links > ul > li .h_menu .menu_box {\n background: #ffffff;\n width: 152px;\n box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);\n padding: 8px 0 8px 0;\n \/*float: left;*\/\n}\n\n.topbar .shortcut-links > ul > li .h_menu .menu_box >a {\n height: 45px;\n line-height: 45px;\n font-size: 14px;\n padding-left: 20px;\n \/*padding-top: 5px;*\/\n display: block;\n}\n<\/code><\/pre>\nstyle\n\/*\u53d6\u6d88\u8fb9\u6846*\/\n.el-cascader-panel.is-bordered {\n border: none;\n border-radius: 0;\n}\n\n.el-cascader-menu {\n color: #1c1f21;\n font-size: 14px;\n min-width: 152px;\n}\n\n.el-cascader-menu__list {\n padding: 0;\n}\n\n.el-cascader-node.in-active-path, .el-cascader-node.is-active, .el-cascader-node.is-selectable.in-checked-path {\n color: #1c1f21;\n font-weight: normal;\n}\n\/*item \u60ac\u6302\u9ec4\u8272\u80cc\u666f\u5bbd\u95f4\u8ddd*\/\n.el-cascader-node {\n padding-left: 20px;\n height: 45px;\n line-height: 45px;\n}\n\/*\u4e8c\u7ea7\u76ee\u5f55\u7684\u9ad8\u5ea6*\/\n.el-cascader-menu__wrap.el-scrollbar__wrap {\n height: 478px;\n}\n\n.el-cascader-menu:last-child .el-cascader-node {\n padding-right: 0;\n}\n\/*item \u60ac\u6302\u9ec4\u8272\u80cc\u666f*\/\n.el-cascader-node:not(.is-disabled):focus, .el-cascader-node:not(.is-disabled):hover {\n background-color: rgb(255, 242, 0);\n}\n\/*item \u53f3\u8fb9\u7684\u5c0f\u7bad\u5934\u989c\u8272\u6539\u4e3a\u9ec4\u8272[\u9690\u85cf]*\/\n.el-cascader-node:not(.is-disabled):focus, .el-cascader-node:not(.is-disabled):hover .el-icon {\n color: rgb(255, 242, 0);\n}\n\n.el-cascader-node__label {\n padding: 0;\n}\n\n.el-cascader-node__postfix {\n position: absolute;\n right: 0;\n}\n\/*\u6eda\u52a8\u6761\u5230\u9876\u90e8,\u4e0b\u90e8\u7684\u95f4\u8ddd*\/\n.el-scrollbar__bar {\n position: absolute;\n right: 0;\n bottom: 0;\n z-index: 1;\n border-radius: 4px;\n}<\/code><\/pre>\n<\/p>\n<\/p><\/noscript>\n <el-cascader-panel :options="findOptions" :props="props"\/><\/code><\/pre>\n\/*\u4e8c\u7ea7\u76ee\u5f55\u7684\u9ad8\u5ea6*\/\n\/deep\/.el-cascader-menu__wrap.el-scrollbar__wrap {\n height: 490px;\n}\n\/*item \u60ac\u6302\u9ec4\u8272\u80cc\u666f\u5bbd\u95f4\u8ddd*\/\n\/deep\/.el-cascader-node {\nheight: 45px;\n width: 165px;\n padding: 0;\n margin-left: 10px;\n}\n\/*item \u60ac\u6302\u9ec4\u8272\u80cc\u666f*\/\n\/deep\/ .el-cascader-node:not(.is-disabled):hover {\n background: #fff200;\n border-radius: 8px;\n}\n\/*\u70b9\u51fb\u540e\u6539\u53d8\u989c\u8272,\u7c97\u7ec6\u53d6\u6d88\u70b9\u51fb\u6548\u679c*\/\n\/deep\/.el-cascader-node.is-active{\ncolor: #222222;\n font-weight: normal;\n}\n\/*item \u5de6\u8fb9\u6709\u4e2a\u5c0f\u52fe\u221a*\/\n\/deep\/.el-icon svg {\n height: 0;\n width: 0;\n}\n\/*\u53d1\u73b0\u7684\u4e8c\u7ea7\u76ee\u5f55\u6d88\u5931*\/\n.el-cascader-panel{\n display: none;\n}\n\/*\u53d6\u6d88\u8fb9\u6846*\/\n.el-cascader-panel.is-bordered {\n border: none;\n}\n\/*\u60ac\u6302'\u53d1\u73b0'\u76ee\u5f55,\u51fa\u73b0\u4e8c\u7ea7\u76ee\u5f55*\/\n.topbar .shortcut-links > ul > li:nth-child(2):hover .el-cascader-panel{\n display: block;\n background-color: #f8f8f8;\n border-radius: 8px 0 8px 8px;\n}<\/code><\/pre>\n\u626b\u4e8c\u7ef4\u7801\u767b\u5f55\u548c\u5bc6\u7801\u767b\u5f55\u9875\u9762\u7684\u5207\u6362<\/h3>\n@click="handleChangeToLogin()"<\/code><\/pre>\n handleChangeToLogin () {\n const qr = document.getElementById('qr_code')\n const login = document.getElementById('login')\n qr.style.display = 'none';\n if (qr.style.display === 'none') {\n login.style.display = 'block'\n }\n },\n handleChangeToQr () {\n const qr = document.getElementById('qr_code')\n const login = document.getElementById('login')\n login.style.display = 'none'\n if (login.style.display === 'none') {\n qr.style.display = 'block'\n }\n }<\/code><\/pre>\n\u767b\u5f55\u6846\u7684\u6ed1\u5757\u9a8c\u8bc1<\/h3>\n<\/p>\n<\/p><\/noscript>\n<\/slider><\/p>\n<template>\n <div ref="dragDiv" class="drag">\n <div class="drag_bg"><\/div>\n <div class="drag_text">{{ confirmWords }}<\/div>\n <div ref="moveDiv" :class="{'handler_ok_bg':confirmSuccess}" class="handler handler_bg"\n style="position: absolute;top: 0;left: 0;" @mousedown="mouseDownFn($event)"><\/div>\n <\/div>\n<\/template>\n\n<script>\nexport default {\n data () {\n return {\n beginClientX: 0, \/*\u8ddd\u79bb\u5c4f\u5e55\u5de6\u7aef\u8ddd\u79bb*\/\n mouseMoveState: false, \/*\u89e6\u53d1\u62d6\u52a8\u72b6\u6001 \u5224\u65ad*\/\n maxWidth: '', \/*\u62d6\u52a8\u6700\u5927\u5bbd\u5ea6\uff0c\u4f9d\u636e\u6ed1\u5757\u5bbd\u5ea6\u7b97\u51fa\u6765\u7684*\/\n confirmWords: '\u8bf7\u6309\u4f4f\u6ed1\u5757,\u62d6\u52a8\u5230\u6700\u53f3\u8fb9', \/*\u6ed1\u5757\u6587\u5b57*\/\n confirmSuccess: false \/*\u9a8c\u8bc1\u6210\u529f\u5224\u65ad*\/\n }\n },\n methods: {\n \/\/mousedown \u4e8b\u4ef6\n mouseDownFn: function (e) {\n if (!this.confirmSuccess) {\n e.preventDefault && e.preventDefault() \/\/\u963b\u6b62\u6587\u5b57\u9009\u4e2d\u7b49 \u6d4f\u89c8\u5668\u9ed8\u8ba4\u4e8b\u4ef6\n this.mouseMoveState = true\n this.beginClientX = e.clientX\n }\n },\n \/\/\u9a8c\u8bc1\u6210\u529f\u51fd\u6570\n successFunction () {\n this.confirmSuccess = true\n this.confirmWords = '\u9a8c\u8bc1\u901a\u8fc7'\n if (window.addEventListener) {\n document.getElementsByTagName('html')[0].removeEventListener('mousemove', this.mouseMoveFn)\n document.getElementsByTagName('html')[0].removeEventListener('mouseup', this.moseUpFn)\n } else {\n document.getElementsByTagName('html')[0].removeEventListener('mouseup', () => {\n })\n }\n document.getElementsByClassName('drag_text')[0].style.color = '#fff'\n document.getElementsByClassName('handler')[0].style.left = this.maxWidth + 'px'\n document.getElementsByClassName('drag_bg')[0].style.width = this.maxWidth + 'px'\n },\n \/\/mousemove \u4e8b\u4ef6\n mouseMoveFn (e) {\n if (this.mouseMoveState) {\n let width = e.clientX - this.beginClientX\n if (width > 0 && width <= this.maxWidth) {\n document.getElementsByClassName('handler')[0].style.left = width + 'px'\n document.getElementsByClassName('drag_bg')[0].style.width = width + 'px'\n } else if (width > this.maxWidth) {\n this.successFunction()\n }\n }\n },\n \/\/mouseup \u4e8b\u4ef6\n moseUpFn (e) {\n this.mouseMoveState = false\n var width = e.clientX - this.beginClientX\n if (width < this.maxWidth) {\n document.getElementsByClassName('handler')[0].style.left = 0 + 'px'\n document.getElementsByClassName('drag_bg')[0].style.width = 0 + 'px'\n }\n }\n },\n mounted () {\n this.maxWidth = this.$refs.dragDiv.clientWidth - this.$refs.moveDiv.clientWidth\n document.getElementsByTagName('html')[0].addEventListener('mousemove', this.mouseMoveFn)\n document.getElementsByTagName('html')[0].addEventListener('mouseup', this.moseUpFn)\n }\n}\n<\/script>\n<style scoped>\n.drag {\n position: relative;\n background-color: #e8e8e8;\n width: 100%;\n height: 32px;\n line-height: 32px;\n text-align: center;\n border: 1px solid #ccc;\n\n}\n\n.handler {\n width: 40px;\n height: 32px;\n border: 1px solid #ccc;\n cursor: move;\n margin-top: -1px;\n margin-left: -1px;\n}\n\n.handler_bg {\n background: #fff url('..\/assets\/images\/arrow-r.png') no-repeat center;\n background-size: 25px;\n}\n\n.handler_ok_bg {\n background: #fff url('..\/assets\/images\/\u221a.png') no-repeat center;\n background-size: 18px;\n}\n\n.drag_bg {\n background-color: #7ac23c;\n height: 32px;\n width: 0;\n}\n\n.drag_text {\n position: absolute;\n top: 0;\n width: 100%;\n font-size: 12px;\n color: #706f6f;\n}\n\n<\/style>\n<\/code><\/pre>\nel-input \u805a\u7126\u540e\u80cc\u666f\u53d8\u767d<\/h3>\n<\/p>\n<\/p><\/noscript>\n.el-input__wrapper.is-focus {\n box-shadow: 0 0 0 1px #dcdfe6 inset;\n background-color: #fff;\n}<\/code><\/pre>\nel-input placeholder \u989c\u8272\u8bbe\u7f6e<\/h3>\n.el-input__inner::placeholder{\n color: #666666;\n}<\/code><\/pre>\n\u5224\u65ad el-checked \u662f\u5426\u9009\u4e2d,\u672a\u9009\u4e2d\u5219\u63d0\u793a\u8bf7\u52fe\u9009<\/h3>\n<\/p>\n<\/p><\/noscript>\nexport default {\nmounted() {\n const pleaseFit=document.getElementById('pleaseFit');\n $(".el-checkbox input").change(() => {\n if ($(".el-checkbox input[type='checkbox']").is(':checked') == true) {\n pleaseFit.style.display='none'\n } else {\n pleaseFit.style.display='block'\n }\n })\n }\n }<\/code><\/pre>\nel-input \u5728 style \u5168\u5c40\u6837\u5f0f,\u4f1a\u5f71\u54cd\u5230\u5176\u4ed6\u4e0d\u7b26\u5408\u8be5\u6837\u5f0f\u7684\u4f4d\u7f6e<\/h3>\n\n\u53ef\u4ee5\u5728 style scoped> \u5199,\u52a0\u4e0a\/deep\/<\/li>\n<\/ul>\n<\/p>\n<\/p><\/noscript>\n\/deep\/ .el-input__wrapper {\n box-shadow: 0 0 0 0 inset;\n background-color: rgb(255, 242, 0);\n}<\/code><\/pre>\nel-carousel \u8d70\u9a6c\u706f\u4fee\u6539 Carousel \u5de6\u53f3\u4e24\u4fa7\u7bad\u5934\u5b57\u4f53\u5927\u5c0f<\/h3>\n\/deep\/.el-carousel__arrow i {\n font-size: 29px !important;\n }<\/code><\/pre>\n\u9875\u9762\u5411\u4e0b\u6ed1\u52a8\u5bfc\u822a\u680f\u56fa\u5b9a<\/h3>\n<\/p>\n<\/p><\/noscript>\n.main_nav_fixed {\n position: sticky;\n top: 0;\n z-index: 999;\n}<\/code><\/pre>\n\u56fa\u5b9a\u5728\u53f3\u65b9\u7684,\u60ac\u6302\u51fa\u73b0\u4e8c\u7ef4\u7801<\/h3>\n<\/p>\n<\/p><\/noscript>\n<div class="share_box">\n <img src="..\/..\/assets\/images\/share_qr.png" alt=""\/>\n <\/div><\/code><\/pre>\n.share_box{\n width: 70px;\n height: 131px;\n top: 300px;\n right: 10px;\n cursor: pointer;\n position: fixed;\n z-index: 999;\n background: url("..\/..\/assets\/images\/share_wx.jpg") no-repeat;\n background-size: 100% 100%;\n}\n.share_box img{\n width: 100px;\n height: 100px;\n display: none;\n}\n.share_box:hover img {\n position: absolute;\n top: 50%;\n margin-top: -50px;\n right: 82px;\n display: block !important;\n}<\/code><\/pre>\nnth-child(n)\u6307\u7684\u662f\u5728\u7236\u5143\u7d20\u4e2d\u6240\u6709\u7684\u5143\u7d20\u7684\u987a\u5e8f<\/h3>\n\n\u5199\u4ee3\u7801\u8981\u6839\u636e\u76d2\u5b50\u4ee5\u53ca\u5185\u5bb9\u5199<\/li>\nbottom\uff1a0\uff1b\u8981\u76f8\u5bf9\u4e8e\u7236\u5143\u7d20\u7684 height \u5b9e\u73b0\uff0c\u5982\u679c\u7236\u7236\u5143\u7d20\u7684 height \u5927\u4e8e\u7236\u5143\u7d20\u7684 height\uff0c\uff0c\u5219\u4f1a\u6309\u7167\u7236\u7236\u5143\u7d20\u7684 height \u6765\u5b9e\u73b0 bottom\uff1a0\uff1b\u6765\u5b9e\u73b0\u3002\u3010\u9002\u5f53\u5220\u9664\u7236\u7236\u5143\u7d20\u7684 height\uff0c\u4e00\u677f\u5757\u901a\u5e38\u4e0d\u7528\u8bbe\u7f6e\u603b height\u3011<\/li>\n<\/ul>\n\u60ac\u6302\u56fe\u7247\u7f13\u7f13\u653e\u5927\u7684\u52a8\u753b\u6548\u679c<\/h3>\n<\/p>\n<\/p><\/noscript>\n.gc_project .item_img > img {\n width: 100%;\n height: 100%;\n transition: all 0.3s;\n}\n.gc_project .item_img > img:hover {\n transform: scale(1.05);\n box-shadow: rgb(0 0 0 \/ 23%) 0 4px 14px 0;\n}<\/code><\/pre>\n\u6eda\u52a8\u6761\u4fee\u6539<\/h3>\n<\/p>\n<\/p><\/noscript>\n.mleft::-webkit-scrollbar{\n width: 6px;\n background-color: #f8f8f8;\n\n}\n.mleft::-webkit-scrollbar-thumb{\n width: 6px;\n background-color: #adacac;\n border-radius: 4px;\n}<\/code><\/pre>\nhead \u533a '\u53d1\u73b0' \u5b9e\u73b0\u4ea4\u4e92\u6548\u679c [\u8be5\u9996\u9875\u6700\u607c\u706b\u7684]<\/h2>\n<\/p>\n<\/p><\/noscript>\ntodo head \u533a'\u53d1\u73b0'\u4ea4\u4e92\u5b9e\u73b0\u601d\u8def:<\/h3>\n\n\u2460\u89c2\u5bdf\u8be5\u533a\u7ed3\u6784,\u4e00\u4e2a\u5927\u6a21\u5757,\u5176\u4e2d\u5206\u4e3a\u5de6\u4e2d\u53f3\u4e09\u4e2a\u6a21\u5757,\u5e76\u4f9d\u6b21\u5199\u51fa\u4e09\u4e2a\u6a21\u5757\u7684\u4ee3\u7801,<\/li>\n\u2461\u5de6\u4fa7\u533a\u57df: \u8981\u5c55\u793a\u7684\u6548\u679c\u6709: \u9f20\u6807\u4e0a\u4e0b\u79fb\u52a8,\u6240\u7ecf\u7684 menuItem \u4f1a\u5c55\u73b0\u9ec4\u8272\u80cc\u666f, \u5219\u5f15\u7528 vue \u7684 ref \u5c5e\u6027\u5bf9 DOM \u5143\u7d20\u8fdb\u884c\u52a8\u6001\u7ed1\u5b9a.\n\n\u6ce8\u610f:ref \u9700\u8981\u5728 dom \u6e32\u67d3\u5b8c\u6210\u540e\u624d\u4f1a\u6709,\u5728\u4f7f\u7528\u7684\u65f6\u5019\u786e\u4fdd dom \u5df2\u7ecf\u6e32\u67d3\u5b8c\u6210, \u6bd4\u5982\u5728\u751f\u547d\u5468\u671f mounted(){}\u94a9\u5b50\u4e2d\u8c03\u7528. this.$refs.xxx:\u51cf\u5c11\u83b7\u53d6 dom \u8282\u70b9\u7684\u6d88\u8017<\/li>\n<\/ul>\n<\/li>\n\u2462\u5de6\u4fa7\u533a\u57df\u8fc7\u6ee4\u5230\u53f3\u4fa7\u533a\u57df,\u5c55\u793a\u5bf9\u5e94\u7684\u8be6\u60c5\u9875: mleftIn(item,index)\u51fd\u6570\u901a\u8fc7\u4f20\u8f93 v-for \u5faa\u73af\u4e2d\u6570\u7ec4 menuList \u7684 item \u6bcf\u4e00\u9879\u4e3a\u5a92\u4ecb, \u800c\u6570\u636e\u4e2d menuList \u4e2d\u5305\u542b\u5de6\u4fa7\u6570\u636e menuItem \u4e0e\u53f3\u4fa7\u6bcf\u4e00\u9875\u7684\u6807\u9898 menu \u76f8\u540c, \u4ece\u800c\u5c06\u5de6\u4fa7\u548c\u53f3\u4fa7\u6570\u636e\u7ed1\u5b9a, \u6545\u800c\u5f62\u6210\u4ece\u5de6\u4fa7\u8fc7\u6ee4\u5230\u53f3\u4fa7\u533a\u57df\u662f\u56fa\u5b9a\u7684\u8be6\u60c5\u9875\u5185\u5bb9.<\/li>\n\u2463\u9875\u9762\u7b2c\u4e8c\u6b21\u672a\u5237\u65b0\u4e4b\u524d(\u9996\u6b21\u8fdb\u5165\u9875\u9762\u6e32\u67d3), \u9f20\u6807\u60ac\u6302'\u53d1\u73b0',\u8981\u51fa\u73b0\u7b2c\u4e00\u4e2a'\u7cbe\u9009'\u8be6\u60c5\u9875\u53ca'\u7cbe\u9009'item \u80cc\u666f\u53d8\u9ec4: \u9f20\u6807\u79fb\u51fa\u8be5\u5143\u7d20[\u4e8c\u7ea7\u76ee\u5f55\u6574\u4e2a\u5927\u6a21\u5757]\u4e4b\u5916,\u5219\u89e6\u53d1 mouseleave \u4e8b\u4ef6,\u521d\u59cb\u5316\u6570\u636e.<\/li>\n\u2464\u7b2c\u4e8c\u6b21\u9875\u9762\u5237\u65b0\u4e4b\u540e,\u521d\u59cb\u5316\u6570\u636e: \u91c7\u7528 mounted \u751f\u547d\u5468\u671f[\u6e32\u67d3\u6210 html \u540e\u8c03\u7528]: \u4f7f\u9f20\u6807\u60ac\u6302'\u53d1\u73b0',\u7b2c\u4e00\u4e2a menu-item \u663e\u793a\u9ec4\u8272<\/li>\n<\/ul>\n <li class="find">\n <a href="#">\u53d1\u73b0<\/a>\n <div class="h_menu" @mouseleave="mleftLeave()">\n <div class="menu_box mleft">\n <!-- <a href="">\u7cbe\u9009<\/a>-->\n <a v-for="(item,index) in menuList" :key="index" :ref="'test'+index" href="javascript:;"\n @mouseover="mleftIn(item,index)">{{ item.menu }}<\/a>\n <!-- <el-cascader-panel :options="findOptions" :props="props" \/>-->\n <\/div>\n <div class="mright">\n <div class="cate-box">\n <a class="cate-title" href="">\n <img :src="data.url" alt="">\n <span>{{ data.menu }}<\/span>\n <\/a>\n <div class="subCate">\n <a v-for="(itemOne) in data.items" :key="itemOne">{{ itemOne.text }}<\/a>\n <\/div>\n <\/div>\n <\/div>\n <div class="right_bar">\n <div class="icons">\n <a>\n <span class="icon-box">\n <span class="tangle-1"><\/span>\n <span class="tangle-2"><\/span>\n <i class="ani-star"><\/i>\n <span class="tangle-3"><\/span>\n <\/span>\n <span class="icon-text">\u6536\u85cf\u5939<\/span>\n <\/a>\n <a>\n <img alt="" src="..\/assets\/images\/icon-header-discover-designer.png">\n <span>\u8bbe\u8ba1\u5e08<\/span>\n <\/a>\n <a>\n <img alt="" src="..\/assets\/images\/icon-header-discover-focus.png">\n <span>\u699c\u5355<\/span>\n <!-- <sup class="subNavDot"><\/sup>-->\n <\/a>\n <\/div>\n <div class="ad_box">\n\n <\/div>\n <\/div>\n <\/div>\n <\/li><\/code><\/pre>\n data: {},\n menuList: [\n {\n menu: '\u7cbe\u9009',\n url: require('..\/assets\/images\/zuanshi.png'),\n items: [\n { text: '\u8fd0\u8425\u8bbe\u8ba1' },\n { text: '\u5305\u88c5' },\n { text: '\u52a8\u753b\/\u5f71\u89c6' },\n { text: '\u4eba\u50cf\u6444\u5f71' },\n { text: '\u5546\u4e1a\u63d2\u753b' },\n { text: '\u7535\u5546' },\n { text: 'APP \u754c\u9762' },\n { text: '\u827a\u672f\u63d2\u753b' },\n { text: '\u5bb6\u88c5\u8bbe\u8ba1' },\n { text: '\u6d77\u62a5' },\n { text: '\u6587\u7ae0' }\n ]\n },\n { menu: '\u5e73\u9762' },\n { menu: 'UI' },\n { menu: '\u7f51\u9875' },\n { menu: '\u63d2\u753b' },\n { menu: '\u52a8\u6f2b' },\n { menu: '\u6444\u5f71' },\n { menu: '\u7a7a\u95f4' },\n { menu: '\u5de5\u4e1a\/\u4ea7\u54c1' },\n { menu: '\u4e09\u7ef4' },\n { menu: '\u5f71\u89c6' },\n { menu: '\u624b\u5de5\u827a' },\n { menu: '\u7eaf\u827a\u672f' },\n { menu: '\u670d\u88c5' },\n { menu: '\u5176\u4ed6' }\n ],<\/code><\/pre>\n \/\/\u6e32\u67d3\u6210 html \u4e4b\u524d\u8c03\u7528,\u521d\u59cb\u5316\u4e00\u4e9b\u5c5e\u6027\u503c [\u9f20\u6807\u60ac\u6302'\u53d1\u73b0',\u5c31\u51fa\u73b0\u7b2c\u4e00\u4e2a\u7cbe\u9009\u9875\u9762]\n created () {\n this.data = this.menuList[0]\n },\n \/\/\u6e32\u67d3\u6210 html \u540e\u8c03\u7528 [\u9f20\u6807\u60ac\u6302'\u53d1\u73b0',\u7b2c\u4e00\u4e2a menu-item \u663e\u793a\u9ec4\u8272](\u9875\u9762\u5237\u65b0\u4e86\u4e4b\u540e\u7684)\n mounted () {\n this.$refs['test' + 0][0].style.backgroundColor = 'rgb(255, 242, 0)'\n },\n methods: {\n \/\/\u9f20\u6807\u8fdb\u5165\u51fd\u6570\n mleftIn (item, index) {\n \/\/\u83b7\u53d6 menuList \u4e2d\u6bcf\u4e2a menuItem \u5b57\u7b26\u4e32\u7684\u957f\u5ea6\n let menuSize = this.menuList.length\n for (let i = 0; i < menuSize; i++) {\n \/\/for \u5faa\u73af,i \u5982\u679c\u5c0f\u4e8e menuSize,\u5219\u7f6e\u4e8e menuItem \u989c\u8272\u4e3a\u7070\u8272,\u5b9e\u73b0\u5207\u6362\u6548\u679c\n this.$refs['test' + i][0].style.backgroundColor = '#f8f8f8'\n }\n \/\/\u8df3\u51fa for \u5faa\u73af,\u7531\u5de6\u4fa7\u79fb\u5411\u53f3\u4fa7\u8be6\u60c5\u9875\u65f6,\u5176 menuItem \u7684\u989c\u8272\u4e3a\u9ec4\u8272\n this.$refs['test' + index][0].style.backgroundColor = 'rgb(255, 242, 0)'\n \/\/\u5c06\u53f3\u4fa7\u6570\u636e\u8bbe\u7f6e\u4e3a item,\u663e\u793a\u6570\u636e\n this.data = item\n },\n \/\/\u9f20\u6807\u8fdb\u5165\u51fd\u6570\n \/\/\u6ce8\u610f: mouseleave:\u662f\u9f20\u6807\u79fb\u51fa\u8be5\u5143\u7d20\u4e4b\u5916,\u5219\u89e6\u53d1 mouseleave \u4e8b\u4ef6\n \/\/ mouseout : \u662f\u5f53\u6307\u9488\u79bb\u5f00\u8be5\u5143\u7d20\u53ca\u5176\u6240\u6709\u540e\u4ee3\u65f6\uff0c\u4f1a\u89e6\u53d1 mouseleave\n \/\/ \u800c\u5f53\u6307\u9488\u79bb\u5f00\u5143\u7d20\u6216\u79bb\u5f00\u5143\u7d20\u7684\u540e\u4ee3\uff08\u5373\u4f7f\u6307\u9488\u4ecd\u5728\u5143\u7d20\u5185\uff09\u65f6\uff0c\u4e5f\u4f1a\u89e6\u53d1 mouseout \u4e8b\u4ef6\n mleftLeave () {\n \/\/\u83b7\u53d6 menuList \u4e2d\u6bcf\u4e2a menuItem \u5b57\u7b26\u4e32\u7684\u957f\u5ea6\n let menuSize = this.menuList.length\n for (let i = 0; i < menuSize; i++) {\n this.$refs['test' + i][0].style.backgroundColor = '#f8f8f8'\n }\n \/\/ \u8df3\u51fa\u5faa\u73af,\u6d4f\u89c8\u5b8c'\u53d1\u73b0',\u9f20\u6807\u79fb\u51fa,\u7f6e\u4e8e\u53f3\u4fa7\u6570\u636e\u4e3a\u7b2c\u4e00\u4e2a\u7cbe\u9009\u6570\u636e\n this.data = this.menuList[0]\n \/\/\u9f20\u6807\u79fb\u51fa\u4e8b\u4ef6,\u7f6e\u4e8e\u7b2c\u4e00\u4e2a menuitem \u4e3a\u9ec4\u8272[\u672a\u5237\u65b0\u65f6\u7684\u8bbe\u7f6e]\n this.$refs['test' + 0][0].style.backgroundColor = 'rgb(255, 242, 0)'\n\n \/\/ this.data = {}\n \/\/ this.$refs['test'+index][0].style.backgroundColor = '#f8f8f8'\n \/\/ console.log('\u6eda\u51fa\u53bb')\n },\n}<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"\u4e0b\u8f7d\u4f9d\u8d56\u901f\u5ea6\u5feb npm install –registry=https:\/\/registry.npm.tao […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[],"class_list":["post-3462","post","type-post","status-publish","format-standard","hentry","category-web"],"_links":{"self":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/3462","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3462"}],"version-history":[{"count":38,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/3462\/revisions"}],"predecessor-version":[{"id":3558,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/3462\/revisions\/3558"}],"wp:attachment":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3462"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=3462"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=3462"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
\u5b89\u88c5\u63d2\u4ef6 ESLint \/ Vetur\nESLint : \u63d0\u793a\u8bed\u6cd5,\u8bed\u6cd5\u6821\u9a8c,\u7b26\u5408\u89c4\u8303\nVetur : \u8bc6\u522b Vue \u4e0a\u7684\u8bed\u6cd5,\u8ba9\u6587\u4ef6\u9ad8\u4eae\u663e\u793a\nnode_modules \u653e\u7684\u4e00\u4e9b\u4f9d\u8d56\u5305\n\u83b7\u53d6 : npm install \u5b89\u88c5\u4f9d\u8d56\npublic : \u5b58\u653e\u7684\u662f\u9ed8\u8ba4\u7684 html \u6a21\u677f\n.editorconfig : \u7f16\u8f91\u5668\u7684\u4e00\u4e9b\u9ed8\u8ba4\u914d\u7f6e\nbabel.config.js : vue \u7684\u4e00\u4e9b\u7528\u5230 babel \u7684\u914d\u7f6e\npackage.json : \u5b58\u653e\u7684\u662f\u4e00\u4e9b\u4f9d\u8d56\u5305\npackage-lock.json : \u4fdd\u8bc1\u591a\u4eba\u534f\u4f5c,\u5b89\u88c5\u4f9d\u8d56\u6709\u56fa\u5b9a\u7684\u7248\u672c\nsrc \u76ee\u5f55 : (\u6e90\u4ee3\u7801\u76ee\u5f55)\n\u5165\u53e3\u6587\u4ef6 : main.js\n\u5c06 App.vue \u6539\u6210<\/p>\n
<template>\n<div id="app">123<\/div>\n<\/template>\n<style lang="scss">\n<\/style><\/code><\/pre>\n\u5c06 asstes component \u7684\u5185\u5bb9\u6587\u4ef6\u5220\u4e86\n\u5c06 router->index.js \u2193\u5220\u6389\nimport HomeView from '..\/views\/HomeView.vue'<\/p>\n<\/p>\n<\/p><\/noscript>\n\n\u5c06 views \u7684\u5185\u5bb9\u6587\u4ef6\u5220\u4e86<\/li>\n<\/ul>\n\u57fa\u7840\u6837\u5f0f\u96c6\u6210\u53ca\u5f00\u53d1\u6a21\u62df\u5668\u7684\u4f7f\u7528<\/h2>\n\u4e3a\u4e86\u8ba9\u6211\u4eec\u7684\u6837\u5f0f\u5728\u6240\u6709\u6d4f\u89c8\u5668\u4e0a\u4fdd\u6301\u4e00\u81f4\nnpm install normalize.css@8.0.1 --save<\/p>\n\nmain.js : import 'normalize.css'\n\u5728 src \u4e2d\u521b\u5efa style\/base.css\nhtml{\nfont-size: 100px;\n}\n\/\/ 1rem=html font-size<\/li>\n<\/ul>\n\u79ef\u7d2f\u5199\u6cd5<\/h2>\n\u9002\u5f53\u4f7f\u7528> \u5b50\u5143\u7d20\u9009\u62e9\u5668<\/h3>\n.h_menu .menu_box > ul > li {}<\/p>\n\n\u907f\u514d\u5f71\u54cd\u4e09\u7ea7\u76ee\u5f55\u7684 ul li , A>B \u53ea\u9009\u62e9\u4e00\u4ee3\u3002<\/li>\n<\/ul>\n<\/p>\n<\/p><\/noscript>\n\u4f7f\u7528 v-for \u5faa\u73af\u5982\u4f55\u7ed9\u4e0d\u540c\u5143\u7d20\u8bbe\u7f6e\u4e0d\u540c\u6837\u5f0f<\/h3>\n <div v-for="(item,index) in list" :key="index" :class="'list-' + (index + 1)">\n <img :src="item.url" alt="" class="five_img"\/>\n <\/div><\/code><\/pre>\n\u6587\u5b57\u591a\u65f6,\u9690\u85cf<\/h3>\n.main_content ul li .svg_text {\n width: 86px;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;<\/code><\/pre>\n<\/p>\n<\/p><\/noscript>\n\u8bbe\u7f6e 5 \u500d\u6570\u7684\u5143\u7d20\u7684\u6837\u5f0f<\/h3>\n.main_content ul li:nth-child(5n) {\n margin-right: 0;\n}<\/code><\/pre>\nel-cascader-panel \u7ea7\u8054\u9009\u62e9\u5668\u6837\u5f0f\u66f4\u6539<\/h3>\n<\/p>\n<\/p><\/noscript>\n <div class="h_menu">\n <div class="menu_box">\n <el-cascader-panel :options="findOptions" :props="props"\/>\n <\/div>\n<\/div><\/code><\/pre>\n\/*\u4e8c\u7ea7\u76ee\u5f55*\/\n.topbar .shortcut-links {\n width: 600px;\n margin: 0 auto;\n}\n\n.topbar .shortcut-links > ul > li {\n float: left;\n padding: 13px 20px;\n line-height: 31px;\n font-size: 14px;\n position: relative;\n}\n\n.topbar .shortcut-links > ul > li:hover .h_menu {\n display: block;\n}\n.topbar .shortcut-links > ul > li .h_menu {\n position: absolute;\n left: 0;\n display: none;\n width: 152px;\n margin-top: 13px;\n z-index: 9999;\n}\n.topbar .shortcut-links > ul > li .h_menu .menu_box {\n background: #ffffff;\n width: 152px;\n box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);\n padding: 8px 0 8px 0;\n \/*float: left;*\/\n}\n\n.topbar .shortcut-links > ul > li .h_menu .menu_box >a {\n height: 45px;\n line-height: 45px;\n font-size: 14px;\n padding-left: 20px;\n \/*padding-top: 5px;*\/\n display: block;\n}\n<\/code><\/pre>\nstyle\n\/*\u53d6\u6d88\u8fb9\u6846*\/\n.el-cascader-panel.is-bordered {\n border: none;\n border-radius: 0;\n}\n\n.el-cascader-menu {\n color: #1c1f21;\n font-size: 14px;\n min-width: 152px;\n}\n\n.el-cascader-menu__list {\n padding: 0;\n}\n\n.el-cascader-node.in-active-path, .el-cascader-node.is-active, .el-cascader-node.is-selectable.in-checked-path {\n color: #1c1f21;\n font-weight: normal;\n}\n\/*item \u60ac\u6302\u9ec4\u8272\u80cc\u666f\u5bbd\u95f4\u8ddd*\/\n.el-cascader-node {\n padding-left: 20px;\n height: 45px;\n line-height: 45px;\n}\n\/*\u4e8c\u7ea7\u76ee\u5f55\u7684\u9ad8\u5ea6*\/\n.el-cascader-menu__wrap.el-scrollbar__wrap {\n height: 478px;\n}\n\n.el-cascader-menu:last-child .el-cascader-node {\n padding-right: 0;\n}\n\/*item \u60ac\u6302\u9ec4\u8272\u80cc\u666f*\/\n.el-cascader-node:not(.is-disabled):focus, .el-cascader-node:not(.is-disabled):hover {\n background-color: rgb(255, 242, 0);\n}\n\/*item \u53f3\u8fb9\u7684\u5c0f\u7bad\u5934\u989c\u8272\u6539\u4e3a\u9ec4\u8272[\u9690\u85cf]*\/\n.el-cascader-node:not(.is-disabled):focus, .el-cascader-node:not(.is-disabled):hover .el-icon {\n color: rgb(255, 242, 0);\n}\n\n.el-cascader-node__label {\n padding: 0;\n}\n\n.el-cascader-node__postfix {\n position: absolute;\n right: 0;\n}\n\/*\u6eda\u52a8\u6761\u5230\u9876\u90e8,\u4e0b\u90e8\u7684\u95f4\u8ddd*\/\n.el-scrollbar__bar {\n position: absolute;\n right: 0;\n bottom: 0;\n z-index: 1;\n border-radius: 4px;\n}<\/code><\/pre>\n<\/p>\n<\/p><\/noscript>\n <el-cascader-panel :options="findOptions" :props="props"\/><\/code><\/pre>\n\/*\u4e8c\u7ea7\u76ee\u5f55\u7684\u9ad8\u5ea6*\/\n\/deep\/.el-cascader-menu__wrap.el-scrollbar__wrap {\n height: 490px;\n}\n\/*item \u60ac\u6302\u9ec4\u8272\u80cc\u666f\u5bbd\u95f4\u8ddd*\/\n\/deep\/.el-cascader-node {\nheight: 45px;\n width: 165px;\n padding: 0;\n margin-left: 10px;\n}\n\/*item \u60ac\u6302\u9ec4\u8272\u80cc\u666f*\/\n\/deep\/ .el-cascader-node:not(.is-disabled):hover {\n background: #fff200;\n border-radius: 8px;\n}\n\/*\u70b9\u51fb\u540e\u6539\u53d8\u989c\u8272,\u7c97\u7ec6\u53d6\u6d88\u70b9\u51fb\u6548\u679c*\/\n\/deep\/.el-cascader-node.is-active{\ncolor: #222222;\n font-weight: normal;\n}\n\/*item \u5de6\u8fb9\u6709\u4e2a\u5c0f\u52fe\u221a*\/\n\/deep\/.el-icon svg {\n height: 0;\n width: 0;\n}\n\/*\u53d1\u73b0\u7684\u4e8c\u7ea7\u76ee\u5f55\u6d88\u5931*\/\n.el-cascader-panel{\n display: none;\n}\n\/*\u53d6\u6d88\u8fb9\u6846*\/\n.el-cascader-panel.is-bordered {\n border: none;\n}\n\/*\u60ac\u6302'\u53d1\u73b0'\u76ee\u5f55,\u51fa\u73b0\u4e8c\u7ea7\u76ee\u5f55*\/\n.topbar .shortcut-links > ul > li:nth-child(2):hover .el-cascader-panel{\n display: block;\n background-color: #f8f8f8;\n border-radius: 8px 0 8px 8px;\n}<\/code><\/pre>\n\u626b\u4e8c\u7ef4\u7801\u767b\u5f55\u548c\u5bc6\u7801\u767b\u5f55\u9875\u9762\u7684\u5207\u6362<\/h3>\n@click="handleChangeToLogin()"<\/code><\/pre>\n handleChangeToLogin () {\n const qr = document.getElementById('qr_code')\n const login = document.getElementById('login')\n qr.style.display = 'none';\n if (qr.style.display === 'none') {\n login.style.display = 'block'\n }\n },\n handleChangeToQr () {\n const qr = document.getElementById('qr_code')\n const login = document.getElementById('login')\n login.style.display = 'none'\n if (login.style.display === 'none') {\n qr.style.display = 'block'\n }\n }<\/code><\/pre>\n\u767b\u5f55\u6846\u7684\u6ed1\u5757\u9a8c\u8bc1<\/h3>\n<\/p>\n<\/p><\/noscript>\n<\/slider><\/p>\n<template>\n <div ref="dragDiv" class="drag">\n <div class="drag_bg"><\/div>\n <div class="drag_text">{{ confirmWords }}<\/div>\n <div ref="moveDiv" :class="{'handler_ok_bg':confirmSuccess}" class="handler handler_bg"\n style="position: absolute;top: 0;left: 0;" @mousedown="mouseDownFn($event)"><\/div>\n <\/div>\n<\/template>\n\n<script>\nexport default {\n data () {\n return {\n beginClientX: 0, \/*\u8ddd\u79bb\u5c4f\u5e55\u5de6\u7aef\u8ddd\u79bb*\/\n mouseMoveState: false, \/*\u89e6\u53d1\u62d6\u52a8\u72b6\u6001 \u5224\u65ad*\/\n maxWidth: '', \/*\u62d6\u52a8\u6700\u5927\u5bbd\u5ea6\uff0c\u4f9d\u636e\u6ed1\u5757\u5bbd\u5ea6\u7b97\u51fa\u6765\u7684*\/\n confirmWords: '\u8bf7\u6309\u4f4f\u6ed1\u5757,\u62d6\u52a8\u5230\u6700\u53f3\u8fb9', \/*\u6ed1\u5757\u6587\u5b57*\/\n confirmSuccess: false \/*\u9a8c\u8bc1\u6210\u529f\u5224\u65ad*\/\n }\n },\n methods: {\n \/\/mousedown \u4e8b\u4ef6\n mouseDownFn: function (e) {\n if (!this.confirmSuccess) {\n e.preventDefault && e.preventDefault() \/\/\u963b\u6b62\u6587\u5b57\u9009\u4e2d\u7b49 \u6d4f\u89c8\u5668\u9ed8\u8ba4\u4e8b\u4ef6\n this.mouseMoveState = true\n this.beginClientX = e.clientX\n }\n },\n \/\/\u9a8c\u8bc1\u6210\u529f\u51fd\u6570\n successFunction () {\n this.confirmSuccess = true\n this.confirmWords = '\u9a8c\u8bc1\u901a\u8fc7'\n if (window.addEventListener) {\n document.getElementsByTagName('html')[0].removeEventListener('mousemove', this.mouseMoveFn)\n document.getElementsByTagName('html')[0].removeEventListener('mouseup', this.moseUpFn)\n } else {\n document.getElementsByTagName('html')[0].removeEventListener('mouseup', () => {\n })\n }\n document.getElementsByClassName('drag_text')[0].style.color = '#fff'\n document.getElementsByClassName('handler')[0].style.left = this.maxWidth + 'px'\n document.getElementsByClassName('drag_bg')[0].style.width = this.maxWidth + 'px'\n },\n \/\/mousemove \u4e8b\u4ef6\n mouseMoveFn (e) {\n if (this.mouseMoveState) {\n let width = e.clientX - this.beginClientX\n if (width > 0 && width <= this.maxWidth) {\n document.getElementsByClassName('handler')[0].style.left = width + 'px'\n document.getElementsByClassName('drag_bg')[0].style.width = width + 'px'\n } else if (width > this.maxWidth) {\n this.successFunction()\n }\n }\n },\n \/\/mouseup \u4e8b\u4ef6\n moseUpFn (e) {\n this.mouseMoveState = false\n var width = e.clientX - this.beginClientX\n if (width < this.maxWidth) {\n document.getElementsByClassName('handler')[0].style.left = 0 + 'px'\n document.getElementsByClassName('drag_bg')[0].style.width = 0 + 'px'\n }\n }\n },\n mounted () {\n this.maxWidth = this.$refs.dragDiv.clientWidth - this.$refs.moveDiv.clientWidth\n document.getElementsByTagName('html')[0].addEventListener('mousemove', this.mouseMoveFn)\n document.getElementsByTagName('html')[0].addEventListener('mouseup', this.moseUpFn)\n }\n}\n<\/script>\n<style scoped>\n.drag {\n position: relative;\n background-color: #e8e8e8;\n width: 100%;\n height: 32px;\n line-height: 32px;\n text-align: center;\n border: 1px solid #ccc;\n\n}\n\n.handler {\n width: 40px;\n height: 32px;\n border: 1px solid #ccc;\n cursor: move;\n margin-top: -1px;\n margin-left: -1px;\n}\n\n.handler_bg {\n background: #fff url('..\/assets\/images\/arrow-r.png') no-repeat center;\n background-size: 25px;\n}\n\n.handler_ok_bg {\n background: #fff url('..\/assets\/images\/\u221a.png') no-repeat center;\n background-size: 18px;\n}\n\n.drag_bg {\n background-color: #7ac23c;\n height: 32px;\n width: 0;\n}\n\n.drag_text {\n position: absolute;\n top: 0;\n width: 100%;\n font-size: 12px;\n color: #706f6f;\n}\n\n<\/style>\n<\/code><\/pre>\nel-input \u805a\u7126\u540e\u80cc\u666f\u53d8\u767d<\/h3>\n<\/p>\n<\/p><\/noscript>\n.el-input__wrapper.is-focus {\n box-shadow: 0 0 0 1px #dcdfe6 inset;\n background-color: #fff;\n}<\/code><\/pre>\nel-input placeholder \u989c\u8272\u8bbe\u7f6e<\/h3>\n.el-input__inner::placeholder{\n color: #666666;\n}<\/code><\/pre>\n\u5224\u65ad el-checked \u662f\u5426\u9009\u4e2d,\u672a\u9009\u4e2d\u5219\u63d0\u793a\u8bf7\u52fe\u9009<\/h3>\n<\/p>\n<\/p><\/noscript>\nexport default {\nmounted() {\n const pleaseFit=document.getElementById('pleaseFit');\n $(".el-checkbox input").change(() => {\n if ($(".el-checkbox input[type='checkbox']").is(':checked') == true) {\n pleaseFit.style.display='none'\n } else {\n pleaseFit.style.display='block'\n }\n })\n }\n }<\/code><\/pre>\nel-input \u5728 style \u5168\u5c40\u6837\u5f0f,\u4f1a\u5f71\u54cd\u5230\u5176\u4ed6\u4e0d\u7b26\u5408\u8be5\u6837\u5f0f\u7684\u4f4d\u7f6e<\/h3>\n\n\u53ef\u4ee5\u5728 style scoped> \u5199,\u52a0\u4e0a\/deep\/<\/li>\n<\/ul>\n<\/p>\n<\/p><\/noscript>\n\/deep\/ .el-input__wrapper {\n box-shadow: 0 0 0 0 inset;\n background-color: rgb(255, 242, 0);\n}<\/code><\/pre>\nel-carousel \u8d70\u9a6c\u706f\u4fee\u6539 Carousel \u5de6\u53f3\u4e24\u4fa7\u7bad\u5934\u5b57\u4f53\u5927\u5c0f<\/h3>\n\/deep\/.el-carousel__arrow i {\n font-size: 29px !important;\n }<\/code><\/pre>\n\u9875\u9762\u5411\u4e0b\u6ed1\u52a8\u5bfc\u822a\u680f\u56fa\u5b9a<\/h3>\n<\/p>\n<\/p><\/noscript>\n.main_nav_fixed {\n position: sticky;\n top: 0;\n z-index: 999;\n}<\/code><\/pre>\n\u56fa\u5b9a\u5728\u53f3\u65b9\u7684,\u60ac\u6302\u51fa\u73b0\u4e8c\u7ef4\u7801<\/h3>\n<\/p>\n<\/p><\/noscript>\n<div class="share_box">\n <img src="..\/..\/assets\/images\/share_qr.png" alt=""\/>\n <\/div><\/code><\/pre>\n.share_box{\n width: 70px;\n height: 131px;\n top: 300px;\n right: 10px;\n cursor: pointer;\n position: fixed;\n z-index: 999;\n background: url("..\/..\/assets\/images\/share_wx.jpg") no-repeat;\n background-size: 100% 100%;\n}\n.share_box img{\n width: 100px;\n height: 100px;\n display: none;\n}\n.share_box:hover img {\n position: absolute;\n top: 50%;\n margin-top: -50px;\n right: 82px;\n display: block !important;\n}<\/code><\/pre>\nnth-child(n)\u6307\u7684\u662f\u5728\u7236\u5143\u7d20\u4e2d\u6240\u6709\u7684\u5143\u7d20\u7684\u987a\u5e8f<\/h3>\n\n\u5199\u4ee3\u7801\u8981\u6839\u636e\u76d2\u5b50\u4ee5\u53ca\u5185\u5bb9\u5199<\/li>\nbottom\uff1a0\uff1b\u8981\u76f8\u5bf9\u4e8e\u7236\u5143\u7d20\u7684 height \u5b9e\u73b0\uff0c\u5982\u679c\u7236\u7236\u5143\u7d20\u7684 height \u5927\u4e8e\u7236\u5143\u7d20\u7684 height\uff0c\uff0c\u5219\u4f1a\u6309\u7167\u7236\u7236\u5143\u7d20\u7684 height \u6765\u5b9e\u73b0 bottom\uff1a0\uff1b\u6765\u5b9e\u73b0\u3002\u3010\u9002\u5f53\u5220\u9664\u7236\u7236\u5143\u7d20\u7684 height\uff0c\u4e00\u677f\u5757\u901a\u5e38\u4e0d\u7528\u8bbe\u7f6e\u603b height\u3011<\/li>\n<\/ul>\n\u60ac\u6302\u56fe\u7247\u7f13\u7f13\u653e\u5927\u7684\u52a8\u753b\u6548\u679c<\/h3>\n<\/p>\n<\/p><\/noscript>\n.gc_project .item_img > img {\n width: 100%;\n height: 100%;\n transition: all 0.3s;\n}\n.gc_project .item_img > img:hover {\n transform: scale(1.05);\n box-shadow: rgb(0 0 0 \/ 23%) 0 4px 14px 0;\n}<\/code><\/pre>\n\u6eda\u52a8\u6761\u4fee\u6539<\/h3>\n<\/p>\n<\/p><\/noscript>\n.mleft::-webkit-scrollbar{\n width: 6px;\n background-color: #f8f8f8;\n\n}\n.mleft::-webkit-scrollbar-thumb{\n width: 6px;\n background-color: #adacac;\n border-radius: 4px;\n}<\/code><\/pre>\nhead \u533a '\u53d1\u73b0' \u5b9e\u73b0\u4ea4\u4e92\u6548\u679c [\u8be5\u9996\u9875\u6700\u607c\u706b\u7684]<\/h2>\n<\/p>\n<\/p><\/noscript>\ntodo head \u533a'\u53d1\u73b0'\u4ea4\u4e92\u5b9e\u73b0\u601d\u8def:<\/h3>\n\n\u2460\u89c2\u5bdf\u8be5\u533a\u7ed3\u6784,\u4e00\u4e2a\u5927\u6a21\u5757,\u5176\u4e2d\u5206\u4e3a\u5de6\u4e2d\u53f3\u4e09\u4e2a\u6a21\u5757,\u5e76\u4f9d\u6b21\u5199\u51fa\u4e09\u4e2a\u6a21\u5757\u7684\u4ee3\u7801,<\/li>\n\u2461\u5de6\u4fa7\u533a\u57df: \u8981\u5c55\u793a\u7684\u6548\u679c\u6709: \u9f20\u6807\u4e0a\u4e0b\u79fb\u52a8,\u6240\u7ecf\u7684 menuItem \u4f1a\u5c55\u73b0\u9ec4\u8272\u80cc\u666f, \u5219\u5f15\u7528 vue \u7684 ref \u5c5e\u6027\u5bf9 DOM \u5143\u7d20\u8fdb\u884c\u52a8\u6001\u7ed1\u5b9a.\n\n\u6ce8\u610f:ref \u9700\u8981\u5728 dom \u6e32\u67d3\u5b8c\u6210\u540e\u624d\u4f1a\u6709,\u5728\u4f7f\u7528\u7684\u65f6\u5019\u786e\u4fdd dom \u5df2\u7ecf\u6e32\u67d3\u5b8c\u6210, \u6bd4\u5982\u5728\u751f\u547d\u5468\u671f mounted(){}\u94a9\u5b50\u4e2d\u8c03\u7528. this.$refs.xxx:\u51cf\u5c11\u83b7\u53d6 dom \u8282\u70b9\u7684\u6d88\u8017<\/li>\n<\/ul>\n<\/li>\n\u2462\u5de6\u4fa7\u533a\u57df\u8fc7\u6ee4\u5230\u53f3\u4fa7\u533a\u57df,\u5c55\u793a\u5bf9\u5e94\u7684\u8be6\u60c5\u9875: mleftIn(item,index)\u51fd\u6570\u901a\u8fc7\u4f20\u8f93 v-for \u5faa\u73af\u4e2d\u6570\u7ec4 menuList \u7684 item \u6bcf\u4e00\u9879\u4e3a\u5a92\u4ecb, \u800c\u6570\u636e\u4e2d menuList \u4e2d\u5305\u542b\u5de6\u4fa7\u6570\u636e menuItem \u4e0e\u53f3\u4fa7\u6bcf\u4e00\u9875\u7684\u6807\u9898 menu \u76f8\u540c, \u4ece\u800c\u5c06\u5de6\u4fa7\u548c\u53f3\u4fa7\u6570\u636e\u7ed1\u5b9a, \u6545\u800c\u5f62\u6210\u4ece\u5de6\u4fa7\u8fc7\u6ee4\u5230\u53f3\u4fa7\u533a\u57df\u662f\u56fa\u5b9a\u7684\u8be6\u60c5\u9875\u5185\u5bb9.<\/li>\n\u2463\u9875\u9762\u7b2c\u4e8c\u6b21\u672a\u5237\u65b0\u4e4b\u524d(\u9996\u6b21\u8fdb\u5165\u9875\u9762\u6e32\u67d3), \u9f20\u6807\u60ac\u6302'\u53d1\u73b0',\u8981\u51fa\u73b0\u7b2c\u4e00\u4e2a'\u7cbe\u9009'\u8be6\u60c5\u9875\u53ca'\u7cbe\u9009'item \u80cc\u666f\u53d8\u9ec4: \u9f20\u6807\u79fb\u51fa\u8be5\u5143\u7d20[\u4e8c\u7ea7\u76ee\u5f55\u6574\u4e2a\u5927\u6a21\u5757]\u4e4b\u5916,\u5219\u89e6\u53d1 mouseleave \u4e8b\u4ef6,\u521d\u59cb\u5316\u6570\u636e.<\/li>\n\u2464\u7b2c\u4e8c\u6b21\u9875\u9762\u5237\u65b0\u4e4b\u540e,\u521d\u59cb\u5316\u6570\u636e: \u91c7\u7528 mounted \u751f\u547d\u5468\u671f[\u6e32\u67d3\u6210 html \u540e\u8c03\u7528]: \u4f7f\u9f20\u6807\u60ac\u6302'\u53d1\u73b0',\u7b2c\u4e00\u4e2a menu-item \u663e\u793a\u9ec4\u8272<\/li>\n<\/ul>\n <li class="find">\n <a href="#">\u53d1\u73b0<\/a>\n <div class="h_menu" @mouseleave="mleftLeave()">\n <div class="menu_box mleft">\n <!-- <a href="">\u7cbe\u9009<\/a>-->\n <a v-for="(item,index) in menuList" :key="index" :ref="'test'+index" href="javascript:;"\n @mouseover="mleftIn(item,index)">{{ item.menu }}<\/a>\n <!-- <el-cascader-panel :options="findOptions" :props="props" \/>-->\n <\/div>\n <div class="mright">\n <div class="cate-box">\n <a class="cate-title" href="">\n <img :src="data.url" alt="">\n <span>{{ data.menu }}<\/span>\n <\/a>\n <div class="subCate">\n <a v-for="(itemOne) in data.items" :key="itemOne">{{ itemOne.text }}<\/a>\n <\/div>\n <\/div>\n <\/div>\n <div class="right_bar">\n <div class="icons">\n <a>\n <span class="icon-box">\n <span class="tangle-1"><\/span>\n <span class="tangle-2"><\/span>\n <i class="ani-star"><\/i>\n <span class="tangle-3"><\/span>\n <\/span>\n <span class="icon-text">\u6536\u85cf\u5939<\/span>\n <\/a>\n <a>\n <img alt="" src="..\/assets\/images\/icon-header-discover-designer.png">\n <span>\u8bbe\u8ba1\u5e08<\/span>\n <\/a>\n <a>\n <img alt="" src="..\/assets\/images\/icon-header-discover-focus.png">\n <span>\u699c\u5355<\/span>\n <!-- <sup class="subNavDot"><\/sup>-->\n <\/a>\n <\/div>\n <div class="ad_box">\n\n <\/div>\n <\/div>\n <\/div>\n <\/li><\/code><\/pre>\n data: {},\n menuList: [\n {\n menu: '\u7cbe\u9009',\n url: require('..\/assets\/images\/zuanshi.png'),\n items: [\n { text: '\u8fd0\u8425\u8bbe\u8ba1' },\n { text: '\u5305\u88c5' },\n { text: '\u52a8\u753b\/\u5f71\u89c6' },\n { text: '\u4eba\u50cf\u6444\u5f71' },\n { text: '\u5546\u4e1a\u63d2\u753b' },\n { text: '\u7535\u5546' },\n { text: 'APP \u754c\u9762' },\n { text: '\u827a\u672f\u63d2\u753b' },\n { text: '\u5bb6\u88c5\u8bbe\u8ba1' },\n { text: '\u6d77\u62a5' },\n { text: '\u6587\u7ae0' }\n ]\n },\n { menu: '\u5e73\u9762' },\n { menu: 'UI' },\n { menu: '\u7f51\u9875' },\n { menu: '\u63d2\u753b' },\n { menu: '\u52a8\u6f2b' },\n { menu: '\u6444\u5f71' },\n { menu: '\u7a7a\u95f4' },\n { menu: '\u5de5\u4e1a\/\u4ea7\u54c1' },\n { menu: '\u4e09\u7ef4' },\n { menu: '\u5f71\u89c6' },\n { menu: '\u624b\u5de5\u827a' },\n { menu: '\u7eaf\u827a\u672f' },\n { menu: '\u670d\u88c5' },\n { menu: '\u5176\u4ed6' }\n ],<\/code><\/pre>\n \/\/\u6e32\u67d3\u6210 html \u4e4b\u524d\u8c03\u7528,\u521d\u59cb\u5316\u4e00\u4e9b\u5c5e\u6027\u503c [\u9f20\u6807\u60ac\u6302'\u53d1\u73b0',\u5c31\u51fa\u73b0\u7b2c\u4e00\u4e2a\u7cbe\u9009\u9875\u9762]\n created () {\n this.data = this.menuList[0]\n },\n \/\/\u6e32\u67d3\u6210 html \u540e\u8c03\u7528 [\u9f20\u6807\u60ac\u6302'\u53d1\u73b0',\u7b2c\u4e00\u4e2a menu-item \u663e\u793a\u9ec4\u8272](\u9875\u9762\u5237\u65b0\u4e86\u4e4b\u540e\u7684)\n mounted () {\n this.$refs['test' + 0][0].style.backgroundColor = 'rgb(255, 242, 0)'\n },\n methods: {\n \/\/\u9f20\u6807\u8fdb\u5165\u51fd\u6570\n mleftIn (item, index) {\n \/\/\u83b7\u53d6 menuList \u4e2d\u6bcf\u4e2a menuItem \u5b57\u7b26\u4e32\u7684\u957f\u5ea6\n let menuSize = this.menuList.length\n for (let i = 0; i < menuSize; i++) {\n \/\/for \u5faa\u73af,i \u5982\u679c\u5c0f\u4e8e menuSize,\u5219\u7f6e\u4e8e menuItem \u989c\u8272\u4e3a\u7070\u8272,\u5b9e\u73b0\u5207\u6362\u6548\u679c\n this.$refs['test' + i][0].style.backgroundColor = '#f8f8f8'\n }\n \/\/\u8df3\u51fa for \u5faa\u73af,\u7531\u5de6\u4fa7\u79fb\u5411\u53f3\u4fa7\u8be6\u60c5\u9875\u65f6,\u5176 menuItem \u7684\u989c\u8272\u4e3a\u9ec4\u8272\n this.$refs['test' + index][0].style.backgroundColor = 'rgb(255, 242, 0)'\n \/\/\u5c06\u53f3\u4fa7\u6570\u636e\u8bbe\u7f6e\u4e3a item,\u663e\u793a\u6570\u636e\n this.data = item\n },\n \/\/\u9f20\u6807\u8fdb\u5165\u51fd\u6570\n \/\/\u6ce8\u610f: mouseleave:\u662f\u9f20\u6807\u79fb\u51fa\u8be5\u5143\u7d20\u4e4b\u5916,\u5219\u89e6\u53d1 mouseleave \u4e8b\u4ef6\n \/\/ mouseout : \u662f\u5f53\u6307\u9488\u79bb\u5f00\u8be5\u5143\u7d20\u53ca\u5176\u6240\u6709\u540e\u4ee3\u65f6\uff0c\u4f1a\u89e6\u53d1 mouseleave\n \/\/ \u800c\u5f53\u6307\u9488\u79bb\u5f00\u5143\u7d20\u6216\u79bb\u5f00\u5143\u7d20\u7684\u540e\u4ee3\uff08\u5373\u4f7f\u6307\u9488\u4ecd\u5728\u5143\u7d20\u5185\uff09\u65f6\uff0c\u4e5f\u4f1a\u89e6\u53d1 mouseout \u4e8b\u4ef6\n mleftLeave () {\n \/\/\u83b7\u53d6 menuList \u4e2d\u6bcf\u4e2a menuItem \u5b57\u7b26\u4e32\u7684\u957f\u5ea6\n let menuSize = this.menuList.length\n for (let i = 0; i < menuSize; i++) {\n this.$refs['test' + i][0].style.backgroundColor = '#f8f8f8'\n }\n \/\/ \u8df3\u51fa\u5faa\u73af,\u6d4f\u89c8\u5b8c'\u53d1\u73b0',\u9f20\u6807\u79fb\u51fa,\u7f6e\u4e8e\u53f3\u4fa7\u6570\u636e\u4e3a\u7b2c\u4e00\u4e2a\u7cbe\u9009\u6570\u636e\n this.data = this.menuList[0]\n \/\/\u9f20\u6807\u79fb\u51fa\u4e8b\u4ef6,\u7f6e\u4e8e\u7b2c\u4e00\u4e2a menuitem \u4e3a\u9ec4\u8272[\u672a\u5237\u65b0\u65f6\u7684\u8bbe\u7f6e]\n this.$refs['test' + 0][0].style.backgroundColor = 'rgb(255, 242, 0)'\n\n \/\/ this.data = {}\n \/\/ this.$refs['test'+index][0].style.backgroundColor = '#f8f8f8'\n \/\/ console.log('\u6eda\u51fa\u53bb')\n },\n}<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"\u4e0b\u8f7d\u4f9d\u8d56\u901f\u5ea6\u5feb npm install –registry=https:\/\/registry.npm.tao […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[],"class_list":["post-3462","post","type-post","status-publish","format-standard","hentry","category-web"],"_links":{"self":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/3462","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3462"}],"version-history":[{"count":38,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/3462\/revisions"}],"predecessor-version":[{"id":3558,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/3462\/revisions\/3558"}],"wp:attachment":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3462"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=3462"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=3462"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
\u5c06 asstes component \u7684\u5185\u5bb9\u6587\u4ef6\u5220\u4e86\n\u5c06 router->index.js \u2193\u5220\u6389\nimport HomeView from '..\/views\/HomeView.vue'<\/p>\n
<\/p>\n<\/p><\/noscript>\n\n\u5c06 views \u7684\u5185\u5bb9\u6587\u4ef6\u5220\u4e86<\/li>\n<\/ul>\n\u57fa\u7840\u6837\u5f0f\u96c6\u6210\u53ca\u5f00\u53d1\u6a21\u62df\u5668\u7684\u4f7f\u7528<\/h2>\n\u4e3a\u4e86\u8ba9\u6211\u4eec\u7684\u6837\u5f0f\u5728\u6240\u6709\u6d4f\u89c8\u5668\u4e0a\u4fdd\u6301\u4e00\u81f4\nnpm install normalize.css@8.0.1 --save<\/p>\n\nmain.js : import 'normalize.css'\n\u5728 src \u4e2d\u521b\u5efa style\/base.css\nhtml{\nfont-size: 100px;\n}\n\/\/ 1rem=html font-size<\/li>\n<\/ul>\n\u79ef\u7d2f\u5199\u6cd5<\/h2>\n\u9002\u5f53\u4f7f\u7528> \u5b50\u5143\u7d20\u9009\u62e9\u5668<\/h3>\n.h_menu .menu_box > ul > li {}<\/p>\n\n\u907f\u514d\u5f71\u54cd\u4e09\u7ea7\u76ee\u5f55\u7684 ul li , A>B \u53ea\u9009\u62e9\u4e00\u4ee3\u3002<\/li>\n<\/ul>\n<\/p>\n<\/p><\/noscript>\n\u4f7f\u7528 v-for \u5faa\u73af\u5982\u4f55\u7ed9\u4e0d\u540c\u5143\u7d20\u8bbe\u7f6e\u4e0d\u540c\u6837\u5f0f<\/h3>\n <div v-for="(item,index) in list" :key="index" :class="'list-' + (index + 1)">\n <img :src="item.url" alt="" class="five_img"\/>\n <\/div><\/code><\/pre>\n\u6587\u5b57\u591a\u65f6,\u9690\u85cf<\/h3>\n.main_content ul li .svg_text {\n width: 86px;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;<\/code><\/pre>\n<\/p>\n<\/p><\/noscript>\n\u8bbe\u7f6e 5 \u500d\u6570\u7684\u5143\u7d20\u7684\u6837\u5f0f<\/h3>\n.main_content ul li:nth-child(5n) {\n margin-right: 0;\n}<\/code><\/pre>\nel-cascader-panel \u7ea7\u8054\u9009\u62e9\u5668\u6837\u5f0f\u66f4\u6539<\/h3>\n<\/p>\n<\/p><\/noscript>\n <div class="h_menu">\n <div class="menu_box">\n <el-cascader-panel :options="findOptions" :props="props"\/>\n <\/div>\n<\/div><\/code><\/pre>\n\/*\u4e8c\u7ea7\u76ee\u5f55*\/\n.topbar .shortcut-links {\n width: 600px;\n margin: 0 auto;\n}\n\n.topbar .shortcut-links > ul > li {\n float: left;\n padding: 13px 20px;\n line-height: 31px;\n font-size: 14px;\n position: relative;\n}\n\n.topbar .shortcut-links > ul > li:hover .h_menu {\n display: block;\n}\n.topbar .shortcut-links > ul > li .h_menu {\n position: absolute;\n left: 0;\n display: none;\n width: 152px;\n margin-top: 13px;\n z-index: 9999;\n}\n.topbar .shortcut-links > ul > li .h_menu .menu_box {\n background: #ffffff;\n width: 152px;\n box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);\n padding: 8px 0 8px 0;\n \/*float: left;*\/\n}\n\n.topbar .shortcut-links > ul > li .h_menu .menu_box >a {\n height: 45px;\n line-height: 45px;\n font-size: 14px;\n padding-left: 20px;\n \/*padding-top: 5px;*\/\n display: block;\n}\n<\/code><\/pre>\nstyle\n\/*\u53d6\u6d88\u8fb9\u6846*\/\n.el-cascader-panel.is-bordered {\n border: none;\n border-radius: 0;\n}\n\n.el-cascader-menu {\n color: #1c1f21;\n font-size: 14px;\n min-width: 152px;\n}\n\n.el-cascader-menu__list {\n padding: 0;\n}\n\n.el-cascader-node.in-active-path, .el-cascader-node.is-active, .el-cascader-node.is-selectable.in-checked-path {\n color: #1c1f21;\n font-weight: normal;\n}\n\/*item \u60ac\u6302\u9ec4\u8272\u80cc\u666f\u5bbd\u95f4\u8ddd*\/\n.el-cascader-node {\n padding-left: 20px;\n height: 45px;\n line-height: 45px;\n}\n\/*\u4e8c\u7ea7\u76ee\u5f55\u7684\u9ad8\u5ea6*\/\n.el-cascader-menu__wrap.el-scrollbar__wrap {\n height: 478px;\n}\n\n.el-cascader-menu:last-child .el-cascader-node {\n padding-right: 0;\n}\n\/*item \u60ac\u6302\u9ec4\u8272\u80cc\u666f*\/\n.el-cascader-node:not(.is-disabled):focus, .el-cascader-node:not(.is-disabled):hover {\n background-color: rgb(255, 242, 0);\n}\n\/*item \u53f3\u8fb9\u7684\u5c0f\u7bad\u5934\u989c\u8272\u6539\u4e3a\u9ec4\u8272[\u9690\u85cf]*\/\n.el-cascader-node:not(.is-disabled):focus, .el-cascader-node:not(.is-disabled):hover .el-icon {\n color: rgb(255, 242, 0);\n}\n\n.el-cascader-node__label {\n padding: 0;\n}\n\n.el-cascader-node__postfix {\n position: absolute;\n right: 0;\n}\n\/*\u6eda\u52a8\u6761\u5230\u9876\u90e8,\u4e0b\u90e8\u7684\u95f4\u8ddd*\/\n.el-scrollbar__bar {\n position: absolute;\n right: 0;\n bottom: 0;\n z-index: 1;\n border-radius: 4px;\n}<\/code><\/pre>\n<\/p>\n<\/p><\/noscript>\n <el-cascader-panel :options="findOptions" :props="props"\/><\/code><\/pre>\n\/*\u4e8c\u7ea7\u76ee\u5f55\u7684\u9ad8\u5ea6*\/\n\/deep\/.el-cascader-menu__wrap.el-scrollbar__wrap {\n height: 490px;\n}\n\/*item \u60ac\u6302\u9ec4\u8272\u80cc\u666f\u5bbd\u95f4\u8ddd*\/\n\/deep\/.el-cascader-node {\nheight: 45px;\n width: 165px;\n padding: 0;\n margin-left: 10px;\n}\n\/*item \u60ac\u6302\u9ec4\u8272\u80cc\u666f*\/\n\/deep\/ .el-cascader-node:not(.is-disabled):hover {\n background: #fff200;\n border-radius: 8px;\n}\n\/*\u70b9\u51fb\u540e\u6539\u53d8\u989c\u8272,\u7c97\u7ec6\u53d6\u6d88\u70b9\u51fb\u6548\u679c*\/\n\/deep\/.el-cascader-node.is-active{\ncolor: #222222;\n font-weight: normal;\n}\n\/*item \u5de6\u8fb9\u6709\u4e2a\u5c0f\u52fe\u221a*\/\n\/deep\/.el-icon svg {\n height: 0;\n width: 0;\n}\n\/*\u53d1\u73b0\u7684\u4e8c\u7ea7\u76ee\u5f55\u6d88\u5931*\/\n.el-cascader-panel{\n display: none;\n}\n\/*\u53d6\u6d88\u8fb9\u6846*\/\n.el-cascader-panel.is-bordered {\n border: none;\n}\n\/*\u60ac\u6302'\u53d1\u73b0'\u76ee\u5f55,\u51fa\u73b0\u4e8c\u7ea7\u76ee\u5f55*\/\n.topbar .shortcut-links > ul > li:nth-child(2):hover .el-cascader-panel{\n display: block;\n background-color: #f8f8f8;\n border-radius: 8px 0 8px 8px;\n}<\/code><\/pre>\n\u626b\u4e8c\u7ef4\u7801\u767b\u5f55\u548c\u5bc6\u7801\u767b\u5f55\u9875\u9762\u7684\u5207\u6362<\/h3>\n@click="handleChangeToLogin()"<\/code><\/pre>\n handleChangeToLogin () {\n const qr = document.getElementById('qr_code')\n const login = document.getElementById('login')\n qr.style.display = 'none';\n if (qr.style.display === 'none') {\n login.style.display = 'block'\n }\n },\n handleChangeToQr () {\n const qr = document.getElementById('qr_code')\n const login = document.getElementById('login')\n login.style.display = 'none'\n if (login.style.display === 'none') {\n qr.style.display = 'block'\n }\n }<\/code><\/pre>\n\u767b\u5f55\u6846\u7684\u6ed1\u5757\u9a8c\u8bc1<\/h3>\n<\/p>\n<\/p><\/noscript>\n<\/slider><\/p>\n<template>\n <div ref="dragDiv" class="drag">\n <div class="drag_bg"><\/div>\n <div class="drag_text">{{ confirmWords }}<\/div>\n <div ref="moveDiv" :class="{'handler_ok_bg':confirmSuccess}" class="handler handler_bg"\n style="position: absolute;top: 0;left: 0;" @mousedown="mouseDownFn($event)"><\/div>\n <\/div>\n<\/template>\n\n<script>\nexport default {\n data () {\n return {\n beginClientX: 0, \/*\u8ddd\u79bb\u5c4f\u5e55\u5de6\u7aef\u8ddd\u79bb*\/\n mouseMoveState: false, \/*\u89e6\u53d1\u62d6\u52a8\u72b6\u6001 \u5224\u65ad*\/\n maxWidth: '', \/*\u62d6\u52a8\u6700\u5927\u5bbd\u5ea6\uff0c\u4f9d\u636e\u6ed1\u5757\u5bbd\u5ea6\u7b97\u51fa\u6765\u7684*\/\n confirmWords: '\u8bf7\u6309\u4f4f\u6ed1\u5757,\u62d6\u52a8\u5230\u6700\u53f3\u8fb9', \/*\u6ed1\u5757\u6587\u5b57*\/\n confirmSuccess: false \/*\u9a8c\u8bc1\u6210\u529f\u5224\u65ad*\/\n }\n },\n methods: {\n \/\/mousedown \u4e8b\u4ef6\n mouseDownFn: function (e) {\n if (!this.confirmSuccess) {\n e.preventDefault && e.preventDefault() \/\/\u963b\u6b62\u6587\u5b57\u9009\u4e2d\u7b49 \u6d4f\u89c8\u5668\u9ed8\u8ba4\u4e8b\u4ef6\n this.mouseMoveState = true\n this.beginClientX = e.clientX\n }\n },\n \/\/\u9a8c\u8bc1\u6210\u529f\u51fd\u6570\n successFunction () {\n this.confirmSuccess = true\n this.confirmWords = '\u9a8c\u8bc1\u901a\u8fc7'\n if (window.addEventListener) {\n document.getElementsByTagName('html')[0].removeEventListener('mousemove', this.mouseMoveFn)\n document.getElementsByTagName('html')[0].removeEventListener('mouseup', this.moseUpFn)\n } else {\n document.getElementsByTagName('html')[0].removeEventListener('mouseup', () => {\n })\n }\n document.getElementsByClassName('drag_text')[0].style.color = '#fff'\n document.getElementsByClassName('handler')[0].style.left = this.maxWidth + 'px'\n document.getElementsByClassName('drag_bg')[0].style.width = this.maxWidth + 'px'\n },\n \/\/mousemove \u4e8b\u4ef6\n mouseMoveFn (e) {\n if (this.mouseMoveState) {\n let width = e.clientX - this.beginClientX\n if (width > 0 && width <= this.maxWidth) {\n document.getElementsByClassName('handler')[0].style.left = width + 'px'\n document.getElementsByClassName('drag_bg')[0].style.width = width + 'px'\n } else if (width > this.maxWidth) {\n this.successFunction()\n }\n }\n },\n \/\/mouseup \u4e8b\u4ef6\n moseUpFn (e) {\n this.mouseMoveState = false\n var width = e.clientX - this.beginClientX\n if (width < this.maxWidth) {\n document.getElementsByClassName('handler')[0].style.left = 0 + 'px'\n document.getElementsByClassName('drag_bg')[0].style.width = 0 + 'px'\n }\n }\n },\n mounted () {\n this.maxWidth = this.$refs.dragDiv.clientWidth - this.$refs.moveDiv.clientWidth\n document.getElementsByTagName('html')[0].addEventListener('mousemove', this.mouseMoveFn)\n document.getElementsByTagName('html')[0].addEventListener('mouseup', this.moseUpFn)\n }\n}\n<\/script>\n<style scoped>\n.drag {\n position: relative;\n background-color: #e8e8e8;\n width: 100%;\n height: 32px;\n line-height: 32px;\n text-align: center;\n border: 1px solid #ccc;\n\n}\n\n.handler {\n width: 40px;\n height: 32px;\n border: 1px solid #ccc;\n cursor: move;\n margin-top: -1px;\n margin-left: -1px;\n}\n\n.handler_bg {\n background: #fff url('..\/assets\/images\/arrow-r.png') no-repeat center;\n background-size: 25px;\n}\n\n.handler_ok_bg {\n background: #fff url('..\/assets\/images\/\u221a.png') no-repeat center;\n background-size: 18px;\n}\n\n.drag_bg {\n background-color: #7ac23c;\n height: 32px;\n width: 0;\n}\n\n.drag_text {\n position: absolute;\n top: 0;\n width: 100%;\n font-size: 12px;\n color: #706f6f;\n}\n\n<\/style>\n<\/code><\/pre>\nel-input \u805a\u7126\u540e\u80cc\u666f\u53d8\u767d<\/h3>\n<\/p>\n<\/p><\/noscript>\n.el-input__wrapper.is-focus {\n box-shadow: 0 0 0 1px #dcdfe6 inset;\n background-color: #fff;\n}<\/code><\/pre>\nel-input placeholder \u989c\u8272\u8bbe\u7f6e<\/h3>\n.el-input__inner::placeholder{\n color: #666666;\n}<\/code><\/pre>\n\u5224\u65ad el-checked \u662f\u5426\u9009\u4e2d,\u672a\u9009\u4e2d\u5219\u63d0\u793a\u8bf7\u52fe\u9009<\/h3>\n<\/p>\n<\/p><\/noscript>\nexport default {\nmounted() {\n const pleaseFit=document.getElementById('pleaseFit');\n $(".el-checkbox input").change(() => {\n if ($(".el-checkbox input[type='checkbox']").is(':checked') == true) {\n pleaseFit.style.display='none'\n } else {\n pleaseFit.style.display='block'\n }\n })\n }\n }<\/code><\/pre>\nel-input \u5728 style \u5168\u5c40\u6837\u5f0f,\u4f1a\u5f71\u54cd\u5230\u5176\u4ed6\u4e0d\u7b26\u5408\u8be5\u6837\u5f0f\u7684\u4f4d\u7f6e<\/h3>\n\n\u53ef\u4ee5\u5728 style scoped> \u5199,\u52a0\u4e0a\/deep\/<\/li>\n<\/ul>\n<\/p>\n<\/p><\/noscript>\n\/deep\/ .el-input__wrapper {\n box-shadow: 0 0 0 0 inset;\n background-color: rgb(255, 242, 0);\n}<\/code><\/pre>\nel-carousel \u8d70\u9a6c\u706f\u4fee\u6539 Carousel \u5de6\u53f3\u4e24\u4fa7\u7bad\u5934\u5b57\u4f53\u5927\u5c0f<\/h3>\n\/deep\/.el-carousel__arrow i {\n font-size: 29px !important;\n }<\/code><\/pre>\n\u9875\u9762\u5411\u4e0b\u6ed1\u52a8\u5bfc\u822a\u680f\u56fa\u5b9a<\/h3>\n<\/p>\n<\/p><\/noscript>\n.main_nav_fixed {\n position: sticky;\n top: 0;\n z-index: 999;\n}<\/code><\/pre>\n\u56fa\u5b9a\u5728\u53f3\u65b9\u7684,\u60ac\u6302\u51fa\u73b0\u4e8c\u7ef4\u7801<\/h3>\n<\/p>\n<\/p><\/noscript>\n<div class="share_box">\n <img src="..\/..\/assets\/images\/share_qr.png" alt=""\/>\n <\/div><\/code><\/pre>\n.share_box{\n width: 70px;\n height: 131px;\n top: 300px;\n right: 10px;\n cursor: pointer;\n position: fixed;\n z-index: 999;\n background: url("..\/..\/assets\/images\/share_wx.jpg") no-repeat;\n background-size: 100% 100%;\n}\n.share_box img{\n width: 100px;\n height: 100px;\n display: none;\n}\n.share_box:hover img {\n position: absolute;\n top: 50%;\n margin-top: -50px;\n right: 82px;\n display: block !important;\n}<\/code><\/pre>\nnth-child(n)\u6307\u7684\u662f\u5728\u7236\u5143\u7d20\u4e2d\u6240\u6709\u7684\u5143\u7d20\u7684\u987a\u5e8f<\/h3>\n\n\u5199\u4ee3\u7801\u8981\u6839\u636e\u76d2\u5b50\u4ee5\u53ca\u5185\u5bb9\u5199<\/li>\nbottom\uff1a0\uff1b\u8981\u76f8\u5bf9\u4e8e\u7236\u5143\u7d20\u7684 height \u5b9e\u73b0\uff0c\u5982\u679c\u7236\u7236\u5143\u7d20\u7684 height \u5927\u4e8e\u7236\u5143\u7d20\u7684 height\uff0c\uff0c\u5219\u4f1a\u6309\u7167\u7236\u7236\u5143\u7d20\u7684 height \u6765\u5b9e\u73b0 bottom\uff1a0\uff1b\u6765\u5b9e\u73b0\u3002\u3010\u9002\u5f53\u5220\u9664\u7236\u7236\u5143\u7d20\u7684 height\uff0c\u4e00\u677f\u5757\u901a\u5e38\u4e0d\u7528\u8bbe\u7f6e\u603b height\u3011<\/li>\n<\/ul>\n\u60ac\u6302\u56fe\u7247\u7f13\u7f13\u653e\u5927\u7684\u52a8\u753b\u6548\u679c<\/h3>\n<\/p>\n<\/p><\/noscript>\n.gc_project .item_img > img {\n width: 100%;\n height: 100%;\n transition: all 0.3s;\n}\n.gc_project .item_img > img:hover {\n transform: scale(1.05);\n box-shadow: rgb(0 0 0 \/ 23%) 0 4px 14px 0;\n}<\/code><\/pre>\n\u6eda\u52a8\u6761\u4fee\u6539<\/h3>\n<\/p>\n<\/p><\/noscript>\n.mleft::-webkit-scrollbar{\n width: 6px;\n background-color: #f8f8f8;\n\n}\n.mleft::-webkit-scrollbar-thumb{\n width: 6px;\n background-color: #adacac;\n border-radius: 4px;\n}<\/code><\/pre>\nhead \u533a '\u53d1\u73b0' \u5b9e\u73b0\u4ea4\u4e92\u6548\u679c [\u8be5\u9996\u9875\u6700\u607c\u706b\u7684]<\/h2>\n<\/p>\n<\/p><\/noscript>\ntodo head \u533a'\u53d1\u73b0'\u4ea4\u4e92\u5b9e\u73b0\u601d\u8def:<\/h3>\n\n\u2460\u89c2\u5bdf\u8be5\u533a\u7ed3\u6784,\u4e00\u4e2a\u5927\u6a21\u5757,\u5176\u4e2d\u5206\u4e3a\u5de6\u4e2d\u53f3\u4e09\u4e2a\u6a21\u5757,\u5e76\u4f9d\u6b21\u5199\u51fa\u4e09\u4e2a\u6a21\u5757\u7684\u4ee3\u7801,<\/li>\n\u2461\u5de6\u4fa7\u533a\u57df: \u8981\u5c55\u793a\u7684\u6548\u679c\u6709: \u9f20\u6807\u4e0a\u4e0b\u79fb\u52a8,\u6240\u7ecf\u7684 menuItem \u4f1a\u5c55\u73b0\u9ec4\u8272\u80cc\u666f, \u5219\u5f15\u7528 vue \u7684 ref \u5c5e\u6027\u5bf9 DOM \u5143\u7d20\u8fdb\u884c\u52a8\u6001\u7ed1\u5b9a.\n\n\u6ce8\u610f:ref \u9700\u8981\u5728 dom \u6e32\u67d3\u5b8c\u6210\u540e\u624d\u4f1a\u6709,\u5728\u4f7f\u7528\u7684\u65f6\u5019\u786e\u4fdd dom \u5df2\u7ecf\u6e32\u67d3\u5b8c\u6210, \u6bd4\u5982\u5728\u751f\u547d\u5468\u671f mounted(){}\u94a9\u5b50\u4e2d\u8c03\u7528. this.$refs.xxx:\u51cf\u5c11\u83b7\u53d6 dom \u8282\u70b9\u7684\u6d88\u8017<\/li>\n<\/ul>\n<\/li>\n\u2462\u5de6\u4fa7\u533a\u57df\u8fc7\u6ee4\u5230\u53f3\u4fa7\u533a\u57df,\u5c55\u793a\u5bf9\u5e94\u7684\u8be6\u60c5\u9875: mleftIn(item,index)\u51fd\u6570\u901a\u8fc7\u4f20\u8f93 v-for \u5faa\u73af\u4e2d\u6570\u7ec4 menuList \u7684 item \u6bcf\u4e00\u9879\u4e3a\u5a92\u4ecb, \u800c\u6570\u636e\u4e2d menuList \u4e2d\u5305\u542b\u5de6\u4fa7\u6570\u636e menuItem \u4e0e\u53f3\u4fa7\u6bcf\u4e00\u9875\u7684\u6807\u9898 menu \u76f8\u540c, \u4ece\u800c\u5c06\u5de6\u4fa7\u548c\u53f3\u4fa7\u6570\u636e\u7ed1\u5b9a, \u6545\u800c\u5f62\u6210\u4ece\u5de6\u4fa7\u8fc7\u6ee4\u5230\u53f3\u4fa7\u533a\u57df\u662f\u56fa\u5b9a\u7684\u8be6\u60c5\u9875\u5185\u5bb9.<\/li>\n\u2463\u9875\u9762\u7b2c\u4e8c\u6b21\u672a\u5237\u65b0\u4e4b\u524d(\u9996\u6b21\u8fdb\u5165\u9875\u9762\u6e32\u67d3), \u9f20\u6807\u60ac\u6302'\u53d1\u73b0',\u8981\u51fa\u73b0\u7b2c\u4e00\u4e2a'\u7cbe\u9009'\u8be6\u60c5\u9875\u53ca'\u7cbe\u9009'item \u80cc\u666f\u53d8\u9ec4: \u9f20\u6807\u79fb\u51fa\u8be5\u5143\u7d20[\u4e8c\u7ea7\u76ee\u5f55\u6574\u4e2a\u5927\u6a21\u5757]\u4e4b\u5916,\u5219\u89e6\u53d1 mouseleave \u4e8b\u4ef6,\u521d\u59cb\u5316\u6570\u636e.<\/li>\n\u2464\u7b2c\u4e8c\u6b21\u9875\u9762\u5237\u65b0\u4e4b\u540e,\u521d\u59cb\u5316\u6570\u636e: \u91c7\u7528 mounted \u751f\u547d\u5468\u671f[\u6e32\u67d3\u6210 html \u540e\u8c03\u7528]: \u4f7f\u9f20\u6807\u60ac\u6302'\u53d1\u73b0',\u7b2c\u4e00\u4e2a menu-item \u663e\u793a\u9ec4\u8272<\/li>\n<\/ul>\n <li class="find">\n <a href="#">\u53d1\u73b0<\/a>\n <div class="h_menu" @mouseleave="mleftLeave()">\n <div class="menu_box mleft">\n <!-- <a href="">\u7cbe\u9009<\/a>-->\n <a v-for="(item,index) in menuList" :key="index" :ref="'test'+index" href="javascript:;"\n @mouseover="mleftIn(item,index)">{{ item.menu }}<\/a>\n <!-- <el-cascader-panel :options="findOptions" :props="props" \/>-->\n <\/div>\n <div class="mright">\n <div class="cate-box">\n <a class="cate-title" href="">\n <img :src="data.url" alt="">\n <span>{{ data.menu }}<\/span>\n <\/a>\n <div class="subCate">\n <a v-for="(itemOne) in data.items" :key="itemOne">{{ itemOne.text }}<\/a>\n <\/div>\n <\/div>\n <\/div>\n <div class="right_bar">\n <div class="icons">\n <a>\n <span class="icon-box">\n <span class="tangle-1"><\/span>\n <span class="tangle-2"><\/span>\n <i class="ani-star"><\/i>\n <span class="tangle-3"><\/span>\n <\/span>\n <span class="icon-text">\u6536\u85cf\u5939<\/span>\n <\/a>\n <a>\n <img alt="" src="..\/assets\/images\/icon-header-discover-designer.png">\n <span>\u8bbe\u8ba1\u5e08<\/span>\n <\/a>\n <a>\n <img alt="" src="..\/assets\/images\/icon-header-discover-focus.png">\n <span>\u699c\u5355<\/span>\n <!-- <sup class="subNavDot"><\/sup>-->\n <\/a>\n <\/div>\n <div class="ad_box">\n\n <\/div>\n <\/div>\n <\/div>\n <\/li><\/code><\/pre>\n data: {},\n menuList: [\n {\n menu: '\u7cbe\u9009',\n url: require('..\/assets\/images\/zuanshi.png'),\n items: [\n { text: '\u8fd0\u8425\u8bbe\u8ba1' },\n { text: '\u5305\u88c5' },\n { text: '\u52a8\u753b\/\u5f71\u89c6' },\n { text: '\u4eba\u50cf\u6444\u5f71' },\n { text: '\u5546\u4e1a\u63d2\u753b' },\n { text: '\u7535\u5546' },\n { text: 'APP \u754c\u9762' },\n { text: '\u827a\u672f\u63d2\u753b' },\n { text: '\u5bb6\u88c5\u8bbe\u8ba1' },\n { text: '\u6d77\u62a5' },\n { text: '\u6587\u7ae0' }\n ]\n },\n { menu: '\u5e73\u9762' },\n { menu: 'UI' },\n { menu: '\u7f51\u9875' },\n { menu: '\u63d2\u753b' },\n { menu: '\u52a8\u6f2b' },\n { menu: '\u6444\u5f71' },\n { menu: '\u7a7a\u95f4' },\n { menu: '\u5de5\u4e1a\/\u4ea7\u54c1' },\n { menu: '\u4e09\u7ef4' },\n { menu: '\u5f71\u89c6' },\n { menu: '\u624b\u5de5\u827a' },\n { menu: '\u7eaf\u827a\u672f' },\n { menu: '\u670d\u88c5' },\n { menu: '\u5176\u4ed6' }\n ],<\/code><\/pre>\n \/\/\u6e32\u67d3\u6210 html \u4e4b\u524d\u8c03\u7528,\u521d\u59cb\u5316\u4e00\u4e9b\u5c5e\u6027\u503c [\u9f20\u6807\u60ac\u6302'\u53d1\u73b0',\u5c31\u51fa\u73b0\u7b2c\u4e00\u4e2a\u7cbe\u9009\u9875\u9762]\n created () {\n this.data = this.menuList[0]\n },\n \/\/\u6e32\u67d3\u6210 html \u540e\u8c03\u7528 [\u9f20\u6807\u60ac\u6302'\u53d1\u73b0',\u7b2c\u4e00\u4e2a menu-item \u663e\u793a\u9ec4\u8272](\u9875\u9762\u5237\u65b0\u4e86\u4e4b\u540e\u7684)\n mounted () {\n this.$refs['test' + 0][0].style.backgroundColor = 'rgb(255, 242, 0)'\n },\n methods: {\n \/\/\u9f20\u6807\u8fdb\u5165\u51fd\u6570\n mleftIn (item, index) {\n \/\/\u83b7\u53d6 menuList \u4e2d\u6bcf\u4e2a menuItem \u5b57\u7b26\u4e32\u7684\u957f\u5ea6\n let menuSize = this.menuList.length\n for (let i = 0; i < menuSize; i++) {\n \/\/for \u5faa\u73af,i \u5982\u679c\u5c0f\u4e8e menuSize,\u5219\u7f6e\u4e8e menuItem \u989c\u8272\u4e3a\u7070\u8272,\u5b9e\u73b0\u5207\u6362\u6548\u679c\n this.$refs['test' + i][0].style.backgroundColor = '#f8f8f8'\n }\n \/\/\u8df3\u51fa for \u5faa\u73af,\u7531\u5de6\u4fa7\u79fb\u5411\u53f3\u4fa7\u8be6\u60c5\u9875\u65f6,\u5176 menuItem \u7684\u989c\u8272\u4e3a\u9ec4\u8272\n this.$refs['test' + index][0].style.backgroundColor = 'rgb(255, 242, 0)'\n \/\/\u5c06\u53f3\u4fa7\u6570\u636e\u8bbe\u7f6e\u4e3a item,\u663e\u793a\u6570\u636e\n this.data = item\n },\n \/\/\u9f20\u6807\u8fdb\u5165\u51fd\u6570\n \/\/\u6ce8\u610f: mouseleave:\u662f\u9f20\u6807\u79fb\u51fa\u8be5\u5143\u7d20\u4e4b\u5916,\u5219\u89e6\u53d1 mouseleave \u4e8b\u4ef6\n \/\/ mouseout : \u662f\u5f53\u6307\u9488\u79bb\u5f00\u8be5\u5143\u7d20\u53ca\u5176\u6240\u6709\u540e\u4ee3\u65f6\uff0c\u4f1a\u89e6\u53d1 mouseleave\n \/\/ \u800c\u5f53\u6307\u9488\u79bb\u5f00\u5143\u7d20\u6216\u79bb\u5f00\u5143\u7d20\u7684\u540e\u4ee3\uff08\u5373\u4f7f\u6307\u9488\u4ecd\u5728\u5143\u7d20\u5185\uff09\u65f6\uff0c\u4e5f\u4f1a\u89e6\u53d1 mouseout \u4e8b\u4ef6\n mleftLeave () {\n \/\/\u83b7\u53d6 menuList \u4e2d\u6bcf\u4e2a menuItem \u5b57\u7b26\u4e32\u7684\u957f\u5ea6\n let menuSize = this.menuList.length\n for (let i = 0; i < menuSize; i++) {\n this.$refs['test' + i][0].style.backgroundColor = '#f8f8f8'\n }\n \/\/ \u8df3\u51fa\u5faa\u73af,\u6d4f\u89c8\u5b8c'\u53d1\u73b0',\u9f20\u6807\u79fb\u51fa,\u7f6e\u4e8e\u53f3\u4fa7\u6570\u636e\u4e3a\u7b2c\u4e00\u4e2a\u7cbe\u9009\u6570\u636e\n this.data = this.menuList[0]\n \/\/\u9f20\u6807\u79fb\u51fa\u4e8b\u4ef6,\u7f6e\u4e8e\u7b2c\u4e00\u4e2a menuitem \u4e3a\u9ec4\u8272[\u672a\u5237\u65b0\u65f6\u7684\u8bbe\u7f6e]\n this.$refs['test' + 0][0].style.backgroundColor = 'rgb(255, 242, 0)'\n\n \/\/ this.data = {}\n \/\/ this.$refs['test'+index][0].style.backgroundColor = '#f8f8f8'\n \/\/ console.log('\u6eda\u51fa\u53bb')\n },\n}<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"\u4e0b\u8f7d\u4f9d\u8d56\u901f\u5ea6\u5feb npm install –registry=https:\/\/registry.npm.tao […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[],"class_list":["post-3462","post","type-post","status-publish","format-standard","hentry","category-web"],"_links":{"self":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/3462","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3462"}],"version-history":[{"count":38,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/3462\/revisions"}],"predecessor-version":[{"id":3558,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/3462\/revisions\/3558"}],"wp:attachment":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3462"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=3462"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=3462"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
\u4e3a\u4e86\u8ba9\u6211\u4eec\u7684\u6837\u5f0f\u5728\u6240\u6709\u6d4f\u89c8\u5668\u4e0a\u4fdd\u6301\u4e00\u81f4\nnpm install normalize.css@8.0.1 --save<\/p>\n
.h_menu .menu_box > ul > li {}<\/p>\n
<\/p>\n<\/p><\/noscript>\n\u4f7f\u7528 v-for \u5faa\u73af\u5982\u4f55\u7ed9\u4e0d\u540c\u5143\u7d20\u8bbe\u7f6e\u4e0d\u540c\u6837\u5f0f<\/h3>\n <div v-for="(item,index) in list" :key="index" :class="'list-' + (index + 1)">\n <img :src="item.url" alt="" class="five_img"\/>\n <\/div><\/code><\/pre>\n\u6587\u5b57\u591a\u65f6,\u9690\u85cf<\/h3>\n.main_content ul li .svg_text {\n width: 86px;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;<\/code><\/pre>\n<\/p>\n<\/p><\/noscript>\n\u8bbe\u7f6e 5 \u500d\u6570\u7684\u5143\u7d20\u7684\u6837\u5f0f<\/h3>\n.main_content ul li:nth-child(5n) {\n margin-right: 0;\n}<\/code><\/pre>\nel-cascader-panel \u7ea7\u8054\u9009\u62e9\u5668\u6837\u5f0f\u66f4\u6539<\/h3>\n<\/p>\n<\/p><\/noscript>\n <div class="h_menu">\n <div class="menu_box">\n <el-cascader-panel :options="findOptions" :props="props"\/>\n <\/div>\n<\/div><\/code><\/pre>\n\/*\u4e8c\u7ea7\u76ee\u5f55*\/\n.topbar .shortcut-links {\n width: 600px;\n margin: 0 auto;\n}\n\n.topbar .shortcut-links > ul > li {\n float: left;\n padding: 13px 20px;\n line-height: 31px;\n font-size: 14px;\n position: relative;\n}\n\n.topbar .shortcut-links > ul > li:hover .h_menu {\n display: block;\n}\n.topbar .shortcut-links > ul > li .h_menu {\n position: absolute;\n left: 0;\n display: none;\n width: 152px;\n margin-top: 13px;\n z-index: 9999;\n}\n.topbar .shortcut-links > ul > li .h_menu .menu_box {\n background: #ffffff;\n width: 152px;\n box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);\n padding: 8px 0 8px 0;\n \/*float: left;*\/\n}\n\n.topbar .shortcut-links > ul > li .h_menu .menu_box >a {\n height: 45px;\n line-height: 45px;\n font-size: 14px;\n padding-left: 20px;\n \/*padding-top: 5px;*\/\n display: block;\n}\n<\/code><\/pre>\nstyle\n\/*\u53d6\u6d88\u8fb9\u6846*\/\n.el-cascader-panel.is-bordered {\n border: none;\n border-radius: 0;\n}\n\n.el-cascader-menu {\n color: #1c1f21;\n font-size: 14px;\n min-width: 152px;\n}\n\n.el-cascader-menu__list {\n padding: 0;\n}\n\n.el-cascader-node.in-active-path, .el-cascader-node.is-active, .el-cascader-node.is-selectable.in-checked-path {\n color: #1c1f21;\n font-weight: normal;\n}\n\/*item \u60ac\u6302\u9ec4\u8272\u80cc\u666f\u5bbd\u95f4\u8ddd*\/\n.el-cascader-node {\n padding-left: 20px;\n height: 45px;\n line-height: 45px;\n}\n\/*\u4e8c\u7ea7\u76ee\u5f55\u7684\u9ad8\u5ea6*\/\n.el-cascader-menu__wrap.el-scrollbar__wrap {\n height: 478px;\n}\n\n.el-cascader-menu:last-child .el-cascader-node {\n padding-right: 0;\n}\n\/*item \u60ac\u6302\u9ec4\u8272\u80cc\u666f*\/\n.el-cascader-node:not(.is-disabled):focus, .el-cascader-node:not(.is-disabled):hover {\n background-color: rgb(255, 242, 0);\n}\n\/*item \u53f3\u8fb9\u7684\u5c0f\u7bad\u5934\u989c\u8272\u6539\u4e3a\u9ec4\u8272[\u9690\u85cf]*\/\n.el-cascader-node:not(.is-disabled):focus, .el-cascader-node:not(.is-disabled):hover .el-icon {\n color: rgb(255, 242, 0);\n}\n\n.el-cascader-node__label {\n padding: 0;\n}\n\n.el-cascader-node__postfix {\n position: absolute;\n right: 0;\n}\n\/*\u6eda\u52a8\u6761\u5230\u9876\u90e8,\u4e0b\u90e8\u7684\u95f4\u8ddd*\/\n.el-scrollbar__bar {\n position: absolute;\n right: 0;\n bottom: 0;\n z-index: 1;\n border-radius: 4px;\n}<\/code><\/pre>\n<\/p>\n<\/p><\/noscript>\n <el-cascader-panel :options="findOptions" :props="props"\/><\/code><\/pre>\n\/*\u4e8c\u7ea7\u76ee\u5f55\u7684\u9ad8\u5ea6*\/\n\/deep\/.el-cascader-menu__wrap.el-scrollbar__wrap {\n height: 490px;\n}\n\/*item \u60ac\u6302\u9ec4\u8272\u80cc\u666f\u5bbd\u95f4\u8ddd*\/\n\/deep\/.el-cascader-node {\nheight: 45px;\n width: 165px;\n padding: 0;\n margin-left: 10px;\n}\n\/*item \u60ac\u6302\u9ec4\u8272\u80cc\u666f*\/\n\/deep\/ .el-cascader-node:not(.is-disabled):hover {\n background: #fff200;\n border-radius: 8px;\n}\n\/*\u70b9\u51fb\u540e\u6539\u53d8\u989c\u8272,\u7c97\u7ec6\u53d6\u6d88\u70b9\u51fb\u6548\u679c*\/\n\/deep\/.el-cascader-node.is-active{\ncolor: #222222;\n font-weight: normal;\n}\n\/*item \u5de6\u8fb9\u6709\u4e2a\u5c0f\u52fe\u221a*\/\n\/deep\/.el-icon svg {\n height: 0;\n width: 0;\n}\n\/*\u53d1\u73b0\u7684\u4e8c\u7ea7\u76ee\u5f55\u6d88\u5931*\/\n.el-cascader-panel{\n display: none;\n}\n\/*\u53d6\u6d88\u8fb9\u6846*\/\n.el-cascader-panel.is-bordered {\n border: none;\n}\n\/*\u60ac\u6302'\u53d1\u73b0'\u76ee\u5f55,\u51fa\u73b0\u4e8c\u7ea7\u76ee\u5f55*\/\n.topbar .shortcut-links > ul > li:nth-child(2):hover .el-cascader-panel{\n display: block;\n background-color: #f8f8f8;\n border-radius: 8px 0 8px 8px;\n}<\/code><\/pre>\n\u626b\u4e8c\u7ef4\u7801\u767b\u5f55\u548c\u5bc6\u7801\u767b\u5f55\u9875\u9762\u7684\u5207\u6362<\/h3>\n@click="handleChangeToLogin()"<\/code><\/pre>\n handleChangeToLogin () {\n const qr = document.getElementById('qr_code')\n const login = document.getElementById('login')\n qr.style.display = 'none';\n if (qr.style.display === 'none') {\n login.style.display = 'block'\n }\n },\n handleChangeToQr () {\n const qr = document.getElementById('qr_code')\n const login = document.getElementById('login')\n login.style.display = 'none'\n if (login.style.display === 'none') {\n qr.style.display = 'block'\n }\n }<\/code><\/pre>\n\u767b\u5f55\u6846\u7684\u6ed1\u5757\u9a8c\u8bc1<\/h3>\n<\/p>\n<\/p><\/noscript>\n<\/slider><\/p>\n<template>\n <div ref="dragDiv" class="drag">\n <div class="drag_bg"><\/div>\n <div class="drag_text">{{ confirmWords }}<\/div>\n <div ref="moveDiv" :class="{'handler_ok_bg':confirmSuccess}" class="handler handler_bg"\n style="position: absolute;top: 0;left: 0;" @mousedown="mouseDownFn($event)"><\/div>\n <\/div>\n<\/template>\n\n<script>\nexport default {\n data () {\n return {\n beginClientX: 0, \/*\u8ddd\u79bb\u5c4f\u5e55\u5de6\u7aef\u8ddd\u79bb*\/\n mouseMoveState: false, \/*\u89e6\u53d1\u62d6\u52a8\u72b6\u6001 \u5224\u65ad*\/\n maxWidth: '', \/*\u62d6\u52a8\u6700\u5927\u5bbd\u5ea6\uff0c\u4f9d\u636e\u6ed1\u5757\u5bbd\u5ea6\u7b97\u51fa\u6765\u7684*\/\n confirmWords: '\u8bf7\u6309\u4f4f\u6ed1\u5757,\u62d6\u52a8\u5230\u6700\u53f3\u8fb9', \/*\u6ed1\u5757\u6587\u5b57*\/\n confirmSuccess: false \/*\u9a8c\u8bc1\u6210\u529f\u5224\u65ad*\/\n }\n },\n methods: {\n \/\/mousedown \u4e8b\u4ef6\n mouseDownFn: function (e) {\n if (!this.confirmSuccess) {\n e.preventDefault && e.preventDefault() \/\/\u963b\u6b62\u6587\u5b57\u9009\u4e2d\u7b49 \u6d4f\u89c8\u5668\u9ed8\u8ba4\u4e8b\u4ef6\n this.mouseMoveState = true\n this.beginClientX = e.clientX\n }\n },\n \/\/\u9a8c\u8bc1\u6210\u529f\u51fd\u6570\n successFunction () {\n this.confirmSuccess = true\n this.confirmWords = '\u9a8c\u8bc1\u901a\u8fc7'\n if (window.addEventListener) {\n document.getElementsByTagName('html')[0].removeEventListener('mousemove', this.mouseMoveFn)\n document.getElementsByTagName('html')[0].removeEventListener('mouseup', this.moseUpFn)\n } else {\n document.getElementsByTagName('html')[0].removeEventListener('mouseup', () => {\n })\n }\n document.getElementsByClassName('drag_text')[0].style.color = '#fff'\n document.getElementsByClassName('handler')[0].style.left = this.maxWidth + 'px'\n document.getElementsByClassName('drag_bg')[0].style.width = this.maxWidth + 'px'\n },\n \/\/mousemove \u4e8b\u4ef6\n mouseMoveFn (e) {\n if (this.mouseMoveState) {\n let width = e.clientX - this.beginClientX\n if (width > 0 && width <= this.maxWidth) {\n document.getElementsByClassName('handler')[0].style.left = width + 'px'\n document.getElementsByClassName('drag_bg')[0].style.width = width + 'px'\n } else if (width > this.maxWidth) {\n this.successFunction()\n }\n }\n },\n \/\/mouseup \u4e8b\u4ef6\n moseUpFn (e) {\n this.mouseMoveState = false\n var width = e.clientX - this.beginClientX\n if (width < this.maxWidth) {\n document.getElementsByClassName('handler')[0].style.left = 0 + 'px'\n document.getElementsByClassName('drag_bg')[0].style.width = 0 + 'px'\n }\n }\n },\n mounted () {\n this.maxWidth = this.$refs.dragDiv.clientWidth - this.$refs.moveDiv.clientWidth\n document.getElementsByTagName('html')[0].addEventListener('mousemove', this.mouseMoveFn)\n document.getElementsByTagName('html')[0].addEventListener('mouseup', this.moseUpFn)\n }\n}\n<\/script>\n<style scoped>\n.drag {\n position: relative;\n background-color: #e8e8e8;\n width: 100%;\n height: 32px;\n line-height: 32px;\n text-align: center;\n border: 1px solid #ccc;\n\n}\n\n.handler {\n width: 40px;\n height: 32px;\n border: 1px solid #ccc;\n cursor: move;\n margin-top: -1px;\n margin-left: -1px;\n}\n\n.handler_bg {\n background: #fff url('..\/assets\/images\/arrow-r.png') no-repeat center;\n background-size: 25px;\n}\n\n.handler_ok_bg {\n background: #fff url('..\/assets\/images\/\u221a.png') no-repeat center;\n background-size: 18px;\n}\n\n.drag_bg {\n background-color: #7ac23c;\n height: 32px;\n width: 0;\n}\n\n.drag_text {\n position: absolute;\n top: 0;\n width: 100%;\n font-size: 12px;\n color: #706f6f;\n}\n\n<\/style>\n<\/code><\/pre>\nel-input \u805a\u7126\u540e\u80cc\u666f\u53d8\u767d<\/h3>\n<\/p>\n<\/p><\/noscript>\n.el-input__wrapper.is-focus {\n box-shadow: 0 0 0 1px #dcdfe6 inset;\n background-color: #fff;\n}<\/code><\/pre>\nel-input placeholder \u989c\u8272\u8bbe\u7f6e<\/h3>\n.el-input__inner::placeholder{\n color: #666666;\n}<\/code><\/pre>\n\u5224\u65ad el-checked \u662f\u5426\u9009\u4e2d,\u672a\u9009\u4e2d\u5219\u63d0\u793a\u8bf7\u52fe\u9009<\/h3>\n<\/p>\n<\/p><\/noscript>\nexport default {\nmounted() {\n const pleaseFit=document.getElementById('pleaseFit');\n $(".el-checkbox input").change(() => {\n if ($(".el-checkbox input[type='checkbox']").is(':checked') == true) {\n pleaseFit.style.display='none'\n } else {\n pleaseFit.style.display='block'\n }\n })\n }\n }<\/code><\/pre>\nel-input \u5728 style \u5168\u5c40\u6837\u5f0f,\u4f1a\u5f71\u54cd\u5230\u5176\u4ed6\u4e0d\u7b26\u5408\u8be5\u6837\u5f0f\u7684\u4f4d\u7f6e<\/h3>\n\n\u53ef\u4ee5\u5728 style scoped> \u5199,\u52a0\u4e0a\/deep\/<\/li>\n<\/ul>\n<\/p>\n<\/p><\/noscript>\n\/deep\/ .el-input__wrapper {\n box-shadow: 0 0 0 0 inset;\n background-color: rgb(255, 242, 0);\n}<\/code><\/pre>\nel-carousel \u8d70\u9a6c\u706f\u4fee\u6539 Carousel \u5de6\u53f3\u4e24\u4fa7\u7bad\u5934\u5b57\u4f53\u5927\u5c0f<\/h3>\n\/deep\/.el-carousel__arrow i {\n font-size: 29px !important;\n }<\/code><\/pre>\n\u9875\u9762\u5411\u4e0b\u6ed1\u52a8\u5bfc\u822a\u680f\u56fa\u5b9a<\/h3>\n<\/p>\n<\/p><\/noscript>\n.main_nav_fixed {\n position: sticky;\n top: 0;\n z-index: 999;\n}<\/code><\/pre>\n\u56fa\u5b9a\u5728\u53f3\u65b9\u7684,\u60ac\u6302\u51fa\u73b0\u4e8c\u7ef4\u7801<\/h3>\n<\/p>\n<\/p><\/noscript>\n<div class="share_box">\n <img src="..\/..\/assets\/images\/share_qr.png" alt=""\/>\n <\/div><\/code><\/pre>\n.share_box{\n width: 70px;\n height: 131px;\n top: 300px;\n right: 10px;\n cursor: pointer;\n position: fixed;\n z-index: 999;\n background: url("..\/..\/assets\/images\/share_wx.jpg") no-repeat;\n background-size: 100% 100%;\n}\n.share_box img{\n width: 100px;\n height: 100px;\n display: none;\n}\n.share_box:hover img {\n position: absolute;\n top: 50%;\n margin-top: -50px;\n right: 82px;\n display: block !important;\n}<\/code><\/pre>\nnth-child(n)\u6307\u7684\u662f\u5728\u7236\u5143\u7d20\u4e2d\u6240\u6709\u7684\u5143\u7d20\u7684\u987a\u5e8f<\/h3>\n\n\u5199\u4ee3\u7801\u8981\u6839\u636e\u76d2\u5b50\u4ee5\u53ca\u5185\u5bb9\u5199<\/li>\nbottom\uff1a0\uff1b\u8981\u76f8\u5bf9\u4e8e\u7236\u5143\u7d20\u7684 height \u5b9e\u73b0\uff0c\u5982\u679c\u7236\u7236\u5143\u7d20\u7684 height \u5927\u4e8e\u7236\u5143\u7d20\u7684 height\uff0c\uff0c\u5219\u4f1a\u6309\u7167\u7236\u7236\u5143\u7d20\u7684 height \u6765\u5b9e\u73b0 bottom\uff1a0\uff1b\u6765\u5b9e\u73b0\u3002\u3010\u9002\u5f53\u5220\u9664\u7236\u7236\u5143\u7d20\u7684 height\uff0c\u4e00\u677f\u5757\u901a\u5e38\u4e0d\u7528\u8bbe\u7f6e\u603b height\u3011<\/li>\n<\/ul>\n\u60ac\u6302\u56fe\u7247\u7f13\u7f13\u653e\u5927\u7684\u52a8\u753b\u6548\u679c<\/h3>\n<\/p>\n<\/p><\/noscript>\n.gc_project .item_img > img {\n width: 100%;\n height: 100%;\n transition: all 0.3s;\n}\n.gc_project .item_img > img:hover {\n transform: scale(1.05);\n box-shadow: rgb(0 0 0 \/ 23%) 0 4px 14px 0;\n}<\/code><\/pre>\n\u6eda\u52a8\u6761\u4fee\u6539<\/h3>\n<\/p>\n<\/p><\/noscript>\n.mleft::-webkit-scrollbar{\n width: 6px;\n background-color: #f8f8f8;\n\n}\n.mleft::-webkit-scrollbar-thumb{\n width: 6px;\n background-color: #adacac;\n border-radius: 4px;\n}<\/code><\/pre>\nhead \u533a '\u53d1\u73b0' \u5b9e\u73b0\u4ea4\u4e92\u6548\u679c [\u8be5\u9996\u9875\u6700\u607c\u706b\u7684]<\/h2>\n<\/p>\n<\/p><\/noscript>\ntodo head \u533a'\u53d1\u73b0'\u4ea4\u4e92\u5b9e\u73b0\u601d\u8def:<\/h3>\n\n\u2460\u89c2\u5bdf\u8be5\u533a\u7ed3\u6784,\u4e00\u4e2a\u5927\u6a21\u5757,\u5176\u4e2d\u5206\u4e3a\u5de6\u4e2d\u53f3\u4e09\u4e2a\u6a21\u5757,\u5e76\u4f9d\u6b21\u5199\u51fa\u4e09\u4e2a\u6a21\u5757\u7684\u4ee3\u7801,<\/li>\n\u2461\u5de6\u4fa7\u533a\u57df: \u8981\u5c55\u793a\u7684\u6548\u679c\u6709: \u9f20\u6807\u4e0a\u4e0b\u79fb\u52a8,\u6240\u7ecf\u7684 menuItem \u4f1a\u5c55\u73b0\u9ec4\u8272\u80cc\u666f, \u5219\u5f15\u7528 vue \u7684 ref \u5c5e\u6027\u5bf9 DOM \u5143\u7d20\u8fdb\u884c\u52a8\u6001\u7ed1\u5b9a.\n\n\u6ce8\u610f:ref \u9700\u8981\u5728 dom \u6e32\u67d3\u5b8c\u6210\u540e\u624d\u4f1a\u6709,\u5728\u4f7f\u7528\u7684\u65f6\u5019\u786e\u4fdd dom \u5df2\u7ecf\u6e32\u67d3\u5b8c\u6210, \u6bd4\u5982\u5728\u751f\u547d\u5468\u671f mounted(){}\u94a9\u5b50\u4e2d\u8c03\u7528. this.$refs.xxx:\u51cf\u5c11\u83b7\u53d6 dom \u8282\u70b9\u7684\u6d88\u8017<\/li>\n<\/ul>\n<\/li>\n\u2462\u5de6\u4fa7\u533a\u57df\u8fc7\u6ee4\u5230\u53f3\u4fa7\u533a\u57df,\u5c55\u793a\u5bf9\u5e94\u7684\u8be6\u60c5\u9875: mleftIn(item,index)\u51fd\u6570\u901a\u8fc7\u4f20\u8f93 v-for \u5faa\u73af\u4e2d\u6570\u7ec4 menuList \u7684 item \u6bcf\u4e00\u9879\u4e3a\u5a92\u4ecb, \u800c\u6570\u636e\u4e2d menuList \u4e2d\u5305\u542b\u5de6\u4fa7\u6570\u636e menuItem \u4e0e\u53f3\u4fa7\u6bcf\u4e00\u9875\u7684\u6807\u9898 menu \u76f8\u540c, \u4ece\u800c\u5c06\u5de6\u4fa7\u548c\u53f3\u4fa7\u6570\u636e\u7ed1\u5b9a, \u6545\u800c\u5f62\u6210\u4ece\u5de6\u4fa7\u8fc7\u6ee4\u5230\u53f3\u4fa7\u533a\u57df\u662f\u56fa\u5b9a\u7684\u8be6\u60c5\u9875\u5185\u5bb9.<\/li>\n\u2463\u9875\u9762\u7b2c\u4e8c\u6b21\u672a\u5237\u65b0\u4e4b\u524d(\u9996\u6b21\u8fdb\u5165\u9875\u9762\u6e32\u67d3), \u9f20\u6807\u60ac\u6302'\u53d1\u73b0',\u8981\u51fa\u73b0\u7b2c\u4e00\u4e2a'\u7cbe\u9009'\u8be6\u60c5\u9875\u53ca'\u7cbe\u9009'item \u80cc\u666f\u53d8\u9ec4: \u9f20\u6807\u79fb\u51fa\u8be5\u5143\u7d20[\u4e8c\u7ea7\u76ee\u5f55\u6574\u4e2a\u5927\u6a21\u5757]\u4e4b\u5916,\u5219\u89e6\u53d1 mouseleave \u4e8b\u4ef6,\u521d\u59cb\u5316\u6570\u636e.<\/li>\n\u2464\u7b2c\u4e8c\u6b21\u9875\u9762\u5237\u65b0\u4e4b\u540e,\u521d\u59cb\u5316\u6570\u636e: \u91c7\u7528 mounted \u751f\u547d\u5468\u671f[\u6e32\u67d3\u6210 html \u540e\u8c03\u7528]: \u4f7f\u9f20\u6807\u60ac\u6302'\u53d1\u73b0',\u7b2c\u4e00\u4e2a menu-item \u663e\u793a\u9ec4\u8272<\/li>\n<\/ul>\n <li class="find">\n <a href="#">\u53d1\u73b0<\/a>\n <div class="h_menu" @mouseleave="mleftLeave()">\n <div class="menu_box mleft">\n <!-- <a href="">\u7cbe\u9009<\/a>-->\n <a v-for="(item,index) in menuList" :key="index" :ref="'test'+index" href="javascript:;"\n @mouseover="mleftIn(item,index)">{{ item.menu }}<\/a>\n <!-- <el-cascader-panel :options="findOptions" :props="props" \/>-->\n <\/div>\n <div class="mright">\n <div class="cate-box">\n <a class="cate-title" href="">\n <img :src="data.url" alt="">\n <span>{{ data.menu }}<\/span>\n <\/a>\n <div class="subCate">\n <a v-for="(itemOne) in data.items" :key="itemOne">{{ itemOne.text }}<\/a>\n <\/div>\n <\/div>\n <\/div>\n <div class="right_bar">\n <div class="icons">\n <a>\n <span class="icon-box">\n <span class="tangle-1"><\/span>\n <span class="tangle-2"><\/span>\n <i class="ani-star"><\/i>\n <span class="tangle-3"><\/span>\n <\/span>\n <span class="icon-text">\u6536\u85cf\u5939<\/span>\n <\/a>\n <a>\n <img alt="" src="..\/assets\/images\/icon-header-discover-designer.png">\n <span>\u8bbe\u8ba1\u5e08<\/span>\n <\/a>\n <a>\n <img alt="" src="..\/assets\/images\/icon-header-discover-focus.png">\n <span>\u699c\u5355<\/span>\n <!-- <sup class="subNavDot"><\/sup>-->\n <\/a>\n <\/div>\n <div class="ad_box">\n\n <\/div>\n <\/div>\n <\/div>\n <\/li><\/code><\/pre>\n data: {},\n menuList: [\n {\n menu: '\u7cbe\u9009',\n url: require('..\/assets\/images\/zuanshi.png'),\n items: [\n { text: '\u8fd0\u8425\u8bbe\u8ba1' },\n { text: '\u5305\u88c5' },\n { text: '\u52a8\u753b\/\u5f71\u89c6' },\n { text: '\u4eba\u50cf\u6444\u5f71' },\n { text: '\u5546\u4e1a\u63d2\u753b' },\n { text: '\u7535\u5546' },\n { text: 'APP \u754c\u9762' },\n { text: '\u827a\u672f\u63d2\u753b' },\n { text: '\u5bb6\u88c5\u8bbe\u8ba1' },\n { text: '\u6d77\u62a5' },\n { text: '\u6587\u7ae0' }\n ]\n },\n { menu: '\u5e73\u9762' },\n { menu: 'UI' },\n { menu: '\u7f51\u9875' },\n { menu: '\u63d2\u753b' },\n { menu: '\u52a8\u6f2b' },\n { menu: '\u6444\u5f71' },\n { menu: '\u7a7a\u95f4' },\n { menu: '\u5de5\u4e1a\/\u4ea7\u54c1' },\n { menu: '\u4e09\u7ef4' },\n { menu: '\u5f71\u89c6' },\n { menu: '\u624b\u5de5\u827a' },\n { menu: '\u7eaf\u827a\u672f' },\n { menu: '\u670d\u88c5' },\n { menu: '\u5176\u4ed6' }\n ],<\/code><\/pre>\n \/\/\u6e32\u67d3\u6210 html \u4e4b\u524d\u8c03\u7528,\u521d\u59cb\u5316\u4e00\u4e9b\u5c5e\u6027\u503c [\u9f20\u6807\u60ac\u6302'\u53d1\u73b0',\u5c31\u51fa\u73b0\u7b2c\u4e00\u4e2a\u7cbe\u9009\u9875\u9762]\n created () {\n this.data = this.menuList[0]\n },\n \/\/\u6e32\u67d3\u6210 html \u540e\u8c03\u7528 [\u9f20\u6807\u60ac\u6302'\u53d1\u73b0',\u7b2c\u4e00\u4e2a menu-item \u663e\u793a\u9ec4\u8272](\u9875\u9762\u5237\u65b0\u4e86\u4e4b\u540e\u7684)\n mounted () {\n this.$refs['test' + 0][0].style.backgroundColor = 'rgb(255, 242, 0)'\n },\n methods: {\n \/\/\u9f20\u6807\u8fdb\u5165\u51fd\u6570\n mleftIn (item, index) {\n \/\/\u83b7\u53d6 menuList \u4e2d\u6bcf\u4e2a menuItem \u5b57\u7b26\u4e32\u7684\u957f\u5ea6\n let menuSize = this.menuList.length\n for (let i = 0; i < menuSize; i++) {\n \/\/for \u5faa\u73af,i \u5982\u679c\u5c0f\u4e8e menuSize,\u5219\u7f6e\u4e8e menuItem \u989c\u8272\u4e3a\u7070\u8272,\u5b9e\u73b0\u5207\u6362\u6548\u679c\n this.$refs['test' + i][0].style.backgroundColor = '#f8f8f8'\n }\n \/\/\u8df3\u51fa for \u5faa\u73af,\u7531\u5de6\u4fa7\u79fb\u5411\u53f3\u4fa7\u8be6\u60c5\u9875\u65f6,\u5176 menuItem \u7684\u989c\u8272\u4e3a\u9ec4\u8272\n this.$refs['test' + index][0].style.backgroundColor = 'rgb(255, 242, 0)'\n \/\/\u5c06\u53f3\u4fa7\u6570\u636e\u8bbe\u7f6e\u4e3a item,\u663e\u793a\u6570\u636e\n this.data = item\n },\n \/\/\u9f20\u6807\u8fdb\u5165\u51fd\u6570\n \/\/\u6ce8\u610f: mouseleave:\u662f\u9f20\u6807\u79fb\u51fa\u8be5\u5143\u7d20\u4e4b\u5916,\u5219\u89e6\u53d1 mouseleave \u4e8b\u4ef6\n \/\/ mouseout : \u662f\u5f53\u6307\u9488\u79bb\u5f00\u8be5\u5143\u7d20\u53ca\u5176\u6240\u6709\u540e\u4ee3\u65f6\uff0c\u4f1a\u89e6\u53d1 mouseleave\n \/\/ \u800c\u5f53\u6307\u9488\u79bb\u5f00\u5143\u7d20\u6216\u79bb\u5f00\u5143\u7d20\u7684\u540e\u4ee3\uff08\u5373\u4f7f\u6307\u9488\u4ecd\u5728\u5143\u7d20\u5185\uff09\u65f6\uff0c\u4e5f\u4f1a\u89e6\u53d1 mouseout \u4e8b\u4ef6\n mleftLeave () {\n \/\/\u83b7\u53d6 menuList \u4e2d\u6bcf\u4e2a menuItem \u5b57\u7b26\u4e32\u7684\u957f\u5ea6\n let menuSize = this.menuList.length\n for (let i = 0; i < menuSize; i++) {\n this.$refs['test' + i][0].style.backgroundColor = '#f8f8f8'\n }\n \/\/ \u8df3\u51fa\u5faa\u73af,\u6d4f\u89c8\u5b8c'\u53d1\u73b0',\u9f20\u6807\u79fb\u51fa,\u7f6e\u4e8e\u53f3\u4fa7\u6570\u636e\u4e3a\u7b2c\u4e00\u4e2a\u7cbe\u9009\u6570\u636e\n this.data = this.menuList[0]\n \/\/\u9f20\u6807\u79fb\u51fa\u4e8b\u4ef6,\u7f6e\u4e8e\u7b2c\u4e00\u4e2a menuitem \u4e3a\u9ec4\u8272[\u672a\u5237\u65b0\u65f6\u7684\u8bbe\u7f6e]\n this.$refs['test' + 0][0].style.backgroundColor = 'rgb(255, 242, 0)'\n\n \/\/ this.data = {}\n \/\/ this.$refs['test'+index][0].style.backgroundColor = '#f8f8f8'\n \/\/ console.log('\u6eda\u51fa\u53bb')\n },\n}<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"\u4e0b\u8f7d\u4f9d\u8d56\u901f\u5ea6\u5feb npm install –registry=https:\/\/registry.npm.tao […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[],"class_list":["post-3462","post","type-post","status-publish","format-standard","hentry","category-web"],"_links":{"self":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/3462","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3462"}],"version-history":[{"count":38,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/3462\/revisions"}],"predecessor-version":[{"id":3558,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/3462\/revisions\/3558"}],"wp:attachment":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3462"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=3462"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=3462"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
<div v-for="(item,index) in list" :key="index" :class="'list-' + (index + 1)">\n <img :src="item.url" alt="" class="five_img"\/>\n <\/div><\/code><\/pre>\n\u6587\u5b57\u591a\u65f6,\u9690\u85cf<\/h3>\n.main_content ul li .svg_text {\n width: 86px;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;<\/code><\/pre>\n<\/p>\n<\/p><\/noscript>\n\u8bbe\u7f6e 5 \u500d\u6570\u7684\u5143\u7d20\u7684\u6837\u5f0f<\/h3>\n.main_content ul li:nth-child(5n) {\n margin-right: 0;\n}<\/code><\/pre>\nel-cascader-panel \u7ea7\u8054\u9009\u62e9\u5668\u6837\u5f0f\u66f4\u6539<\/h3>\n<\/p>\n<\/p><\/noscript>\n <div class="h_menu">\n <div class="menu_box">\n <el-cascader-panel :options="findOptions" :props="props"\/>\n <\/div>\n<\/div><\/code><\/pre>\n\/*\u4e8c\u7ea7\u76ee\u5f55*\/\n.topbar .shortcut-links {\n width: 600px;\n margin: 0 auto;\n}\n\n.topbar .shortcut-links > ul > li {\n float: left;\n padding: 13px 20px;\n line-height: 31px;\n font-size: 14px;\n position: relative;\n}\n\n.topbar .shortcut-links > ul > li:hover .h_menu {\n display: block;\n}\n.topbar .shortcut-links > ul > li .h_menu {\n position: absolute;\n left: 0;\n display: none;\n width: 152px;\n margin-top: 13px;\n z-index: 9999;\n}\n.topbar .shortcut-links > ul > li .h_menu .menu_box {\n background: #ffffff;\n width: 152px;\n box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);\n padding: 8px 0 8px 0;\n \/*float: left;*\/\n}\n\n.topbar .shortcut-links > ul > li .h_menu .menu_box >a {\n height: 45px;\n line-height: 45px;\n font-size: 14px;\n padding-left: 20px;\n \/*padding-top: 5px;*\/\n display: block;\n}\n<\/code><\/pre>\nstyle\n\/*\u53d6\u6d88\u8fb9\u6846*\/\n.el-cascader-panel.is-bordered {\n border: none;\n border-radius: 0;\n}\n\n.el-cascader-menu {\n color: #1c1f21;\n font-size: 14px;\n min-width: 152px;\n}\n\n.el-cascader-menu__list {\n padding: 0;\n}\n\n.el-cascader-node.in-active-path, .el-cascader-node.is-active, .el-cascader-node.is-selectable.in-checked-path {\n color: #1c1f21;\n font-weight: normal;\n}\n\/*item \u60ac\u6302\u9ec4\u8272\u80cc\u666f\u5bbd\u95f4\u8ddd*\/\n.el-cascader-node {\n padding-left: 20px;\n height: 45px;\n line-height: 45px;\n}\n\/*\u4e8c\u7ea7\u76ee\u5f55\u7684\u9ad8\u5ea6*\/\n.el-cascader-menu__wrap.el-scrollbar__wrap {\n height: 478px;\n}\n\n.el-cascader-menu:last-child .el-cascader-node {\n padding-right: 0;\n}\n\/*item \u60ac\u6302\u9ec4\u8272\u80cc\u666f*\/\n.el-cascader-node:not(.is-disabled):focus, .el-cascader-node:not(.is-disabled):hover {\n background-color: rgb(255, 242, 0);\n}\n\/*item \u53f3\u8fb9\u7684\u5c0f\u7bad\u5934\u989c\u8272\u6539\u4e3a\u9ec4\u8272[\u9690\u85cf]*\/\n.el-cascader-node:not(.is-disabled):focus, .el-cascader-node:not(.is-disabled):hover .el-icon {\n color: rgb(255, 242, 0);\n}\n\n.el-cascader-node__label {\n padding: 0;\n}\n\n.el-cascader-node__postfix {\n position: absolute;\n right: 0;\n}\n\/*\u6eda\u52a8\u6761\u5230\u9876\u90e8,\u4e0b\u90e8\u7684\u95f4\u8ddd*\/\n.el-scrollbar__bar {\n position: absolute;\n right: 0;\n bottom: 0;\n z-index: 1;\n border-radius: 4px;\n}<\/code><\/pre>\n<\/p>\n<\/p><\/noscript>\n <el-cascader-panel :options="findOptions" :props="props"\/><\/code><\/pre>\n\/*\u4e8c\u7ea7\u76ee\u5f55\u7684\u9ad8\u5ea6*\/\n\/deep\/.el-cascader-menu__wrap.el-scrollbar__wrap {\n height: 490px;\n}\n\/*item \u60ac\u6302\u9ec4\u8272\u80cc\u666f\u5bbd\u95f4\u8ddd*\/\n\/deep\/.el-cascader-node {\nheight: 45px;\n width: 165px;\n padding: 0;\n margin-left: 10px;\n}\n\/*item \u60ac\u6302\u9ec4\u8272\u80cc\u666f*\/\n\/deep\/ .el-cascader-node:not(.is-disabled):hover {\n background: #fff200;\n border-radius: 8px;\n}\n\/*\u70b9\u51fb\u540e\u6539\u53d8\u989c\u8272,\u7c97\u7ec6\u53d6\u6d88\u70b9\u51fb\u6548\u679c*\/\n\/deep\/.el-cascader-node.is-active{\ncolor: #222222;\n font-weight: normal;\n}\n\/*item \u5de6\u8fb9\u6709\u4e2a\u5c0f\u52fe\u221a*\/\n\/deep\/.el-icon svg {\n height: 0;\n width: 0;\n}\n\/*\u53d1\u73b0\u7684\u4e8c\u7ea7\u76ee\u5f55\u6d88\u5931*\/\n.el-cascader-panel{\n display: none;\n}\n\/*\u53d6\u6d88\u8fb9\u6846*\/\n.el-cascader-panel.is-bordered {\n border: none;\n}\n\/*\u60ac\u6302'\u53d1\u73b0'\u76ee\u5f55,\u51fa\u73b0\u4e8c\u7ea7\u76ee\u5f55*\/\n.topbar .shortcut-links > ul > li:nth-child(2):hover .el-cascader-panel{\n display: block;\n background-color: #f8f8f8;\n border-radius: 8px 0 8px 8px;\n}<\/code><\/pre>\n\u626b\u4e8c\u7ef4\u7801\u767b\u5f55\u548c\u5bc6\u7801\u767b\u5f55\u9875\u9762\u7684\u5207\u6362<\/h3>\n@click="handleChangeToLogin()"<\/code><\/pre>\n handleChangeToLogin () {\n const qr = document.getElementById('qr_code')\n const login = document.getElementById('login')\n qr.style.display = 'none';\n if (qr.style.display === 'none') {\n login.style.display = 'block'\n }\n },\n handleChangeToQr () {\n const qr = document.getElementById('qr_code')\n const login = document.getElementById('login')\n login.style.display = 'none'\n if (login.style.display === 'none') {\n qr.style.display = 'block'\n }\n }<\/code><\/pre>\n\u767b\u5f55\u6846\u7684\u6ed1\u5757\u9a8c\u8bc1<\/h3>\n<\/p>\n<\/p><\/noscript>\n<\/slider><\/p>\n<template>\n <div ref="dragDiv" class="drag">\n <div class="drag_bg"><\/div>\n <div class="drag_text">{{ confirmWords }}<\/div>\n <div ref="moveDiv" :class="{'handler_ok_bg':confirmSuccess}" class="handler handler_bg"\n style="position: absolute;top: 0;left: 0;" @mousedown="mouseDownFn($event)"><\/div>\n <\/div>\n<\/template>\n\n<script>\nexport default {\n data () {\n return {\n beginClientX: 0, \/*\u8ddd\u79bb\u5c4f\u5e55\u5de6\u7aef\u8ddd\u79bb*\/\n mouseMoveState: false, \/*\u89e6\u53d1\u62d6\u52a8\u72b6\u6001 \u5224\u65ad*\/\n maxWidth: '', \/*\u62d6\u52a8\u6700\u5927\u5bbd\u5ea6\uff0c\u4f9d\u636e\u6ed1\u5757\u5bbd\u5ea6\u7b97\u51fa\u6765\u7684*\/\n confirmWords: '\u8bf7\u6309\u4f4f\u6ed1\u5757,\u62d6\u52a8\u5230\u6700\u53f3\u8fb9', \/*\u6ed1\u5757\u6587\u5b57*\/\n confirmSuccess: false \/*\u9a8c\u8bc1\u6210\u529f\u5224\u65ad*\/\n }\n },\n methods: {\n \/\/mousedown \u4e8b\u4ef6\n mouseDownFn: function (e) {\n if (!this.confirmSuccess) {\n e.preventDefault && e.preventDefault() \/\/\u963b\u6b62\u6587\u5b57\u9009\u4e2d\u7b49 \u6d4f\u89c8\u5668\u9ed8\u8ba4\u4e8b\u4ef6\n this.mouseMoveState = true\n this.beginClientX = e.clientX\n }\n },\n \/\/\u9a8c\u8bc1\u6210\u529f\u51fd\u6570\n successFunction () {\n this.confirmSuccess = true\n this.confirmWords = '\u9a8c\u8bc1\u901a\u8fc7'\n if (window.addEventListener) {\n document.getElementsByTagName('html')[0].removeEventListener('mousemove', this.mouseMoveFn)\n document.getElementsByTagName('html')[0].removeEventListener('mouseup', this.moseUpFn)\n } else {\n document.getElementsByTagName('html')[0].removeEventListener('mouseup', () => {\n })\n }\n document.getElementsByClassName('drag_text')[0].style.color = '#fff'\n document.getElementsByClassName('handler')[0].style.left = this.maxWidth + 'px'\n document.getElementsByClassName('drag_bg')[0].style.width = this.maxWidth + 'px'\n },\n \/\/mousemove \u4e8b\u4ef6\n mouseMoveFn (e) {\n if (this.mouseMoveState) {\n let width = e.clientX - this.beginClientX\n if (width > 0 && width <= this.maxWidth) {\n document.getElementsByClassName('handler')[0].style.left = width + 'px'\n document.getElementsByClassName('drag_bg')[0].style.width = width + 'px'\n } else if (width > this.maxWidth) {\n this.successFunction()\n }\n }\n },\n \/\/mouseup \u4e8b\u4ef6\n moseUpFn (e) {\n this.mouseMoveState = false\n var width = e.clientX - this.beginClientX\n if (width < this.maxWidth) {\n document.getElementsByClassName('handler')[0].style.left = 0 + 'px'\n document.getElementsByClassName('drag_bg')[0].style.width = 0 + 'px'\n }\n }\n },\n mounted () {\n this.maxWidth = this.$refs.dragDiv.clientWidth - this.$refs.moveDiv.clientWidth\n document.getElementsByTagName('html')[0].addEventListener('mousemove', this.mouseMoveFn)\n document.getElementsByTagName('html')[0].addEventListener('mouseup', this.moseUpFn)\n }\n}\n<\/script>\n<style scoped>\n.drag {\n position: relative;\n background-color: #e8e8e8;\n width: 100%;\n height: 32px;\n line-height: 32px;\n text-align: center;\n border: 1px solid #ccc;\n\n}\n\n.handler {\n width: 40px;\n height: 32px;\n border: 1px solid #ccc;\n cursor: move;\n margin-top: -1px;\n margin-left: -1px;\n}\n\n.handler_bg {\n background: #fff url('..\/assets\/images\/arrow-r.png') no-repeat center;\n background-size: 25px;\n}\n\n.handler_ok_bg {\n background: #fff url('..\/assets\/images\/\u221a.png') no-repeat center;\n background-size: 18px;\n}\n\n.drag_bg {\n background-color: #7ac23c;\n height: 32px;\n width: 0;\n}\n\n.drag_text {\n position: absolute;\n top: 0;\n width: 100%;\n font-size: 12px;\n color: #706f6f;\n}\n\n<\/style>\n<\/code><\/pre>\nel-input \u805a\u7126\u540e\u80cc\u666f\u53d8\u767d<\/h3>\n<\/p>\n<\/p><\/noscript>\n.el-input__wrapper.is-focus {\n box-shadow: 0 0 0 1px #dcdfe6 inset;\n background-color: #fff;\n}<\/code><\/pre>\nel-input placeholder \u989c\u8272\u8bbe\u7f6e<\/h3>\n.el-input__inner::placeholder{\n color: #666666;\n}<\/code><\/pre>\n\u5224\u65ad el-checked \u662f\u5426\u9009\u4e2d,\u672a\u9009\u4e2d\u5219\u63d0\u793a\u8bf7\u52fe\u9009<\/h3>\n<\/p>\n<\/p><\/noscript>\nexport default {\nmounted() {\n const pleaseFit=document.getElementById('pleaseFit');\n $(".el-checkbox input").change(() => {\n if ($(".el-checkbox input[type='checkbox']").is(':checked') == true) {\n pleaseFit.style.display='none'\n } else {\n pleaseFit.style.display='block'\n }\n })\n }\n }<\/code><\/pre>\nel-input \u5728 style \u5168\u5c40\u6837\u5f0f,\u4f1a\u5f71\u54cd\u5230\u5176\u4ed6\u4e0d\u7b26\u5408\u8be5\u6837\u5f0f\u7684\u4f4d\u7f6e<\/h3>\n\n\u53ef\u4ee5\u5728 style scoped> \u5199,\u52a0\u4e0a\/deep\/<\/li>\n<\/ul>\n<\/p>\n<\/p><\/noscript>\n\/deep\/ .el-input__wrapper {\n box-shadow: 0 0 0 0 inset;\n background-color: rgb(255, 242, 0);\n}<\/code><\/pre>\nel-carousel \u8d70\u9a6c\u706f\u4fee\u6539 Carousel \u5de6\u53f3\u4e24\u4fa7\u7bad\u5934\u5b57\u4f53\u5927\u5c0f<\/h3>\n\/deep\/.el-carousel__arrow i {\n font-size: 29px !important;\n }<\/code><\/pre>\n\u9875\u9762\u5411\u4e0b\u6ed1\u52a8\u5bfc\u822a\u680f\u56fa\u5b9a<\/h3>\n<\/p>\n<\/p><\/noscript>\n.main_nav_fixed {\n position: sticky;\n top: 0;\n z-index: 999;\n}<\/code><\/pre>\n\u56fa\u5b9a\u5728\u53f3\u65b9\u7684,\u60ac\u6302\u51fa\u73b0\u4e8c\u7ef4\u7801<\/h3>\n<\/p>\n<\/p><\/noscript>\n<div class="share_box">\n <img src="..\/..\/assets\/images\/share_qr.png" alt=""\/>\n <\/div><\/code><\/pre>\n.share_box{\n width: 70px;\n height: 131px;\n top: 300px;\n right: 10px;\n cursor: pointer;\n position: fixed;\n z-index: 999;\n background: url("..\/..\/assets\/images\/share_wx.jpg") no-repeat;\n background-size: 100% 100%;\n}\n.share_box img{\n width: 100px;\n height: 100px;\n display: none;\n}\n.share_box:hover img {\n position: absolute;\n top: 50%;\n margin-top: -50px;\n right: 82px;\n display: block !important;\n}<\/code><\/pre>\nnth-child(n)\u6307\u7684\u662f\u5728\u7236\u5143\u7d20\u4e2d\u6240\u6709\u7684\u5143\u7d20\u7684\u987a\u5e8f<\/h3>\n\n\u5199\u4ee3\u7801\u8981\u6839\u636e\u76d2\u5b50\u4ee5\u53ca\u5185\u5bb9\u5199<\/li>\nbottom\uff1a0\uff1b\u8981\u76f8\u5bf9\u4e8e\u7236\u5143\u7d20\u7684 height \u5b9e\u73b0\uff0c\u5982\u679c\u7236\u7236\u5143\u7d20\u7684 height \u5927\u4e8e\u7236\u5143\u7d20\u7684 height\uff0c\uff0c\u5219\u4f1a\u6309\u7167\u7236\u7236\u5143\u7d20\u7684 height \u6765\u5b9e\u73b0 bottom\uff1a0\uff1b\u6765\u5b9e\u73b0\u3002\u3010\u9002\u5f53\u5220\u9664\u7236\u7236\u5143\u7d20\u7684 height\uff0c\u4e00\u677f\u5757\u901a\u5e38\u4e0d\u7528\u8bbe\u7f6e\u603b height\u3011<\/li>\n<\/ul>\n\u60ac\u6302\u56fe\u7247\u7f13\u7f13\u653e\u5927\u7684\u52a8\u753b\u6548\u679c<\/h3>\n<\/p>\n<\/p><\/noscript>\n.gc_project .item_img > img {\n width: 100%;\n height: 100%;\n transition: all 0.3s;\n}\n.gc_project .item_img > img:hover {\n transform: scale(1.05);\n box-shadow: rgb(0 0 0 \/ 23%) 0 4px 14px 0;\n}<\/code><\/pre>\n\u6eda\u52a8\u6761\u4fee\u6539<\/h3>\n<\/p>\n<\/p><\/noscript>\n.mleft::-webkit-scrollbar{\n width: 6px;\n background-color: #f8f8f8;\n\n}\n.mleft::-webkit-scrollbar-thumb{\n width: 6px;\n background-color: #adacac;\n border-radius: 4px;\n}<\/code><\/pre>\nhead \u533a '\u53d1\u73b0' \u5b9e\u73b0\u4ea4\u4e92\u6548\u679c [\u8be5\u9996\u9875\u6700\u607c\u706b\u7684]<\/h2>\n<\/p>\n<\/p><\/noscript>\ntodo head \u533a'\u53d1\u73b0'\u4ea4\u4e92\u5b9e\u73b0\u601d\u8def:<\/h3>\n\n\u2460\u89c2\u5bdf\u8be5\u533a\u7ed3\u6784,\u4e00\u4e2a\u5927\u6a21\u5757,\u5176\u4e2d\u5206\u4e3a\u5de6\u4e2d\u53f3\u4e09\u4e2a\u6a21\u5757,\u5e76\u4f9d\u6b21\u5199\u51fa\u4e09\u4e2a\u6a21\u5757\u7684\u4ee3\u7801,<\/li>\n\u2461\u5de6\u4fa7\u533a\u57df: \u8981\u5c55\u793a\u7684\u6548\u679c\u6709: \u9f20\u6807\u4e0a\u4e0b\u79fb\u52a8,\u6240\u7ecf\u7684 menuItem \u4f1a\u5c55\u73b0\u9ec4\u8272\u80cc\u666f, \u5219\u5f15\u7528 vue \u7684 ref \u5c5e\u6027\u5bf9 DOM \u5143\u7d20\u8fdb\u884c\u52a8\u6001\u7ed1\u5b9a.\n\n\u6ce8\u610f:ref \u9700\u8981\u5728 dom \u6e32\u67d3\u5b8c\u6210\u540e\u624d\u4f1a\u6709,\u5728\u4f7f\u7528\u7684\u65f6\u5019\u786e\u4fdd dom \u5df2\u7ecf\u6e32\u67d3\u5b8c\u6210, \u6bd4\u5982\u5728\u751f\u547d\u5468\u671f mounted(){}\u94a9\u5b50\u4e2d\u8c03\u7528. this.$refs.xxx:\u51cf\u5c11\u83b7\u53d6 dom \u8282\u70b9\u7684\u6d88\u8017<\/li>\n<\/ul>\n<\/li>\n\u2462\u5de6\u4fa7\u533a\u57df\u8fc7\u6ee4\u5230\u53f3\u4fa7\u533a\u57df,\u5c55\u793a\u5bf9\u5e94\u7684\u8be6\u60c5\u9875: mleftIn(item,index)\u51fd\u6570\u901a\u8fc7\u4f20\u8f93 v-for \u5faa\u73af\u4e2d\u6570\u7ec4 menuList \u7684 item \u6bcf\u4e00\u9879\u4e3a\u5a92\u4ecb, \u800c\u6570\u636e\u4e2d menuList \u4e2d\u5305\u542b\u5de6\u4fa7\u6570\u636e menuItem \u4e0e\u53f3\u4fa7\u6bcf\u4e00\u9875\u7684\u6807\u9898 menu \u76f8\u540c, \u4ece\u800c\u5c06\u5de6\u4fa7\u548c\u53f3\u4fa7\u6570\u636e\u7ed1\u5b9a, \u6545\u800c\u5f62\u6210\u4ece\u5de6\u4fa7\u8fc7\u6ee4\u5230\u53f3\u4fa7\u533a\u57df\u662f\u56fa\u5b9a\u7684\u8be6\u60c5\u9875\u5185\u5bb9.<\/li>\n\u2463\u9875\u9762\u7b2c\u4e8c\u6b21\u672a\u5237\u65b0\u4e4b\u524d(\u9996\u6b21\u8fdb\u5165\u9875\u9762\u6e32\u67d3), \u9f20\u6807\u60ac\u6302'\u53d1\u73b0',\u8981\u51fa\u73b0\u7b2c\u4e00\u4e2a'\u7cbe\u9009'\u8be6\u60c5\u9875\u53ca'\u7cbe\u9009'item \u80cc\u666f\u53d8\u9ec4: \u9f20\u6807\u79fb\u51fa\u8be5\u5143\u7d20[\u4e8c\u7ea7\u76ee\u5f55\u6574\u4e2a\u5927\u6a21\u5757]\u4e4b\u5916,\u5219\u89e6\u53d1 mouseleave \u4e8b\u4ef6,\u521d\u59cb\u5316\u6570\u636e.<\/li>\n\u2464\u7b2c\u4e8c\u6b21\u9875\u9762\u5237\u65b0\u4e4b\u540e,\u521d\u59cb\u5316\u6570\u636e: \u91c7\u7528 mounted \u751f\u547d\u5468\u671f[\u6e32\u67d3\u6210 html \u540e\u8c03\u7528]: \u4f7f\u9f20\u6807\u60ac\u6302'\u53d1\u73b0',\u7b2c\u4e00\u4e2a menu-item \u663e\u793a\u9ec4\u8272<\/li>\n<\/ul>\n <li class="find">\n <a href="#">\u53d1\u73b0<\/a>\n <div class="h_menu" @mouseleave="mleftLeave()">\n <div class="menu_box mleft">\n <!-- <a href="">\u7cbe\u9009<\/a>-->\n <a v-for="(item,index) in menuList" :key="index" :ref="'test'+index" href="javascript:;"\n @mouseover="mleftIn(item,index)">{{ item.menu }}<\/a>\n <!-- <el-cascader-panel :options="findOptions" :props="props" \/>-->\n <\/div>\n <div class="mright">\n <div class="cate-box">\n <a class="cate-title" href="">\n <img :src="data.url" alt="">\n <span>{{ data.menu }}<\/span>\n <\/a>\n <div class="subCate">\n <a v-for="(itemOne) in data.items" :key="itemOne">{{ itemOne.text }}<\/a>\n <\/div>\n <\/div>\n <\/div>\n <div class="right_bar">\n <div class="icons">\n <a>\n <span class="icon-box">\n <span class="tangle-1"><\/span>\n <span class="tangle-2"><\/span>\n <i class="ani-star"><\/i>\n <span class="tangle-3"><\/span>\n <\/span>\n <span class="icon-text">\u6536\u85cf\u5939<\/span>\n <\/a>\n <a>\n <img alt="" src="..\/assets\/images\/icon-header-discover-designer.png">\n <span>\u8bbe\u8ba1\u5e08<\/span>\n <\/a>\n <a>\n <img alt="" src="..\/assets\/images\/icon-header-discover-focus.png">\n <span>\u699c\u5355<\/span>\n <!-- <sup class="subNavDot"><\/sup>-->\n <\/a>\n <\/div>\n <div class="ad_box">\n\n <\/div>\n <\/div>\n <\/div>\n <\/li><\/code><\/pre>\n data: {},\n menuList: [\n {\n menu: '\u7cbe\u9009',\n url: require('..\/assets\/images\/zuanshi.png'),\n items: [\n { text: '\u8fd0\u8425\u8bbe\u8ba1' },\n { text: '\u5305\u88c5' },\n { text: '\u52a8\u753b\/\u5f71\u89c6' },\n { text: '\u4eba\u50cf\u6444\u5f71' },\n { text: '\u5546\u4e1a\u63d2\u753b' },\n { text: '\u7535\u5546' },\n { text: 'APP \u754c\u9762' },\n { text: '\u827a\u672f\u63d2\u753b' },\n { text: '\u5bb6\u88c5\u8bbe\u8ba1' },\n { text: '\u6d77\u62a5' },\n { text: '\u6587\u7ae0' }\n ]\n },\n { menu: '\u5e73\u9762' },\n { menu: 'UI' },\n { menu: '\u7f51\u9875' },\n { menu: '\u63d2\u753b' },\n { menu: '\u52a8\u6f2b' },\n { menu: '\u6444\u5f71' },\n { menu: '\u7a7a\u95f4' },\n { menu: '\u5de5\u4e1a\/\u4ea7\u54c1' },\n { menu: '\u4e09\u7ef4' },\n { menu: '\u5f71\u89c6' },\n { menu: '\u624b\u5de5\u827a' },\n { menu: '\u7eaf\u827a\u672f' },\n { menu: '\u670d\u88c5' },\n { menu: '\u5176\u4ed6' }\n ],<\/code><\/pre>\n \/\/\u6e32\u67d3\u6210 html \u4e4b\u524d\u8c03\u7528,\u521d\u59cb\u5316\u4e00\u4e9b\u5c5e\u6027\u503c [\u9f20\u6807\u60ac\u6302'\u53d1\u73b0',\u5c31\u51fa\u73b0\u7b2c\u4e00\u4e2a\u7cbe\u9009\u9875\u9762]\n created () {\n this.data = this.menuList[0]\n },\n \/\/\u6e32\u67d3\u6210 html \u540e\u8c03\u7528 [\u9f20\u6807\u60ac\u6302'\u53d1\u73b0',\u7b2c\u4e00\u4e2a menu-item \u663e\u793a\u9ec4\u8272](\u9875\u9762\u5237\u65b0\u4e86\u4e4b\u540e\u7684)\n mounted () {\n this.$refs['test' + 0][0].style.backgroundColor = 'rgb(255, 242, 0)'\n },\n methods: {\n \/\/\u9f20\u6807\u8fdb\u5165\u51fd\u6570\n mleftIn (item, index) {\n \/\/\u83b7\u53d6 menuList \u4e2d\u6bcf\u4e2a menuItem \u5b57\u7b26\u4e32\u7684\u957f\u5ea6\n let menuSize = this.menuList.length\n for (let i = 0; i < menuSize; i++) {\n \/\/for \u5faa\u73af,i \u5982\u679c\u5c0f\u4e8e menuSize,\u5219\u7f6e\u4e8e menuItem \u989c\u8272\u4e3a\u7070\u8272,\u5b9e\u73b0\u5207\u6362\u6548\u679c\n this.$refs['test' + i][0].style.backgroundColor = '#f8f8f8'\n }\n \/\/\u8df3\u51fa for \u5faa\u73af,\u7531\u5de6\u4fa7\u79fb\u5411\u53f3\u4fa7\u8be6\u60c5\u9875\u65f6,\u5176 menuItem \u7684\u989c\u8272\u4e3a\u9ec4\u8272\n this.$refs['test' + index][0].style.backgroundColor = 'rgb(255, 242, 0)'\n \/\/\u5c06\u53f3\u4fa7\u6570\u636e\u8bbe\u7f6e\u4e3a item,\u663e\u793a\u6570\u636e\n this.data = item\n },\n \/\/\u9f20\u6807\u8fdb\u5165\u51fd\u6570\n \/\/\u6ce8\u610f: mouseleave:\u662f\u9f20\u6807\u79fb\u51fa\u8be5\u5143\u7d20\u4e4b\u5916,\u5219\u89e6\u53d1 mouseleave \u4e8b\u4ef6\n \/\/ mouseout : \u662f\u5f53\u6307\u9488\u79bb\u5f00\u8be5\u5143\u7d20\u53ca\u5176\u6240\u6709\u540e\u4ee3\u65f6\uff0c\u4f1a\u89e6\u53d1 mouseleave\n \/\/ \u800c\u5f53\u6307\u9488\u79bb\u5f00\u5143\u7d20\u6216\u79bb\u5f00\u5143\u7d20\u7684\u540e\u4ee3\uff08\u5373\u4f7f\u6307\u9488\u4ecd\u5728\u5143\u7d20\u5185\uff09\u65f6\uff0c\u4e5f\u4f1a\u89e6\u53d1 mouseout \u4e8b\u4ef6\n mleftLeave () {\n \/\/\u83b7\u53d6 menuList \u4e2d\u6bcf\u4e2a menuItem \u5b57\u7b26\u4e32\u7684\u957f\u5ea6\n let menuSize = this.menuList.length\n for (let i = 0; i < menuSize; i++) {\n this.$refs['test' + i][0].style.backgroundColor = '#f8f8f8'\n }\n \/\/ \u8df3\u51fa\u5faa\u73af,\u6d4f\u89c8\u5b8c'\u53d1\u73b0',\u9f20\u6807\u79fb\u51fa,\u7f6e\u4e8e\u53f3\u4fa7\u6570\u636e\u4e3a\u7b2c\u4e00\u4e2a\u7cbe\u9009\u6570\u636e\n this.data = this.menuList[0]\n \/\/\u9f20\u6807\u79fb\u51fa\u4e8b\u4ef6,\u7f6e\u4e8e\u7b2c\u4e00\u4e2a menuitem \u4e3a\u9ec4\u8272[\u672a\u5237\u65b0\u65f6\u7684\u8bbe\u7f6e]\n this.$refs['test' + 0][0].style.backgroundColor = 'rgb(255, 242, 0)'\n\n \/\/ this.data = {}\n \/\/ this.$refs['test'+index][0].style.backgroundColor = '#f8f8f8'\n \/\/ console.log('\u6eda\u51fa\u53bb')\n },\n}<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"\u4e0b\u8f7d\u4f9d\u8d56\u901f\u5ea6\u5feb npm install –registry=https:\/\/registry.npm.tao […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[],"class_list":["post-3462","post","type-post","status-publish","format-standard","hentry","category-web"],"_links":{"self":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/3462","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3462"}],"version-history":[{"count":38,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/3462\/revisions"}],"predecessor-version":[{"id":3558,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/3462\/revisions\/3558"}],"wp:attachment":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3462"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=3462"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=3462"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
.main_content ul li .svg_text {\n width: 86px;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;<\/code><\/pre>\n<\/p>\n<\/p><\/noscript>\n\u8bbe\u7f6e 5 \u500d\u6570\u7684\u5143\u7d20\u7684\u6837\u5f0f<\/h3>\n.main_content ul li:nth-child(5n) {\n margin-right: 0;\n}<\/code><\/pre>\nel-cascader-panel \u7ea7\u8054\u9009\u62e9\u5668\u6837\u5f0f\u66f4\u6539<\/h3>\n<\/p>\n<\/p><\/noscript>\n <div class="h_menu">\n <div class="menu_box">\n <el-cascader-panel :options="findOptions" :props="props"\/>\n <\/div>\n<\/div><\/code><\/pre>\n\/*\u4e8c\u7ea7\u76ee\u5f55*\/\n.topbar .shortcut-links {\n width: 600px;\n margin: 0 auto;\n}\n\n.topbar .shortcut-links > ul > li {\n float: left;\n padding: 13px 20px;\n line-height: 31px;\n font-size: 14px;\n position: relative;\n}\n\n.topbar .shortcut-links > ul > li:hover .h_menu {\n display: block;\n}\n.topbar .shortcut-links > ul > li .h_menu {\n position: absolute;\n left: 0;\n display: none;\n width: 152px;\n margin-top: 13px;\n z-index: 9999;\n}\n.topbar .shortcut-links > ul > li .h_menu .menu_box {\n background: #ffffff;\n width: 152px;\n box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);\n padding: 8px 0 8px 0;\n \/*float: left;*\/\n}\n\n.topbar .shortcut-links > ul > li .h_menu .menu_box >a {\n height: 45px;\n line-height: 45px;\n font-size: 14px;\n padding-left: 20px;\n \/*padding-top: 5px;*\/\n display: block;\n}\n<\/code><\/pre>\nstyle\n\/*\u53d6\u6d88\u8fb9\u6846*\/\n.el-cascader-panel.is-bordered {\n border: none;\n border-radius: 0;\n}\n\n.el-cascader-menu {\n color: #1c1f21;\n font-size: 14px;\n min-width: 152px;\n}\n\n.el-cascader-menu__list {\n padding: 0;\n}\n\n.el-cascader-node.in-active-path, .el-cascader-node.is-active, .el-cascader-node.is-selectable.in-checked-path {\n color: #1c1f21;\n font-weight: normal;\n}\n\/*item \u60ac\u6302\u9ec4\u8272\u80cc\u666f\u5bbd\u95f4\u8ddd*\/\n.el-cascader-node {\n padding-left: 20px;\n height: 45px;\n line-height: 45px;\n}\n\/*\u4e8c\u7ea7\u76ee\u5f55\u7684\u9ad8\u5ea6*\/\n.el-cascader-menu__wrap.el-scrollbar__wrap {\n height: 478px;\n}\n\n.el-cascader-menu:last-child .el-cascader-node {\n padding-right: 0;\n}\n\/*item \u60ac\u6302\u9ec4\u8272\u80cc\u666f*\/\n.el-cascader-node:not(.is-disabled):focus, .el-cascader-node:not(.is-disabled):hover {\n background-color: rgb(255, 242, 0);\n}\n\/*item \u53f3\u8fb9\u7684\u5c0f\u7bad\u5934\u989c\u8272\u6539\u4e3a\u9ec4\u8272[\u9690\u85cf]*\/\n.el-cascader-node:not(.is-disabled):focus, .el-cascader-node:not(.is-disabled):hover .el-icon {\n color: rgb(255, 242, 0);\n}\n\n.el-cascader-node__label {\n padding: 0;\n}\n\n.el-cascader-node__postfix {\n position: absolute;\n right: 0;\n}\n\/*\u6eda\u52a8\u6761\u5230\u9876\u90e8,\u4e0b\u90e8\u7684\u95f4\u8ddd*\/\n.el-scrollbar__bar {\n position: absolute;\n right: 0;\n bottom: 0;\n z-index: 1;\n border-radius: 4px;\n}<\/code><\/pre>\n<\/p>\n<\/p><\/noscript>\n <el-cascader-panel :options="findOptions" :props="props"\/><\/code><\/pre>\n\/*\u4e8c\u7ea7\u76ee\u5f55\u7684\u9ad8\u5ea6*\/\n\/deep\/.el-cascader-menu__wrap.el-scrollbar__wrap {\n height: 490px;\n}\n\/*item \u60ac\u6302\u9ec4\u8272\u80cc\u666f\u5bbd\u95f4\u8ddd*\/\n\/deep\/.el-cascader-node {\nheight: 45px;\n width: 165px;\n padding: 0;\n margin-left: 10px;\n}\n\/*item \u60ac\u6302\u9ec4\u8272\u80cc\u666f*\/\n\/deep\/ .el-cascader-node:not(.is-disabled):hover {\n background: #fff200;\n border-radius: 8px;\n}\n\/*\u70b9\u51fb\u540e\u6539\u53d8\u989c\u8272,\u7c97\u7ec6\u53d6\u6d88\u70b9\u51fb\u6548\u679c*\/\n\/deep\/.el-cascader-node.is-active{\ncolor: #222222;\n font-weight: normal;\n}\n\/*item \u5de6\u8fb9\u6709\u4e2a\u5c0f\u52fe\u221a*\/\n\/deep\/.el-icon svg {\n height: 0;\n width: 0;\n}\n\/*\u53d1\u73b0\u7684\u4e8c\u7ea7\u76ee\u5f55\u6d88\u5931*\/\n.el-cascader-panel{\n display: none;\n}\n\/*\u53d6\u6d88\u8fb9\u6846*\/\n.el-cascader-panel.is-bordered {\n border: none;\n}\n\/*\u60ac\u6302'\u53d1\u73b0'\u76ee\u5f55,\u51fa\u73b0\u4e8c\u7ea7\u76ee\u5f55*\/\n.topbar .shortcut-links > ul > li:nth-child(2):hover .el-cascader-panel{\n display: block;\n background-color: #f8f8f8;\n border-radius: 8px 0 8px 8px;\n}<\/code><\/pre>\n\u626b\u4e8c\u7ef4\u7801\u767b\u5f55\u548c\u5bc6\u7801\u767b\u5f55\u9875\u9762\u7684\u5207\u6362<\/h3>\n@click="handleChangeToLogin()"<\/code><\/pre>\n handleChangeToLogin () {\n const qr = document.getElementById('qr_code')\n const login = document.getElementById('login')\n qr.style.display = 'none';\n if (qr.style.display === 'none') {\n login.style.display = 'block'\n }\n },\n handleChangeToQr () {\n const qr = document.getElementById('qr_code')\n const login = document.getElementById('login')\n login.style.display = 'none'\n if (login.style.display === 'none') {\n qr.style.display = 'block'\n }\n }<\/code><\/pre>\n\u767b\u5f55\u6846\u7684\u6ed1\u5757\u9a8c\u8bc1<\/h3>\n<\/p>\n<\/p><\/noscript>\n<\/slider><\/p>\n<template>\n <div ref="dragDiv" class="drag">\n <div class="drag_bg"><\/div>\n <div class="drag_text">{{ confirmWords }}<\/div>\n <div ref="moveDiv" :class="{'handler_ok_bg':confirmSuccess}" class="handler handler_bg"\n style="position: absolute;top: 0;left: 0;" @mousedown="mouseDownFn($event)"><\/div>\n <\/div>\n<\/template>\n\n<script>\nexport default {\n data () {\n return {\n beginClientX: 0, \/*\u8ddd\u79bb\u5c4f\u5e55\u5de6\u7aef\u8ddd\u79bb*\/\n mouseMoveState: false, \/*\u89e6\u53d1\u62d6\u52a8\u72b6\u6001 \u5224\u65ad*\/\n maxWidth: '', \/*\u62d6\u52a8\u6700\u5927\u5bbd\u5ea6\uff0c\u4f9d\u636e\u6ed1\u5757\u5bbd\u5ea6\u7b97\u51fa\u6765\u7684*\/\n confirmWords: '\u8bf7\u6309\u4f4f\u6ed1\u5757,\u62d6\u52a8\u5230\u6700\u53f3\u8fb9', \/*\u6ed1\u5757\u6587\u5b57*\/\n confirmSuccess: false \/*\u9a8c\u8bc1\u6210\u529f\u5224\u65ad*\/\n }\n },\n methods: {\n \/\/mousedown \u4e8b\u4ef6\n mouseDownFn: function (e) {\n if (!this.confirmSuccess) {\n e.preventDefault && e.preventDefault() \/\/\u963b\u6b62\u6587\u5b57\u9009\u4e2d\u7b49 \u6d4f\u89c8\u5668\u9ed8\u8ba4\u4e8b\u4ef6\n this.mouseMoveState = true\n this.beginClientX = e.clientX\n }\n },\n \/\/\u9a8c\u8bc1\u6210\u529f\u51fd\u6570\n successFunction () {\n this.confirmSuccess = true\n this.confirmWords = '\u9a8c\u8bc1\u901a\u8fc7'\n if (window.addEventListener) {\n document.getElementsByTagName('html')[0].removeEventListener('mousemove', this.mouseMoveFn)\n document.getElementsByTagName('html')[0].removeEventListener('mouseup', this.moseUpFn)\n } else {\n document.getElementsByTagName('html')[0].removeEventListener('mouseup', () => {\n })\n }\n document.getElementsByClassName('drag_text')[0].style.color = '#fff'\n document.getElementsByClassName('handler')[0].style.left = this.maxWidth + 'px'\n document.getElementsByClassName('drag_bg')[0].style.width = this.maxWidth + 'px'\n },\n \/\/mousemove \u4e8b\u4ef6\n mouseMoveFn (e) {\n if (this.mouseMoveState) {\n let width = e.clientX - this.beginClientX\n if (width > 0 && width <= this.maxWidth) {\n document.getElementsByClassName('handler')[0].style.left = width + 'px'\n document.getElementsByClassName('drag_bg')[0].style.width = width + 'px'\n } else if (width > this.maxWidth) {\n this.successFunction()\n }\n }\n },\n \/\/mouseup \u4e8b\u4ef6\n moseUpFn (e) {\n this.mouseMoveState = false\n var width = e.clientX - this.beginClientX\n if (width < this.maxWidth) {\n document.getElementsByClassName('handler')[0].style.left = 0 + 'px'\n document.getElementsByClassName('drag_bg')[0].style.width = 0 + 'px'\n }\n }\n },\n mounted () {\n this.maxWidth = this.$refs.dragDiv.clientWidth - this.$refs.moveDiv.clientWidth\n document.getElementsByTagName('html')[0].addEventListener('mousemove', this.mouseMoveFn)\n document.getElementsByTagName('html')[0].addEventListener('mouseup', this.moseUpFn)\n }\n}\n<\/script>\n<style scoped>\n.drag {\n position: relative;\n background-color: #e8e8e8;\n width: 100%;\n height: 32px;\n line-height: 32px;\n text-align: center;\n border: 1px solid #ccc;\n\n}\n\n.handler {\n width: 40px;\n height: 32px;\n border: 1px solid #ccc;\n cursor: move;\n margin-top: -1px;\n margin-left: -1px;\n}\n\n.handler_bg {\n background: #fff url('..\/assets\/images\/arrow-r.png') no-repeat center;\n background-size: 25px;\n}\n\n.handler_ok_bg {\n background: #fff url('..\/assets\/images\/\u221a.png') no-repeat center;\n background-size: 18px;\n}\n\n.drag_bg {\n background-color: #7ac23c;\n height: 32px;\n width: 0;\n}\n\n.drag_text {\n position: absolute;\n top: 0;\n width: 100%;\n font-size: 12px;\n color: #706f6f;\n}\n\n<\/style>\n<\/code><\/pre>\nel-input \u805a\u7126\u540e\u80cc\u666f\u53d8\u767d<\/h3>\n<\/p>\n<\/p><\/noscript>\n.el-input__wrapper.is-focus {\n box-shadow: 0 0 0 1px #dcdfe6 inset;\n background-color: #fff;\n}<\/code><\/pre>\nel-input placeholder \u989c\u8272\u8bbe\u7f6e<\/h3>\n.el-input__inner::placeholder{\n color: #666666;\n}<\/code><\/pre>\n\u5224\u65ad el-checked \u662f\u5426\u9009\u4e2d,\u672a\u9009\u4e2d\u5219\u63d0\u793a\u8bf7\u52fe\u9009<\/h3>\n<\/p>\n<\/p><\/noscript>\nexport default {\nmounted() {\n const pleaseFit=document.getElementById('pleaseFit');\n $(".el-checkbox input").change(() => {\n if ($(".el-checkbox input[type='checkbox']").is(':checked') == true) {\n pleaseFit.style.display='none'\n } else {\n pleaseFit.style.display='block'\n }\n })\n }\n }<\/code><\/pre>\nel-input \u5728 style \u5168\u5c40\u6837\u5f0f,\u4f1a\u5f71\u54cd\u5230\u5176\u4ed6\u4e0d\u7b26\u5408\u8be5\u6837\u5f0f\u7684\u4f4d\u7f6e<\/h3>\n\n\u53ef\u4ee5\u5728 style scoped> \u5199,\u52a0\u4e0a\/deep\/<\/li>\n<\/ul>\n<\/p>\n<\/p><\/noscript>\n\/deep\/ .el-input__wrapper {\n box-shadow: 0 0 0 0 inset;\n background-color: rgb(255, 242, 0);\n}<\/code><\/pre>\nel-carousel \u8d70\u9a6c\u706f\u4fee\u6539 Carousel \u5de6\u53f3\u4e24\u4fa7\u7bad\u5934\u5b57\u4f53\u5927\u5c0f<\/h3>\n\/deep\/.el-carousel__arrow i {\n font-size: 29px !important;\n }<\/code><\/pre>\n\u9875\u9762\u5411\u4e0b\u6ed1\u52a8\u5bfc\u822a\u680f\u56fa\u5b9a<\/h3>\n<\/p>\n<\/p><\/noscript>\n.main_nav_fixed {\n position: sticky;\n top: 0;\n z-index: 999;\n}<\/code><\/pre>\n\u56fa\u5b9a\u5728\u53f3\u65b9\u7684,\u60ac\u6302\u51fa\u73b0\u4e8c\u7ef4\u7801<\/h3>\n<\/p>\n<\/p><\/noscript>\n<div class="share_box">\n <img src="..\/..\/assets\/images\/share_qr.png" alt=""\/>\n <\/div><\/code><\/pre>\n.share_box{\n width: 70px;\n height: 131px;\n top: 300px;\n right: 10px;\n cursor: pointer;\n position: fixed;\n z-index: 999;\n background: url("..\/..\/assets\/images\/share_wx.jpg") no-repeat;\n background-size: 100% 100%;\n}\n.share_box img{\n width: 100px;\n height: 100px;\n display: none;\n}\n.share_box:hover img {\n position: absolute;\n top: 50%;\n margin-top: -50px;\n right: 82px;\n display: block !important;\n}<\/code><\/pre>\nnth-child(n)\u6307\u7684\u662f\u5728\u7236\u5143\u7d20\u4e2d\u6240\u6709\u7684\u5143\u7d20\u7684\u987a\u5e8f<\/h3>\n\n\u5199\u4ee3\u7801\u8981\u6839\u636e\u76d2\u5b50\u4ee5\u53ca\u5185\u5bb9\u5199<\/li>\nbottom\uff1a0\uff1b\u8981\u76f8\u5bf9\u4e8e\u7236\u5143\u7d20\u7684 height \u5b9e\u73b0\uff0c\u5982\u679c\u7236\u7236\u5143\u7d20\u7684 height \u5927\u4e8e\u7236\u5143\u7d20\u7684 height\uff0c\uff0c\u5219\u4f1a\u6309\u7167\u7236\u7236\u5143\u7d20\u7684 height \u6765\u5b9e\u73b0 bottom\uff1a0\uff1b\u6765\u5b9e\u73b0\u3002\u3010\u9002\u5f53\u5220\u9664\u7236\u7236\u5143\u7d20\u7684 height\uff0c\u4e00\u677f\u5757\u901a\u5e38\u4e0d\u7528\u8bbe\u7f6e\u603b height\u3011<\/li>\n<\/ul>\n\u60ac\u6302\u56fe\u7247\u7f13\u7f13\u653e\u5927\u7684\u52a8\u753b\u6548\u679c<\/h3>\n<\/p>\n<\/p><\/noscript>\n.gc_project .item_img > img {\n width: 100%;\n height: 100%;\n transition: all 0.3s;\n}\n.gc_project .item_img > img:hover {\n transform: scale(1.05);\n box-shadow: rgb(0 0 0 \/ 23%) 0 4px 14px 0;\n}<\/code><\/pre>\n\u6eda\u52a8\u6761\u4fee\u6539<\/h3>\n<\/p>\n<\/p><\/noscript>\n.mleft::-webkit-scrollbar{\n width: 6px;\n background-color: #f8f8f8;\n\n}\n.mleft::-webkit-scrollbar-thumb{\n width: 6px;\n background-color: #adacac;\n border-radius: 4px;\n}<\/code><\/pre>\nhead \u533a '\u53d1\u73b0' \u5b9e\u73b0\u4ea4\u4e92\u6548\u679c [\u8be5\u9996\u9875\u6700\u607c\u706b\u7684]<\/h2>\n<\/p>\n<\/p><\/noscript>\ntodo head \u533a'\u53d1\u73b0'\u4ea4\u4e92\u5b9e\u73b0\u601d\u8def:<\/h3>\n\n\u2460\u89c2\u5bdf\u8be5\u533a\u7ed3\u6784,\u4e00\u4e2a\u5927\u6a21\u5757,\u5176\u4e2d\u5206\u4e3a\u5de6\u4e2d\u53f3\u4e09\u4e2a\u6a21\u5757,\u5e76\u4f9d\u6b21\u5199\u51fa\u4e09\u4e2a\u6a21\u5757\u7684\u4ee3\u7801,<\/li>\n\u2461\u5de6\u4fa7\u533a\u57df: \u8981\u5c55\u793a\u7684\u6548\u679c\u6709: \u9f20\u6807\u4e0a\u4e0b\u79fb\u52a8,\u6240\u7ecf\u7684 menuItem \u4f1a\u5c55\u73b0\u9ec4\u8272\u80cc\u666f, \u5219\u5f15\u7528 vue \u7684 ref \u5c5e\u6027\u5bf9 DOM \u5143\u7d20\u8fdb\u884c\u52a8\u6001\u7ed1\u5b9a.\n\n\u6ce8\u610f:ref \u9700\u8981\u5728 dom \u6e32\u67d3\u5b8c\u6210\u540e\u624d\u4f1a\u6709,\u5728\u4f7f\u7528\u7684\u65f6\u5019\u786e\u4fdd dom \u5df2\u7ecf\u6e32\u67d3\u5b8c\u6210, \u6bd4\u5982\u5728\u751f\u547d\u5468\u671f mounted(){}\u94a9\u5b50\u4e2d\u8c03\u7528. this.$refs.xxx:\u51cf\u5c11\u83b7\u53d6 dom \u8282\u70b9\u7684\u6d88\u8017<\/li>\n<\/ul>\n<\/li>\n\u2462\u5de6\u4fa7\u533a\u57df\u8fc7\u6ee4\u5230\u53f3\u4fa7\u533a\u57df,\u5c55\u793a\u5bf9\u5e94\u7684\u8be6\u60c5\u9875: mleftIn(item,index)\u51fd\u6570\u901a\u8fc7\u4f20\u8f93 v-for \u5faa\u73af\u4e2d\u6570\u7ec4 menuList \u7684 item \u6bcf\u4e00\u9879\u4e3a\u5a92\u4ecb, \u800c\u6570\u636e\u4e2d menuList \u4e2d\u5305\u542b\u5de6\u4fa7\u6570\u636e menuItem \u4e0e\u53f3\u4fa7\u6bcf\u4e00\u9875\u7684\u6807\u9898 menu \u76f8\u540c, \u4ece\u800c\u5c06\u5de6\u4fa7\u548c\u53f3\u4fa7\u6570\u636e\u7ed1\u5b9a, \u6545\u800c\u5f62\u6210\u4ece\u5de6\u4fa7\u8fc7\u6ee4\u5230\u53f3\u4fa7\u533a\u57df\u662f\u56fa\u5b9a\u7684\u8be6\u60c5\u9875\u5185\u5bb9.<\/li>\n\u2463\u9875\u9762\u7b2c\u4e8c\u6b21\u672a\u5237\u65b0\u4e4b\u524d(\u9996\u6b21\u8fdb\u5165\u9875\u9762\u6e32\u67d3), \u9f20\u6807\u60ac\u6302'\u53d1\u73b0',\u8981\u51fa\u73b0\u7b2c\u4e00\u4e2a'\u7cbe\u9009'\u8be6\u60c5\u9875\u53ca'\u7cbe\u9009'item \u80cc\u666f\u53d8\u9ec4: \u9f20\u6807\u79fb\u51fa\u8be5\u5143\u7d20[\u4e8c\u7ea7\u76ee\u5f55\u6574\u4e2a\u5927\u6a21\u5757]\u4e4b\u5916,\u5219\u89e6\u53d1 mouseleave \u4e8b\u4ef6,\u521d\u59cb\u5316\u6570\u636e.<\/li>\n\u2464\u7b2c\u4e8c\u6b21\u9875\u9762\u5237\u65b0\u4e4b\u540e,\u521d\u59cb\u5316\u6570\u636e: \u91c7\u7528 mounted \u751f\u547d\u5468\u671f[\u6e32\u67d3\u6210 html \u540e\u8c03\u7528]: \u4f7f\u9f20\u6807\u60ac\u6302'\u53d1\u73b0',\u7b2c\u4e00\u4e2a menu-item \u663e\u793a\u9ec4\u8272<\/li>\n<\/ul>\n <li class="find">\n <a href="#">\u53d1\u73b0<\/a>\n <div class="h_menu" @mouseleave="mleftLeave()">\n <div class="menu_box mleft">\n <!-- <a href="">\u7cbe\u9009<\/a>-->\n <a v-for="(item,index) in menuList" :key="index" :ref="'test'+index" href="javascript:;"\n @mouseover="mleftIn(item,index)">{{ item.menu }}<\/a>\n <!-- <el-cascader-panel :options="findOptions" :props="props" \/>-->\n <\/div>\n <div class="mright">\n <div class="cate-box">\n <a class="cate-title" href="">\n <img :src="data.url" alt="">\n <span>{{ data.menu }}<\/span>\n <\/a>\n <div class="subCate">\n <a v-for="(itemOne) in data.items" :key="itemOne">{{ itemOne.text }}<\/a>\n <\/div>\n <\/div>\n <\/div>\n <div class="right_bar">\n <div class="icons">\n <a>\n <span class="icon-box">\n <span class="tangle-1"><\/span>\n <span class="tangle-2"><\/span>\n <i class="ani-star"><\/i>\n <span class="tangle-3"><\/span>\n <\/span>\n <span class="icon-text">\u6536\u85cf\u5939<\/span>\n <\/a>\n <a>\n <img alt="" src="..\/assets\/images\/icon-header-discover-designer.png">\n <span>\u8bbe\u8ba1\u5e08<\/span>\n <\/a>\n <a>\n <img alt="" src="..\/assets\/images\/icon-header-discover-focus.png">\n <span>\u699c\u5355<\/span>\n <!-- <sup class="subNavDot"><\/sup>-->\n <\/a>\n <\/div>\n <div class="ad_box">\n\n <\/div>\n <\/div>\n <\/div>\n <\/li><\/code><\/pre>\n data: {},\n menuList: [\n {\n menu: '\u7cbe\u9009',\n url: require('..\/assets\/images\/zuanshi.png'),\n items: [\n { text: '\u8fd0\u8425\u8bbe\u8ba1' },\n { text: '\u5305\u88c5' },\n { text: '\u52a8\u753b\/\u5f71\u89c6' },\n { text: '\u4eba\u50cf\u6444\u5f71' },\n { text: '\u5546\u4e1a\u63d2\u753b' },\n { text: '\u7535\u5546' },\n { text: 'APP \u754c\u9762' },\n { text: '\u827a\u672f\u63d2\u753b' },\n { text: '\u5bb6\u88c5\u8bbe\u8ba1' },\n { text: '\u6d77\u62a5' },\n { text: '\u6587\u7ae0' }\n ]\n },\n { menu: '\u5e73\u9762' },\n { menu: 'UI' },\n { menu: '\u7f51\u9875' },\n { menu: '\u63d2\u753b' },\n { menu: '\u52a8\u6f2b' },\n { menu: '\u6444\u5f71' },\n { menu: '\u7a7a\u95f4' },\n { menu: '\u5de5\u4e1a\/\u4ea7\u54c1' },\n { menu: '\u4e09\u7ef4' },\n { menu: '\u5f71\u89c6' },\n { menu: '\u624b\u5de5\u827a' },\n { menu: '\u7eaf\u827a\u672f' },\n { menu: '\u670d\u88c5' },\n { menu: '\u5176\u4ed6' }\n ],<\/code><\/pre>\n \/\/\u6e32\u67d3\u6210 html \u4e4b\u524d\u8c03\u7528,\u521d\u59cb\u5316\u4e00\u4e9b\u5c5e\u6027\u503c [\u9f20\u6807\u60ac\u6302'\u53d1\u73b0',\u5c31\u51fa\u73b0\u7b2c\u4e00\u4e2a\u7cbe\u9009\u9875\u9762]\n created () {\n this.data = this.menuList[0]\n },\n \/\/\u6e32\u67d3\u6210 html \u540e\u8c03\u7528 [\u9f20\u6807\u60ac\u6302'\u53d1\u73b0',\u7b2c\u4e00\u4e2a menu-item \u663e\u793a\u9ec4\u8272](\u9875\u9762\u5237\u65b0\u4e86\u4e4b\u540e\u7684)\n mounted () {\n this.$refs['test' + 0][0].style.backgroundColor = 'rgb(255, 242, 0)'\n },\n methods: {\n \/\/\u9f20\u6807\u8fdb\u5165\u51fd\u6570\n mleftIn (item, index) {\n \/\/\u83b7\u53d6 menuList \u4e2d\u6bcf\u4e2a menuItem \u5b57\u7b26\u4e32\u7684\u957f\u5ea6\n let menuSize = this.menuList.length\n for (let i = 0; i < menuSize; i++) {\n \/\/for \u5faa\u73af,i \u5982\u679c\u5c0f\u4e8e menuSize,\u5219\u7f6e\u4e8e menuItem \u989c\u8272\u4e3a\u7070\u8272,\u5b9e\u73b0\u5207\u6362\u6548\u679c\n this.$refs['test' + i][0].style.backgroundColor = '#f8f8f8'\n }\n \/\/\u8df3\u51fa for \u5faa\u73af,\u7531\u5de6\u4fa7\u79fb\u5411\u53f3\u4fa7\u8be6\u60c5\u9875\u65f6,\u5176 menuItem \u7684\u989c\u8272\u4e3a\u9ec4\u8272\n this.$refs['test' + index][0].style.backgroundColor = 'rgb(255, 242, 0)'\n \/\/\u5c06\u53f3\u4fa7\u6570\u636e\u8bbe\u7f6e\u4e3a item,\u663e\u793a\u6570\u636e\n this.data = item\n },\n \/\/\u9f20\u6807\u8fdb\u5165\u51fd\u6570\n \/\/\u6ce8\u610f: mouseleave:\u662f\u9f20\u6807\u79fb\u51fa\u8be5\u5143\u7d20\u4e4b\u5916,\u5219\u89e6\u53d1 mouseleave \u4e8b\u4ef6\n \/\/ mouseout : \u662f\u5f53\u6307\u9488\u79bb\u5f00\u8be5\u5143\u7d20\u53ca\u5176\u6240\u6709\u540e\u4ee3\u65f6\uff0c\u4f1a\u89e6\u53d1 mouseleave\n \/\/ \u800c\u5f53\u6307\u9488\u79bb\u5f00\u5143\u7d20\u6216\u79bb\u5f00\u5143\u7d20\u7684\u540e\u4ee3\uff08\u5373\u4f7f\u6307\u9488\u4ecd\u5728\u5143\u7d20\u5185\uff09\u65f6\uff0c\u4e5f\u4f1a\u89e6\u53d1 mouseout \u4e8b\u4ef6\n mleftLeave () {\n \/\/\u83b7\u53d6 menuList \u4e2d\u6bcf\u4e2a menuItem \u5b57\u7b26\u4e32\u7684\u957f\u5ea6\n let menuSize = this.menuList.length\n for (let i = 0; i < menuSize; i++) {\n this.$refs['test' + i][0].style.backgroundColor = '#f8f8f8'\n }\n \/\/ \u8df3\u51fa\u5faa\u73af,\u6d4f\u89c8\u5b8c'\u53d1\u73b0',\u9f20\u6807\u79fb\u51fa,\u7f6e\u4e8e\u53f3\u4fa7\u6570\u636e\u4e3a\u7b2c\u4e00\u4e2a\u7cbe\u9009\u6570\u636e\n this.data = this.menuList[0]\n \/\/\u9f20\u6807\u79fb\u51fa\u4e8b\u4ef6,\u7f6e\u4e8e\u7b2c\u4e00\u4e2a menuitem \u4e3a\u9ec4\u8272[\u672a\u5237\u65b0\u65f6\u7684\u8bbe\u7f6e]\n this.$refs['test' + 0][0].style.backgroundColor = 'rgb(255, 242, 0)'\n\n \/\/ this.data = {}\n \/\/ this.$refs['test'+index][0].style.backgroundColor = '#f8f8f8'\n \/\/ console.log('\u6eda\u51fa\u53bb')\n },\n}<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"\u4e0b\u8f7d\u4f9d\u8d56\u901f\u5ea6\u5feb npm install –registry=https:\/\/registry.npm.tao […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[],"class_list":["post-3462","post","type-post","status-publish","format-standard","hentry","category-web"],"_links":{"self":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/3462","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3462"}],"version-history":[{"count":38,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/3462\/revisions"}],"predecessor-version":[{"id":3558,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/3462\/revisions\/3558"}],"wp:attachment":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3462"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=3462"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=3462"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
<\/p>\n<\/p><\/noscript>\n\u8bbe\u7f6e 5 \u500d\u6570\u7684\u5143\u7d20\u7684\u6837\u5f0f<\/h3>\n.main_content ul li:nth-child(5n) {\n margin-right: 0;\n}<\/code><\/pre>\nel-cascader-panel \u7ea7\u8054\u9009\u62e9\u5668\u6837\u5f0f\u66f4\u6539<\/h3>\n<\/p>\n<\/p><\/noscript>\n <div class="h_menu">\n <div class="menu_box">\n <el-cascader-panel :options="findOptions" :props="props"\/>\n <\/div>\n<\/div><\/code><\/pre>\n\/*\u4e8c\u7ea7\u76ee\u5f55*\/\n.topbar .shortcut-links {\n width: 600px;\n margin: 0 auto;\n}\n\n.topbar .shortcut-links > ul > li {\n float: left;\n padding: 13px 20px;\n line-height: 31px;\n font-size: 14px;\n position: relative;\n}\n\n.topbar .shortcut-links > ul > li:hover .h_menu {\n display: block;\n}\n.topbar .shortcut-links > ul > li .h_menu {\n position: absolute;\n left: 0;\n display: none;\n width: 152px;\n margin-top: 13px;\n z-index: 9999;\n}\n.topbar .shortcut-links > ul > li .h_menu .menu_box {\n background: #ffffff;\n width: 152px;\n box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);\n padding: 8px 0 8px 0;\n \/*float: left;*\/\n}\n\n.topbar .shortcut-links > ul > li .h_menu .menu_box >a {\n height: 45px;\n line-height: 45px;\n font-size: 14px;\n padding-left: 20px;\n \/*padding-top: 5px;*\/\n display: block;\n}\n<\/code><\/pre>\nstyle\n\/*\u53d6\u6d88\u8fb9\u6846*\/\n.el-cascader-panel.is-bordered {\n border: none;\n border-radius: 0;\n}\n\n.el-cascader-menu {\n color: #1c1f21;\n font-size: 14px;\n min-width: 152px;\n}\n\n.el-cascader-menu__list {\n padding: 0;\n}\n\n.el-cascader-node.in-active-path, .el-cascader-node.is-active, .el-cascader-node.is-selectable.in-checked-path {\n color: #1c1f21;\n font-weight: normal;\n}\n\/*item \u60ac\u6302\u9ec4\u8272\u80cc\u666f\u5bbd\u95f4\u8ddd*\/\n.el-cascader-node {\n padding-left: 20px;\n height: 45px;\n line-height: 45px;\n}\n\/*\u4e8c\u7ea7\u76ee\u5f55\u7684\u9ad8\u5ea6*\/\n.el-cascader-menu__wrap.el-scrollbar__wrap {\n height: 478px;\n}\n\n.el-cascader-menu:last-child .el-cascader-node {\n padding-right: 0;\n}\n\/*item \u60ac\u6302\u9ec4\u8272\u80cc\u666f*\/\n.el-cascader-node:not(.is-disabled):focus, .el-cascader-node:not(.is-disabled):hover {\n background-color: rgb(255, 242, 0);\n}\n\/*item \u53f3\u8fb9\u7684\u5c0f\u7bad\u5934\u989c\u8272\u6539\u4e3a\u9ec4\u8272[\u9690\u85cf]*\/\n.el-cascader-node:not(.is-disabled):focus, .el-cascader-node:not(.is-disabled):hover .el-icon {\n color: rgb(255, 242, 0);\n}\n\n.el-cascader-node__label {\n padding: 0;\n}\n\n.el-cascader-node__postfix {\n position: absolute;\n right: 0;\n}\n\/*\u6eda\u52a8\u6761\u5230\u9876\u90e8,\u4e0b\u90e8\u7684\u95f4\u8ddd*\/\n.el-scrollbar__bar {\n position: absolute;\n right: 0;\n bottom: 0;\n z-index: 1;\n border-radius: 4px;\n}<\/code><\/pre>\n<\/p>\n<\/p><\/noscript>\n <el-cascader-panel :options="findOptions" :props="props"\/><\/code><\/pre>\n\/*\u4e8c\u7ea7\u76ee\u5f55\u7684\u9ad8\u5ea6*\/\n\/deep\/.el-cascader-menu__wrap.el-scrollbar__wrap {\n height: 490px;\n}\n\/*item \u60ac\u6302\u9ec4\u8272\u80cc\u666f\u5bbd\u95f4\u8ddd*\/\n\/deep\/.el-cascader-node {\nheight: 45px;\n width: 165px;\n padding: 0;\n margin-left: 10px;\n}\n\/*item \u60ac\u6302\u9ec4\u8272\u80cc\u666f*\/\n\/deep\/ .el-cascader-node:not(.is-disabled):hover {\n background: #fff200;\n border-radius: 8px;\n}\n\/*\u70b9\u51fb\u540e\u6539\u53d8\u989c\u8272,\u7c97\u7ec6\u53d6\u6d88\u70b9\u51fb\u6548\u679c*\/\n\/deep\/.el-cascader-node.is-active{\ncolor: #222222;\n font-weight: normal;\n}\n\/*item \u5de6\u8fb9\u6709\u4e2a\u5c0f\u52fe\u221a*\/\n\/deep\/.el-icon svg {\n height: 0;\n width: 0;\n}\n\/*\u53d1\u73b0\u7684\u4e8c\u7ea7\u76ee\u5f55\u6d88\u5931*\/\n.el-cascader-panel{\n display: none;\n}\n\/*\u53d6\u6d88\u8fb9\u6846*\/\n.el-cascader-panel.is-bordered {\n border: none;\n}\n\/*\u60ac\u6302'\u53d1\u73b0'\u76ee\u5f55,\u51fa\u73b0\u4e8c\u7ea7\u76ee\u5f55*\/\n.topbar .shortcut-links > ul > li:nth-child(2):hover .el-cascader-panel{\n display: block;\n background-color: #f8f8f8;\n border-radius: 8px 0 8px 8px;\n}<\/code><\/pre>\n\u626b\u4e8c\u7ef4\u7801\u767b\u5f55\u548c\u5bc6\u7801\u767b\u5f55\u9875\u9762\u7684\u5207\u6362<\/h3>\n@click="handleChangeToLogin()"<\/code><\/pre>\n handleChangeToLogin () {\n const qr = document.getElementById('qr_code')\n const login = document.getElementById('login')\n qr.style.display = 'none';\n if (qr.style.display === 'none') {\n login.style.display = 'block'\n }\n },\n handleChangeToQr () {\n const qr = document.getElementById('qr_code')\n const login = document.getElementById('login')\n login.style.display = 'none'\n if (login.style.display === 'none') {\n qr.style.display = 'block'\n }\n }<\/code><\/pre>\n\u767b\u5f55\u6846\u7684\u6ed1\u5757\u9a8c\u8bc1<\/h3>\n<\/p>\n<\/p><\/noscript>\n<\/slider><\/p>\n<template>\n <div ref="dragDiv" class="drag">\n <div class="drag_bg"><\/div>\n <div class="drag_text">{{ confirmWords }}<\/div>\n <div ref="moveDiv" :class="{'handler_ok_bg':confirmSuccess}" class="handler handler_bg"\n style="position: absolute;top: 0;left: 0;" @mousedown="mouseDownFn($event)"><\/div>\n <\/div>\n<\/template>\n\n<script>\nexport default {\n data () {\n return {\n beginClientX: 0, \/*\u8ddd\u79bb\u5c4f\u5e55\u5de6\u7aef\u8ddd\u79bb*\/\n mouseMoveState: false, \/*\u89e6\u53d1\u62d6\u52a8\u72b6\u6001 \u5224\u65ad*\/\n maxWidth: '', \/*\u62d6\u52a8\u6700\u5927\u5bbd\u5ea6\uff0c\u4f9d\u636e\u6ed1\u5757\u5bbd\u5ea6\u7b97\u51fa\u6765\u7684*\/\n confirmWords: '\u8bf7\u6309\u4f4f\u6ed1\u5757,\u62d6\u52a8\u5230\u6700\u53f3\u8fb9', \/*\u6ed1\u5757\u6587\u5b57*\/\n confirmSuccess: false \/*\u9a8c\u8bc1\u6210\u529f\u5224\u65ad*\/\n }\n },\n methods: {\n \/\/mousedown \u4e8b\u4ef6\n mouseDownFn: function (e) {\n if (!this.confirmSuccess) {\n e.preventDefault && e.preventDefault() \/\/\u963b\u6b62\u6587\u5b57\u9009\u4e2d\u7b49 \u6d4f\u89c8\u5668\u9ed8\u8ba4\u4e8b\u4ef6\n this.mouseMoveState = true\n this.beginClientX = e.clientX\n }\n },\n \/\/\u9a8c\u8bc1\u6210\u529f\u51fd\u6570\n successFunction () {\n this.confirmSuccess = true\n this.confirmWords = '\u9a8c\u8bc1\u901a\u8fc7'\n if (window.addEventListener) {\n document.getElementsByTagName('html')[0].removeEventListener('mousemove', this.mouseMoveFn)\n document.getElementsByTagName('html')[0].removeEventListener('mouseup', this.moseUpFn)\n } else {\n document.getElementsByTagName('html')[0].removeEventListener('mouseup', () => {\n })\n }\n document.getElementsByClassName('drag_text')[0].style.color = '#fff'\n document.getElementsByClassName('handler')[0].style.left = this.maxWidth + 'px'\n document.getElementsByClassName('drag_bg')[0].style.width = this.maxWidth + 'px'\n },\n \/\/mousemove \u4e8b\u4ef6\n mouseMoveFn (e) {\n if (this.mouseMoveState) {\n let width = e.clientX - this.beginClientX\n if (width > 0 && width <= this.maxWidth) {\n document.getElementsByClassName('handler')[0].style.left = width + 'px'\n document.getElementsByClassName('drag_bg')[0].style.width = width + 'px'\n } else if (width > this.maxWidth) {\n this.successFunction()\n }\n }\n },\n \/\/mouseup \u4e8b\u4ef6\n moseUpFn (e) {\n this.mouseMoveState = false\n var width = e.clientX - this.beginClientX\n if (width < this.maxWidth) {\n document.getElementsByClassName('handler')[0].style.left = 0 + 'px'\n document.getElementsByClassName('drag_bg')[0].style.width = 0 + 'px'\n }\n }\n },\n mounted () {\n this.maxWidth = this.$refs.dragDiv.clientWidth - this.$refs.moveDiv.clientWidth\n document.getElementsByTagName('html')[0].addEventListener('mousemove', this.mouseMoveFn)\n document.getElementsByTagName('html')[0].addEventListener('mouseup', this.moseUpFn)\n }\n}\n<\/script>\n<style scoped>\n.drag {\n position: relative;\n background-color: #e8e8e8;\n width: 100%;\n height: 32px;\n line-height: 32px;\n text-align: center;\n border: 1px solid #ccc;\n\n}\n\n.handler {\n width: 40px;\n height: 32px;\n border: 1px solid #ccc;\n cursor: move;\n margin-top: -1px;\n margin-left: -1px;\n}\n\n.handler_bg {\n background: #fff url('..\/assets\/images\/arrow-r.png') no-repeat center;\n background-size: 25px;\n}\n\n.handler_ok_bg {\n background: #fff url('..\/assets\/images\/\u221a.png') no-repeat center;\n background-size: 18px;\n}\n\n.drag_bg {\n background-color: #7ac23c;\n height: 32px;\n width: 0;\n}\n\n.drag_text {\n position: absolute;\n top: 0;\n width: 100%;\n font-size: 12px;\n color: #706f6f;\n}\n\n<\/style>\n<\/code><\/pre>\nel-input \u805a\u7126\u540e\u80cc\u666f\u53d8\u767d<\/h3>\n<\/p>\n<\/p><\/noscript>\n.el-input__wrapper.is-focus {\n box-shadow: 0 0 0 1px #dcdfe6 inset;\n background-color: #fff;\n}<\/code><\/pre>\nel-input placeholder \u989c\u8272\u8bbe\u7f6e<\/h3>\n.el-input__inner::placeholder{\n color: #666666;\n}<\/code><\/pre>\n\u5224\u65ad el-checked \u662f\u5426\u9009\u4e2d,\u672a\u9009\u4e2d\u5219\u63d0\u793a\u8bf7\u52fe\u9009<\/h3>\n<\/p>\n<\/p><\/noscript>\nexport default {\nmounted() {\n const pleaseFit=document.getElementById('pleaseFit');\n $(".el-checkbox input").change(() => {\n if ($(".el-checkbox input[type='checkbox']").is(':checked') == true) {\n pleaseFit.style.display='none'\n } else {\n pleaseFit.style.display='block'\n }\n })\n }\n }<\/code><\/pre>\nel-input \u5728 style \u5168\u5c40\u6837\u5f0f,\u4f1a\u5f71\u54cd\u5230\u5176\u4ed6\u4e0d\u7b26\u5408\u8be5\u6837\u5f0f\u7684\u4f4d\u7f6e<\/h3>\n\n\u53ef\u4ee5\u5728 style scoped> \u5199,\u52a0\u4e0a\/deep\/<\/li>\n<\/ul>\n<\/p>\n<\/p><\/noscript>\n\/deep\/ .el-input__wrapper {\n box-shadow: 0 0 0 0 inset;\n background-color: rgb(255, 242, 0);\n}<\/code><\/pre>\nel-carousel \u8d70\u9a6c\u706f\u4fee\u6539 Carousel \u5de6\u53f3\u4e24\u4fa7\u7bad\u5934\u5b57\u4f53\u5927\u5c0f<\/h3>\n\/deep\/.el-carousel__arrow i {\n font-size: 29px !important;\n }<\/code><\/pre>\n\u9875\u9762\u5411\u4e0b\u6ed1\u52a8\u5bfc\u822a\u680f\u56fa\u5b9a<\/h3>\n<\/p>\n<\/p><\/noscript>\n.main_nav_fixed {\n position: sticky;\n top: 0;\n z-index: 999;\n}<\/code><\/pre>\n\u56fa\u5b9a\u5728\u53f3\u65b9\u7684,\u60ac\u6302\u51fa\u73b0\u4e8c\u7ef4\u7801<\/h3>\n<\/p>\n<\/p><\/noscript>\n<div class="share_box">\n <img src="..\/..\/assets\/images\/share_qr.png" alt=""\/>\n <\/div><\/code><\/pre>\n.share_box{\n width: 70px;\n height: 131px;\n top: 300px;\n right: 10px;\n cursor: pointer;\n position: fixed;\n z-index: 999;\n background: url("..\/..\/assets\/images\/share_wx.jpg") no-repeat;\n background-size: 100% 100%;\n}\n.share_box img{\n width: 100px;\n height: 100px;\n display: none;\n}\n.share_box:hover img {\n position: absolute;\n top: 50%;\n margin-top: -50px;\n right: 82px;\n display: block !important;\n}<\/code><\/pre>\nnth-child(n)\u6307\u7684\u662f\u5728\u7236\u5143\u7d20\u4e2d\u6240\u6709\u7684\u5143\u7d20\u7684\u987a\u5e8f<\/h3>\n\n\u5199\u4ee3\u7801\u8981\u6839\u636e\u76d2\u5b50\u4ee5\u53ca\u5185\u5bb9\u5199<\/li>\nbottom\uff1a0\uff1b\u8981\u76f8\u5bf9\u4e8e\u7236\u5143\u7d20\u7684 height \u5b9e\u73b0\uff0c\u5982\u679c\u7236\u7236\u5143\u7d20\u7684 height \u5927\u4e8e\u7236\u5143\u7d20\u7684 height\uff0c\uff0c\u5219\u4f1a\u6309\u7167\u7236\u7236\u5143\u7d20\u7684 height \u6765\u5b9e\u73b0 bottom\uff1a0\uff1b\u6765\u5b9e\u73b0\u3002\u3010\u9002\u5f53\u5220\u9664\u7236\u7236\u5143\u7d20\u7684 height\uff0c\u4e00\u677f\u5757\u901a\u5e38\u4e0d\u7528\u8bbe\u7f6e\u603b height\u3011<\/li>\n<\/ul>\n\u60ac\u6302\u56fe\u7247\u7f13\u7f13\u653e\u5927\u7684\u52a8\u753b\u6548\u679c<\/h3>\n<\/p>\n<\/p><\/noscript>\n.gc_project .item_img > img {\n width: 100%;\n height: 100%;\n transition: all 0.3s;\n}\n.gc_project .item_img > img:hover {\n transform: scale(1.05);\n box-shadow: rgb(0 0 0 \/ 23%) 0 4px 14px 0;\n}<\/code><\/pre>\n\u6eda\u52a8\u6761\u4fee\u6539<\/h3>\n<\/p>\n<\/p><\/noscript>\n.mleft::-webkit-scrollbar{\n width: 6px;\n background-color: #f8f8f8;\n\n}\n.mleft::-webkit-scrollbar-thumb{\n width: 6px;\n background-color: #adacac;\n border-radius: 4px;\n}<\/code><\/pre>\nhead \u533a '\u53d1\u73b0' \u5b9e\u73b0\u4ea4\u4e92\u6548\u679c [\u8be5\u9996\u9875\u6700\u607c\u706b\u7684]<\/h2>\n<\/p>\n<\/p><\/noscript>\ntodo head \u533a'\u53d1\u73b0'\u4ea4\u4e92\u5b9e\u73b0\u601d\u8def:<\/h3>\n\n\u2460\u89c2\u5bdf\u8be5\u533a\u7ed3\u6784,\u4e00\u4e2a\u5927\u6a21\u5757,\u5176\u4e2d\u5206\u4e3a\u5de6\u4e2d\u53f3\u4e09\u4e2a\u6a21\u5757,\u5e76\u4f9d\u6b21\u5199\u51fa\u4e09\u4e2a\u6a21\u5757\u7684\u4ee3\u7801,<\/li>\n\u2461\u5de6\u4fa7\u533a\u57df: \u8981\u5c55\u793a\u7684\u6548\u679c\u6709: \u9f20\u6807\u4e0a\u4e0b\u79fb\u52a8,\u6240\u7ecf\u7684 menuItem \u4f1a\u5c55\u73b0\u9ec4\u8272\u80cc\u666f, \u5219\u5f15\u7528 vue \u7684 ref \u5c5e\u6027\u5bf9 DOM \u5143\u7d20\u8fdb\u884c\u52a8\u6001\u7ed1\u5b9a.\n\n\u6ce8\u610f:ref \u9700\u8981\u5728 dom \u6e32\u67d3\u5b8c\u6210\u540e\u624d\u4f1a\u6709,\u5728\u4f7f\u7528\u7684\u65f6\u5019\u786e\u4fdd dom \u5df2\u7ecf\u6e32\u67d3\u5b8c\u6210, \u6bd4\u5982\u5728\u751f\u547d\u5468\u671f mounted(){}\u94a9\u5b50\u4e2d\u8c03\u7528. this.$refs.xxx:\u51cf\u5c11\u83b7\u53d6 dom \u8282\u70b9\u7684\u6d88\u8017<\/li>\n<\/ul>\n<\/li>\n\u2462\u5de6\u4fa7\u533a\u57df\u8fc7\u6ee4\u5230\u53f3\u4fa7\u533a\u57df,\u5c55\u793a\u5bf9\u5e94\u7684\u8be6\u60c5\u9875: mleftIn(item,index)\u51fd\u6570\u901a\u8fc7\u4f20\u8f93 v-for \u5faa\u73af\u4e2d\u6570\u7ec4 menuList \u7684 item \u6bcf\u4e00\u9879\u4e3a\u5a92\u4ecb, \u800c\u6570\u636e\u4e2d menuList \u4e2d\u5305\u542b\u5de6\u4fa7\u6570\u636e menuItem \u4e0e\u53f3\u4fa7\u6bcf\u4e00\u9875\u7684\u6807\u9898 menu \u76f8\u540c, \u4ece\u800c\u5c06\u5de6\u4fa7\u548c\u53f3\u4fa7\u6570\u636e\u7ed1\u5b9a, \u6545\u800c\u5f62\u6210\u4ece\u5de6\u4fa7\u8fc7\u6ee4\u5230\u53f3\u4fa7\u533a\u57df\u662f\u56fa\u5b9a\u7684\u8be6\u60c5\u9875\u5185\u5bb9.<\/li>\n\u2463\u9875\u9762\u7b2c\u4e8c\u6b21\u672a\u5237\u65b0\u4e4b\u524d(\u9996\u6b21\u8fdb\u5165\u9875\u9762\u6e32\u67d3), \u9f20\u6807\u60ac\u6302'\u53d1\u73b0',\u8981\u51fa\u73b0\u7b2c\u4e00\u4e2a'\u7cbe\u9009'\u8be6\u60c5\u9875\u53ca'\u7cbe\u9009'item \u80cc\u666f\u53d8\u9ec4: \u9f20\u6807\u79fb\u51fa\u8be5\u5143\u7d20[\u4e8c\u7ea7\u76ee\u5f55\u6574\u4e2a\u5927\u6a21\u5757]\u4e4b\u5916,\u5219\u89e6\u53d1 mouseleave \u4e8b\u4ef6,\u521d\u59cb\u5316\u6570\u636e.<\/li>\n\u2464\u7b2c\u4e8c\u6b21\u9875\u9762\u5237\u65b0\u4e4b\u540e,\u521d\u59cb\u5316\u6570\u636e: \u91c7\u7528 mounted \u751f\u547d\u5468\u671f[\u6e32\u67d3\u6210 html \u540e\u8c03\u7528]: \u4f7f\u9f20\u6807\u60ac\u6302'\u53d1\u73b0',\u7b2c\u4e00\u4e2a menu-item \u663e\u793a\u9ec4\u8272<\/li>\n<\/ul>\n <li class="find">\n <a href="#">\u53d1\u73b0<\/a>\n <div class="h_menu" @mouseleave="mleftLeave()">\n <div class="menu_box mleft">\n <!-- <a href="">\u7cbe\u9009<\/a>-->\n <a v-for="(item,index) in menuList" :key="index" :ref="'test'+index" href="javascript:;"\n @mouseover="mleftIn(item,index)">{{ item.menu }}<\/a>\n <!-- <el-cascader-panel :options="findOptions" :props="props" \/>-->\n <\/div>\n <div class="mright">\n <div class="cate-box">\n <a class="cate-title" href="">\n <img :src="data.url" alt="">\n <span>{{ data.menu }}<\/span>\n <\/a>\n <div class="subCate">\n <a v-for="(itemOne) in data.items" :key="itemOne">{{ itemOne.text }}<\/a>\n <\/div>\n <\/div>\n <\/div>\n <div class="right_bar">\n <div class="icons">\n <a>\n <span class="icon-box">\n <span class="tangle-1"><\/span>\n <span class="tangle-2"><\/span>\n <i class="ani-star"><\/i>\n <span class="tangle-3"><\/span>\n <\/span>\n <span class="icon-text">\u6536\u85cf\u5939<\/span>\n <\/a>\n <a>\n <img alt="" src="..\/assets\/images\/icon-header-discover-designer.png">\n <span>\u8bbe\u8ba1\u5e08<\/span>\n <\/a>\n <a>\n <img alt="" src="..\/assets\/images\/icon-header-discover-focus.png">\n <span>\u699c\u5355<\/span>\n <!-- <sup class="subNavDot"><\/sup>-->\n <\/a>\n <\/div>\n <div class="ad_box">\n\n <\/div>\n <\/div>\n <\/div>\n <\/li><\/code><\/pre>\n data: {},\n menuList: [\n {\n menu: '\u7cbe\u9009',\n url: require('..\/assets\/images\/zuanshi.png'),\n items: [\n { text: '\u8fd0\u8425\u8bbe\u8ba1' },\n { text: '\u5305\u88c5' },\n { text: '\u52a8\u753b\/\u5f71\u89c6' },\n { text: '\u4eba\u50cf\u6444\u5f71' },\n { text: '\u5546\u4e1a\u63d2\u753b' },\n { text: '\u7535\u5546' },\n { text: 'APP \u754c\u9762' },\n { text: '\u827a\u672f\u63d2\u753b' },\n { text: '\u5bb6\u88c5\u8bbe\u8ba1' },\n { text: '\u6d77\u62a5' },\n { text: '\u6587\u7ae0' }\n ]\n },\n { menu: '\u5e73\u9762' },\n { menu: 'UI' },\n { menu: '\u7f51\u9875' },\n { menu: '\u63d2\u753b' },\n { menu: '\u52a8\u6f2b' },\n { menu: '\u6444\u5f71' },\n { menu: '\u7a7a\u95f4' },\n { menu: '\u5de5\u4e1a\/\u4ea7\u54c1' },\n { menu: '\u4e09\u7ef4' },\n { menu: '\u5f71\u89c6' },\n { menu: '\u624b\u5de5\u827a' },\n { menu: '\u7eaf\u827a\u672f' },\n { menu: '\u670d\u88c5' },\n { menu: '\u5176\u4ed6' }\n ],<\/code><\/pre>\n \/\/\u6e32\u67d3\u6210 html \u4e4b\u524d\u8c03\u7528,\u521d\u59cb\u5316\u4e00\u4e9b\u5c5e\u6027\u503c [\u9f20\u6807\u60ac\u6302'\u53d1\u73b0',\u5c31\u51fa\u73b0\u7b2c\u4e00\u4e2a\u7cbe\u9009\u9875\u9762]\n created () {\n this.data = this.menuList[0]\n },\n \/\/\u6e32\u67d3\u6210 html \u540e\u8c03\u7528 [\u9f20\u6807\u60ac\u6302'\u53d1\u73b0',\u7b2c\u4e00\u4e2a menu-item \u663e\u793a\u9ec4\u8272](\u9875\u9762\u5237\u65b0\u4e86\u4e4b\u540e\u7684)\n mounted () {\n this.$refs['test' + 0][0].style.backgroundColor = 'rgb(255, 242, 0)'\n },\n methods: {\n \/\/\u9f20\u6807\u8fdb\u5165\u51fd\u6570\n mleftIn (item, index) {\n \/\/\u83b7\u53d6 menuList \u4e2d\u6bcf\u4e2a menuItem \u5b57\u7b26\u4e32\u7684\u957f\u5ea6\n let menuSize = this.menuList.length\n for (let i = 0; i < menuSize; i++) {\n \/\/for \u5faa\u73af,i \u5982\u679c\u5c0f\u4e8e menuSize,\u5219\u7f6e\u4e8e menuItem \u989c\u8272\u4e3a\u7070\u8272,\u5b9e\u73b0\u5207\u6362\u6548\u679c\n this.$refs['test' + i][0].style.backgroundColor = '#f8f8f8'\n }\n \/\/\u8df3\u51fa for \u5faa\u73af,\u7531\u5de6\u4fa7\u79fb\u5411\u53f3\u4fa7\u8be6\u60c5\u9875\u65f6,\u5176 menuItem \u7684\u989c\u8272\u4e3a\u9ec4\u8272\n this.$refs['test' + index][0].style.backgroundColor = 'rgb(255, 242, 0)'\n \/\/\u5c06\u53f3\u4fa7\u6570\u636e\u8bbe\u7f6e\u4e3a item,\u663e\u793a\u6570\u636e\n this.data = item\n },\n \/\/\u9f20\u6807\u8fdb\u5165\u51fd\u6570\n \/\/\u6ce8\u610f: mouseleave:\u662f\u9f20\u6807\u79fb\u51fa\u8be5\u5143\u7d20\u4e4b\u5916,\u5219\u89e6\u53d1 mouseleave \u4e8b\u4ef6\n \/\/ mouseout : \u662f\u5f53\u6307\u9488\u79bb\u5f00\u8be5\u5143\u7d20\u53ca\u5176\u6240\u6709\u540e\u4ee3\u65f6\uff0c\u4f1a\u89e6\u53d1 mouseleave\n \/\/ \u800c\u5f53\u6307\u9488\u79bb\u5f00\u5143\u7d20\u6216\u79bb\u5f00\u5143\u7d20\u7684\u540e\u4ee3\uff08\u5373\u4f7f\u6307\u9488\u4ecd\u5728\u5143\u7d20\u5185\uff09\u65f6\uff0c\u4e5f\u4f1a\u89e6\u53d1 mouseout \u4e8b\u4ef6\n mleftLeave () {\n \/\/\u83b7\u53d6 menuList \u4e2d\u6bcf\u4e2a menuItem \u5b57\u7b26\u4e32\u7684\u957f\u5ea6\n let menuSize = this.menuList.length\n for (let i = 0; i < menuSize; i++) {\n this.$refs['test' + i][0].style.backgroundColor = '#f8f8f8'\n }\n \/\/ \u8df3\u51fa\u5faa\u73af,\u6d4f\u89c8\u5b8c'\u53d1\u73b0',\u9f20\u6807\u79fb\u51fa,\u7f6e\u4e8e\u53f3\u4fa7\u6570\u636e\u4e3a\u7b2c\u4e00\u4e2a\u7cbe\u9009\u6570\u636e\n this.data = this.menuList[0]\n \/\/\u9f20\u6807\u79fb\u51fa\u4e8b\u4ef6,\u7f6e\u4e8e\u7b2c\u4e00\u4e2a menuitem \u4e3a\u9ec4\u8272[\u672a\u5237\u65b0\u65f6\u7684\u8bbe\u7f6e]\n this.$refs['test' + 0][0].style.backgroundColor = 'rgb(255, 242, 0)'\n\n \/\/ this.data = {}\n \/\/ this.$refs['test'+index][0].style.backgroundColor = '#f8f8f8'\n \/\/ console.log('\u6eda\u51fa\u53bb')\n },\n}<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"\u4e0b\u8f7d\u4f9d\u8d56\u901f\u5ea6\u5feb npm install –registry=https:\/\/registry.npm.tao […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[],"class_list":["post-3462","post","type-post","status-publish","format-standard","hentry","category-web"],"_links":{"self":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/3462","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3462"}],"version-history":[{"count":38,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/3462\/revisions"}],"predecessor-version":[{"id":3558,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/3462\/revisions\/3558"}],"wp:attachment":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3462"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=3462"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=3462"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
.main_content ul li:nth-child(5n) {\n margin-right: 0;\n}<\/code><\/pre>\nel-cascader-panel \u7ea7\u8054\u9009\u62e9\u5668\u6837\u5f0f\u66f4\u6539<\/h3>\n<\/p>\n<\/p><\/noscript>\n <div class="h_menu">\n <div class="menu_box">\n <el-cascader-panel :options="findOptions" :props="props"\/>\n <\/div>\n<\/div><\/code><\/pre>\n\/*\u4e8c\u7ea7\u76ee\u5f55*\/\n.topbar .shortcut-links {\n width: 600px;\n margin: 0 auto;\n}\n\n.topbar .shortcut-links > ul > li {\n float: left;\n padding: 13px 20px;\n line-height: 31px;\n font-size: 14px;\n position: relative;\n}\n\n.topbar .shortcut-links > ul > li:hover .h_menu {\n display: block;\n}\n.topbar .shortcut-links > ul > li .h_menu {\n position: absolute;\n left: 0;\n display: none;\n width: 152px;\n margin-top: 13px;\n z-index: 9999;\n}\n.topbar .shortcut-links > ul > li .h_menu .menu_box {\n background: #ffffff;\n width: 152px;\n box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);\n padding: 8px 0 8px 0;\n \/*float: left;*\/\n}\n\n.topbar .shortcut-links > ul > li .h_menu .menu_box >a {\n height: 45px;\n line-height: 45px;\n font-size: 14px;\n padding-left: 20px;\n \/*padding-top: 5px;*\/\n display: block;\n}\n<\/code><\/pre>\nstyle\n\/*\u53d6\u6d88\u8fb9\u6846*\/\n.el-cascader-panel.is-bordered {\n border: none;\n border-radius: 0;\n}\n\n.el-cascader-menu {\n color: #1c1f21;\n font-size: 14px;\n min-width: 152px;\n}\n\n.el-cascader-menu__list {\n padding: 0;\n}\n\n.el-cascader-node.in-active-path, .el-cascader-node.is-active, .el-cascader-node.is-selectable.in-checked-path {\n color: #1c1f21;\n font-weight: normal;\n}\n\/*item \u60ac\u6302\u9ec4\u8272\u80cc\u666f\u5bbd\u95f4\u8ddd*\/\n.el-cascader-node {\n padding-left: 20px;\n height: 45px;\n line-height: 45px;\n}\n\/*\u4e8c\u7ea7\u76ee\u5f55\u7684\u9ad8\u5ea6*\/\n.el-cascader-menu__wrap.el-scrollbar__wrap {\n height: 478px;\n}\n\n.el-cascader-menu:last-child .el-cascader-node {\n padding-right: 0;\n}\n\/*item \u60ac\u6302\u9ec4\u8272\u80cc\u666f*\/\n.el-cascader-node:not(.is-disabled):focus, .el-cascader-node:not(.is-disabled):hover {\n background-color: rgb(255, 242, 0);\n}\n\/*item \u53f3\u8fb9\u7684\u5c0f\u7bad\u5934\u989c\u8272\u6539\u4e3a\u9ec4\u8272[\u9690\u85cf]*\/\n.el-cascader-node:not(.is-disabled):focus, .el-cascader-node:not(.is-disabled):hover .el-icon {\n color: rgb(255, 242, 0);\n}\n\n.el-cascader-node__label {\n padding: 0;\n}\n\n.el-cascader-node__postfix {\n position: absolute;\n right: 0;\n}\n\/*\u6eda\u52a8\u6761\u5230\u9876\u90e8,\u4e0b\u90e8\u7684\u95f4\u8ddd*\/\n.el-scrollbar__bar {\n position: absolute;\n right: 0;\n bottom: 0;\n z-index: 1;\n border-radius: 4px;\n}<\/code><\/pre>\n<\/p>\n<\/p><\/noscript>\n <el-cascader-panel :options="findOptions" :props="props"\/><\/code><\/pre>\n\/*\u4e8c\u7ea7\u76ee\u5f55\u7684\u9ad8\u5ea6*\/\n\/deep\/.el-cascader-menu__wrap.el-scrollbar__wrap {\n height: 490px;\n}\n\/*item \u60ac\u6302\u9ec4\u8272\u80cc\u666f\u5bbd\u95f4\u8ddd*\/\n\/deep\/.el-cascader-node {\nheight: 45px;\n width: 165px;\n padding: 0;\n margin-left: 10px;\n}\n\/*item \u60ac\u6302\u9ec4\u8272\u80cc\u666f*\/\n\/deep\/ .el-cascader-node:not(.is-disabled):hover {\n background: #fff200;\n border-radius: 8px;\n}\n\/*\u70b9\u51fb\u540e\u6539\u53d8\u989c\u8272,\u7c97\u7ec6\u53d6\u6d88\u70b9\u51fb\u6548\u679c*\/\n\/deep\/.el-cascader-node.is-active{\ncolor: #222222;\n font-weight: normal;\n}\n\/*item \u5de6\u8fb9\u6709\u4e2a\u5c0f\u52fe\u221a*\/\n\/deep\/.el-icon svg {\n height: 0;\n width: 0;\n}\n\/*\u53d1\u73b0\u7684\u4e8c\u7ea7\u76ee\u5f55\u6d88\u5931*\/\n.el-cascader-panel{\n display: none;\n}\n\/*\u53d6\u6d88\u8fb9\u6846*\/\n.el-cascader-panel.is-bordered {\n border: none;\n}\n\/*\u60ac\u6302'\u53d1\u73b0'\u76ee\u5f55,\u51fa\u73b0\u4e8c\u7ea7\u76ee\u5f55*\/\n.topbar .shortcut-links > ul > li:nth-child(2):hover .el-cascader-panel{\n display: block;\n background-color: #f8f8f8;\n border-radius: 8px 0 8px 8px;\n}<\/code><\/pre>\n\u626b\u4e8c\u7ef4\u7801\u767b\u5f55\u548c\u5bc6\u7801\u767b\u5f55\u9875\u9762\u7684\u5207\u6362<\/h3>\n@click="handleChangeToLogin()"<\/code><\/pre>\n handleChangeToLogin () {\n const qr = document.getElementById('qr_code')\n const login = document.getElementById('login')\n qr.style.display = 'none';\n if (qr.style.display === 'none') {\n login.style.display = 'block'\n }\n },\n handleChangeToQr () {\n const qr = document.getElementById('qr_code')\n const login = document.getElementById('login')\n login.style.display = 'none'\n if (login.style.display === 'none') {\n qr.style.display = 'block'\n }\n }<\/code><\/pre>\n\u767b\u5f55\u6846\u7684\u6ed1\u5757\u9a8c\u8bc1<\/h3>\n<\/p>\n<\/p><\/noscript>\n<\/slider><\/p>\n<template>\n <div ref="dragDiv" class="drag">\n <div class="drag_bg"><\/div>\n <div class="drag_text">{{ confirmWords }}<\/div>\n <div ref="moveDiv" :class="{'handler_ok_bg':confirmSuccess}" class="handler handler_bg"\n style="position: absolute;top: 0;left: 0;" @mousedown="mouseDownFn($event)"><\/div>\n <\/div>\n<\/template>\n\n<script>\nexport default {\n data () {\n return {\n beginClientX: 0, \/*\u8ddd\u79bb\u5c4f\u5e55\u5de6\u7aef\u8ddd\u79bb*\/\n mouseMoveState: false, \/*\u89e6\u53d1\u62d6\u52a8\u72b6\u6001 \u5224\u65ad*\/\n maxWidth: '', \/*\u62d6\u52a8\u6700\u5927\u5bbd\u5ea6\uff0c\u4f9d\u636e\u6ed1\u5757\u5bbd\u5ea6\u7b97\u51fa\u6765\u7684*\/\n confirmWords: '\u8bf7\u6309\u4f4f\u6ed1\u5757,\u62d6\u52a8\u5230\u6700\u53f3\u8fb9', \/*\u6ed1\u5757\u6587\u5b57*\/\n confirmSuccess: false \/*\u9a8c\u8bc1\u6210\u529f\u5224\u65ad*\/\n }\n },\n methods: {\n \/\/mousedown \u4e8b\u4ef6\n mouseDownFn: function (e) {\n if (!this.confirmSuccess) {\n e.preventDefault && e.preventDefault() \/\/\u963b\u6b62\u6587\u5b57\u9009\u4e2d\u7b49 \u6d4f\u89c8\u5668\u9ed8\u8ba4\u4e8b\u4ef6\n this.mouseMoveState = true\n this.beginClientX = e.clientX\n }\n },\n \/\/\u9a8c\u8bc1\u6210\u529f\u51fd\u6570\n successFunction () {\n this.confirmSuccess = true\n this.confirmWords = '\u9a8c\u8bc1\u901a\u8fc7'\n if (window.addEventListener) {\n document.getElementsByTagName('html')[0].removeEventListener('mousemove', this.mouseMoveFn)\n document.getElementsByTagName('html')[0].removeEventListener('mouseup', this.moseUpFn)\n } else {\n document.getElementsByTagName('html')[0].removeEventListener('mouseup', () => {\n })\n }\n document.getElementsByClassName('drag_text')[0].style.color = '#fff'\n document.getElementsByClassName('handler')[0].style.left = this.maxWidth + 'px'\n document.getElementsByClassName('drag_bg')[0].style.width = this.maxWidth + 'px'\n },\n \/\/mousemove \u4e8b\u4ef6\n mouseMoveFn (e) {\n if (this.mouseMoveState) {\n let width = e.clientX - this.beginClientX\n if (width > 0 && width <= this.maxWidth) {\n document.getElementsByClassName('handler')[0].style.left = width + 'px'\n document.getElementsByClassName('drag_bg')[0].style.width = width + 'px'\n } else if (width > this.maxWidth) {\n this.successFunction()\n }\n }\n },\n \/\/mouseup \u4e8b\u4ef6\n moseUpFn (e) {\n this.mouseMoveState = false\n var width = e.clientX - this.beginClientX\n if (width < this.maxWidth) {\n document.getElementsByClassName('handler')[0].style.left = 0 + 'px'\n document.getElementsByClassName('drag_bg')[0].style.width = 0 + 'px'\n }\n }\n },\n mounted () {\n this.maxWidth = this.$refs.dragDiv.clientWidth - this.$refs.moveDiv.clientWidth\n document.getElementsByTagName('html')[0].addEventListener('mousemove', this.mouseMoveFn)\n document.getElementsByTagName('html')[0].addEventListener('mouseup', this.moseUpFn)\n }\n}\n<\/script>\n<style scoped>\n.drag {\n position: relative;\n background-color: #e8e8e8;\n width: 100%;\n height: 32px;\n line-height: 32px;\n text-align: center;\n border: 1px solid #ccc;\n\n}\n\n.handler {\n width: 40px;\n height: 32px;\n border: 1px solid #ccc;\n cursor: move;\n margin-top: -1px;\n margin-left: -1px;\n}\n\n.handler_bg {\n background: #fff url('..\/assets\/images\/arrow-r.png') no-repeat center;\n background-size: 25px;\n}\n\n.handler_ok_bg {\n background: #fff url('..\/assets\/images\/\u221a.png') no-repeat center;\n background-size: 18px;\n}\n\n.drag_bg {\n background-color: #7ac23c;\n height: 32px;\n width: 0;\n}\n\n.drag_text {\n position: absolute;\n top: 0;\n width: 100%;\n font-size: 12px;\n color: #706f6f;\n}\n\n<\/style>\n<\/code><\/pre>\nel-input \u805a\u7126\u540e\u80cc\u666f\u53d8\u767d<\/h3>\n<\/p>\n<\/p><\/noscript>\n.el-input__wrapper.is-focus {\n box-shadow: 0 0 0 1px #dcdfe6 inset;\n background-color: #fff;\n}<\/code><\/pre>\nel-input placeholder \u989c\u8272\u8bbe\u7f6e<\/h3>\n.el-input__inner::placeholder{\n color: #666666;\n}<\/code><\/pre>\n\u5224\u65ad el-checked \u662f\u5426\u9009\u4e2d,\u672a\u9009\u4e2d\u5219\u63d0\u793a\u8bf7\u52fe\u9009<\/h3>\n<\/p>\n<\/p><\/noscript>\nexport default {\nmounted() {\n const pleaseFit=document.getElementById('pleaseFit');\n $(".el-checkbox input").change(() => {\n if ($(".el-checkbox input[type='checkbox']").is(':checked') == true) {\n pleaseFit.style.display='none'\n } else {\n pleaseFit.style.display='block'\n }\n })\n }\n }<\/code><\/pre>\nel-input \u5728 style \u5168\u5c40\u6837\u5f0f,\u4f1a\u5f71\u54cd\u5230\u5176\u4ed6\u4e0d\u7b26\u5408\u8be5\u6837\u5f0f\u7684\u4f4d\u7f6e<\/h3>\n\n\u53ef\u4ee5\u5728 style scoped> \u5199,\u52a0\u4e0a\/deep\/<\/li>\n<\/ul>\n<\/p>\n<\/p><\/noscript>\n\/deep\/ .el-input__wrapper {\n box-shadow: 0 0 0 0 inset;\n background-color: rgb(255, 242, 0);\n}<\/code><\/pre>\nel-carousel \u8d70\u9a6c\u706f\u4fee\u6539 Carousel \u5de6\u53f3\u4e24\u4fa7\u7bad\u5934\u5b57\u4f53\u5927\u5c0f<\/h3>\n\/deep\/.el-carousel__arrow i {\n font-size: 29px !important;\n }<\/code><\/pre>\n\u9875\u9762\u5411\u4e0b\u6ed1\u52a8\u5bfc\u822a\u680f\u56fa\u5b9a<\/h3>\n<\/p>\n<\/p><\/noscript>\n.main_nav_fixed {\n position: sticky;\n top: 0;\n z-index: 999;\n}<\/code><\/pre>\n\u56fa\u5b9a\u5728\u53f3\u65b9\u7684,\u60ac\u6302\u51fa\u73b0\u4e8c\u7ef4\u7801<\/h3>\n<\/p>\n<\/p><\/noscript>\n<div class="share_box">\n <img src="..\/..\/assets\/images\/share_qr.png" alt=""\/>\n <\/div><\/code><\/pre>\n.share_box{\n width: 70px;\n height: 131px;\n top: 300px;\n right: 10px;\n cursor: pointer;\n position: fixed;\n z-index: 999;\n background: url("..\/..\/assets\/images\/share_wx.jpg") no-repeat;\n background-size: 100% 100%;\n}\n.share_box img{\n width: 100px;\n height: 100px;\n display: none;\n}\n.share_box:hover img {\n position: absolute;\n top: 50%;\n margin-top: -50px;\n right: 82px;\n display: block !important;\n}<\/code><\/pre>\nnth-child(n)\u6307\u7684\u662f\u5728\u7236\u5143\u7d20\u4e2d\u6240\u6709\u7684\u5143\u7d20\u7684\u987a\u5e8f<\/h3>\n\n\u5199\u4ee3\u7801\u8981\u6839\u636e\u76d2\u5b50\u4ee5\u53ca\u5185\u5bb9\u5199<\/li>\nbottom\uff1a0\uff1b\u8981\u76f8\u5bf9\u4e8e\u7236\u5143\u7d20\u7684 height \u5b9e\u73b0\uff0c\u5982\u679c\u7236\u7236\u5143\u7d20\u7684 height \u5927\u4e8e\u7236\u5143\u7d20\u7684 height\uff0c\uff0c\u5219\u4f1a\u6309\u7167\u7236\u7236\u5143\u7d20\u7684 height \u6765\u5b9e\u73b0 bottom\uff1a0\uff1b\u6765\u5b9e\u73b0\u3002\u3010\u9002\u5f53\u5220\u9664\u7236\u7236\u5143\u7d20\u7684 height\uff0c\u4e00\u677f\u5757\u901a\u5e38\u4e0d\u7528\u8bbe\u7f6e\u603b height\u3011<\/li>\n<\/ul>\n\u60ac\u6302\u56fe\u7247\u7f13\u7f13\u653e\u5927\u7684\u52a8\u753b\u6548\u679c<\/h3>\n<\/p>\n<\/p><\/noscript>\n.gc_project .item_img > img {\n width: 100%;\n height: 100%;\n transition: all 0.3s;\n}\n.gc_project .item_img > img:hover {\n transform: scale(1.05);\n box-shadow: rgb(0 0 0 \/ 23%) 0 4px 14px 0;\n}<\/code><\/pre>\n\u6eda\u52a8\u6761\u4fee\u6539<\/h3>\n<\/p>\n<\/p><\/noscript>\n.mleft::-webkit-scrollbar{\n width: 6px;\n background-color: #f8f8f8;\n\n}\n.mleft::-webkit-scrollbar-thumb{\n width: 6px;\n background-color: #adacac;\n border-radius: 4px;\n}<\/code><\/pre>\nhead \u533a '\u53d1\u73b0' \u5b9e\u73b0\u4ea4\u4e92\u6548\u679c [\u8be5\u9996\u9875\u6700\u607c\u706b\u7684]<\/h2>\n<\/p>\n<\/p><\/noscript>\ntodo head \u533a'\u53d1\u73b0'\u4ea4\u4e92\u5b9e\u73b0\u601d\u8def:<\/h3>\n\n\u2460\u89c2\u5bdf\u8be5\u533a\u7ed3\u6784,\u4e00\u4e2a\u5927\u6a21\u5757,\u5176\u4e2d\u5206\u4e3a\u5de6\u4e2d\u53f3\u4e09\u4e2a\u6a21\u5757,\u5e76\u4f9d\u6b21\u5199\u51fa\u4e09\u4e2a\u6a21\u5757\u7684\u4ee3\u7801,<\/li>\n\u2461\u5de6\u4fa7\u533a\u57df: \u8981\u5c55\u793a\u7684\u6548\u679c\u6709: \u9f20\u6807\u4e0a\u4e0b\u79fb\u52a8,\u6240\u7ecf\u7684 menuItem \u4f1a\u5c55\u73b0\u9ec4\u8272\u80cc\u666f, \u5219\u5f15\u7528 vue \u7684 ref \u5c5e\u6027\u5bf9 DOM \u5143\u7d20\u8fdb\u884c\u52a8\u6001\u7ed1\u5b9a.\n\n\u6ce8\u610f:ref \u9700\u8981\u5728 dom \u6e32\u67d3\u5b8c\u6210\u540e\u624d\u4f1a\u6709,\u5728\u4f7f\u7528\u7684\u65f6\u5019\u786e\u4fdd dom \u5df2\u7ecf\u6e32\u67d3\u5b8c\u6210, \u6bd4\u5982\u5728\u751f\u547d\u5468\u671f mounted(){}\u94a9\u5b50\u4e2d\u8c03\u7528. this.$refs.xxx:\u51cf\u5c11\u83b7\u53d6 dom \u8282\u70b9\u7684\u6d88\u8017<\/li>\n<\/ul>\n<\/li>\n\u2462\u5de6\u4fa7\u533a\u57df\u8fc7\u6ee4\u5230\u53f3\u4fa7\u533a\u57df,\u5c55\u793a\u5bf9\u5e94\u7684\u8be6\u60c5\u9875: mleftIn(item,index)\u51fd\u6570\u901a\u8fc7\u4f20\u8f93 v-for \u5faa\u73af\u4e2d\u6570\u7ec4 menuList \u7684 item \u6bcf\u4e00\u9879\u4e3a\u5a92\u4ecb, \u800c\u6570\u636e\u4e2d menuList \u4e2d\u5305\u542b\u5de6\u4fa7\u6570\u636e menuItem \u4e0e\u53f3\u4fa7\u6bcf\u4e00\u9875\u7684\u6807\u9898 menu \u76f8\u540c, \u4ece\u800c\u5c06\u5de6\u4fa7\u548c\u53f3\u4fa7\u6570\u636e\u7ed1\u5b9a, \u6545\u800c\u5f62\u6210\u4ece\u5de6\u4fa7\u8fc7\u6ee4\u5230\u53f3\u4fa7\u533a\u57df\u662f\u56fa\u5b9a\u7684\u8be6\u60c5\u9875\u5185\u5bb9.<\/li>\n\u2463\u9875\u9762\u7b2c\u4e8c\u6b21\u672a\u5237\u65b0\u4e4b\u524d(\u9996\u6b21\u8fdb\u5165\u9875\u9762\u6e32\u67d3), \u9f20\u6807\u60ac\u6302'\u53d1\u73b0',\u8981\u51fa\u73b0\u7b2c\u4e00\u4e2a'\u7cbe\u9009'\u8be6\u60c5\u9875\u53ca'\u7cbe\u9009'item \u80cc\u666f\u53d8\u9ec4: \u9f20\u6807\u79fb\u51fa\u8be5\u5143\u7d20[\u4e8c\u7ea7\u76ee\u5f55\u6574\u4e2a\u5927\u6a21\u5757]\u4e4b\u5916,\u5219\u89e6\u53d1 mouseleave \u4e8b\u4ef6,\u521d\u59cb\u5316\u6570\u636e.<\/li>\n\u2464\u7b2c\u4e8c\u6b21\u9875\u9762\u5237\u65b0\u4e4b\u540e,\u521d\u59cb\u5316\u6570\u636e: \u91c7\u7528 mounted \u751f\u547d\u5468\u671f[\u6e32\u67d3\u6210 html \u540e\u8c03\u7528]: \u4f7f\u9f20\u6807\u60ac\u6302'\u53d1\u73b0',\u7b2c\u4e00\u4e2a menu-item \u663e\u793a\u9ec4\u8272<\/li>\n<\/ul>\n <li class="find">\n <a href="#">\u53d1\u73b0<\/a>\n <div class="h_menu" @mouseleave="mleftLeave()">\n <div class="menu_box mleft">\n <!-- <a href="">\u7cbe\u9009<\/a>-->\n <a v-for="(item,index) in menuList" :key="index" :ref="'test'+index" href="javascript:;"\n @mouseover="mleftIn(item,index)">{{ item.menu }}<\/a>\n <!-- <el-cascader-panel :options="findOptions" :props="props" \/>-->\n <\/div>\n <div class="mright">\n <div class="cate-box">\n <a class="cate-title" href="">\n <img :src="data.url" alt="">\n <span>{{ data.menu }}<\/span>\n <\/a>\n <div class="subCate">\n <a v-for="(itemOne) in data.items" :key="itemOne">{{ itemOne.text }}<\/a>\n <\/div>\n <\/div>\n <\/div>\n <div class="right_bar">\n <div class="icons">\n <a>\n <span class="icon-box">\n <span class="tangle-1"><\/span>\n <span class="tangle-2"><\/span>\n <i class="ani-star"><\/i>\n <span class="tangle-3"><\/span>\n <\/span>\n <span class="icon-text">\u6536\u85cf\u5939<\/span>\n <\/a>\n <a>\n <img alt="" src="..\/assets\/images\/icon-header-discover-designer.png">\n <span>\u8bbe\u8ba1\u5e08<\/span>\n <\/a>\n <a>\n <img alt="" src="..\/assets\/images\/icon-header-discover-focus.png">\n <span>\u699c\u5355<\/span>\n <!-- <sup class="subNavDot"><\/sup>-->\n <\/a>\n <\/div>\n <div class="ad_box">\n\n <\/div>\n <\/div>\n <\/div>\n <\/li><\/code><\/pre>\n data: {},\n menuList: [\n {\n menu: '\u7cbe\u9009',\n url: require('..\/assets\/images\/zuanshi.png'),\n items: [\n { text: '\u8fd0\u8425\u8bbe\u8ba1' },\n { text: '\u5305\u88c5' },\n { text: '\u52a8\u753b\/\u5f71\u89c6' },\n { text: '\u4eba\u50cf\u6444\u5f71' },\n { text: '\u5546\u4e1a\u63d2\u753b' },\n { text: '\u7535\u5546' },\n { text: 'APP \u754c\u9762' },\n { text: '\u827a\u672f\u63d2\u753b' },\n { text: '\u5bb6\u88c5\u8bbe\u8ba1' },\n { text: '\u6d77\u62a5' },\n { text: '\u6587\u7ae0' }\n ]\n },\n { menu: '\u5e73\u9762' },\n { menu: 'UI' },\n { menu: '\u7f51\u9875' },\n { menu: '\u63d2\u753b' },\n { menu: '\u52a8\u6f2b' },\n { menu: '\u6444\u5f71' },\n { menu: '\u7a7a\u95f4' },\n { menu: '\u5de5\u4e1a\/\u4ea7\u54c1' },\n { menu: '\u4e09\u7ef4' },\n { menu: '\u5f71\u89c6' },\n { menu: '\u624b\u5de5\u827a' },\n { menu: '\u7eaf\u827a\u672f' },\n { menu: '\u670d\u88c5' },\n { menu: '\u5176\u4ed6' }\n ],<\/code><\/pre>\n \/\/\u6e32\u67d3\u6210 html \u4e4b\u524d\u8c03\u7528,\u521d\u59cb\u5316\u4e00\u4e9b\u5c5e\u6027\u503c [\u9f20\u6807\u60ac\u6302'\u53d1\u73b0',\u5c31\u51fa\u73b0\u7b2c\u4e00\u4e2a\u7cbe\u9009\u9875\u9762]\n created () {\n this.data = this.menuList[0]\n },\n \/\/\u6e32\u67d3\u6210 html \u540e\u8c03\u7528 [\u9f20\u6807\u60ac\u6302'\u53d1\u73b0',\u7b2c\u4e00\u4e2a menu-item \u663e\u793a\u9ec4\u8272](\u9875\u9762\u5237\u65b0\u4e86\u4e4b\u540e\u7684)\n mounted () {\n this.$refs['test' + 0][0].style.backgroundColor = 'rgb(255, 242, 0)'\n },\n methods: {\n \/\/\u9f20\u6807\u8fdb\u5165\u51fd\u6570\n mleftIn (item, index) {\n \/\/\u83b7\u53d6 menuList \u4e2d\u6bcf\u4e2a menuItem \u5b57\u7b26\u4e32\u7684\u957f\u5ea6\n let menuSize = this.menuList.length\n for (let i = 0; i < menuSize; i++) {\n \/\/for \u5faa\u73af,i \u5982\u679c\u5c0f\u4e8e menuSize,\u5219\u7f6e\u4e8e menuItem \u989c\u8272\u4e3a\u7070\u8272,\u5b9e\u73b0\u5207\u6362\u6548\u679c\n this.$refs['test' + i][0].style.backgroundColor = '#f8f8f8'\n }\n \/\/\u8df3\u51fa for \u5faa\u73af,\u7531\u5de6\u4fa7\u79fb\u5411\u53f3\u4fa7\u8be6\u60c5\u9875\u65f6,\u5176 menuItem \u7684\u989c\u8272\u4e3a\u9ec4\u8272\n this.$refs['test' + index][0].style.backgroundColor = 'rgb(255, 242, 0)'\n \/\/\u5c06\u53f3\u4fa7\u6570\u636e\u8bbe\u7f6e\u4e3a item,\u663e\u793a\u6570\u636e\n this.data = item\n },\n \/\/\u9f20\u6807\u8fdb\u5165\u51fd\u6570\n \/\/\u6ce8\u610f: mouseleave:\u662f\u9f20\u6807\u79fb\u51fa\u8be5\u5143\u7d20\u4e4b\u5916,\u5219\u89e6\u53d1 mouseleave \u4e8b\u4ef6\n \/\/ mouseout : \u662f\u5f53\u6307\u9488\u79bb\u5f00\u8be5\u5143\u7d20\u53ca\u5176\u6240\u6709\u540e\u4ee3\u65f6\uff0c\u4f1a\u89e6\u53d1 mouseleave\n \/\/ \u800c\u5f53\u6307\u9488\u79bb\u5f00\u5143\u7d20\u6216\u79bb\u5f00\u5143\u7d20\u7684\u540e\u4ee3\uff08\u5373\u4f7f\u6307\u9488\u4ecd\u5728\u5143\u7d20\u5185\uff09\u65f6\uff0c\u4e5f\u4f1a\u89e6\u53d1 mouseout \u4e8b\u4ef6\n mleftLeave () {\n \/\/\u83b7\u53d6 menuList \u4e2d\u6bcf\u4e2a menuItem \u5b57\u7b26\u4e32\u7684\u957f\u5ea6\n let menuSize = this.menuList.length\n for (let i = 0; i < menuSize; i++) {\n this.$refs['test' + i][0].style.backgroundColor = '#f8f8f8'\n }\n \/\/ \u8df3\u51fa\u5faa\u73af,\u6d4f\u89c8\u5b8c'\u53d1\u73b0',\u9f20\u6807\u79fb\u51fa,\u7f6e\u4e8e\u53f3\u4fa7\u6570\u636e\u4e3a\u7b2c\u4e00\u4e2a\u7cbe\u9009\u6570\u636e\n this.data = this.menuList[0]\n \/\/\u9f20\u6807\u79fb\u51fa\u4e8b\u4ef6,\u7f6e\u4e8e\u7b2c\u4e00\u4e2a menuitem \u4e3a\u9ec4\u8272[\u672a\u5237\u65b0\u65f6\u7684\u8bbe\u7f6e]\n this.$refs['test' + 0][0].style.backgroundColor = 'rgb(255, 242, 0)'\n\n \/\/ this.data = {}\n \/\/ this.$refs['test'+index][0].style.backgroundColor = '#f8f8f8'\n \/\/ console.log('\u6eda\u51fa\u53bb')\n },\n}<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"\u4e0b\u8f7d\u4f9d\u8d56\u901f\u5ea6\u5feb npm install –registry=https:\/\/registry.npm.tao […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[],"class_list":["post-3462","post","type-post","status-publish","format-standard","hentry","category-web"],"_links":{"self":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/3462","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3462"}],"version-history":[{"count":38,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/3462\/revisions"}],"predecessor-version":[{"id":3558,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/3462\/revisions\/3558"}],"wp:attachment":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3462"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=3462"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=3462"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
<\/p>\n<\/p><\/noscript>\n <div class="h_menu">\n <div class="menu_box">\n <el-cascader-panel :options="findOptions" :props="props"\/>\n <\/div>\n<\/div><\/code><\/pre>\n\/*\u4e8c\u7ea7\u76ee\u5f55*\/\n.topbar .shortcut-links {\n width: 600px;\n margin: 0 auto;\n}\n\n.topbar .shortcut-links > ul > li {\n float: left;\n padding: 13px 20px;\n line-height: 31px;\n font-size: 14px;\n position: relative;\n}\n\n.topbar .shortcut-links > ul > li:hover .h_menu {\n display: block;\n}\n.topbar .shortcut-links > ul > li .h_menu {\n position: absolute;\n left: 0;\n display: none;\n width: 152px;\n margin-top: 13px;\n z-index: 9999;\n}\n.topbar .shortcut-links > ul > li .h_menu .menu_box {\n background: #ffffff;\n width: 152px;\n box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);\n padding: 8px 0 8px 0;\n \/*float: left;*\/\n}\n\n.topbar .shortcut-links > ul > li .h_menu .menu_box >a {\n height: 45px;\n line-height: 45px;\n font-size: 14px;\n padding-left: 20px;\n \/*padding-top: 5px;*\/\n display: block;\n}\n<\/code><\/pre>\nstyle\n\/*\u53d6\u6d88\u8fb9\u6846*\/\n.el-cascader-panel.is-bordered {\n border: none;\n border-radius: 0;\n}\n\n.el-cascader-menu {\n color: #1c1f21;\n font-size: 14px;\n min-width: 152px;\n}\n\n.el-cascader-menu__list {\n padding: 0;\n}\n\n.el-cascader-node.in-active-path, .el-cascader-node.is-active, .el-cascader-node.is-selectable.in-checked-path {\n color: #1c1f21;\n font-weight: normal;\n}\n\/*item \u60ac\u6302\u9ec4\u8272\u80cc\u666f\u5bbd\u95f4\u8ddd*\/\n.el-cascader-node {\n padding-left: 20px;\n height: 45px;\n line-height: 45px;\n}\n\/*\u4e8c\u7ea7\u76ee\u5f55\u7684\u9ad8\u5ea6*\/\n.el-cascader-menu__wrap.el-scrollbar__wrap {\n height: 478px;\n}\n\n.el-cascader-menu:last-child .el-cascader-node {\n padding-right: 0;\n}\n\/*item \u60ac\u6302\u9ec4\u8272\u80cc\u666f*\/\n.el-cascader-node:not(.is-disabled):focus, .el-cascader-node:not(.is-disabled):hover {\n background-color: rgb(255, 242, 0);\n}\n\/*item \u53f3\u8fb9\u7684\u5c0f\u7bad\u5934\u989c\u8272\u6539\u4e3a\u9ec4\u8272[\u9690\u85cf]*\/\n.el-cascader-node:not(.is-disabled):focus, .el-cascader-node:not(.is-disabled):hover .el-icon {\n color: rgb(255, 242, 0);\n}\n\n.el-cascader-node__label {\n padding: 0;\n}\n\n.el-cascader-node__postfix {\n position: absolute;\n right: 0;\n}\n\/*\u6eda\u52a8\u6761\u5230\u9876\u90e8,\u4e0b\u90e8\u7684\u95f4\u8ddd*\/\n.el-scrollbar__bar {\n position: absolute;\n right: 0;\n bottom: 0;\n z-index: 1;\n border-radius: 4px;\n}<\/code><\/pre>\n<\/p>\n<\/p><\/noscript>\n <el-cascader-panel :options="findOptions" :props="props"\/><\/code><\/pre>\n\/*\u4e8c\u7ea7\u76ee\u5f55\u7684\u9ad8\u5ea6*\/\n\/deep\/.el-cascader-menu__wrap.el-scrollbar__wrap {\n height: 490px;\n}\n\/*item \u60ac\u6302\u9ec4\u8272\u80cc\u666f\u5bbd\u95f4\u8ddd*\/\n\/deep\/.el-cascader-node {\nheight: 45px;\n width: 165px;\n padding: 0;\n margin-left: 10px;\n}\n\/*item \u60ac\u6302\u9ec4\u8272\u80cc\u666f*\/\n\/deep\/ .el-cascader-node:not(.is-disabled):hover {\n background: #fff200;\n border-radius: 8px;\n}\n\/*\u70b9\u51fb\u540e\u6539\u53d8\u989c\u8272,\u7c97\u7ec6\u53d6\u6d88\u70b9\u51fb\u6548\u679c*\/\n\/deep\/.el-cascader-node.is-active{\ncolor: #222222;\n font-weight: normal;\n}\n\/*item \u5de6\u8fb9\u6709\u4e2a\u5c0f\u52fe\u221a*\/\n\/deep\/.el-icon svg {\n height: 0;\n width: 0;\n}\n\/*\u53d1\u73b0\u7684\u4e8c\u7ea7\u76ee\u5f55\u6d88\u5931*\/\n.el-cascader-panel{\n display: none;\n}\n\/*\u53d6\u6d88\u8fb9\u6846*\/\n.el-cascader-panel.is-bordered {\n border: none;\n}\n\/*\u60ac\u6302'\u53d1\u73b0'\u76ee\u5f55,\u51fa\u73b0\u4e8c\u7ea7\u76ee\u5f55*\/\n.topbar .shortcut-links > ul > li:nth-child(2):hover .el-cascader-panel{\n display: block;\n background-color: #f8f8f8;\n border-radius: 8px 0 8px 8px;\n}<\/code><\/pre>\n\u626b\u4e8c\u7ef4\u7801\u767b\u5f55\u548c\u5bc6\u7801\u767b\u5f55\u9875\u9762\u7684\u5207\u6362<\/h3>\n@click="handleChangeToLogin()"<\/code><\/pre>\n handleChangeToLogin () {\n const qr = document.getElementById('qr_code')\n const login = document.getElementById('login')\n qr.style.display = 'none';\n if (qr.style.display === 'none') {\n login.style.display = 'block'\n }\n },\n handleChangeToQr () {\n const qr = document.getElementById('qr_code')\n const login = document.getElementById('login')\n login.style.display = 'none'\n if (login.style.display === 'none') {\n qr.style.display = 'block'\n }\n }<\/code><\/pre>\n\u767b\u5f55\u6846\u7684\u6ed1\u5757\u9a8c\u8bc1<\/h3>\n<\/p>\n<\/p><\/noscript>\n<\/slider><\/p>\n<template>\n <div ref="dragDiv" class="drag">\n <div class="drag_bg"><\/div>\n <div class="drag_text">{{ confirmWords }}<\/div>\n <div ref="moveDiv" :class="{'handler_ok_bg':confirmSuccess}" class="handler handler_bg"\n style="position: absolute;top: 0;left: 0;" @mousedown="mouseDownFn($event)"><\/div>\n <\/div>\n<\/template>\n\n<script>\nexport default {\n data () {\n return {\n beginClientX: 0, \/*\u8ddd\u79bb\u5c4f\u5e55\u5de6\u7aef\u8ddd\u79bb*\/\n mouseMoveState: false, \/*\u89e6\u53d1\u62d6\u52a8\u72b6\u6001 \u5224\u65ad*\/\n maxWidth: '', \/*\u62d6\u52a8\u6700\u5927\u5bbd\u5ea6\uff0c\u4f9d\u636e\u6ed1\u5757\u5bbd\u5ea6\u7b97\u51fa\u6765\u7684*\/\n confirmWords: '\u8bf7\u6309\u4f4f\u6ed1\u5757,\u62d6\u52a8\u5230\u6700\u53f3\u8fb9', \/*\u6ed1\u5757\u6587\u5b57*\/\n confirmSuccess: false \/*\u9a8c\u8bc1\u6210\u529f\u5224\u65ad*\/\n }\n },\n methods: {\n \/\/mousedown \u4e8b\u4ef6\n mouseDownFn: function (e) {\n if (!this.confirmSuccess) {\n e.preventDefault && e.preventDefault() \/\/\u963b\u6b62\u6587\u5b57\u9009\u4e2d\u7b49 \u6d4f\u89c8\u5668\u9ed8\u8ba4\u4e8b\u4ef6\n this.mouseMoveState = true\n this.beginClientX = e.clientX\n }\n },\n \/\/\u9a8c\u8bc1\u6210\u529f\u51fd\u6570\n successFunction () {\n this.confirmSuccess = true\n this.confirmWords = '\u9a8c\u8bc1\u901a\u8fc7'\n if (window.addEventListener) {\n document.getElementsByTagName('html')[0].removeEventListener('mousemove', this.mouseMoveFn)\n document.getElementsByTagName('html')[0].removeEventListener('mouseup', this.moseUpFn)\n } else {\n document.getElementsByTagName('html')[0].removeEventListener('mouseup', () => {\n })\n }\n document.getElementsByClassName('drag_text')[0].style.color = '#fff'\n document.getElementsByClassName('handler')[0].style.left = this.maxWidth + 'px'\n document.getElementsByClassName('drag_bg')[0].style.width = this.maxWidth + 'px'\n },\n \/\/mousemove \u4e8b\u4ef6\n mouseMoveFn (e) {\n if (this.mouseMoveState) {\n let width = e.clientX - this.beginClientX\n if (width > 0 && width <= this.maxWidth) {\n document.getElementsByClassName('handler')[0].style.left = width + 'px'\n document.getElementsByClassName('drag_bg')[0].style.width = width + 'px'\n } else if (width > this.maxWidth) {\n this.successFunction()\n }\n }\n },\n \/\/mouseup \u4e8b\u4ef6\n moseUpFn (e) {\n this.mouseMoveState = false\n var width = e.clientX - this.beginClientX\n if (width < this.maxWidth) {\n document.getElementsByClassName('handler')[0].style.left = 0 + 'px'\n document.getElementsByClassName('drag_bg')[0].style.width = 0 + 'px'\n }\n }\n },\n mounted () {\n this.maxWidth = this.$refs.dragDiv.clientWidth - this.$refs.moveDiv.clientWidth\n document.getElementsByTagName('html')[0].addEventListener('mousemove', this.mouseMoveFn)\n document.getElementsByTagName('html')[0].addEventListener('mouseup', this.moseUpFn)\n }\n}\n<\/script>\n<style scoped>\n.drag {\n position: relative;\n background-color: #e8e8e8;\n width: 100%;\n height: 32px;\n line-height: 32px;\n text-align: center;\n border: 1px solid #ccc;\n\n}\n\n.handler {\n width: 40px;\n height: 32px;\n border: 1px solid #ccc;\n cursor: move;\n margin-top: -1px;\n margin-left: -1px;\n}\n\n.handler_bg {\n background: #fff url('..\/assets\/images\/arrow-r.png') no-repeat center;\n background-size: 25px;\n}\n\n.handler_ok_bg {\n background: #fff url('..\/assets\/images\/\u221a.png') no-repeat center;\n background-size: 18px;\n}\n\n.drag_bg {\n background-color: #7ac23c;\n height: 32px;\n width: 0;\n}\n\n.drag_text {\n position: absolute;\n top: 0;\n width: 100%;\n font-size: 12px;\n color: #706f6f;\n}\n\n<\/style>\n<\/code><\/pre>\nel-input \u805a\u7126\u540e\u80cc\u666f\u53d8\u767d<\/h3>\n<\/p>\n<\/p><\/noscript>\n.el-input__wrapper.is-focus {\n box-shadow: 0 0 0 1px #dcdfe6 inset;\n background-color: #fff;\n}<\/code><\/pre>\nel-input placeholder \u989c\u8272\u8bbe\u7f6e<\/h3>\n.el-input__inner::placeholder{\n color: #666666;\n}<\/code><\/pre>\n\u5224\u65ad el-checked \u662f\u5426\u9009\u4e2d,\u672a\u9009\u4e2d\u5219\u63d0\u793a\u8bf7\u52fe\u9009<\/h3>\n<\/p>\n<\/p><\/noscript>\nexport default {\nmounted() {\n const pleaseFit=document.getElementById('pleaseFit');\n $(".el-checkbox input").change(() => {\n if ($(".el-checkbox input[type='checkbox']").is(':checked') == true) {\n pleaseFit.style.display='none'\n } else {\n pleaseFit.style.display='block'\n }\n })\n }\n }<\/code><\/pre>\nel-input \u5728 style \u5168\u5c40\u6837\u5f0f,\u4f1a\u5f71\u54cd\u5230\u5176\u4ed6\u4e0d\u7b26\u5408\u8be5\u6837\u5f0f\u7684\u4f4d\u7f6e<\/h3>\n\n\u53ef\u4ee5\u5728 style scoped> \u5199,\u52a0\u4e0a\/deep\/<\/li>\n<\/ul>\n<\/p>\n<\/p><\/noscript>\n\/deep\/ .el-input__wrapper {\n box-shadow: 0 0 0 0 inset;\n background-color: rgb(255, 242, 0);\n}<\/code><\/pre>\nel-carousel \u8d70\u9a6c\u706f\u4fee\u6539 Carousel \u5de6\u53f3\u4e24\u4fa7\u7bad\u5934\u5b57\u4f53\u5927\u5c0f<\/h3>\n\/deep\/.el-carousel__arrow i {\n font-size: 29px !important;\n }<\/code><\/pre>\n\u9875\u9762\u5411\u4e0b\u6ed1\u52a8\u5bfc\u822a\u680f\u56fa\u5b9a<\/h3>\n<\/p>\n<\/p><\/noscript>\n.main_nav_fixed {\n position: sticky;\n top: 0;\n z-index: 999;\n}<\/code><\/pre>\n\u56fa\u5b9a\u5728\u53f3\u65b9\u7684,\u60ac\u6302\u51fa\u73b0\u4e8c\u7ef4\u7801<\/h3>\n<\/p>\n<\/p><\/noscript>\n<div class="share_box">\n <img src="..\/..\/assets\/images\/share_qr.png" alt=""\/>\n <\/div><\/code><\/pre>\n.share_box{\n width: 70px;\n height: 131px;\n top: 300px;\n right: 10px;\n cursor: pointer;\n position: fixed;\n z-index: 999;\n background: url("..\/..\/assets\/images\/share_wx.jpg") no-repeat;\n background-size: 100% 100%;\n}\n.share_box img{\n width: 100px;\n height: 100px;\n display: none;\n}\n.share_box:hover img {\n position: absolute;\n top: 50%;\n margin-top: -50px;\n right: 82px;\n display: block !important;\n}<\/code><\/pre>\nnth-child(n)\u6307\u7684\u662f\u5728\u7236\u5143\u7d20\u4e2d\u6240\u6709\u7684\u5143\u7d20\u7684\u987a\u5e8f<\/h3>\n\n\u5199\u4ee3\u7801\u8981\u6839\u636e\u76d2\u5b50\u4ee5\u53ca\u5185\u5bb9\u5199<\/li>\nbottom\uff1a0\uff1b\u8981\u76f8\u5bf9\u4e8e\u7236\u5143\u7d20\u7684 height \u5b9e\u73b0\uff0c\u5982\u679c\u7236\u7236\u5143\u7d20\u7684 height \u5927\u4e8e\u7236\u5143\u7d20\u7684 height\uff0c\uff0c\u5219\u4f1a\u6309\u7167\u7236\u7236\u5143\u7d20\u7684 height \u6765\u5b9e\u73b0 bottom\uff1a0\uff1b\u6765\u5b9e\u73b0\u3002\u3010\u9002\u5f53\u5220\u9664\u7236\u7236\u5143\u7d20\u7684 height\uff0c\u4e00\u677f\u5757\u901a\u5e38\u4e0d\u7528\u8bbe\u7f6e\u603b height\u3011<\/li>\n<\/ul>\n\u60ac\u6302\u56fe\u7247\u7f13\u7f13\u653e\u5927\u7684\u52a8\u753b\u6548\u679c<\/h3>\n<\/p>\n<\/p><\/noscript>\n.gc_project .item_img > img {\n width: 100%;\n height: 100%;\n transition: all 0.3s;\n}\n.gc_project .item_img > img:hover {\n transform: scale(1.05);\n box-shadow: rgb(0 0 0 \/ 23%) 0 4px 14px 0;\n}<\/code><\/pre>\n\u6eda\u52a8\u6761\u4fee\u6539<\/h3>\n<\/p>\n<\/p><\/noscript>\n.mleft::-webkit-scrollbar{\n width: 6px;\n background-color: #f8f8f8;\n\n}\n.mleft::-webkit-scrollbar-thumb{\n width: 6px;\n background-color: #adacac;\n border-radius: 4px;\n}<\/code><\/pre>\nhead \u533a '\u53d1\u73b0' \u5b9e\u73b0\u4ea4\u4e92\u6548\u679c [\u8be5\u9996\u9875\u6700\u607c\u706b\u7684]<\/h2>\n<\/p>\n<\/p><\/noscript>\ntodo head \u533a'\u53d1\u73b0'\u4ea4\u4e92\u5b9e\u73b0\u601d\u8def:<\/h3>\n\n\u2460\u89c2\u5bdf\u8be5\u533a\u7ed3\u6784,\u4e00\u4e2a\u5927\u6a21\u5757,\u5176\u4e2d\u5206\u4e3a\u5de6\u4e2d\u53f3\u4e09\u4e2a\u6a21\u5757,\u5e76\u4f9d\u6b21\u5199\u51fa\u4e09\u4e2a\u6a21\u5757\u7684\u4ee3\u7801,<\/li>\n\u2461\u5de6\u4fa7\u533a\u57df: \u8981\u5c55\u793a\u7684\u6548\u679c\u6709: \u9f20\u6807\u4e0a\u4e0b\u79fb\u52a8,\u6240\u7ecf\u7684 menuItem \u4f1a\u5c55\u73b0\u9ec4\u8272\u80cc\u666f, \u5219\u5f15\u7528 vue \u7684 ref \u5c5e\u6027\u5bf9 DOM \u5143\u7d20\u8fdb\u884c\u52a8\u6001\u7ed1\u5b9a.\n\n\u6ce8\u610f:ref \u9700\u8981\u5728 dom \u6e32\u67d3\u5b8c\u6210\u540e\u624d\u4f1a\u6709,\u5728\u4f7f\u7528\u7684\u65f6\u5019\u786e\u4fdd dom \u5df2\u7ecf\u6e32\u67d3\u5b8c\u6210, \u6bd4\u5982\u5728\u751f\u547d\u5468\u671f mounted(){}\u94a9\u5b50\u4e2d\u8c03\u7528. this.$refs.xxx:\u51cf\u5c11\u83b7\u53d6 dom \u8282\u70b9\u7684\u6d88\u8017<\/li>\n<\/ul>\n<\/li>\n\u2462\u5de6\u4fa7\u533a\u57df\u8fc7\u6ee4\u5230\u53f3\u4fa7\u533a\u57df,\u5c55\u793a\u5bf9\u5e94\u7684\u8be6\u60c5\u9875: mleftIn(item,index)\u51fd\u6570\u901a\u8fc7\u4f20\u8f93 v-for \u5faa\u73af\u4e2d\u6570\u7ec4 menuList \u7684 item \u6bcf\u4e00\u9879\u4e3a\u5a92\u4ecb, \u800c\u6570\u636e\u4e2d menuList \u4e2d\u5305\u542b\u5de6\u4fa7\u6570\u636e menuItem \u4e0e\u53f3\u4fa7\u6bcf\u4e00\u9875\u7684\u6807\u9898 menu \u76f8\u540c, \u4ece\u800c\u5c06\u5de6\u4fa7\u548c\u53f3\u4fa7\u6570\u636e\u7ed1\u5b9a, \u6545\u800c\u5f62\u6210\u4ece\u5de6\u4fa7\u8fc7\u6ee4\u5230\u53f3\u4fa7\u533a\u57df\u662f\u56fa\u5b9a\u7684\u8be6\u60c5\u9875\u5185\u5bb9.<\/li>\n\u2463\u9875\u9762\u7b2c\u4e8c\u6b21\u672a\u5237\u65b0\u4e4b\u524d(\u9996\u6b21\u8fdb\u5165\u9875\u9762\u6e32\u67d3), \u9f20\u6807\u60ac\u6302'\u53d1\u73b0',\u8981\u51fa\u73b0\u7b2c\u4e00\u4e2a'\u7cbe\u9009'\u8be6\u60c5\u9875\u53ca'\u7cbe\u9009'item \u80cc\u666f\u53d8\u9ec4: \u9f20\u6807\u79fb\u51fa\u8be5\u5143\u7d20[\u4e8c\u7ea7\u76ee\u5f55\u6574\u4e2a\u5927\u6a21\u5757]\u4e4b\u5916,\u5219\u89e6\u53d1 mouseleave \u4e8b\u4ef6,\u521d\u59cb\u5316\u6570\u636e.<\/li>\n\u2464\u7b2c\u4e8c\u6b21\u9875\u9762\u5237\u65b0\u4e4b\u540e,\u521d\u59cb\u5316\u6570\u636e: \u91c7\u7528 mounted \u751f\u547d\u5468\u671f[\u6e32\u67d3\u6210 html \u540e\u8c03\u7528]: \u4f7f\u9f20\u6807\u60ac\u6302'\u53d1\u73b0',\u7b2c\u4e00\u4e2a menu-item \u663e\u793a\u9ec4\u8272<\/li>\n<\/ul>\n <li class="find">\n <a href="#">\u53d1\u73b0<\/a>\n <div class="h_menu" @mouseleave="mleftLeave()">\n <div class="menu_box mleft">\n <!-- <a href="">\u7cbe\u9009<\/a>-->\n <a v-for="(item,index) in menuList" :key="index" :ref="'test'+index" href="javascript:;"\n @mouseover="mleftIn(item,index)">{{ item.menu }}<\/a>\n <!-- <el-cascader-panel :options="findOptions" :props="props" \/>-->\n <\/div>\n <div class="mright">\n <div class="cate-box">\n <a class="cate-title" href="">\n <img :src="data.url" alt="">\n <span>{{ data.menu }}<\/span>\n <\/a>\n <div class="subCate">\n <a v-for="(itemOne) in data.items" :key="itemOne">{{ itemOne.text }}<\/a>\n <\/div>\n <\/div>\n <\/div>\n <div class="right_bar">\n <div class="icons">\n <a>\n <span class="icon-box">\n <span class="tangle-1"><\/span>\n <span class="tangle-2"><\/span>\n <i class="ani-star"><\/i>\n <span class="tangle-3"><\/span>\n <\/span>\n <span class="icon-text">\u6536\u85cf\u5939<\/span>\n <\/a>\n <a>\n <img alt="" src="..\/assets\/images\/icon-header-discover-designer.png">\n <span>\u8bbe\u8ba1\u5e08<\/span>\n <\/a>\n <a>\n <img alt="" src="..\/assets\/images\/icon-header-discover-focus.png">\n <span>\u699c\u5355<\/span>\n <!-- <sup class="subNavDot"><\/sup>-->\n <\/a>\n <\/div>\n <div class="ad_box">\n\n <\/div>\n <\/div>\n <\/div>\n <\/li><\/code><\/pre>\n data: {},\n menuList: [\n {\n menu: '\u7cbe\u9009',\n url: require('..\/assets\/images\/zuanshi.png'),\n items: [\n { text: '\u8fd0\u8425\u8bbe\u8ba1' },\n { text: '\u5305\u88c5' },\n { text: '\u52a8\u753b\/\u5f71\u89c6' },\n { text: '\u4eba\u50cf\u6444\u5f71' },\n { text: '\u5546\u4e1a\u63d2\u753b' },\n { text: '\u7535\u5546' },\n { text: 'APP \u754c\u9762' },\n { text: '\u827a\u672f\u63d2\u753b' },\n { text: '\u5bb6\u88c5\u8bbe\u8ba1' },\n { text: '\u6d77\u62a5' },\n { text: '\u6587\u7ae0' }\n ]\n },\n { menu: '\u5e73\u9762' },\n { menu: 'UI' },\n { menu: '\u7f51\u9875' },\n { menu: '\u63d2\u753b' },\n { menu: '\u52a8\u6f2b' },\n { menu: '\u6444\u5f71' },\n { menu: '\u7a7a\u95f4' },\n { menu: '\u5de5\u4e1a\/\u4ea7\u54c1' },\n { menu: '\u4e09\u7ef4' },\n { menu: '\u5f71\u89c6' },\n { menu: '\u624b\u5de5\u827a' },\n { menu: '\u7eaf\u827a\u672f' },\n { menu: '\u670d\u88c5' },\n { menu: '\u5176\u4ed6' }\n ],<\/code><\/pre>\n \/\/\u6e32\u67d3\u6210 html \u4e4b\u524d\u8c03\u7528,\u521d\u59cb\u5316\u4e00\u4e9b\u5c5e\u6027\u503c [\u9f20\u6807\u60ac\u6302'\u53d1\u73b0',\u5c31\u51fa\u73b0\u7b2c\u4e00\u4e2a\u7cbe\u9009\u9875\u9762]\n created () {\n this.data = this.menuList[0]\n },\n \/\/\u6e32\u67d3\u6210 html \u540e\u8c03\u7528 [\u9f20\u6807\u60ac\u6302'\u53d1\u73b0',\u7b2c\u4e00\u4e2a menu-item \u663e\u793a\u9ec4\u8272](\u9875\u9762\u5237\u65b0\u4e86\u4e4b\u540e\u7684)\n mounted () {\n this.$refs['test' + 0][0].style.backgroundColor = 'rgb(255, 242, 0)'\n },\n methods: {\n \/\/\u9f20\u6807\u8fdb\u5165\u51fd\u6570\n mleftIn (item, index) {\n \/\/\u83b7\u53d6 menuList \u4e2d\u6bcf\u4e2a menuItem \u5b57\u7b26\u4e32\u7684\u957f\u5ea6\n let menuSize = this.menuList.length\n for (let i = 0; i < menuSize; i++) {\n \/\/for \u5faa\u73af,i \u5982\u679c\u5c0f\u4e8e menuSize,\u5219\u7f6e\u4e8e menuItem \u989c\u8272\u4e3a\u7070\u8272,\u5b9e\u73b0\u5207\u6362\u6548\u679c\n this.$refs['test' + i][0].style.backgroundColor = '#f8f8f8'\n }\n \/\/\u8df3\u51fa for \u5faa\u73af,\u7531\u5de6\u4fa7\u79fb\u5411\u53f3\u4fa7\u8be6\u60c5\u9875\u65f6,\u5176 menuItem \u7684\u989c\u8272\u4e3a\u9ec4\u8272\n this.$refs['test' + index][0].style.backgroundColor = 'rgb(255, 242, 0)'\n \/\/\u5c06\u53f3\u4fa7\u6570\u636e\u8bbe\u7f6e\u4e3a item,\u663e\u793a\u6570\u636e\n this.data = item\n },\n \/\/\u9f20\u6807\u8fdb\u5165\u51fd\u6570\n \/\/\u6ce8\u610f: mouseleave:\u662f\u9f20\u6807\u79fb\u51fa\u8be5\u5143\u7d20\u4e4b\u5916,\u5219\u89e6\u53d1 mouseleave \u4e8b\u4ef6\n \/\/ mouseout : \u662f\u5f53\u6307\u9488\u79bb\u5f00\u8be5\u5143\u7d20\u53ca\u5176\u6240\u6709\u540e\u4ee3\u65f6\uff0c\u4f1a\u89e6\u53d1 mouseleave\n \/\/ \u800c\u5f53\u6307\u9488\u79bb\u5f00\u5143\u7d20\u6216\u79bb\u5f00\u5143\u7d20\u7684\u540e\u4ee3\uff08\u5373\u4f7f\u6307\u9488\u4ecd\u5728\u5143\u7d20\u5185\uff09\u65f6\uff0c\u4e5f\u4f1a\u89e6\u53d1 mouseout \u4e8b\u4ef6\n mleftLeave () {\n \/\/\u83b7\u53d6 menuList \u4e2d\u6bcf\u4e2a menuItem \u5b57\u7b26\u4e32\u7684\u957f\u5ea6\n let menuSize = this.menuList.length\n for (let i = 0; i < menuSize; i++) {\n this.$refs['test' + i][0].style.backgroundColor = '#f8f8f8'\n }\n \/\/ \u8df3\u51fa\u5faa\u73af,\u6d4f\u89c8\u5b8c'\u53d1\u73b0',\u9f20\u6807\u79fb\u51fa,\u7f6e\u4e8e\u53f3\u4fa7\u6570\u636e\u4e3a\u7b2c\u4e00\u4e2a\u7cbe\u9009\u6570\u636e\n this.data = this.menuList[0]\n \/\/\u9f20\u6807\u79fb\u51fa\u4e8b\u4ef6,\u7f6e\u4e8e\u7b2c\u4e00\u4e2a menuitem \u4e3a\u9ec4\u8272[\u672a\u5237\u65b0\u65f6\u7684\u8bbe\u7f6e]\n this.$refs['test' + 0][0].style.backgroundColor = 'rgb(255, 242, 0)'\n\n \/\/ this.data = {}\n \/\/ this.$refs['test'+index][0].style.backgroundColor = '#f8f8f8'\n \/\/ console.log('\u6eda\u51fa\u53bb')\n },\n}<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"\u4e0b\u8f7d\u4f9d\u8d56\u901f\u5ea6\u5feb npm install –registry=https:\/\/registry.npm.tao […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[],"class_list":["post-3462","post","type-post","status-publish","format-standard","hentry","category-web"],"_links":{"self":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/3462","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3462"}],"version-history":[{"count":38,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/3462\/revisions"}],"predecessor-version":[{"id":3558,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/3462\/revisions\/3558"}],"wp:attachment":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3462"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=3462"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=3462"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
<div class="h_menu">\n <div class="menu_box">\n <el-cascader-panel :options="findOptions" :props="props"\/>\n <\/div>\n<\/div><\/code><\/pre>\n\/*\u4e8c\u7ea7\u76ee\u5f55*\/\n.topbar .shortcut-links {\n width: 600px;\n margin: 0 auto;\n}\n\n.topbar .shortcut-links > ul > li {\n float: left;\n padding: 13px 20px;\n line-height: 31px;\n font-size: 14px;\n position: relative;\n}\n\n.topbar .shortcut-links > ul > li:hover .h_menu {\n display: block;\n}\n.topbar .shortcut-links > ul > li .h_menu {\n position: absolute;\n left: 0;\n display: none;\n width: 152px;\n margin-top: 13px;\n z-index: 9999;\n}\n.topbar .shortcut-links > ul > li .h_menu .menu_box {\n background: #ffffff;\n width: 152px;\n box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);\n padding: 8px 0 8px 0;\n \/*float: left;*\/\n}\n\n.topbar .shortcut-links > ul > li .h_menu .menu_box >a {\n height: 45px;\n line-height: 45px;\n font-size: 14px;\n padding-left: 20px;\n \/*padding-top: 5px;*\/\n display: block;\n}\n<\/code><\/pre>\nstyle\n\/*\u53d6\u6d88\u8fb9\u6846*\/\n.el-cascader-panel.is-bordered {\n border: none;\n border-radius: 0;\n}\n\n.el-cascader-menu {\n color: #1c1f21;\n font-size: 14px;\n min-width: 152px;\n}\n\n.el-cascader-menu__list {\n padding: 0;\n}\n\n.el-cascader-node.in-active-path, .el-cascader-node.is-active, .el-cascader-node.is-selectable.in-checked-path {\n color: #1c1f21;\n font-weight: normal;\n}\n\/*item \u60ac\u6302\u9ec4\u8272\u80cc\u666f\u5bbd\u95f4\u8ddd*\/\n.el-cascader-node {\n padding-left: 20px;\n height: 45px;\n line-height: 45px;\n}\n\/*\u4e8c\u7ea7\u76ee\u5f55\u7684\u9ad8\u5ea6*\/\n.el-cascader-menu__wrap.el-scrollbar__wrap {\n height: 478px;\n}\n\n.el-cascader-menu:last-child .el-cascader-node {\n padding-right: 0;\n}\n\/*item \u60ac\u6302\u9ec4\u8272\u80cc\u666f*\/\n.el-cascader-node:not(.is-disabled):focus, .el-cascader-node:not(.is-disabled):hover {\n background-color: rgb(255, 242, 0);\n}\n\/*item \u53f3\u8fb9\u7684\u5c0f\u7bad\u5934\u989c\u8272\u6539\u4e3a\u9ec4\u8272[\u9690\u85cf]*\/\n.el-cascader-node:not(.is-disabled):focus, .el-cascader-node:not(.is-disabled):hover .el-icon {\n color: rgb(255, 242, 0);\n}\n\n.el-cascader-node__label {\n padding: 0;\n}\n\n.el-cascader-node__postfix {\n position: absolute;\n right: 0;\n}\n\/*\u6eda\u52a8\u6761\u5230\u9876\u90e8,\u4e0b\u90e8\u7684\u95f4\u8ddd*\/\n.el-scrollbar__bar {\n position: absolute;\n right: 0;\n bottom: 0;\n z-index: 1;\n border-radius: 4px;\n}<\/code><\/pre>\n<\/p>\n<\/p><\/noscript>\n <el-cascader-panel :options="findOptions" :props="props"\/><\/code><\/pre>\n\/*\u4e8c\u7ea7\u76ee\u5f55\u7684\u9ad8\u5ea6*\/\n\/deep\/.el-cascader-menu__wrap.el-scrollbar__wrap {\n height: 490px;\n}\n\/*item \u60ac\u6302\u9ec4\u8272\u80cc\u666f\u5bbd\u95f4\u8ddd*\/\n\/deep\/.el-cascader-node {\nheight: 45px;\n width: 165px;\n padding: 0;\n margin-left: 10px;\n}\n\/*item \u60ac\u6302\u9ec4\u8272\u80cc\u666f*\/\n\/deep\/ .el-cascader-node:not(.is-disabled):hover {\n background: #fff200;\n border-radius: 8px;\n}\n\/*\u70b9\u51fb\u540e\u6539\u53d8\u989c\u8272,\u7c97\u7ec6\u53d6\u6d88\u70b9\u51fb\u6548\u679c*\/\n\/deep\/.el-cascader-node.is-active{\ncolor: #222222;\n font-weight: normal;\n}\n\/*item \u5de6\u8fb9\u6709\u4e2a\u5c0f\u52fe\u221a*\/\n\/deep\/.el-icon svg {\n height: 0;\n width: 0;\n}\n\/*\u53d1\u73b0\u7684\u4e8c\u7ea7\u76ee\u5f55\u6d88\u5931*\/\n.el-cascader-panel{\n display: none;\n}\n\/*\u53d6\u6d88\u8fb9\u6846*\/\n.el-cascader-panel.is-bordered {\n border: none;\n}\n\/*\u60ac\u6302'\u53d1\u73b0'\u76ee\u5f55,\u51fa\u73b0\u4e8c\u7ea7\u76ee\u5f55*\/\n.topbar .shortcut-links > ul > li:nth-child(2):hover .el-cascader-panel{\n display: block;\n background-color: #f8f8f8;\n border-radius: 8px 0 8px 8px;\n}<\/code><\/pre>\n\u626b\u4e8c\u7ef4\u7801\u767b\u5f55\u548c\u5bc6\u7801\u767b\u5f55\u9875\u9762\u7684\u5207\u6362<\/h3>\n@click="handleChangeToLogin()"<\/code><\/pre>\n handleChangeToLogin () {\n const qr = document.getElementById('qr_code')\n const login = document.getElementById('login')\n qr.style.display = 'none';\n if (qr.style.display === 'none') {\n login.style.display = 'block'\n }\n },\n handleChangeToQr () {\n const qr = document.getElementById('qr_code')\n const login = document.getElementById('login')\n login.style.display = 'none'\n if (login.style.display === 'none') {\n qr.style.display = 'block'\n }\n }<\/code><\/pre>\n\u767b\u5f55\u6846\u7684\u6ed1\u5757\u9a8c\u8bc1<\/h3>\n<\/p>\n<\/p><\/noscript>\n<\/slider><\/p>\n<template>\n <div ref="dragDiv" class="drag">\n <div class="drag_bg"><\/div>\n <div class="drag_text">{{ confirmWords }}<\/div>\n <div ref="moveDiv" :class="{'handler_ok_bg':confirmSuccess}" class="handler handler_bg"\n style="position: absolute;top: 0;left: 0;" @mousedown="mouseDownFn($event)"><\/div>\n <\/div>\n<\/template>\n\n<script>\nexport default {\n data () {\n return {\n beginClientX: 0, \/*\u8ddd\u79bb\u5c4f\u5e55\u5de6\u7aef\u8ddd\u79bb*\/\n mouseMoveState: false, \/*\u89e6\u53d1\u62d6\u52a8\u72b6\u6001 \u5224\u65ad*\/\n maxWidth: '', \/*\u62d6\u52a8\u6700\u5927\u5bbd\u5ea6\uff0c\u4f9d\u636e\u6ed1\u5757\u5bbd\u5ea6\u7b97\u51fa\u6765\u7684*\/\n confirmWords: '\u8bf7\u6309\u4f4f\u6ed1\u5757,\u62d6\u52a8\u5230\u6700\u53f3\u8fb9', \/*\u6ed1\u5757\u6587\u5b57*\/\n confirmSuccess: false \/*\u9a8c\u8bc1\u6210\u529f\u5224\u65ad*\/\n }\n },\n methods: {\n \/\/mousedown \u4e8b\u4ef6\n mouseDownFn: function (e) {\n if (!this.confirmSuccess) {\n e.preventDefault && e.preventDefault() \/\/\u963b\u6b62\u6587\u5b57\u9009\u4e2d\u7b49 \u6d4f\u89c8\u5668\u9ed8\u8ba4\u4e8b\u4ef6\n this.mouseMoveState = true\n this.beginClientX = e.clientX\n }\n },\n \/\/\u9a8c\u8bc1\u6210\u529f\u51fd\u6570\n successFunction () {\n this.confirmSuccess = true\n this.confirmWords = '\u9a8c\u8bc1\u901a\u8fc7'\n if (window.addEventListener) {\n document.getElementsByTagName('html')[0].removeEventListener('mousemove', this.mouseMoveFn)\n document.getElementsByTagName('html')[0].removeEventListener('mouseup', this.moseUpFn)\n } else {\n document.getElementsByTagName('html')[0].removeEventListener('mouseup', () => {\n })\n }\n document.getElementsByClassName('drag_text')[0].style.color = '#fff'\n document.getElementsByClassName('handler')[0].style.left = this.maxWidth + 'px'\n document.getElementsByClassName('drag_bg')[0].style.width = this.maxWidth + 'px'\n },\n \/\/mousemove \u4e8b\u4ef6\n mouseMoveFn (e) {\n if (this.mouseMoveState) {\n let width = e.clientX - this.beginClientX\n if (width > 0 && width <= this.maxWidth) {\n document.getElementsByClassName('handler')[0].style.left = width + 'px'\n document.getElementsByClassName('drag_bg')[0].style.width = width + 'px'\n } else if (width > this.maxWidth) {\n this.successFunction()\n }\n }\n },\n \/\/mouseup \u4e8b\u4ef6\n moseUpFn (e) {\n this.mouseMoveState = false\n var width = e.clientX - this.beginClientX\n if (width < this.maxWidth) {\n document.getElementsByClassName('handler')[0].style.left = 0 + 'px'\n document.getElementsByClassName('drag_bg')[0].style.width = 0 + 'px'\n }\n }\n },\n mounted () {\n this.maxWidth = this.$refs.dragDiv.clientWidth - this.$refs.moveDiv.clientWidth\n document.getElementsByTagName('html')[0].addEventListener('mousemove', this.mouseMoveFn)\n document.getElementsByTagName('html')[0].addEventListener('mouseup', this.moseUpFn)\n }\n}\n<\/script>\n<style scoped>\n.drag {\n position: relative;\n background-color: #e8e8e8;\n width: 100%;\n height: 32px;\n line-height: 32px;\n text-align: center;\n border: 1px solid #ccc;\n\n}\n\n.handler {\n width: 40px;\n height: 32px;\n border: 1px solid #ccc;\n cursor: move;\n margin-top: -1px;\n margin-left: -1px;\n}\n\n.handler_bg {\n background: #fff url('..\/assets\/images\/arrow-r.png') no-repeat center;\n background-size: 25px;\n}\n\n.handler_ok_bg {\n background: #fff url('..\/assets\/images\/\u221a.png') no-repeat center;\n background-size: 18px;\n}\n\n.drag_bg {\n background-color: #7ac23c;\n height: 32px;\n width: 0;\n}\n\n.drag_text {\n position: absolute;\n top: 0;\n width: 100%;\n font-size: 12px;\n color: #706f6f;\n}\n\n<\/style>\n<\/code><\/pre>\nel-input \u805a\u7126\u540e\u80cc\u666f\u53d8\u767d<\/h3>\n<\/p>\n<\/p><\/noscript>\n.el-input__wrapper.is-focus {\n box-shadow: 0 0 0 1px #dcdfe6 inset;\n background-color: #fff;\n}<\/code><\/pre>\nel-input placeholder \u989c\u8272\u8bbe\u7f6e<\/h3>\n.el-input__inner::placeholder{\n color: #666666;\n}<\/code><\/pre>\n\u5224\u65ad el-checked \u662f\u5426\u9009\u4e2d,\u672a\u9009\u4e2d\u5219\u63d0\u793a\u8bf7\u52fe\u9009<\/h3>\n<\/p>\n<\/p><\/noscript>\nexport default {\nmounted() {\n const pleaseFit=document.getElementById('pleaseFit');\n $(".el-checkbox input").change(() => {\n if ($(".el-checkbox input[type='checkbox']").is(':checked') == true) {\n pleaseFit.style.display='none'\n } else {\n pleaseFit.style.display='block'\n }\n })\n }\n }<\/code><\/pre>\nel-input \u5728 style \u5168\u5c40\u6837\u5f0f,\u4f1a\u5f71\u54cd\u5230\u5176\u4ed6\u4e0d\u7b26\u5408\u8be5\u6837\u5f0f\u7684\u4f4d\u7f6e<\/h3>\n\n\u53ef\u4ee5\u5728 style scoped> \u5199,\u52a0\u4e0a\/deep\/<\/li>\n<\/ul>\n<\/p>\n<\/p><\/noscript>\n\/deep\/ .el-input__wrapper {\n box-shadow: 0 0 0 0 inset;\n background-color: rgb(255, 242, 0);\n}<\/code><\/pre>\nel-carousel \u8d70\u9a6c\u706f\u4fee\u6539 Carousel \u5de6\u53f3\u4e24\u4fa7\u7bad\u5934\u5b57\u4f53\u5927\u5c0f<\/h3>\n\/deep\/.el-carousel__arrow i {\n font-size: 29px !important;\n }<\/code><\/pre>\n\u9875\u9762\u5411\u4e0b\u6ed1\u52a8\u5bfc\u822a\u680f\u56fa\u5b9a<\/h3>\n<\/p>\n<\/p><\/noscript>\n.main_nav_fixed {\n position: sticky;\n top: 0;\n z-index: 999;\n}<\/code><\/pre>\n\u56fa\u5b9a\u5728\u53f3\u65b9\u7684,\u60ac\u6302\u51fa\u73b0\u4e8c\u7ef4\u7801<\/h3>\n<\/p>\n<\/p><\/noscript>\n<div class="share_box">\n <img src="..\/..\/assets\/images\/share_qr.png" alt=""\/>\n <\/div><\/code><\/pre>\n.share_box{\n width: 70px;\n height: 131px;\n top: 300px;\n right: 10px;\n cursor: pointer;\n position: fixed;\n z-index: 999;\n background: url("..\/..\/assets\/images\/share_wx.jpg") no-repeat;\n background-size: 100% 100%;\n}\n.share_box img{\n width: 100px;\n height: 100px;\n display: none;\n}\n.share_box:hover img {\n position: absolute;\n top: 50%;\n margin-top: -50px;\n right: 82px;\n display: block !important;\n}<\/code><\/pre>\nnth-child(n)\u6307\u7684\u662f\u5728\u7236\u5143\u7d20\u4e2d\u6240\u6709\u7684\u5143\u7d20\u7684\u987a\u5e8f<\/h3>\n\n\u5199\u4ee3\u7801\u8981\u6839\u636e\u76d2\u5b50\u4ee5\u53ca\u5185\u5bb9\u5199<\/li>\nbottom\uff1a0\uff1b\u8981\u76f8\u5bf9\u4e8e\u7236\u5143\u7d20\u7684 height \u5b9e\u73b0\uff0c\u5982\u679c\u7236\u7236\u5143\u7d20\u7684 height \u5927\u4e8e\u7236\u5143\u7d20\u7684 height\uff0c\uff0c\u5219\u4f1a\u6309\u7167\u7236\u7236\u5143\u7d20\u7684 height \u6765\u5b9e\u73b0 bottom\uff1a0\uff1b\u6765\u5b9e\u73b0\u3002\u3010\u9002\u5f53\u5220\u9664\u7236\u7236\u5143\u7d20\u7684 height\uff0c\u4e00\u677f\u5757\u901a\u5e38\u4e0d\u7528\u8bbe\u7f6e\u603b height\u3011<\/li>\n<\/ul>\n\u60ac\u6302\u56fe\u7247\u7f13\u7f13\u653e\u5927\u7684\u52a8\u753b\u6548\u679c<\/h3>\n<\/p>\n<\/p><\/noscript>\n.gc_project .item_img > img {\n width: 100%;\n height: 100%;\n transition: all 0.3s;\n}\n.gc_project .item_img > img:hover {\n transform: scale(1.05);\n box-shadow: rgb(0 0 0 \/ 23%) 0 4px 14px 0;\n}<\/code><\/pre>\n\u6eda\u52a8\u6761\u4fee\u6539<\/h3>\n<\/p>\n<\/p><\/noscript>\n.mleft::-webkit-scrollbar{\n width: 6px;\n background-color: #f8f8f8;\n\n}\n.mleft::-webkit-scrollbar-thumb{\n width: 6px;\n background-color: #adacac;\n border-radius: 4px;\n}<\/code><\/pre>\nhead \u533a '\u53d1\u73b0' \u5b9e\u73b0\u4ea4\u4e92\u6548\u679c [\u8be5\u9996\u9875\u6700\u607c\u706b\u7684]<\/h2>\n<\/p>\n<\/p><\/noscript>\ntodo head \u533a'\u53d1\u73b0'\u4ea4\u4e92\u5b9e\u73b0\u601d\u8def:<\/h3>\n\n\u2460\u89c2\u5bdf\u8be5\u533a\u7ed3\u6784,\u4e00\u4e2a\u5927\u6a21\u5757,\u5176\u4e2d\u5206\u4e3a\u5de6\u4e2d\u53f3\u4e09\u4e2a\u6a21\u5757,\u5e76\u4f9d\u6b21\u5199\u51fa\u4e09\u4e2a\u6a21\u5757\u7684\u4ee3\u7801,<\/li>\n\u2461\u5de6\u4fa7\u533a\u57df: \u8981\u5c55\u793a\u7684\u6548\u679c\u6709: \u9f20\u6807\u4e0a\u4e0b\u79fb\u52a8,\u6240\u7ecf\u7684 menuItem \u4f1a\u5c55\u73b0\u9ec4\u8272\u80cc\u666f, \u5219\u5f15\u7528 vue \u7684 ref \u5c5e\u6027\u5bf9 DOM \u5143\u7d20\u8fdb\u884c\u52a8\u6001\u7ed1\u5b9a.\n\n\u6ce8\u610f:ref \u9700\u8981\u5728 dom \u6e32\u67d3\u5b8c\u6210\u540e\u624d\u4f1a\u6709,\u5728\u4f7f\u7528\u7684\u65f6\u5019\u786e\u4fdd dom \u5df2\u7ecf\u6e32\u67d3\u5b8c\u6210, \u6bd4\u5982\u5728\u751f\u547d\u5468\u671f mounted(){}\u94a9\u5b50\u4e2d\u8c03\u7528. this.$refs.xxx:\u51cf\u5c11\u83b7\u53d6 dom \u8282\u70b9\u7684\u6d88\u8017<\/li>\n<\/ul>\n<\/li>\n\u2462\u5de6\u4fa7\u533a\u57df\u8fc7\u6ee4\u5230\u53f3\u4fa7\u533a\u57df,\u5c55\u793a\u5bf9\u5e94\u7684\u8be6\u60c5\u9875: mleftIn(item,index)\u51fd\u6570\u901a\u8fc7\u4f20\u8f93 v-for \u5faa\u73af\u4e2d\u6570\u7ec4 menuList \u7684 item \u6bcf\u4e00\u9879\u4e3a\u5a92\u4ecb, \u800c\u6570\u636e\u4e2d menuList \u4e2d\u5305\u542b\u5de6\u4fa7\u6570\u636e menuItem \u4e0e\u53f3\u4fa7\u6bcf\u4e00\u9875\u7684\u6807\u9898 menu \u76f8\u540c, \u4ece\u800c\u5c06\u5de6\u4fa7\u548c\u53f3\u4fa7\u6570\u636e\u7ed1\u5b9a, \u6545\u800c\u5f62\u6210\u4ece\u5de6\u4fa7\u8fc7\u6ee4\u5230\u53f3\u4fa7\u533a\u57df\u662f\u56fa\u5b9a\u7684\u8be6\u60c5\u9875\u5185\u5bb9.<\/li>\n\u2463\u9875\u9762\u7b2c\u4e8c\u6b21\u672a\u5237\u65b0\u4e4b\u524d(\u9996\u6b21\u8fdb\u5165\u9875\u9762\u6e32\u67d3), \u9f20\u6807\u60ac\u6302'\u53d1\u73b0',\u8981\u51fa\u73b0\u7b2c\u4e00\u4e2a'\u7cbe\u9009'\u8be6\u60c5\u9875\u53ca'\u7cbe\u9009'item \u80cc\u666f\u53d8\u9ec4: \u9f20\u6807\u79fb\u51fa\u8be5\u5143\u7d20[\u4e8c\u7ea7\u76ee\u5f55\u6574\u4e2a\u5927\u6a21\u5757]\u4e4b\u5916,\u5219\u89e6\u53d1 mouseleave \u4e8b\u4ef6,\u521d\u59cb\u5316\u6570\u636e.<\/li>\n\u2464\u7b2c\u4e8c\u6b21\u9875\u9762\u5237\u65b0\u4e4b\u540e,\u521d\u59cb\u5316\u6570\u636e: \u91c7\u7528 mounted \u751f\u547d\u5468\u671f[\u6e32\u67d3\u6210 html \u540e\u8c03\u7528]: \u4f7f\u9f20\u6807\u60ac\u6302'\u53d1\u73b0',\u7b2c\u4e00\u4e2a menu-item \u663e\u793a\u9ec4\u8272<\/li>\n<\/ul>\n <li class="find">\n <a href="#">\u53d1\u73b0<\/a>\n <div class="h_menu" @mouseleave="mleftLeave()">\n <div class="menu_box mleft">\n <!-- <a href="">\u7cbe\u9009<\/a>-->\n <a v-for="(item,index) in menuList" :key="index" :ref="'test'+index" href="javascript:;"\n @mouseover="mleftIn(item,index)">{{ item.menu }}<\/a>\n <!-- <el-cascader-panel :options="findOptions" :props="props" \/>-->\n <\/div>\n <div class="mright">\n <div class="cate-box">\n <a class="cate-title" href="">\n <img :src="data.url" alt="">\n <span>{{ data.menu }}<\/span>\n <\/a>\n <div class="subCate">\n <a v-for="(itemOne) in data.items" :key="itemOne">{{ itemOne.text }}<\/a>\n <\/div>\n <\/div>\n <\/div>\n <div class="right_bar">\n <div class="icons">\n <a>\n <span class="icon-box">\n <span class="tangle-1"><\/span>\n <span class="tangle-2"><\/span>\n <i class="ani-star"><\/i>\n <span class="tangle-3"><\/span>\n <\/span>\n <span class="icon-text">\u6536\u85cf\u5939<\/span>\n <\/a>\n <a>\n <img alt="" src="..\/assets\/images\/icon-header-discover-designer.png">\n <span>\u8bbe\u8ba1\u5e08<\/span>\n <\/a>\n <a>\n <img alt="" src="..\/assets\/images\/icon-header-discover-focus.png">\n <span>\u699c\u5355<\/span>\n <!-- <sup class="subNavDot"><\/sup>-->\n <\/a>\n <\/div>\n <div class="ad_box">\n\n <\/div>\n <\/div>\n <\/div>\n <\/li><\/code><\/pre>\n data: {},\n menuList: [\n {\n menu: '\u7cbe\u9009',\n url: require('..\/assets\/images\/zuanshi.png'),\n items: [\n { text: '\u8fd0\u8425\u8bbe\u8ba1' },\n { text: '\u5305\u88c5' },\n { text: '\u52a8\u753b\/\u5f71\u89c6' },\n { text: '\u4eba\u50cf\u6444\u5f71' },\n { text: '\u5546\u4e1a\u63d2\u753b' },\n { text: '\u7535\u5546' },\n { text: 'APP \u754c\u9762' },\n { text: '\u827a\u672f\u63d2\u753b' },\n { text: '\u5bb6\u88c5\u8bbe\u8ba1' },\n { text: '\u6d77\u62a5' },\n { text: '\u6587\u7ae0' }\n ]\n },\n { menu: '\u5e73\u9762' },\n { menu: 'UI' },\n { menu: '\u7f51\u9875' },\n { menu: '\u63d2\u753b' },\n { menu: '\u52a8\u6f2b' },\n { menu: '\u6444\u5f71' },\n { menu: '\u7a7a\u95f4' },\n { menu: '\u5de5\u4e1a\/\u4ea7\u54c1' },\n { menu: '\u4e09\u7ef4' },\n { menu: '\u5f71\u89c6' },\n { menu: '\u624b\u5de5\u827a' },\n { menu: '\u7eaf\u827a\u672f' },\n { menu: '\u670d\u88c5' },\n { menu: '\u5176\u4ed6' }\n ],<\/code><\/pre>\n \/\/\u6e32\u67d3\u6210 html \u4e4b\u524d\u8c03\u7528,\u521d\u59cb\u5316\u4e00\u4e9b\u5c5e\u6027\u503c [\u9f20\u6807\u60ac\u6302'\u53d1\u73b0',\u5c31\u51fa\u73b0\u7b2c\u4e00\u4e2a\u7cbe\u9009\u9875\u9762]\n created () {\n this.data = this.menuList[0]\n },\n \/\/\u6e32\u67d3\u6210 html \u540e\u8c03\u7528 [\u9f20\u6807\u60ac\u6302'\u53d1\u73b0',\u7b2c\u4e00\u4e2a menu-item \u663e\u793a\u9ec4\u8272](\u9875\u9762\u5237\u65b0\u4e86\u4e4b\u540e\u7684)\n mounted () {\n this.$refs['test' + 0][0].style.backgroundColor = 'rgb(255, 242, 0)'\n },\n methods: {\n \/\/\u9f20\u6807\u8fdb\u5165\u51fd\u6570\n mleftIn (item, index) {\n \/\/\u83b7\u53d6 menuList \u4e2d\u6bcf\u4e2a menuItem \u5b57\u7b26\u4e32\u7684\u957f\u5ea6\n let menuSize = this.menuList.length\n for (let i = 0; i < menuSize; i++) {\n \/\/for \u5faa\u73af,i \u5982\u679c\u5c0f\u4e8e menuSize,\u5219\u7f6e\u4e8e menuItem \u989c\u8272\u4e3a\u7070\u8272,\u5b9e\u73b0\u5207\u6362\u6548\u679c\n this.$refs['test' + i][0].style.backgroundColor = '#f8f8f8'\n }\n \/\/\u8df3\u51fa for \u5faa\u73af,\u7531\u5de6\u4fa7\u79fb\u5411\u53f3\u4fa7\u8be6\u60c5\u9875\u65f6,\u5176 menuItem \u7684\u989c\u8272\u4e3a\u9ec4\u8272\n this.$refs['test' + index][0].style.backgroundColor = 'rgb(255, 242, 0)'\n \/\/\u5c06\u53f3\u4fa7\u6570\u636e\u8bbe\u7f6e\u4e3a item,\u663e\u793a\u6570\u636e\n this.data = item\n },\n \/\/\u9f20\u6807\u8fdb\u5165\u51fd\u6570\n \/\/\u6ce8\u610f: mouseleave:\u662f\u9f20\u6807\u79fb\u51fa\u8be5\u5143\u7d20\u4e4b\u5916,\u5219\u89e6\u53d1 mouseleave \u4e8b\u4ef6\n \/\/ mouseout : \u662f\u5f53\u6307\u9488\u79bb\u5f00\u8be5\u5143\u7d20\u53ca\u5176\u6240\u6709\u540e\u4ee3\u65f6\uff0c\u4f1a\u89e6\u53d1 mouseleave\n \/\/ \u800c\u5f53\u6307\u9488\u79bb\u5f00\u5143\u7d20\u6216\u79bb\u5f00\u5143\u7d20\u7684\u540e\u4ee3\uff08\u5373\u4f7f\u6307\u9488\u4ecd\u5728\u5143\u7d20\u5185\uff09\u65f6\uff0c\u4e5f\u4f1a\u89e6\u53d1 mouseout \u4e8b\u4ef6\n mleftLeave () {\n \/\/\u83b7\u53d6 menuList \u4e2d\u6bcf\u4e2a menuItem \u5b57\u7b26\u4e32\u7684\u957f\u5ea6\n let menuSize = this.menuList.length\n for (let i = 0; i < menuSize; i++) {\n this.$refs['test' + i][0].style.backgroundColor = '#f8f8f8'\n }\n \/\/ \u8df3\u51fa\u5faa\u73af,\u6d4f\u89c8\u5b8c'\u53d1\u73b0',\u9f20\u6807\u79fb\u51fa,\u7f6e\u4e8e\u53f3\u4fa7\u6570\u636e\u4e3a\u7b2c\u4e00\u4e2a\u7cbe\u9009\u6570\u636e\n this.data = this.menuList[0]\n \/\/\u9f20\u6807\u79fb\u51fa\u4e8b\u4ef6,\u7f6e\u4e8e\u7b2c\u4e00\u4e2a menuitem \u4e3a\u9ec4\u8272[\u672a\u5237\u65b0\u65f6\u7684\u8bbe\u7f6e]\n this.$refs['test' + 0][0].style.backgroundColor = 'rgb(255, 242, 0)'\n\n \/\/ this.data = {}\n \/\/ this.$refs['test'+index][0].style.backgroundColor = '#f8f8f8'\n \/\/ console.log('\u6eda\u51fa\u53bb')\n },\n}<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"\u4e0b\u8f7d\u4f9d\u8d56\u901f\u5ea6\u5feb npm install –registry=https:\/\/registry.npm.tao […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[],"class_list":["post-3462","post","type-post","status-publish","format-standard","hentry","category-web"],"_links":{"self":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/3462","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3462"}],"version-history":[{"count":38,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/3462\/revisions"}],"predecessor-version":[{"id":3558,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/3462\/revisions\/3558"}],"wp:attachment":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3462"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=3462"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=3462"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
\/*\u4e8c\u7ea7\u76ee\u5f55*\/\n.topbar .shortcut-links {\n width: 600px;\n margin: 0 auto;\n}\n\n.topbar .shortcut-links > ul > li {\n float: left;\n padding: 13px 20px;\n line-height: 31px;\n font-size: 14px;\n position: relative;\n}\n\n.topbar .shortcut-links > ul > li:hover .h_menu {\n display: block;\n}\n.topbar .shortcut-links > ul > li .h_menu {\n position: absolute;\n left: 0;\n display: none;\n width: 152px;\n margin-top: 13px;\n z-index: 9999;\n}\n.topbar .shortcut-links > ul > li .h_menu .menu_box {\n background: #ffffff;\n width: 152px;\n box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);\n padding: 8px 0 8px 0;\n \/*float: left;*\/\n}\n\n.topbar .shortcut-links > ul > li .h_menu .menu_box >a {\n height: 45px;\n line-height: 45px;\n font-size: 14px;\n padding-left: 20px;\n \/*padding-top: 5px;*\/\n display: block;\n}\n<\/code><\/pre>\nstyle\n\/*\u53d6\u6d88\u8fb9\u6846*\/\n.el-cascader-panel.is-bordered {\n border: none;\n border-radius: 0;\n}\n\n.el-cascader-menu {\n color: #1c1f21;\n font-size: 14px;\n min-width: 152px;\n}\n\n.el-cascader-menu__list {\n padding: 0;\n}\n\n.el-cascader-node.in-active-path, .el-cascader-node.is-active, .el-cascader-node.is-selectable.in-checked-path {\n color: #1c1f21;\n font-weight: normal;\n}\n\/*item \u60ac\u6302\u9ec4\u8272\u80cc\u666f\u5bbd\u95f4\u8ddd*\/\n.el-cascader-node {\n padding-left: 20px;\n height: 45px;\n line-height: 45px;\n}\n\/*\u4e8c\u7ea7\u76ee\u5f55\u7684\u9ad8\u5ea6*\/\n.el-cascader-menu__wrap.el-scrollbar__wrap {\n height: 478px;\n}\n\n.el-cascader-menu:last-child .el-cascader-node {\n padding-right: 0;\n}\n\/*item \u60ac\u6302\u9ec4\u8272\u80cc\u666f*\/\n.el-cascader-node:not(.is-disabled):focus, .el-cascader-node:not(.is-disabled):hover {\n background-color: rgb(255, 242, 0);\n}\n\/*item \u53f3\u8fb9\u7684\u5c0f\u7bad\u5934\u989c\u8272\u6539\u4e3a\u9ec4\u8272[\u9690\u85cf]*\/\n.el-cascader-node:not(.is-disabled):focus, .el-cascader-node:not(.is-disabled):hover .el-icon {\n color: rgb(255, 242, 0);\n}\n\n.el-cascader-node__label {\n padding: 0;\n}\n\n.el-cascader-node__postfix {\n position: absolute;\n right: 0;\n}\n\/*\u6eda\u52a8\u6761\u5230\u9876\u90e8,\u4e0b\u90e8\u7684\u95f4\u8ddd*\/\n.el-scrollbar__bar {\n position: absolute;\n right: 0;\n bottom: 0;\n z-index: 1;\n border-radius: 4px;\n}<\/code><\/pre>\n<\/p>\n<\/p><\/noscript>\n <el-cascader-panel :options="findOptions" :props="props"\/><\/code><\/pre>\n\/*\u4e8c\u7ea7\u76ee\u5f55\u7684\u9ad8\u5ea6*\/\n\/deep\/.el-cascader-menu__wrap.el-scrollbar__wrap {\n height: 490px;\n}\n\/*item \u60ac\u6302\u9ec4\u8272\u80cc\u666f\u5bbd\u95f4\u8ddd*\/\n\/deep\/.el-cascader-node {\nheight: 45px;\n width: 165px;\n padding: 0;\n margin-left: 10px;\n}\n\/*item \u60ac\u6302\u9ec4\u8272\u80cc\u666f*\/\n\/deep\/ .el-cascader-node:not(.is-disabled):hover {\n background: #fff200;\n border-radius: 8px;\n}\n\/*\u70b9\u51fb\u540e\u6539\u53d8\u989c\u8272,\u7c97\u7ec6\u53d6\u6d88\u70b9\u51fb\u6548\u679c*\/\n\/deep\/.el-cascader-node.is-active{\ncolor: #222222;\n font-weight: normal;\n}\n\/*item \u5de6\u8fb9\u6709\u4e2a\u5c0f\u52fe\u221a*\/\n\/deep\/.el-icon svg {\n height: 0;\n width: 0;\n}\n\/*\u53d1\u73b0\u7684\u4e8c\u7ea7\u76ee\u5f55\u6d88\u5931*\/\n.el-cascader-panel{\n display: none;\n}\n\/*\u53d6\u6d88\u8fb9\u6846*\/\n.el-cascader-panel.is-bordered {\n border: none;\n}\n\/*\u60ac\u6302'\u53d1\u73b0'\u76ee\u5f55,\u51fa\u73b0\u4e8c\u7ea7\u76ee\u5f55*\/\n.topbar .shortcut-links > ul > li:nth-child(2):hover .el-cascader-panel{\n display: block;\n background-color: #f8f8f8;\n border-radius: 8px 0 8px 8px;\n}<\/code><\/pre>\n\u626b\u4e8c\u7ef4\u7801\u767b\u5f55\u548c\u5bc6\u7801\u767b\u5f55\u9875\u9762\u7684\u5207\u6362<\/h3>\n@click="handleChangeToLogin()"<\/code><\/pre>\n handleChangeToLogin () {\n const qr = document.getElementById('qr_code')\n const login = document.getElementById('login')\n qr.style.display = 'none';\n if (qr.style.display === 'none') {\n login.style.display = 'block'\n }\n },\n handleChangeToQr () {\n const qr = document.getElementById('qr_code')\n const login = document.getElementById('login')\n login.style.display = 'none'\n if (login.style.display === 'none') {\n qr.style.display = 'block'\n }\n }<\/code><\/pre>\n\u767b\u5f55\u6846\u7684\u6ed1\u5757\u9a8c\u8bc1<\/h3>\n<\/p>\n<\/p><\/noscript>\n<\/slider><\/p>\n<template>\n <div ref="dragDiv" class="drag">\n <div class="drag_bg"><\/div>\n <div class="drag_text">{{ confirmWords }}<\/div>\n <div ref="moveDiv" :class="{'handler_ok_bg':confirmSuccess}" class="handler handler_bg"\n style="position: absolute;top: 0;left: 0;" @mousedown="mouseDownFn($event)"><\/div>\n <\/div>\n<\/template>\n\n<script>\nexport default {\n data () {\n return {\n beginClientX: 0, \/*\u8ddd\u79bb\u5c4f\u5e55\u5de6\u7aef\u8ddd\u79bb*\/\n mouseMoveState: false, \/*\u89e6\u53d1\u62d6\u52a8\u72b6\u6001 \u5224\u65ad*\/\n maxWidth: '', \/*\u62d6\u52a8\u6700\u5927\u5bbd\u5ea6\uff0c\u4f9d\u636e\u6ed1\u5757\u5bbd\u5ea6\u7b97\u51fa\u6765\u7684*\/\n confirmWords: '\u8bf7\u6309\u4f4f\u6ed1\u5757,\u62d6\u52a8\u5230\u6700\u53f3\u8fb9', \/*\u6ed1\u5757\u6587\u5b57*\/\n confirmSuccess: false \/*\u9a8c\u8bc1\u6210\u529f\u5224\u65ad*\/\n }\n },\n methods: {\n \/\/mousedown \u4e8b\u4ef6\n mouseDownFn: function (e) {\n if (!this.confirmSuccess) {\n e.preventDefault && e.preventDefault() \/\/\u963b\u6b62\u6587\u5b57\u9009\u4e2d\u7b49 \u6d4f\u89c8\u5668\u9ed8\u8ba4\u4e8b\u4ef6\n this.mouseMoveState = true\n this.beginClientX = e.clientX\n }\n },\n \/\/\u9a8c\u8bc1\u6210\u529f\u51fd\u6570\n successFunction () {\n this.confirmSuccess = true\n this.confirmWords = '\u9a8c\u8bc1\u901a\u8fc7'\n if (window.addEventListener) {\n document.getElementsByTagName('html')[0].removeEventListener('mousemove', this.mouseMoveFn)\n document.getElementsByTagName('html')[0].removeEventListener('mouseup', this.moseUpFn)\n } else {\n document.getElementsByTagName('html')[0].removeEventListener('mouseup', () => {\n })\n }\n document.getElementsByClassName('drag_text')[0].style.color = '#fff'\n document.getElementsByClassName('handler')[0].style.left = this.maxWidth + 'px'\n document.getElementsByClassName('drag_bg')[0].style.width = this.maxWidth + 'px'\n },\n \/\/mousemove \u4e8b\u4ef6\n mouseMoveFn (e) {\n if (this.mouseMoveState) {\n let width = e.clientX - this.beginClientX\n if (width > 0 && width <= this.maxWidth) {\n document.getElementsByClassName('handler')[0].style.left = width + 'px'\n document.getElementsByClassName('drag_bg')[0].style.width = width + 'px'\n } else if (width > this.maxWidth) {\n this.successFunction()\n }\n }\n },\n \/\/mouseup \u4e8b\u4ef6\n moseUpFn (e) {\n this.mouseMoveState = false\n var width = e.clientX - this.beginClientX\n if (width < this.maxWidth) {\n document.getElementsByClassName('handler')[0].style.left = 0 + 'px'\n document.getElementsByClassName('drag_bg')[0].style.width = 0 + 'px'\n }\n }\n },\n mounted () {\n this.maxWidth = this.$refs.dragDiv.clientWidth - this.$refs.moveDiv.clientWidth\n document.getElementsByTagName('html')[0].addEventListener('mousemove', this.mouseMoveFn)\n document.getElementsByTagName('html')[0].addEventListener('mouseup', this.moseUpFn)\n }\n}\n<\/script>\n<style scoped>\n.drag {\n position: relative;\n background-color: #e8e8e8;\n width: 100%;\n height: 32px;\n line-height: 32px;\n text-align: center;\n border: 1px solid #ccc;\n\n}\n\n.handler {\n width: 40px;\n height: 32px;\n border: 1px solid #ccc;\n cursor: move;\n margin-top: -1px;\n margin-left: -1px;\n}\n\n.handler_bg {\n background: #fff url('..\/assets\/images\/arrow-r.png') no-repeat center;\n background-size: 25px;\n}\n\n.handler_ok_bg {\n background: #fff url('..\/assets\/images\/\u221a.png') no-repeat center;\n background-size: 18px;\n}\n\n.drag_bg {\n background-color: #7ac23c;\n height: 32px;\n width: 0;\n}\n\n.drag_text {\n position: absolute;\n top: 0;\n width: 100%;\n font-size: 12px;\n color: #706f6f;\n}\n\n<\/style>\n<\/code><\/pre>\nel-input \u805a\u7126\u540e\u80cc\u666f\u53d8\u767d<\/h3>\n<\/p>\n<\/p><\/noscript>\n.el-input__wrapper.is-focus {\n box-shadow: 0 0 0 1px #dcdfe6 inset;\n background-color: #fff;\n}<\/code><\/pre>\nel-input placeholder \u989c\u8272\u8bbe\u7f6e<\/h3>\n.el-input__inner::placeholder{\n color: #666666;\n}<\/code><\/pre>\n\u5224\u65ad el-checked \u662f\u5426\u9009\u4e2d,\u672a\u9009\u4e2d\u5219\u63d0\u793a\u8bf7\u52fe\u9009<\/h3>\n<\/p>\n<\/p><\/noscript>\nexport default {\nmounted() {\n const pleaseFit=document.getElementById('pleaseFit');\n $(".el-checkbox input").change(() => {\n if ($(".el-checkbox input[type='checkbox']").is(':checked') == true) {\n pleaseFit.style.display='none'\n } else {\n pleaseFit.style.display='block'\n }\n })\n }\n }<\/code><\/pre>\nel-input \u5728 style \u5168\u5c40\u6837\u5f0f,\u4f1a\u5f71\u54cd\u5230\u5176\u4ed6\u4e0d\u7b26\u5408\u8be5\u6837\u5f0f\u7684\u4f4d\u7f6e<\/h3>\n\n\u53ef\u4ee5\u5728 style scoped> \u5199,\u52a0\u4e0a\/deep\/<\/li>\n<\/ul>\n<\/p>\n<\/p><\/noscript>\n\/deep\/ .el-input__wrapper {\n box-shadow: 0 0 0 0 inset;\n background-color: rgb(255, 242, 0);\n}<\/code><\/pre>\nel-carousel \u8d70\u9a6c\u706f\u4fee\u6539 Carousel \u5de6\u53f3\u4e24\u4fa7\u7bad\u5934\u5b57\u4f53\u5927\u5c0f<\/h3>\n\/deep\/.el-carousel__arrow i {\n font-size: 29px !important;\n }<\/code><\/pre>\n\u9875\u9762\u5411\u4e0b\u6ed1\u52a8\u5bfc\u822a\u680f\u56fa\u5b9a<\/h3>\n<\/p>\n<\/p><\/noscript>\n.main_nav_fixed {\n position: sticky;\n top: 0;\n z-index: 999;\n}<\/code><\/pre>\n\u56fa\u5b9a\u5728\u53f3\u65b9\u7684,\u60ac\u6302\u51fa\u73b0\u4e8c\u7ef4\u7801<\/h3>\n<\/p>\n<\/p><\/noscript>\n<div class="share_box">\n <img src="..\/..\/assets\/images\/share_qr.png" alt=""\/>\n <\/div><\/code><\/pre>\n.share_box{\n width: 70px;\n height: 131px;\n top: 300px;\n right: 10px;\n cursor: pointer;\n position: fixed;\n z-index: 999;\n background: url("..\/..\/assets\/images\/share_wx.jpg") no-repeat;\n background-size: 100% 100%;\n}\n.share_box img{\n width: 100px;\n height: 100px;\n display: none;\n}\n.share_box:hover img {\n position: absolute;\n top: 50%;\n margin-top: -50px;\n right: 82px;\n display: block !important;\n}<\/code><\/pre>\nnth-child(n)\u6307\u7684\u662f\u5728\u7236\u5143\u7d20\u4e2d\u6240\u6709\u7684\u5143\u7d20\u7684\u987a\u5e8f<\/h3>\n\n\u5199\u4ee3\u7801\u8981\u6839\u636e\u76d2\u5b50\u4ee5\u53ca\u5185\u5bb9\u5199<\/li>\nbottom\uff1a0\uff1b\u8981\u76f8\u5bf9\u4e8e\u7236\u5143\u7d20\u7684 height \u5b9e\u73b0\uff0c\u5982\u679c\u7236\u7236\u5143\u7d20\u7684 height \u5927\u4e8e\u7236\u5143\u7d20\u7684 height\uff0c\uff0c\u5219\u4f1a\u6309\u7167\u7236\u7236\u5143\u7d20\u7684 height \u6765\u5b9e\u73b0 bottom\uff1a0\uff1b\u6765\u5b9e\u73b0\u3002\u3010\u9002\u5f53\u5220\u9664\u7236\u7236\u5143\u7d20\u7684 height\uff0c\u4e00\u677f\u5757\u901a\u5e38\u4e0d\u7528\u8bbe\u7f6e\u603b height\u3011<\/li>\n<\/ul>\n\u60ac\u6302\u56fe\u7247\u7f13\u7f13\u653e\u5927\u7684\u52a8\u753b\u6548\u679c<\/h3>\n<\/p>\n<\/p><\/noscript>\n.gc_project .item_img > img {\n width: 100%;\n height: 100%;\n transition: all 0.3s;\n}\n.gc_project .item_img > img:hover {\n transform: scale(1.05);\n box-shadow: rgb(0 0 0 \/ 23%) 0 4px 14px 0;\n}<\/code><\/pre>\n\u6eda\u52a8\u6761\u4fee\u6539<\/h3>\n<\/p>\n<\/p><\/noscript>\n.mleft::-webkit-scrollbar{\n width: 6px;\n background-color: #f8f8f8;\n\n}\n.mleft::-webkit-scrollbar-thumb{\n width: 6px;\n background-color: #adacac;\n border-radius: 4px;\n}<\/code><\/pre>\nhead \u533a '\u53d1\u73b0' \u5b9e\u73b0\u4ea4\u4e92\u6548\u679c [\u8be5\u9996\u9875\u6700\u607c\u706b\u7684]<\/h2>\n<\/p>\n<\/p><\/noscript>\ntodo head \u533a'\u53d1\u73b0'\u4ea4\u4e92\u5b9e\u73b0\u601d\u8def:<\/h3>\n\n\u2460\u89c2\u5bdf\u8be5\u533a\u7ed3\u6784,\u4e00\u4e2a\u5927\u6a21\u5757,\u5176\u4e2d\u5206\u4e3a\u5de6\u4e2d\u53f3\u4e09\u4e2a\u6a21\u5757,\u5e76\u4f9d\u6b21\u5199\u51fa\u4e09\u4e2a\u6a21\u5757\u7684\u4ee3\u7801,<\/li>\n\u2461\u5de6\u4fa7\u533a\u57df: \u8981\u5c55\u793a\u7684\u6548\u679c\u6709: \u9f20\u6807\u4e0a\u4e0b\u79fb\u52a8,\u6240\u7ecf\u7684 menuItem \u4f1a\u5c55\u73b0\u9ec4\u8272\u80cc\u666f, \u5219\u5f15\u7528 vue \u7684 ref \u5c5e\u6027\u5bf9 DOM \u5143\u7d20\u8fdb\u884c\u52a8\u6001\u7ed1\u5b9a.\n\n\u6ce8\u610f:ref \u9700\u8981\u5728 dom \u6e32\u67d3\u5b8c\u6210\u540e\u624d\u4f1a\u6709,\u5728\u4f7f\u7528\u7684\u65f6\u5019\u786e\u4fdd dom \u5df2\u7ecf\u6e32\u67d3\u5b8c\u6210, \u6bd4\u5982\u5728\u751f\u547d\u5468\u671f mounted(){}\u94a9\u5b50\u4e2d\u8c03\u7528. this.$refs.xxx:\u51cf\u5c11\u83b7\u53d6 dom \u8282\u70b9\u7684\u6d88\u8017<\/li>\n<\/ul>\n<\/li>\n\u2462\u5de6\u4fa7\u533a\u57df\u8fc7\u6ee4\u5230\u53f3\u4fa7\u533a\u57df,\u5c55\u793a\u5bf9\u5e94\u7684\u8be6\u60c5\u9875: mleftIn(item,index)\u51fd\u6570\u901a\u8fc7\u4f20\u8f93 v-for \u5faa\u73af\u4e2d\u6570\u7ec4 menuList \u7684 item \u6bcf\u4e00\u9879\u4e3a\u5a92\u4ecb, \u800c\u6570\u636e\u4e2d menuList \u4e2d\u5305\u542b\u5de6\u4fa7\u6570\u636e menuItem \u4e0e\u53f3\u4fa7\u6bcf\u4e00\u9875\u7684\u6807\u9898 menu \u76f8\u540c, \u4ece\u800c\u5c06\u5de6\u4fa7\u548c\u53f3\u4fa7\u6570\u636e\u7ed1\u5b9a, \u6545\u800c\u5f62\u6210\u4ece\u5de6\u4fa7\u8fc7\u6ee4\u5230\u53f3\u4fa7\u533a\u57df\u662f\u56fa\u5b9a\u7684\u8be6\u60c5\u9875\u5185\u5bb9.<\/li>\n\u2463\u9875\u9762\u7b2c\u4e8c\u6b21\u672a\u5237\u65b0\u4e4b\u524d(\u9996\u6b21\u8fdb\u5165\u9875\u9762\u6e32\u67d3), \u9f20\u6807\u60ac\u6302'\u53d1\u73b0',\u8981\u51fa\u73b0\u7b2c\u4e00\u4e2a'\u7cbe\u9009'\u8be6\u60c5\u9875\u53ca'\u7cbe\u9009'item \u80cc\u666f\u53d8\u9ec4: \u9f20\u6807\u79fb\u51fa\u8be5\u5143\u7d20[\u4e8c\u7ea7\u76ee\u5f55\u6574\u4e2a\u5927\u6a21\u5757]\u4e4b\u5916,\u5219\u89e6\u53d1 mouseleave \u4e8b\u4ef6,\u521d\u59cb\u5316\u6570\u636e.<\/li>\n\u2464\u7b2c\u4e8c\u6b21\u9875\u9762\u5237\u65b0\u4e4b\u540e,\u521d\u59cb\u5316\u6570\u636e: \u91c7\u7528 mounted \u751f\u547d\u5468\u671f[\u6e32\u67d3\u6210 html \u540e\u8c03\u7528]: \u4f7f\u9f20\u6807\u60ac\u6302'\u53d1\u73b0',\u7b2c\u4e00\u4e2a menu-item \u663e\u793a\u9ec4\u8272<\/li>\n<\/ul>\n <li class="find">\n <a href="#">\u53d1\u73b0<\/a>\n <div class="h_menu" @mouseleave="mleftLeave()">\n <div class="menu_box mleft">\n <!-- <a href="">\u7cbe\u9009<\/a>-->\n <a v-for="(item,index) in menuList" :key="index" :ref="'test'+index" href="javascript:;"\n @mouseover="mleftIn(item,index)">{{ item.menu }}<\/a>\n <!-- <el-cascader-panel :options="findOptions" :props="props" \/>-->\n <\/div>\n <div class="mright">\n <div class="cate-box">\n <a class="cate-title" href="">\n <img :src="data.url" alt="">\n <span>{{ data.menu }}<\/span>\n <\/a>\n <div class="subCate">\n <a v-for="(itemOne) in data.items" :key="itemOne">{{ itemOne.text }}<\/a>\n <\/div>\n <\/div>\n <\/div>\n <div class="right_bar">\n <div class="icons">\n <a>\n <span class="icon-box">\n <span class="tangle-1"><\/span>\n <span class="tangle-2"><\/span>\n <i class="ani-star"><\/i>\n <span class="tangle-3"><\/span>\n <\/span>\n <span class="icon-text">\u6536\u85cf\u5939<\/span>\n <\/a>\n <a>\n <img alt="" src="..\/assets\/images\/icon-header-discover-designer.png">\n <span>\u8bbe\u8ba1\u5e08<\/span>\n <\/a>\n <a>\n <img alt="" src="..\/assets\/images\/icon-header-discover-focus.png">\n <span>\u699c\u5355<\/span>\n <!-- <sup class="subNavDot"><\/sup>-->\n <\/a>\n <\/div>\n <div class="ad_box">\n\n <\/div>\n <\/div>\n <\/div>\n <\/li><\/code><\/pre>\n data: {},\n menuList: [\n {\n menu: '\u7cbe\u9009',\n url: require('..\/assets\/images\/zuanshi.png'),\n items: [\n { text: '\u8fd0\u8425\u8bbe\u8ba1' },\n { text: '\u5305\u88c5' },\n { text: '\u52a8\u753b\/\u5f71\u89c6' },\n { text: '\u4eba\u50cf\u6444\u5f71' },\n { text: '\u5546\u4e1a\u63d2\u753b' },\n { text: '\u7535\u5546' },\n { text: 'APP \u754c\u9762' },\n { text: '\u827a\u672f\u63d2\u753b' },\n { text: '\u5bb6\u88c5\u8bbe\u8ba1' },\n { text: '\u6d77\u62a5' },\n { text: '\u6587\u7ae0' }\n ]\n },\n { menu: '\u5e73\u9762' },\n { menu: 'UI' },\n { menu: '\u7f51\u9875' },\n { menu: '\u63d2\u753b' },\n { menu: '\u52a8\u6f2b' },\n { menu: '\u6444\u5f71' },\n { menu: '\u7a7a\u95f4' },\n { menu: '\u5de5\u4e1a\/\u4ea7\u54c1' },\n { menu: '\u4e09\u7ef4' },\n { menu: '\u5f71\u89c6' },\n { menu: '\u624b\u5de5\u827a' },\n { menu: '\u7eaf\u827a\u672f' },\n { menu: '\u670d\u88c5' },\n { menu: '\u5176\u4ed6' }\n ],<\/code><\/pre>\n \/\/\u6e32\u67d3\u6210 html \u4e4b\u524d\u8c03\u7528,\u521d\u59cb\u5316\u4e00\u4e9b\u5c5e\u6027\u503c [\u9f20\u6807\u60ac\u6302'\u53d1\u73b0',\u5c31\u51fa\u73b0\u7b2c\u4e00\u4e2a\u7cbe\u9009\u9875\u9762]\n created () {\n this.data = this.menuList[0]\n },\n \/\/\u6e32\u67d3\u6210 html \u540e\u8c03\u7528 [\u9f20\u6807\u60ac\u6302'\u53d1\u73b0',\u7b2c\u4e00\u4e2a menu-item \u663e\u793a\u9ec4\u8272](\u9875\u9762\u5237\u65b0\u4e86\u4e4b\u540e\u7684)\n mounted () {\n this.$refs['test' + 0][0].style.backgroundColor = 'rgb(255, 242, 0)'\n },\n methods: {\n \/\/\u9f20\u6807\u8fdb\u5165\u51fd\u6570\n mleftIn (item, index) {\n \/\/\u83b7\u53d6 menuList \u4e2d\u6bcf\u4e2a menuItem \u5b57\u7b26\u4e32\u7684\u957f\u5ea6\n let menuSize = this.menuList.length\n for (let i = 0; i < menuSize; i++) {\n \/\/for \u5faa\u73af,i \u5982\u679c\u5c0f\u4e8e menuSize,\u5219\u7f6e\u4e8e menuItem \u989c\u8272\u4e3a\u7070\u8272,\u5b9e\u73b0\u5207\u6362\u6548\u679c\n this.$refs['test' + i][0].style.backgroundColor = '#f8f8f8'\n }\n \/\/\u8df3\u51fa for \u5faa\u73af,\u7531\u5de6\u4fa7\u79fb\u5411\u53f3\u4fa7\u8be6\u60c5\u9875\u65f6,\u5176 menuItem \u7684\u989c\u8272\u4e3a\u9ec4\u8272\n this.$refs['test' + index][0].style.backgroundColor = 'rgb(255, 242, 0)'\n \/\/\u5c06\u53f3\u4fa7\u6570\u636e\u8bbe\u7f6e\u4e3a item,\u663e\u793a\u6570\u636e\n this.data = item\n },\n \/\/\u9f20\u6807\u8fdb\u5165\u51fd\u6570\n \/\/\u6ce8\u610f: mouseleave:\u662f\u9f20\u6807\u79fb\u51fa\u8be5\u5143\u7d20\u4e4b\u5916,\u5219\u89e6\u53d1 mouseleave \u4e8b\u4ef6\n \/\/ mouseout : \u662f\u5f53\u6307\u9488\u79bb\u5f00\u8be5\u5143\u7d20\u53ca\u5176\u6240\u6709\u540e\u4ee3\u65f6\uff0c\u4f1a\u89e6\u53d1 mouseleave\n \/\/ \u800c\u5f53\u6307\u9488\u79bb\u5f00\u5143\u7d20\u6216\u79bb\u5f00\u5143\u7d20\u7684\u540e\u4ee3\uff08\u5373\u4f7f\u6307\u9488\u4ecd\u5728\u5143\u7d20\u5185\uff09\u65f6\uff0c\u4e5f\u4f1a\u89e6\u53d1 mouseout \u4e8b\u4ef6\n mleftLeave () {\n \/\/\u83b7\u53d6 menuList \u4e2d\u6bcf\u4e2a menuItem \u5b57\u7b26\u4e32\u7684\u957f\u5ea6\n let menuSize = this.menuList.length\n for (let i = 0; i < menuSize; i++) {\n this.$refs['test' + i][0].style.backgroundColor = '#f8f8f8'\n }\n \/\/ \u8df3\u51fa\u5faa\u73af,\u6d4f\u89c8\u5b8c'\u53d1\u73b0',\u9f20\u6807\u79fb\u51fa,\u7f6e\u4e8e\u53f3\u4fa7\u6570\u636e\u4e3a\u7b2c\u4e00\u4e2a\u7cbe\u9009\u6570\u636e\n this.data = this.menuList[0]\n \/\/\u9f20\u6807\u79fb\u51fa\u4e8b\u4ef6,\u7f6e\u4e8e\u7b2c\u4e00\u4e2a menuitem \u4e3a\u9ec4\u8272[\u672a\u5237\u65b0\u65f6\u7684\u8bbe\u7f6e]\n this.$refs['test' + 0][0].style.backgroundColor = 'rgb(255, 242, 0)'\n\n \/\/ this.data = {}\n \/\/ this.$refs['test'+index][0].style.backgroundColor = '#f8f8f8'\n \/\/ console.log('\u6eda\u51fa\u53bb')\n },\n}<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"\u4e0b\u8f7d\u4f9d\u8d56\u901f\u5ea6\u5feb npm install –registry=https:\/\/registry.npm.tao […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[],"class_list":["post-3462","post","type-post","status-publish","format-standard","hentry","category-web"],"_links":{"self":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/3462","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3462"}],"version-history":[{"count":38,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/3462\/revisions"}],"predecessor-version":[{"id":3558,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/3462\/revisions\/3558"}],"wp:attachment":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3462"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=3462"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=3462"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
style\n\/*\u53d6\u6d88\u8fb9\u6846*\/\n.el-cascader-panel.is-bordered {\n border: none;\n border-radius: 0;\n}\n\n.el-cascader-menu {\n color: #1c1f21;\n font-size: 14px;\n min-width: 152px;\n}\n\n.el-cascader-menu__list {\n padding: 0;\n}\n\n.el-cascader-node.in-active-path, .el-cascader-node.is-active, .el-cascader-node.is-selectable.in-checked-path {\n color: #1c1f21;\n font-weight: normal;\n}\n\/*item \u60ac\u6302\u9ec4\u8272\u80cc\u666f\u5bbd\u95f4\u8ddd*\/\n.el-cascader-node {\n padding-left: 20px;\n height: 45px;\n line-height: 45px;\n}\n\/*\u4e8c\u7ea7\u76ee\u5f55\u7684\u9ad8\u5ea6*\/\n.el-cascader-menu__wrap.el-scrollbar__wrap {\n height: 478px;\n}\n\n.el-cascader-menu:last-child .el-cascader-node {\n padding-right: 0;\n}\n\/*item \u60ac\u6302\u9ec4\u8272\u80cc\u666f*\/\n.el-cascader-node:not(.is-disabled):focus, .el-cascader-node:not(.is-disabled):hover {\n background-color: rgb(255, 242, 0);\n}\n\/*item \u53f3\u8fb9\u7684\u5c0f\u7bad\u5934\u989c\u8272\u6539\u4e3a\u9ec4\u8272[\u9690\u85cf]*\/\n.el-cascader-node:not(.is-disabled):focus, .el-cascader-node:not(.is-disabled):hover .el-icon {\n color: rgb(255, 242, 0);\n}\n\n.el-cascader-node__label {\n padding: 0;\n}\n\n.el-cascader-node__postfix {\n position: absolute;\n right: 0;\n}\n\/*\u6eda\u52a8\u6761\u5230\u9876\u90e8,\u4e0b\u90e8\u7684\u95f4\u8ddd*\/\n.el-scrollbar__bar {\n position: absolute;\n right: 0;\n bottom: 0;\n z-index: 1;\n border-radius: 4px;\n}<\/code><\/pre>\n<\/p>\n<\/p><\/noscript>\n <el-cascader-panel :options="findOptions" :props="props"\/><\/code><\/pre>\n\/*\u4e8c\u7ea7\u76ee\u5f55\u7684\u9ad8\u5ea6*\/\n\/deep\/.el-cascader-menu__wrap.el-scrollbar__wrap {\n height: 490px;\n}\n\/*item \u60ac\u6302\u9ec4\u8272\u80cc\u666f\u5bbd\u95f4\u8ddd*\/\n\/deep\/.el-cascader-node {\nheight: 45px;\n width: 165px;\n padding: 0;\n margin-left: 10px;\n}\n\/*item \u60ac\u6302\u9ec4\u8272\u80cc\u666f*\/\n\/deep\/ .el-cascader-node:not(.is-disabled):hover {\n background: #fff200;\n border-radius: 8px;\n}\n\/*\u70b9\u51fb\u540e\u6539\u53d8\u989c\u8272,\u7c97\u7ec6\u53d6\u6d88\u70b9\u51fb\u6548\u679c*\/\n\/deep\/.el-cascader-node.is-active{\ncolor: #222222;\n font-weight: normal;\n}\n\/*item \u5de6\u8fb9\u6709\u4e2a\u5c0f\u52fe\u221a*\/\n\/deep\/.el-icon svg {\n height: 0;\n width: 0;\n}\n\/*\u53d1\u73b0\u7684\u4e8c\u7ea7\u76ee\u5f55\u6d88\u5931*\/\n.el-cascader-panel{\n display: none;\n}\n\/*\u53d6\u6d88\u8fb9\u6846*\/\n.el-cascader-panel.is-bordered {\n border: none;\n}\n\/*\u60ac\u6302'\u53d1\u73b0'\u76ee\u5f55,\u51fa\u73b0\u4e8c\u7ea7\u76ee\u5f55*\/\n.topbar .shortcut-links > ul > li:nth-child(2):hover .el-cascader-panel{\n display: block;\n background-color: #f8f8f8;\n border-radius: 8px 0 8px 8px;\n}<\/code><\/pre>\n\u626b\u4e8c\u7ef4\u7801\u767b\u5f55\u548c\u5bc6\u7801\u767b\u5f55\u9875\u9762\u7684\u5207\u6362<\/h3>\n@click="handleChangeToLogin()"<\/code><\/pre>\n handleChangeToLogin () {\n const qr = document.getElementById('qr_code')\n const login = document.getElementById('login')\n qr.style.display = 'none';\n if (qr.style.display === 'none') {\n login.style.display = 'block'\n }\n },\n handleChangeToQr () {\n const qr = document.getElementById('qr_code')\n const login = document.getElementById('login')\n login.style.display = 'none'\n if (login.style.display === 'none') {\n qr.style.display = 'block'\n }\n }<\/code><\/pre>\n\u767b\u5f55\u6846\u7684\u6ed1\u5757\u9a8c\u8bc1<\/h3>\n<\/p>\n<\/p><\/noscript>\n<\/slider><\/p>\n<template>\n <div ref="dragDiv" class="drag">\n <div class="drag_bg"><\/div>\n <div class="drag_text">{{ confirmWords }}<\/div>\n <div ref="moveDiv" :class="{'handler_ok_bg':confirmSuccess}" class="handler handler_bg"\n style="position: absolute;top: 0;left: 0;" @mousedown="mouseDownFn($event)"><\/div>\n <\/div>\n<\/template>\n\n<script>\nexport default {\n data () {\n return {\n beginClientX: 0, \/*\u8ddd\u79bb\u5c4f\u5e55\u5de6\u7aef\u8ddd\u79bb*\/\n mouseMoveState: false, \/*\u89e6\u53d1\u62d6\u52a8\u72b6\u6001 \u5224\u65ad*\/\n maxWidth: '', \/*\u62d6\u52a8\u6700\u5927\u5bbd\u5ea6\uff0c\u4f9d\u636e\u6ed1\u5757\u5bbd\u5ea6\u7b97\u51fa\u6765\u7684*\/\n confirmWords: '\u8bf7\u6309\u4f4f\u6ed1\u5757,\u62d6\u52a8\u5230\u6700\u53f3\u8fb9', \/*\u6ed1\u5757\u6587\u5b57*\/\n confirmSuccess: false \/*\u9a8c\u8bc1\u6210\u529f\u5224\u65ad*\/\n }\n },\n methods: {\n \/\/mousedown \u4e8b\u4ef6\n mouseDownFn: function (e) {\n if (!this.confirmSuccess) {\n e.preventDefault && e.preventDefault() \/\/\u963b\u6b62\u6587\u5b57\u9009\u4e2d\u7b49 \u6d4f\u89c8\u5668\u9ed8\u8ba4\u4e8b\u4ef6\n this.mouseMoveState = true\n this.beginClientX = e.clientX\n }\n },\n \/\/\u9a8c\u8bc1\u6210\u529f\u51fd\u6570\n successFunction () {\n this.confirmSuccess = true\n this.confirmWords = '\u9a8c\u8bc1\u901a\u8fc7'\n if (window.addEventListener) {\n document.getElementsByTagName('html')[0].removeEventListener('mousemove', this.mouseMoveFn)\n document.getElementsByTagName('html')[0].removeEventListener('mouseup', this.moseUpFn)\n } else {\n document.getElementsByTagName('html')[0].removeEventListener('mouseup', () => {\n })\n }\n document.getElementsByClassName('drag_text')[0].style.color = '#fff'\n document.getElementsByClassName('handler')[0].style.left = this.maxWidth + 'px'\n document.getElementsByClassName('drag_bg')[0].style.width = this.maxWidth + 'px'\n },\n \/\/mousemove \u4e8b\u4ef6\n mouseMoveFn (e) {\n if (this.mouseMoveState) {\n let width = e.clientX - this.beginClientX\n if (width > 0 && width <= this.maxWidth) {\n document.getElementsByClassName('handler')[0].style.left = width + 'px'\n document.getElementsByClassName('drag_bg')[0].style.width = width + 'px'\n } else if (width > this.maxWidth) {\n this.successFunction()\n }\n }\n },\n \/\/mouseup \u4e8b\u4ef6\n moseUpFn (e) {\n this.mouseMoveState = false\n var width = e.clientX - this.beginClientX\n if (width < this.maxWidth) {\n document.getElementsByClassName('handler')[0].style.left = 0 + 'px'\n document.getElementsByClassName('drag_bg')[0].style.width = 0 + 'px'\n }\n }\n },\n mounted () {\n this.maxWidth = this.$refs.dragDiv.clientWidth - this.$refs.moveDiv.clientWidth\n document.getElementsByTagName('html')[0].addEventListener('mousemove', this.mouseMoveFn)\n document.getElementsByTagName('html')[0].addEventListener('mouseup', this.moseUpFn)\n }\n}\n<\/script>\n<style scoped>\n.drag {\n position: relative;\n background-color: #e8e8e8;\n width: 100%;\n height: 32px;\n line-height: 32px;\n text-align: center;\n border: 1px solid #ccc;\n\n}\n\n.handler {\n width: 40px;\n height: 32px;\n border: 1px solid #ccc;\n cursor: move;\n margin-top: -1px;\n margin-left: -1px;\n}\n\n.handler_bg {\n background: #fff url('..\/assets\/images\/arrow-r.png') no-repeat center;\n background-size: 25px;\n}\n\n.handler_ok_bg {\n background: #fff url('..\/assets\/images\/\u221a.png') no-repeat center;\n background-size: 18px;\n}\n\n.drag_bg {\n background-color: #7ac23c;\n height: 32px;\n width: 0;\n}\n\n.drag_text {\n position: absolute;\n top: 0;\n width: 100%;\n font-size: 12px;\n color: #706f6f;\n}\n\n<\/style>\n<\/code><\/pre>\nel-input \u805a\u7126\u540e\u80cc\u666f\u53d8\u767d<\/h3>\n<\/p>\n<\/p><\/noscript>\n.el-input__wrapper.is-focus {\n box-shadow: 0 0 0 1px #dcdfe6 inset;\n background-color: #fff;\n}<\/code><\/pre>\nel-input placeholder \u989c\u8272\u8bbe\u7f6e<\/h3>\n.el-input__inner::placeholder{\n color: #666666;\n}<\/code><\/pre>\n\u5224\u65ad el-checked \u662f\u5426\u9009\u4e2d,\u672a\u9009\u4e2d\u5219\u63d0\u793a\u8bf7\u52fe\u9009<\/h3>\n<\/p>\n<\/p><\/noscript>\nexport default {\nmounted() {\n const pleaseFit=document.getElementById('pleaseFit');\n $(".el-checkbox input").change(() => {\n if ($(".el-checkbox input[type='checkbox']").is(':checked') == true) {\n pleaseFit.style.display='none'\n } else {\n pleaseFit.style.display='block'\n }\n })\n }\n }<\/code><\/pre>\nel-input \u5728 style \u5168\u5c40\u6837\u5f0f,\u4f1a\u5f71\u54cd\u5230\u5176\u4ed6\u4e0d\u7b26\u5408\u8be5\u6837\u5f0f\u7684\u4f4d\u7f6e<\/h3>\n\n\u53ef\u4ee5\u5728 style scoped> \u5199,\u52a0\u4e0a\/deep\/<\/li>\n<\/ul>\n<\/p>\n<\/p><\/noscript>\n\/deep\/ .el-input__wrapper {\n box-shadow: 0 0 0 0 inset;\n background-color: rgb(255, 242, 0);\n}<\/code><\/pre>\nel-carousel \u8d70\u9a6c\u706f\u4fee\u6539 Carousel \u5de6\u53f3\u4e24\u4fa7\u7bad\u5934\u5b57\u4f53\u5927\u5c0f<\/h3>\n\/deep\/.el-carousel__arrow i {\n font-size: 29px !important;\n }<\/code><\/pre>\n\u9875\u9762\u5411\u4e0b\u6ed1\u52a8\u5bfc\u822a\u680f\u56fa\u5b9a<\/h3>\n<\/p>\n<\/p><\/noscript>\n.main_nav_fixed {\n position: sticky;\n top: 0;\n z-index: 999;\n}<\/code><\/pre>\n\u56fa\u5b9a\u5728\u53f3\u65b9\u7684,\u60ac\u6302\u51fa\u73b0\u4e8c\u7ef4\u7801<\/h3>\n<\/p>\n<\/p><\/noscript>\n<div class="share_box">\n <img src="..\/..\/assets\/images\/share_qr.png" alt=""\/>\n <\/div><\/code><\/pre>\n.share_box{\n width: 70px;\n height: 131px;\n top: 300px;\n right: 10px;\n cursor: pointer;\n position: fixed;\n z-index: 999;\n background: url("..\/..\/assets\/images\/share_wx.jpg") no-repeat;\n background-size: 100% 100%;\n}\n.share_box img{\n width: 100px;\n height: 100px;\n display: none;\n}\n.share_box:hover img {\n position: absolute;\n top: 50%;\n margin-top: -50px;\n right: 82px;\n display: block !important;\n}<\/code><\/pre>\nnth-child(n)\u6307\u7684\u662f\u5728\u7236\u5143\u7d20\u4e2d\u6240\u6709\u7684\u5143\u7d20\u7684\u987a\u5e8f<\/h3>\n\n\u5199\u4ee3\u7801\u8981\u6839\u636e\u76d2\u5b50\u4ee5\u53ca\u5185\u5bb9\u5199<\/li>\nbottom\uff1a0\uff1b\u8981\u76f8\u5bf9\u4e8e\u7236\u5143\u7d20\u7684 height \u5b9e\u73b0\uff0c\u5982\u679c\u7236\u7236\u5143\u7d20\u7684 height \u5927\u4e8e\u7236\u5143\u7d20\u7684 height\uff0c\uff0c\u5219\u4f1a\u6309\u7167\u7236\u7236\u5143\u7d20\u7684 height \u6765\u5b9e\u73b0 bottom\uff1a0\uff1b\u6765\u5b9e\u73b0\u3002\u3010\u9002\u5f53\u5220\u9664\u7236\u7236\u5143\u7d20\u7684 height\uff0c\u4e00\u677f\u5757\u901a\u5e38\u4e0d\u7528\u8bbe\u7f6e\u603b height\u3011<\/li>\n<\/ul>\n\u60ac\u6302\u56fe\u7247\u7f13\u7f13\u653e\u5927\u7684\u52a8\u753b\u6548\u679c<\/h3>\n<\/p>\n<\/p><\/noscript>\n.gc_project .item_img > img {\n width: 100%;\n height: 100%;\n transition: all 0.3s;\n}\n.gc_project .item_img > img:hover {\n transform: scale(1.05);\n box-shadow: rgb(0 0 0 \/ 23%) 0 4px 14px 0;\n}<\/code><\/pre>\n\u6eda\u52a8\u6761\u4fee\u6539<\/h3>\n<\/p>\n<\/p><\/noscript>\n.mleft::-webkit-scrollbar{\n width: 6px;\n background-color: #f8f8f8;\n\n}\n.mleft::-webkit-scrollbar-thumb{\n width: 6px;\n background-color: #adacac;\n border-radius: 4px;\n}<\/code><\/pre>\nhead \u533a '\u53d1\u73b0' \u5b9e\u73b0\u4ea4\u4e92\u6548\u679c [\u8be5\u9996\u9875\u6700\u607c\u706b\u7684]<\/h2>\n<\/p>\n<\/p><\/noscript>\ntodo head \u533a'\u53d1\u73b0'\u4ea4\u4e92\u5b9e\u73b0\u601d\u8def:<\/h3>\n\n\u2460\u89c2\u5bdf\u8be5\u533a\u7ed3\u6784,\u4e00\u4e2a\u5927\u6a21\u5757,\u5176\u4e2d\u5206\u4e3a\u5de6\u4e2d\u53f3\u4e09\u4e2a\u6a21\u5757,\u5e76\u4f9d\u6b21\u5199\u51fa\u4e09\u4e2a\u6a21\u5757\u7684\u4ee3\u7801,<\/li>\n\u2461\u5de6\u4fa7\u533a\u57df: \u8981\u5c55\u793a\u7684\u6548\u679c\u6709: \u9f20\u6807\u4e0a\u4e0b\u79fb\u52a8,\u6240\u7ecf\u7684 menuItem \u4f1a\u5c55\u73b0\u9ec4\u8272\u80cc\u666f, \u5219\u5f15\u7528 vue \u7684 ref \u5c5e\u6027\u5bf9 DOM \u5143\u7d20\u8fdb\u884c\u52a8\u6001\u7ed1\u5b9a.\n\n\u6ce8\u610f:ref \u9700\u8981\u5728 dom \u6e32\u67d3\u5b8c\u6210\u540e\u624d\u4f1a\u6709,\u5728\u4f7f\u7528\u7684\u65f6\u5019\u786e\u4fdd dom \u5df2\u7ecf\u6e32\u67d3\u5b8c\u6210, \u6bd4\u5982\u5728\u751f\u547d\u5468\u671f mounted(){}\u94a9\u5b50\u4e2d\u8c03\u7528. this.$refs.xxx:\u51cf\u5c11\u83b7\u53d6 dom \u8282\u70b9\u7684\u6d88\u8017<\/li>\n<\/ul>\n<\/li>\n\u2462\u5de6\u4fa7\u533a\u57df\u8fc7\u6ee4\u5230\u53f3\u4fa7\u533a\u57df,\u5c55\u793a\u5bf9\u5e94\u7684\u8be6\u60c5\u9875: mleftIn(item,index)\u51fd\u6570\u901a\u8fc7\u4f20\u8f93 v-for \u5faa\u73af\u4e2d\u6570\u7ec4 menuList \u7684 item \u6bcf\u4e00\u9879\u4e3a\u5a92\u4ecb, \u800c\u6570\u636e\u4e2d menuList \u4e2d\u5305\u542b\u5de6\u4fa7\u6570\u636e menuItem \u4e0e\u53f3\u4fa7\u6bcf\u4e00\u9875\u7684\u6807\u9898 menu \u76f8\u540c, \u4ece\u800c\u5c06\u5de6\u4fa7\u548c\u53f3\u4fa7\u6570\u636e\u7ed1\u5b9a, \u6545\u800c\u5f62\u6210\u4ece\u5de6\u4fa7\u8fc7\u6ee4\u5230\u53f3\u4fa7\u533a\u57df\u662f\u56fa\u5b9a\u7684\u8be6\u60c5\u9875\u5185\u5bb9.<\/li>\n\u2463\u9875\u9762\u7b2c\u4e8c\u6b21\u672a\u5237\u65b0\u4e4b\u524d(\u9996\u6b21\u8fdb\u5165\u9875\u9762\u6e32\u67d3), \u9f20\u6807\u60ac\u6302'\u53d1\u73b0',\u8981\u51fa\u73b0\u7b2c\u4e00\u4e2a'\u7cbe\u9009'\u8be6\u60c5\u9875\u53ca'\u7cbe\u9009'item \u80cc\u666f\u53d8\u9ec4: \u9f20\u6807\u79fb\u51fa\u8be5\u5143\u7d20[\u4e8c\u7ea7\u76ee\u5f55\u6574\u4e2a\u5927\u6a21\u5757]\u4e4b\u5916,\u5219\u89e6\u53d1 mouseleave \u4e8b\u4ef6,\u521d\u59cb\u5316\u6570\u636e.<\/li>\n\u2464\u7b2c\u4e8c\u6b21\u9875\u9762\u5237\u65b0\u4e4b\u540e,\u521d\u59cb\u5316\u6570\u636e: \u91c7\u7528 mounted \u751f\u547d\u5468\u671f[\u6e32\u67d3\u6210 html \u540e\u8c03\u7528]: \u4f7f\u9f20\u6807\u60ac\u6302'\u53d1\u73b0',\u7b2c\u4e00\u4e2a menu-item \u663e\u793a\u9ec4\u8272<\/li>\n<\/ul>\n <li class="find">\n <a href="#">\u53d1\u73b0<\/a>\n <div class="h_menu" @mouseleave="mleftLeave()">\n <div class="menu_box mleft">\n <!-- <a href="">\u7cbe\u9009<\/a>-->\n <a v-for="(item,index) in menuList" :key="index" :ref="'test'+index" href="javascript:;"\n @mouseover="mleftIn(item,index)">{{ item.menu }}<\/a>\n <!-- <el-cascader-panel :options="findOptions" :props="props" \/>-->\n <\/div>\n <div class="mright">\n <div class="cate-box">\n <a class="cate-title" href="">\n <img :src="data.url" alt="">\n <span>{{ data.menu }}<\/span>\n <\/a>\n <div class="subCate">\n <a v-for="(itemOne) in data.items" :key="itemOne">{{ itemOne.text }}<\/a>\n <\/div>\n <\/div>\n <\/div>\n <div class="right_bar">\n <div class="icons">\n <a>\n <span class="icon-box">\n <span class="tangle-1"><\/span>\n <span class="tangle-2"><\/span>\n <i class="ani-star"><\/i>\n <span class="tangle-3"><\/span>\n <\/span>\n <span class="icon-text">\u6536\u85cf\u5939<\/span>\n <\/a>\n <a>\n <img alt="" src="..\/assets\/images\/icon-header-discover-designer.png">\n <span>\u8bbe\u8ba1\u5e08<\/span>\n <\/a>\n <a>\n <img alt="" src="..\/assets\/images\/icon-header-discover-focus.png">\n <span>\u699c\u5355<\/span>\n <!-- <sup class="subNavDot"><\/sup>-->\n <\/a>\n <\/div>\n <div class="ad_box">\n\n <\/div>\n <\/div>\n <\/div>\n <\/li><\/code><\/pre>\n data: {},\n menuList: [\n {\n menu: '\u7cbe\u9009',\n url: require('..\/assets\/images\/zuanshi.png'),\n items: [\n { text: '\u8fd0\u8425\u8bbe\u8ba1' },\n { text: '\u5305\u88c5' },\n { text: '\u52a8\u753b\/\u5f71\u89c6' },\n { text: '\u4eba\u50cf\u6444\u5f71' },\n { text: '\u5546\u4e1a\u63d2\u753b' },\n { text: '\u7535\u5546' },\n { text: 'APP \u754c\u9762' },\n { text: '\u827a\u672f\u63d2\u753b' },\n { text: '\u5bb6\u88c5\u8bbe\u8ba1' },\n { text: '\u6d77\u62a5' },\n { text: '\u6587\u7ae0' }\n ]\n },\n { menu: '\u5e73\u9762' },\n { menu: 'UI' },\n { menu: '\u7f51\u9875' },\n { menu: '\u63d2\u753b' },\n { menu: '\u52a8\u6f2b' },\n { menu: '\u6444\u5f71' },\n { menu: '\u7a7a\u95f4' },\n { menu: '\u5de5\u4e1a\/\u4ea7\u54c1' },\n { menu: '\u4e09\u7ef4' },\n { menu: '\u5f71\u89c6' },\n { menu: '\u624b\u5de5\u827a' },\n { menu: '\u7eaf\u827a\u672f' },\n { menu: '\u670d\u88c5' },\n { menu: '\u5176\u4ed6' }\n ],<\/code><\/pre>\n \/\/\u6e32\u67d3\u6210 html \u4e4b\u524d\u8c03\u7528,\u521d\u59cb\u5316\u4e00\u4e9b\u5c5e\u6027\u503c [\u9f20\u6807\u60ac\u6302'\u53d1\u73b0',\u5c31\u51fa\u73b0\u7b2c\u4e00\u4e2a\u7cbe\u9009\u9875\u9762]\n created () {\n this.data = this.menuList[0]\n },\n \/\/\u6e32\u67d3\u6210 html \u540e\u8c03\u7528 [\u9f20\u6807\u60ac\u6302'\u53d1\u73b0',\u7b2c\u4e00\u4e2a menu-item \u663e\u793a\u9ec4\u8272](\u9875\u9762\u5237\u65b0\u4e86\u4e4b\u540e\u7684)\n mounted () {\n this.$refs['test' + 0][0].style.backgroundColor = 'rgb(255, 242, 0)'\n },\n methods: {\n \/\/\u9f20\u6807\u8fdb\u5165\u51fd\u6570\n mleftIn (item, index) {\n \/\/\u83b7\u53d6 menuList \u4e2d\u6bcf\u4e2a menuItem \u5b57\u7b26\u4e32\u7684\u957f\u5ea6\n let menuSize = this.menuList.length\n for (let i = 0; i < menuSize; i++) {\n \/\/for \u5faa\u73af,i \u5982\u679c\u5c0f\u4e8e menuSize,\u5219\u7f6e\u4e8e menuItem \u989c\u8272\u4e3a\u7070\u8272,\u5b9e\u73b0\u5207\u6362\u6548\u679c\n this.$refs['test' + i][0].style.backgroundColor = '#f8f8f8'\n }\n \/\/\u8df3\u51fa for \u5faa\u73af,\u7531\u5de6\u4fa7\u79fb\u5411\u53f3\u4fa7\u8be6\u60c5\u9875\u65f6,\u5176 menuItem \u7684\u989c\u8272\u4e3a\u9ec4\u8272\n this.$refs['test' + index][0].style.backgroundColor = 'rgb(255, 242, 0)'\n \/\/\u5c06\u53f3\u4fa7\u6570\u636e\u8bbe\u7f6e\u4e3a item,\u663e\u793a\u6570\u636e\n this.data = item\n },\n \/\/\u9f20\u6807\u8fdb\u5165\u51fd\u6570\n \/\/\u6ce8\u610f: mouseleave:\u662f\u9f20\u6807\u79fb\u51fa\u8be5\u5143\u7d20\u4e4b\u5916,\u5219\u89e6\u53d1 mouseleave \u4e8b\u4ef6\n \/\/ mouseout : \u662f\u5f53\u6307\u9488\u79bb\u5f00\u8be5\u5143\u7d20\u53ca\u5176\u6240\u6709\u540e\u4ee3\u65f6\uff0c\u4f1a\u89e6\u53d1 mouseleave\n \/\/ \u800c\u5f53\u6307\u9488\u79bb\u5f00\u5143\u7d20\u6216\u79bb\u5f00\u5143\u7d20\u7684\u540e\u4ee3\uff08\u5373\u4f7f\u6307\u9488\u4ecd\u5728\u5143\u7d20\u5185\uff09\u65f6\uff0c\u4e5f\u4f1a\u89e6\u53d1 mouseout \u4e8b\u4ef6\n mleftLeave () {\n \/\/\u83b7\u53d6 menuList \u4e2d\u6bcf\u4e2a menuItem \u5b57\u7b26\u4e32\u7684\u957f\u5ea6\n let menuSize = this.menuList.length\n for (let i = 0; i < menuSize; i++) {\n this.$refs['test' + i][0].style.backgroundColor = '#f8f8f8'\n }\n \/\/ \u8df3\u51fa\u5faa\u73af,\u6d4f\u89c8\u5b8c'\u53d1\u73b0',\u9f20\u6807\u79fb\u51fa,\u7f6e\u4e8e\u53f3\u4fa7\u6570\u636e\u4e3a\u7b2c\u4e00\u4e2a\u7cbe\u9009\u6570\u636e\n this.data = this.menuList[0]\n \/\/\u9f20\u6807\u79fb\u51fa\u4e8b\u4ef6,\u7f6e\u4e8e\u7b2c\u4e00\u4e2a menuitem \u4e3a\u9ec4\u8272[\u672a\u5237\u65b0\u65f6\u7684\u8bbe\u7f6e]\n this.$refs['test' + 0][0].style.backgroundColor = 'rgb(255, 242, 0)'\n\n \/\/ this.data = {}\n \/\/ this.$refs['test'+index][0].style.backgroundColor = '#f8f8f8'\n \/\/ console.log('\u6eda\u51fa\u53bb')\n },\n}<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"\u4e0b\u8f7d\u4f9d\u8d56\u901f\u5ea6\u5feb npm install –registry=https:\/\/registry.npm.tao […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[],"class_list":["post-3462","post","type-post","status-publish","format-standard","hentry","category-web"],"_links":{"self":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/3462","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3462"}],"version-history":[{"count":38,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/3462\/revisions"}],"predecessor-version":[{"id":3558,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/3462\/revisions\/3558"}],"wp:attachment":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3462"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=3462"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=3462"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
<\/p>\n<\/p><\/noscript>\n <el-cascader-panel :options="findOptions" :props="props"\/><\/code><\/pre>\n\/*\u4e8c\u7ea7\u76ee\u5f55\u7684\u9ad8\u5ea6*\/\n\/deep\/.el-cascader-menu__wrap.el-scrollbar__wrap {\n height: 490px;\n}\n\/*item \u60ac\u6302\u9ec4\u8272\u80cc\u666f\u5bbd\u95f4\u8ddd*\/\n\/deep\/.el-cascader-node {\nheight: 45px;\n width: 165px;\n padding: 0;\n margin-left: 10px;\n}\n\/*item \u60ac\u6302\u9ec4\u8272\u80cc\u666f*\/\n\/deep\/ .el-cascader-node:not(.is-disabled):hover {\n background: #fff200;\n border-radius: 8px;\n}\n\/*\u70b9\u51fb\u540e\u6539\u53d8\u989c\u8272,\u7c97\u7ec6\u53d6\u6d88\u70b9\u51fb\u6548\u679c*\/\n\/deep\/.el-cascader-node.is-active{\ncolor: #222222;\n font-weight: normal;\n}\n\/*item \u5de6\u8fb9\u6709\u4e2a\u5c0f\u52fe\u221a*\/\n\/deep\/.el-icon svg {\n height: 0;\n width: 0;\n}\n\/*\u53d1\u73b0\u7684\u4e8c\u7ea7\u76ee\u5f55\u6d88\u5931*\/\n.el-cascader-panel{\n display: none;\n}\n\/*\u53d6\u6d88\u8fb9\u6846*\/\n.el-cascader-panel.is-bordered {\n border: none;\n}\n\/*\u60ac\u6302'\u53d1\u73b0'\u76ee\u5f55,\u51fa\u73b0\u4e8c\u7ea7\u76ee\u5f55*\/\n.topbar .shortcut-links > ul > li:nth-child(2):hover .el-cascader-panel{\n display: block;\n background-color: #f8f8f8;\n border-radius: 8px 0 8px 8px;\n}<\/code><\/pre>\n\u626b\u4e8c\u7ef4\u7801\u767b\u5f55\u548c\u5bc6\u7801\u767b\u5f55\u9875\u9762\u7684\u5207\u6362<\/h3>\n@click="handleChangeToLogin()"<\/code><\/pre>\n handleChangeToLogin () {\n const qr = document.getElementById('qr_code')\n const login = document.getElementById('login')\n qr.style.display = 'none';\n if (qr.style.display === 'none') {\n login.style.display = 'block'\n }\n },\n handleChangeToQr () {\n const qr = document.getElementById('qr_code')\n const login = document.getElementById('login')\n login.style.display = 'none'\n if (login.style.display === 'none') {\n qr.style.display = 'block'\n }\n }<\/code><\/pre>\n\u767b\u5f55\u6846\u7684\u6ed1\u5757\u9a8c\u8bc1<\/h3>\n<\/p>\n<\/p><\/noscript>\n<\/slider><\/p>\n<template>\n <div ref="dragDiv" class="drag">\n <div class="drag_bg"><\/div>\n <div class="drag_text">{{ confirmWords }}<\/div>\n <div ref="moveDiv" :class="{'handler_ok_bg':confirmSuccess}" class="handler handler_bg"\n style="position: absolute;top: 0;left: 0;" @mousedown="mouseDownFn($event)"><\/div>\n <\/div>\n<\/template>\n\n<script>\nexport default {\n data () {\n return {\n beginClientX: 0, \/*\u8ddd\u79bb\u5c4f\u5e55\u5de6\u7aef\u8ddd\u79bb*\/\n mouseMoveState: false, \/*\u89e6\u53d1\u62d6\u52a8\u72b6\u6001 \u5224\u65ad*\/\n maxWidth: '', \/*\u62d6\u52a8\u6700\u5927\u5bbd\u5ea6\uff0c\u4f9d\u636e\u6ed1\u5757\u5bbd\u5ea6\u7b97\u51fa\u6765\u7684*\/\n confirmWords: '\u8bf7\u6309\u4f4f\u6ed1\u5757,\u62d6\u52a8\u5230\u6700\u53f3\u8fb9', \/*\u6ed1\u5757\u6587\u5b57*\/\n confirmSuccess: false \/*\u9a8c\u8bc1\u6210\u529f\u5224\u65ad*\/\n }\n },\n methods: {\n \/\/mousedown \u4e8b\u4ef6\n mouseDownFn: function (e) {\n if (!this.confirmSuccess) {\n e.preventDefault && e.preventDefault() \/\/\u963b\u6b62\u6587\u5b57\u9009\u4e2d\u7b49 \u6d4f\u89c8\u5668\u9ed8\u8ba4\u4e8b\u4ef6\n this.mouseMoveState = true\n this.beginClientX = e.clientX\n }\n },\n \/\/\u9a8c\u8bc1\u6210\u529f\u51fd\u6570\n successFunction () {\n this.confirmSuccess = true\n this.confirmWords = '\u9a8c\u8bc1\u901a\u8fc7'\n if (window.addEventListener) {\n document.getElementsByTagName('html')[0].removeEventListener('mousemove', this.mouseMoveFn)\n document.getElementsByTagName('html')[0].removeEventListener('mouseup', this.moseUpFn)\n } else {\n document.getElementsByTagName('html')[0].removeEventListener('mouseup', () => {\n })\n }\n document.getElementsByClassName('drag_text')[0].style.color = '#fff'\n document.getElementsByClassName('handler')[0].style.left = this.maxWidth + 'px'\n document.getElementsByClassName('drag_bg')[0].style.width = this.maxWidth + 'px'\n },\n \/\/mousemove \u4e8b\u4ef6\n mouseMoveFn (e) {\n if (this.mouseMoveState) {\n let width = e.clientX - this.beginClientX\n if (width > 0 && width <= this.maxWidth) {\n document.getElementsByClassName('handler')[0].style.left = width + 'px'\n document.getElementsByClassName('drag_bg')[0].style.width = width + 'px'\n } else if (width > this.maxWidth) {\n this.successFunction()\n }\n }\n },\n \/\/mouseup \u4e8b\u4ef6\n moseUpFn (e) {\n this.mouseMoveState = false\n var width = e.clientX - this.beginClientX\n if (width < this.maxWidth) {\n document.getElementsByClassName('handler')[0].style.left = 0 + 'px'\n document.getElementsByClassName('drag_bg')[0].style.width = 0 + 'px'\n }\n }\n },\n mounted () {\n this.maxWidth = this.$refs.dragDiv.clientWidth - this.$refs.moveDiv.clientWidth\n document.getElementsByTagName('html')[0].addEventListener('mousemove', this.mouseMoveFn)\n document.getElementsByTagName('html')[0].addEventListener('mouseup', this.moseUpFn)\n }\n}\n<\/script>\n<style scoped>\n.drag {\n position: relative;\n background-color: #e8e8e8;\n width: 100%;\n height: 32px;\n line-height: 32px;\n text-align: center;\n border: 1px solid #ccc;\n\n}\n\n.handler {\n width: 40px;\n height: 32px;\n border: 1px solid #ccc;\n cursor: move;\n margin-top: -1px;\n margin-left: -1px;\n}\n\n.handler_bg {\n background: #fff url('..\/assets\/images\/arrow-r.png') no-repeat center;\n background-size: 25px;\n}\n\n.handler_ok_bg {\n background: #fff url('..\/assets\/images\/\u221a.png') no-repeat center;\n background-size: 18px;\n}\n\n.drag_bg {\n background-color: #7ac23c;\n height: 32px;\n width: 0;\n}\n\n.drag_text {\n position: absolute;\n top: 0;\n width: 100%;\n font-size: 12px;\n color: #706f6f;\n}\n\n<\/style>\n<\/code><\/pre>\nel-input \u805a\u7126\u540e\u80cc\u666f\u53d8\u767d<\/h3>\n<\/p>\n<\/p><\/noscript>\n.el-input__wrapper.is-focus {\n box-shadow: 0 0 0 1px #dcdfe6 inset;\n background-color: #fff;\n}<\/code><\/pre>\nel-input placeholder \u989c\u8272\u8bbe\u7f6e<\/h3>\n.el-input__inner::placeholder{\n color: #666666;\n}<\/code><\/pre>\n\u5224\u65ad el-checked \u662f\u5426\u9009\u4e2d,\u672a\u9009\u4e2d\u5219\u63d0\u793a\u8bf7\u52fe\u9009<\/h3>\n<\/p>\n<\/p><\/noscript>\nexport default {\nmounted() {\n const pleaseFit=document.getElementById('pleaseFit');\n $(".el-checkbox input").change(() => {\n if ($(".el-checkbox input[type='checkbox']").is(':checked') == true) {\n pleaseFit.style.display='none'\n } else {\n pleaseFit.style.display='block'\n }\n })\n }\n }<\/code><\/pre>\nel-input \u5728 style \u5168\u5c40\u6837\u5f0f,\u4f1a\u5f71\u54cd\u5230\u5176\u4ed6\u4e0d\u7b26\u5408\u8be5\u6837\u5f0f\u7684\u4f4d\u7f6e<\/h3>\n\n\u53ef\u4ee5\u5728 style scoped> \u5199,\u52a0\u4e0a\/deep\/<\/li>\n<\/ul>\n<\/p>\n<\/p><\/noscript>\n\/deep\/ .el-input__wrapper {\n box-shadow: 0 0 0 0 inset;\n background-color: rgb(255, 242, 0);\n}<\/code><\/pre>\nel-carousel \u8d70\u9a6c\u706f\u4fee\u6539 Carousel \u5de6\u53f3\u4e24\u4fa7\u7bad\u5934\u5b57\u4f53\u5927\u5c0f<\/h3>\n\/deep\/.el-carousel__arrow i {\n font-size: 29px !important;\n }<\/code><\/pre>\n\u9875\u9762\u5411\u4e0b\u6ed1\u52a8\u5bfc\u822a\u680f\u56fa\u5b9a<\/h3>\n<\/p>\n<\/p><\/noscript>\n.main_nav_fixed {\n position: sticky;\n top: 0;\n z-index: 999;\n}<\/code><\/pre>\n\u56fa\u5b9a\u5728\u53f3\u65b9\u7684,\u60ac\u6302\u51fa\u73b0\u4e8c\u7ef4\u7801<\/h3>\n<\/p>\n<\/p><\/noscript>\n<div class="share_box">\n <img src="..\/..\/assets\/images\/share_qr.png" alt=""\/>\n <\/div><\/code><\/pre>\n.share_box{\n width: 70px;\n height: 131px;\n top: 300px;\n right: 10px;\n cursor: pointer;\n position: fixed;\n z-index: 999;\n background: url("..\/..\/assets\/images\/share_wx.jpg") no-repeat;\n background-size: 100% 100%;\n}\n.share_box img{\n width: 100px;\n height: 100px;\n display: none;\n}\n.share_box:hover img {\n position: absolute;\n top: 50%;\n margin-top: -50px;\n right: 82px;\n display: block !important;\n}<\/code><\/pre>\nnth-child(n)\u6307\u7684\u662f\u5728\u7236\u5143\u7d20\u4e2d\u6240\u6709\u7684\u5143\u7d20\u7684\u987a\u5e8f<\/h3>\n\n\u5199\u4ee3\u7801\u8981\u6839\u636e\u76d2\u5b50\u4ee5\u53ca\u5185\u5bb9\u5199<\/li>\nbottom\uff1a0\uff1b\u8981\u76f8\u5bf9\u4e8e\u7236\u5143\u7d20\u7684 height \u5b9e\u73b0\uff0c\u5982\u679c\u7236\u7236\u5143\u7d20\u7684 height \u5927\u4e8e\u7236\u5143\u7d20\u7684 height\uff0c\uff0c\u5219\u4f1a\u6309\u7167\u7236\u7236\u5143\u7d20\u7684 height \u6765\u5b9e\u73b0 bottom\uff1a0\uff1b\u6765\u5b9e\u73b0\u3002\u3010\u9002\u5f53\u5220\u9664\u7236\u7236\u5143\u7d20\u7684 height\uff0c\u4e00\u677f\u5757\u901a\u5e38\u4e0d\u7528\u8bbe\u7f6e\u603b height\u3011<\/li>\n<\/ul>\n\u60ac\u6302\u56fe\u7247\u7f13\u7f13\u653e\u5927\u7684\u52a8\u753b\u6548\u679c<\/h3>\n<\/p>\n<\/p><\/noscript>\n.gc_project .item_img > img {\n width: 100%;\n height: 100%;\n transition: all 0.3s;\n}\n.gc_project .item_img > img:hover {\n transform: scale(1.05);\n box-shadow: rgb(0 0 0 \/ 23%) 0 4px 14px 0;\n}<\/code><\/pre>\n\u6eda\u52a8\u6761\u4fee\u6539<\/h3>\n<\/p>\n<\/p><\/noscript>\n.mleft::-webkit-scrollbar{\n width: 6px;\n background-color: #f8f8f8;\n\n}\n.mleft::-webkit-scrollbar-thumb{\n width: 6px;\n background-color: #adacac;\n border-radius: 4px;\n}<\/code><\/pre>\nhead \u533a '\u53d1\u73b0' \u5b9e\u73b0\u4ea4\u4e92\u6548\u679c [\u8be5\u9996\u9875\u6700\u607c\u706b\u7684]<\/h2>\n<\/p>\n<\/p><\/noscript>\ntodo head \u533a'\u53d1\u73b0'\u4ea4\u4e92\u5b9e\u73b0\u601d\u8def:<\/h3>\n\n\u2460\u89c2\u5bdf\u8be5\u533a\u7ed3\u6784,\u4e00\u4e2a\u5927\u6a21\u5757,\u5176\u4e2d\u5206\u4e3a\u5de6\u4e2d\u53f3\u4e09\u4e2a\u6a21\u5757,\u5e76\u4f9d\u6b21\u5199\u51fa\u4e09\u4e2a\u6a21\u5757\u7684\u4ee3\u7801,<\/li>\n\u2461\u5de6\u4fa7\u533a\u57df: \u8981\u5c55\u793a\u7684\u6548\u679c\u6709: \u9f20\u6807\u4e0a\u4e0b\u79fb\u52a8,\u6240\u7ecf\u7684 menuItem \u4f1a\u5c55\u73b0\u9ec4\u8272\u80cc\u666f, \u5219\u5f15\u7528 vue \u7684 ref \u5c5e\u6027\u5bf9 DOM \u5143\u7d20\u8fdb\u884c\u52a8\u6001\u7ed1\u5b9a.\n\n\u6ce8\u610f:ref \u9700\u8981\u5728 dom \u6e32\u67d3\u5b8c\u6210\u540e\u624d\u4f1a\u6709,\u5728\u4f7f\u7528\u7684\u65f6\u5019\u786e\u4fdd dom \u5df2\u7ecf\u6e32\u67d3\u5b8c\u6210, \u6bd4\u5982\u5728\u751f\u547d\u5468\u671f mounted(){}\u94a9\u5b50\u4e2d\u8c03\u7528. this.$refs.xxx:\u51cf\u5c11\u83b7\u53d6 dom \u8282\u70b9\u7684\u6d88\u8017<\/li>\n<\/ul>\n<\/li>\n\u2462\u5de6\u4fa7\u533a\u57df\u8fc7\u6ee4\u5230\u53f3\u4fa7\u533a\u57df,\u5c55\u793a\u5bf9\u5e94\u7684\u8be6\u60c5\u9875: mleftIn(item,index)\u51fd\u6570\u901a\u8fc7\u4f20\u8f93 v-for \u5faa\u73af\u4e2d\u6570\u7ec4 menuList \u7684 item \u6bcf\u4e00\u9879\u4e3a\u5a92\u4ecb, \u800c\u6570\u636e\u4e2d menuList \u4e2d\u5305\u542b\u5de6\u4fa7\u6570\u636e menuItem \u4e0e\u53f3\u4fa7\u6bcf\u4e00\u9875\u7684\u6807\u9898 menu \u76f8\u540c, \u4ece\u800c\u5c06\u5de6\u4fa7\u548c\u53f3\u4fa7\u6570\u636e\u7ed1\u5b9a, \u6545\u800c\u5f62\u6210\u4ece\u5de6\u4fa7\u8fc7\u6ee4\u5230\u53f3\u4fa7\u533a\u57df\u662f\u56fa\u5b9a\u7684\u8be6\u60c5\u9875\u5185\u5bb9.<\/li>\n\u2463\u9875\u9762\u7b2c\u4e8c\u6b21\u672a\u5237\u65b0\u4e4b\u524d(\u9996\u6b21\u8fdb\u5165\u9875\u9762\u6e32\u67d3), \u9f20\u6807\u60ac\u6302'\u53d1\u73b0',\u8981\u51fa\u73b0\u7b2c\u4e00\u4e2a'\u7cbe\u9009'\u8be6\u60c5\u9875\u53ca'\u7cbe\u9009'item \u80cc\u666f\u53d8\u9ec4: \u9f20\u6807\u79fb\u51fa\u8be5\u5143\u7d20[\u4e8c\u7ea7\u76ee\u5f55\u6574\u4e2a\u5927\u6a21\u5757]\u4e4b\u5916,\u5219\u89e6\u53d1 mouseleave \u4e8b\u4ef6,\u521d\u59cb\u5316\u6570\u636e.<\/li>\n\u2464\u7b2c\u4e8c\u6b21\u9875\u9762\u5237\u65b0\u4e4b\u540e,\u521d\u59cb\u5316\u6570\u636e: \u91c7\u7528 mounted \u751f\u547d\u5468\u671f[\u6e32\u67d3\u6210 html \u540e\u8c03\u7528]: \u4f7f\u9f20\u6807\u60ac\u6302'\u53d1\u73b0',\u7b2c\u4e00\u4e2a menu-item \u663e\u793a\u9ec4\u8272<\/li>\n<\/ul>\n <li class="find">\n <a href="#">\u53d1\u73b0<\/a>\n <div class="h_menu" @mouseleave="mleftLeave()">\n <div class="menu_box mleft">\n <!-- <a href="">\u7cbe\u9009<\/a>-->\n <a v-for="(item,index) in menuList" :key="index" :ref="'test'+index" href="javascript:;"\n @mouseover="mleftIn(item,index)">{{ item.menu }}<\/a>\n <!-- <el-cascader-panel :options="findOptions" :props="props" \/>-->\n <\/div>\n <div class="mright">\n <div class="cate-box">\n <a class="cate-title" href="">\n <img :src="data.url" alt="">\n <span>{{ data.menu }}<\/span>\n <\/a>\n <div class="subCate">\n <a v-for="(itemOne) in data.items" :key="itemOne">{{ itemOne.text }}<\/a>\n <\/div>\n <\/div>\n <\/div>\n <div class="right_bar">\n <div class="icons">\n <a>\n <span class="icon-box">\n <span class="tangle-1"><\/span>\n <span class="tangle-2"><\/span>\n <i class="ani-star"><\/i>\n <span class="tangle-3"><\/span>\n <\/span>\n <span class="icon-text">\u6536\u85cf\u5939<\/span>\n <\/a>\n <a>\n <img alt="" src="..\/assets\/images\/icon-header-discover-designer.png">\n <span>\u8bbe\u8ba1\u5e08<\/span>\n <\/a>\n <a>\n <img alt="" src="..\/assets\/images\/icon-header-discover-focus.png">\n <span>\u699c\u5355<\/span>\n <!-- <sup class="subNavDot"><\/sup>-->\n <\/a>\n <\/div>\n <div class="ad_box">\n\n <\/div>\n <\/div>\n <\/div>\n <\/li><\/code><\/pre>\n data: {},\n menuList: [\n {\n menu: '\u7cbe\u9009',\n url: require('..\/assets\/images\/zuanshi.png'),\n items: [\n { text: '\u8fd0\u8425\u8bbe\u8ba1' },\n { text: '\u5305\u88c5' },\n { text: '\u52a8\u753b\/\u5f71\u89c6' },\n { text: '\u4eba\u50cf\u6444\u5f71' },\n { text: '\u5546\u4e1a\u63d2\u753b' },\n { text: '\u7535\u5546' },\n { text: 'APP \u754c\u9762' },\n { text: '\u827a\u672f\u63d2\u753b' },\n { text: '\u5bb6\u88c5\u8bbe\u8ba1' },\n { text: '\u6d77\u62a5' },\n { text: '\u6587\u7ae0' }\n ]\n },\n { menu: '\u5e73\u9762' },\n { menu: 'UI' },\n { menu: '\u7f51\u9875' },\n { menu: '\u63d2\u753b' },\n { menu: '\u52a8\u6f2b' },\n { menu: '\u6444\u5f71' },\n { menu: '\u7a7a\u95f4' },\n { menu: '\u5de5\u4e1a\/\u4ea7\u54c1' },\n { menu: '\u4e09\u7ef4' },\n { menu: '\u5f71\u89c6' },\n { menu: '\u624b\u5de5\u827a' },\n { menu: '\u7eaf\u827a\u672f' },\n { menu: '\u670d\u88c5' },\n { menu: '\u5176\u4ed6' }\n ],<\/code><\/pre>\n \/\/\u6e32\u67d3\u6210 html \u4e4b\u524d\u8c03\u7528,\u521d\u59cb\u5316\u4e00\u4e9b\u5c5e\u6027\u503c [\u9f20\u6807\u60ac\u6302'\u53d1\u73b0',\u5c31\u51fa\u73b0\u7b2c\u4e00\u4e2a\u7cbe\u9009\u9875\u9762]\n created () {\n this.data = this.menuList[0]\n },\n \/\/\u6e32\u67d3\u6210 html \u540e\u8c03\u7528 [\u9f20\u6807\u60ac\u6302'\u53d1\u73b0',\u7b2c\u4e00\u4e2a menu-item \u663e\u793a\u9ec4\u8272](\u9875\u9762\u5237\u65b0\u4e86\u4e4b\u540e\u7684)\n mounted () {\n this.$refs['test' + 0][0].style.backgroundColor = 'rgb(255, 242, 0)'\n },\n methods: {\n \/\/\u9f20\u6807\u8fdb\u5165\u51fd\u6570\n mleftIn (item, index) {\n \/\/\u83b7\u53d6 menuList \u4e2d\u6bcf\u4e2a menuItem \u5b57\u7b26\u4e32\u7684\u957f\u5ea6\n let menuSize = this.menuList.length\n for (let i = 0; i < menuSize; i++) {\n \/\/for \u5faa\u73af,i \u5982\u679c\u5c0f\u4e8e menuSize,\u5219\u7f6e\u4e8e menuItem \u989c\u8272\u4e3a\u7070\u8272,\u5b9e\u73b0\u5207\u6362\u6548\u679c\n this.$refs['test' + i][0].style.backgroundColor = '#f8f8f8'\n }\n \/\/\u8df3\u51fa for \u5faa\u73af,\u7531\u5de6\u4fa7\u79fb\u5411\u53f3\u4fa7\u8be6\u60c5\u9875\u65f6,\u5176 menuItem \u7684\u989c\u8272\u4e3a\u9ec4\u8272\n this.$refs['test' + index][0].style.backgroundColor = 'rgb(255, 242, 0)'\n \/\/\u5c06\u53f3\u4fa7\u6570\u636e\u8bbe\u7f6e\u4e3a item,\u663e\u793a\u6570\u636e\n this.data = item\n },\n \/\/\u9f20\u6807\u8fdb\u5165\u51fd\u6570\n \/\/\u6ce8\u610f: mouseleave:\u662f\u9f20\u6807\u79fb\u51fa\u8be5\u5143\u7d20\u4e4b\u5916,\u5219\u89e6\u53d1 mouseleave \u4e8b\u4ef6\n \/\/ mouseout : \u662f\u5f53\u6307\u9488\u79bb\u5f00\u8be5\u5143\u7d20\u53ca\u5176\u6240\u6709\u540e\u4ee3\u65f6\uff0c\u4f1a\u89e6\u53d1 mouseleave\n \/\/ \u800c\u5f53\u6307\u9488\u79bb\u5f00\u5143\u7d20\u6216\u79bb\u5f00\u5143\u7d20\u7684\u540e\u4ee3\uff08\u5373\u4f7f\u6307\u9488\u4ecd\u5728\u5143\u7d20\u5185\uff09\u65f6\uff0c\u4e5f\u4f1a\u89e6\u53d1 mouseout \u4e8b\u4ef6\n mleftLeave () {\n \/\/\u83b7\u53d6 menuList \u4e2d\u6bcf\u4e2a menuItem \u5b57\u7b26\u4e32\u7684\u957f\u5ea6\n let menuSize = this.menuList.length\n for (let i = 0; i < menuSize; i++) {\n this.$refs['test' + i][0].style.backgroundColor = '#f8f8f8'\n }\n \/\/ \u8df3\u51fa\u5faa\u73af,\u6d4f\u89c8\u5b8c'\u53d1\u73b0',\u9f20\u6807\u79fb\u51fa,\u7f6e\u4e8e\u53f3\u4fa7\u6570\u636e\u4e3a\u7b2c\u4e00\u4e2a\u7cbe\u9009\u6570\u636e\n this.data = this.menuList[0]\n \/\/\u9f20\u6807\u79fb\u51fa\u4e8b\u4ef6,\u7f6e\u4e8e\u7b2c\u4e00\u4e2a menuitem \u4e3a\u9ec4\u8272[\u672a\u5237\u65b0\u65f6\u7684\u8bbe\u7f6e]\n this.$refs['test' + 0][0].style.backgroundColor = 'rgb(255, 242, 0)'\n\n \/\/ this.data = {}\n \/\/ this.$refs['test'+index][0].style.backgroundColor = '#f8f8f8'\n \/\/ console.log('\u6eda\u51fa\u53bb')\n },\n}<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"\u4e0b\u8f7d\u4f9d\u8d56\u901f\u5ea6\u5feb npm install –registry=https:\/\/registry.npm.tao […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[],"class_list":["post-3462","post","type-post","status-publish","format-standard","hentry","category-web"],"_links":{"self":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/3462","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3462"}],"version-history":[{"count":38,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/3462\/revisions"}],"predecessor-version":[{"id":3558,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/3462\/revisions\/3558"}],"wp:attachment":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3462"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=3462"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=3462"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
<el-cascader-panel :options="findOptions" :props="props"\/><\/code><\/pre>\n\/*\u4e8c\u7ea7\u76ee\u5f55\u7684\u9ad8\u5ea6*\/\n\/deep\/.el-cascader-menu__wrap.el-scrollbar__wrap {\n height: 490px;\n}\n\/*item \u60ac\u6302\u9ec4\u8272\u80cc\u666f\u5bbd\u95f4\u8ddd*\/\n\/deep\/.el-cascader-node {\nheight: 45px;\n width: 165px;\n padding: 0;\n margin-left: 10px;\n}\n\/*item \u60ac\u6302\u9ec4\u8272\u80cc\u666f*\/\n\/deep\/ .el-cascader-node:not(.is-disabled):hover {\n background: #fff200;\n border-radius: 8px;\n}\n\/*\u70b9\u51fb\u540e\u6539\u53d8\u989c\u8272,\u7c97\u7ec6\u53d6\u6d88\u70b9\u51fb\u6548\u679c*\/\n\/deep\/.el-cascader-node.is-active{\ncolor: #222222;\n font-weight: normal;\n}\n\/*item \u5de6\u8fb9\u6709\u4e2a\u5c0f\u52fe\u221a*\/\n\/deep\/.el-icon svg {\n height: 0;\n width: 0;\n}\n\/*\u53d1\u73b0\u7684\u4e8c\u7ea7\u76ee\u5f55\u6d88\u5931*\/\n.el-cascader-panel{\n display: none;\n}\n\/*\u53d6\u6d88\u8fb9\u6846*\/\n.el-cascader-panel.is-bordered {\n border: none;\n}\n\/*\u60ac\u6302'\u53d1\u73b0'\u76ee\u5f55,\u51fa\u73b0\u4e8c\u7ea7\u76ee\u5f55*\/\n.topbar .shortcut-links > ul > li:nth-child(2):hover .el-cascader-panel{\n display: block;\n background-color: #f8f8f8;\n border-radius: 8px 0 8px 8px;\n}<\/code><\/pre>\n\u626b\u4e8c\u7ef4\u7801\u767b\u5f55\u548c\u5bc6\u7801\u767b\u5f55\u9875\u9762\u7684\u5207\u6362<\/h3>\n@click="handleChangeToLogin()"<\/code><\/pre>\n handleChangeToLogin () {\n const qr = document.getElementById('qr_code')\n const login = document.getElementById('login')\n qr.style.display = 'none';\n if (qr.style.display === 'none') {\n login.style.display = 'block'\n }\n },\n handleChangeToQr () {\n const qr = document.getElementById('qr_code')\n const login = document.getElementById('login')\n login.style.display = 'none'\n if (login.style.display === 'none') {\n qr.style.display = 'block'\n }\n }<\/code><\/pre>\n\u767b\u5f55\u6846\u7684\u6ed1\u5757\u9a8c\u8bc1<\/h3>\n<\/p>\n<\/p><\/noscript>\n<\/slider><\/p>\n<template>\n <div ref="dragDiv" class="drag">\n <div class="drag_bg"><\/div>\n <div class="drag_text">{{ confirmWords }}<\/div>\n <div ref="moveDiv" :class="{'handler_ok_bg':confirmSuccess}" class="handler handler_bg"\n style="position: absolute;top: 0;left: 0;" @mousedown="mouseDownFn($event)"><\/div>\n <\/div>\n<\/template>\n\n<script>\nexport default {\n data () {\n return {\n beginClientX: 0, \/*\u8ddd\u79bb\u5c4f\u5e55\u5de6\u7aef\u8ddd\u79bb*\/\n mouseMoveState: false, \/*\u89e6\u53d1\u62d6\u52a8\u72b6\u6001 \u5224\u65ad*\/\n maxWidth: '', \/*\u62d6\u52a8\u6700\u5927\u5bbd\u5ea6\uff0c\u4f9d\u636e\u6ed1\u5757\u5bbd\u5ea6\u7b97\u51fa\u6765\u7684*\/\n confirmWords: '\u8bf7\u6309\u4f4f\u6ed1\u5757,\u62d6\u52a8\u5230\u6700\u53f3\u8fb9', \/*\u6ed1\u5757\u6587\u5b57*\/\n confirmSuccess: false \/*\u9a8c\u8bc1\u6210\u529f\u5224\u65ad*\/\n }\n },\n methods: {\n \/\/mousedown \u4e8b\u4ef6\n mouseDownFn: function (e) {\n if (!this.confirmSuccess) {\n e.preventDefault && e.preventDefault() \/\/\u963b\u6b62\u6587\u5b57\u9009\u4e2d\u7b49 \u6d4f\u89c8\u5668\u9ed8\u8ba4\u4e8b\u4ef6\n this.mouseMoveState = true\n this.beginClientX = e.clientX\n }\n },\n \/\/\u9a8c\u8bc1\u6210\u529f\u51fd\u6570\n successFunction () {\n this.confirmSuccess = true\n this.confirmWords = '\u9a8c\u8bc1\u901a\u8fc7'\n if (window.addEventListener) {\n document.getElementsByTagName('html')[0].removeEventListener('mousemove', this.mouseMoveFn)\n document.getElementsByTagName('html')[0].removeEventListener('mouseup', this.moseUpFn)\n } else {\n document.getElementsByTagName('html')[0].removeEventListener('mouseup', () => {\n })\n }\n document.getElementsByClassName('drag_text')[0].style.color = '#fff'\n document.getElementsByClassName('handler')[0].style.left = this.maxWidth + 'px'\n document.getElementsByClassName('drag_bg')[0].style.width = this.maxWidth + 'px'\n },\n \/\/mousemove \u4e8b\u4ef6\n mouseMoveFn (e) {\n if (this.mouseMoveState) {\n let width = e.clientX - this.beginClientX\n if (width > 0 && width <= this.maxWidth) {\n document.getElementsByClassName('handler')[0].style.left = width + 'px'\n document.getElementsByClassName('drag_bg')[0].style.width = width + 'px'\n } else if (width > this.maxWidth) {\n this.successFunction()\n }\n }\n },\n \/\/mouseup \u4e8b\u4ef6\n moseUpFn (e) {\n this.mouseMoveState = false\n var width = e.clientX - this.beginClientX\n if (width < this.maxWidth) {\n document.getElementsByClassName('handler')[0].style.left = 0 + 'px'\n document.getElementsByClassName('drag_bg')[0].style.width = 0 + 'px'\n }\n }\n },\n mounted () {\n this.maxWidth = this.$refs.dragDiv.clientWidth - this.$refs.moveDiv.clientWidth\n document.getElementsByTagName('html')[0].addEventListener('mousemove', this.mouseMoveFn)\n document.getElementsByTagName('html')[0].addEventListener('mouseup', this.moseUpFn)\n }\n}\n<\/script>\n<style scoped>\n.drag {\n position: relative;\n background-color: #e8e8e8;\n width: 100%;\n height: 32px;\n line-height: 32px;\n text-align: center;\n border: 1px solid #ccc;\n\n}\n\n.handler {\n width: 40px;\n height: 32px;\n border: 1px solid #ccc;\n cursor: move;\n margin-top: -1px;\n margin-left: -1px;\n}\n\n.handler_bg {\n background: #fff url('..\/assets\/images\/arrow-r.png') no-repeat center;\n background-size: 25px;\n}\n\n.handler_ok_bg {\n background: #fff url('..\/assets\/images\/\u221a.png') no-repeat center;\n background-size: 18px;\n}\n\n.drag_bg {\n background-color: #7ac23c;\n height: 32px;\n width: 0;\n}\n\n.drag_text {\n position: absolute;\n top: 0;\n width: 100%;\n font-size: 12px;\n color: #706f6f;\n}\n\n<\/style>\n<\/code><\/pre>\nel-input \u805a\u7126\u540e\u80cc\u666f\u53d8\u767d<\/h3>\n<\/p>\n<\/p><\/noscript>\n.el-input__wrapper.is-focus {\n box-shadow: 0 0 0 1px #dcdfe6 inset;\n background-color: #fff;\n}<\/code><\/pre>\nel-input placeholder \u989c\u8272\u8bbe\u7f6e<\/h3>\n.el-input__inner::placeholder{\n color: #666666;\n}<\/code><\/pre>\n\u5224\u65ad el-checked \u662f\u5426\u9009\u4e2d,\u672a\u9009\u4e2d\u5219\u63d0\u793a\u8bf7\u52fe\u9009<\/h3>\n<\/p>\n<\/p><\/noscript>\nexport default {\nmounted() {\n const pleaseFit=document.getElementById('pleaseFit');\n $(".el-checkbox input").change(() => {\n if ($(".el-checkbox input[type='checkbox']").is(':checked') == true) {\n pleaseFit.style.display='none'\n } else {\n pleaseFit.style.display='block'\n }\n })\n }\n }<\/code><\/pre>\nel-input \u5728 style \u5168\u5c40\u6837\u5f0f,\u4f1a\u5f71\u54cd\u5230\u5176\u4ed6\u4e0d\u7b26\u5408\u8be5\u6837\u5f0f\u7684\u4f4d\u7f6e<\/h3>\n\n\u53ef\u4ee5\u5728 style scoped> \u5199,\u52a0\u4e0a\/deep\/<\/li>\n<\/ul>\n<\/p>\n<\/p><\/noscript>\n\/deep\/ .el-input__wrapper {\n box-shadow: 0 0 0 0 inset;\n background-color: rgb(255, 242, 0);\n}<\/code><\/pre>\nel-carousel \u8d70\u9a6c\u706f\u4fee\u6539 Carousel \u5de6\u53f3\u4e24\u4fa7\u7bad\u5934\u5b57\u4f53\u5927\u5c0f<\/h3>\n\/deep\/.el-carousel__arrow i {\n font-size: 29px !important;\n }<\/code><\/pre>\n\u9875\u9762\u5411\u4e0b\u6ed1\u52a8\u5bfc\u822a\u680f\u56fa\u5b9a<\/h3>\n<\/p>\n<\/p><\/noscript>\n.main_nav_fixed {\n position: sticky;\n top: 0;\n z-index: 999;\n}<\/code><\/pre>\n\u56fa\u5b9a\u5728\u53f3\u65b9\u7684,\u60ac\u6302\u51fa\u73b0\u4e8c\u7ef4\u7801<\/h3>\n<\/p>\n<\/p><\/noscript>\n<div class="share_box">\n <img src="..\/..\/assets\/images\/share_qr.png" alt=""\/>\n <\/div><\/code><\/pre>\n.share_box{\n width: 70px;\n height: 131px;\n top: 300px;\n right: 10px;\n cursor: pointer;\n position: fixed;\n z-index: 999;\n background: url("..\/..\/assets\/images\/share_wx.jpg") no-repeat;\n background-size: 100% 100%;\n}\n.share_box img{\n width: 100px;\n height: 100px;\n display: none;\n}\n.share_box:hover img {\n position: absolute;\n top: 50%;\n margin-top: -50px;\n right: 82px;\n display: block !important;\n}<\/code><\/pre>\nnth-child(n)\u6307\u7684\u662f\u5728\u7236\u5143\u7d20\u4e2d\u6240\u6709\u7684\u5143\u7d20\u7684\u987a\u5e8f<\/h3>\n\n\u5199\u4ee3\u7801\u8981\u6839\u636e\u76d2\u5b50\u4ee5\u53ca\u5185\u5bb9\u5199<\/li>\nbottom\uff1a0\uff1b\u8981\u76f8\u5bf9\u4e8e\u7236\u5143\u7d20\u7684 height \u5b9e\u73b0\uff0c\u5982\u679c\u7236\u7236\u5143\u7d20\u7684 height \u5927\u4e8e\u7236\u5143\u7d20\u7684 height\uff0c\uff0c\u5219\u4f1a\u6309\u7167\u7236\u7236\u5143\u7d20\u7684 height \u6765\u5b9e\u73b0 bottom\uff1a0\uff1b\u6765\u5b9e\u73b0\u3002\u3010\u9002\u5f53\u5220\u9664\u7236\u7236\u5143\u7d20\u7684 height\uff0c\u4e00\u677f\u5757\u901a\u5e38\u4e0d\u7528\u8bbe\u7f6e\u603b height\u3011<\/li>\n<\/ul>\n\u60ac\u6302\u56fe\u7247\u7f13\u7f13\u653e\u5927\u7684\u52a8\u753b\u6548\u679c<\/h3>\n<\/p>\n<\/p><\/noscript>\n.gc_project .item_img > img {\n width: 100%;\n height: 100%;\n transition: all 0.3s;\n}\n.gc_project .item_img > img:hover {\n transform: scale(1.05);\n box-shadow: rgb(0 0 0 \/ 23%) 0 4px 14px 0;\n}<\/code><\/pre>\n\u6eda\u52a8\u6761\u4fee\u6539<\/h3>\n<\/p>\n<\/p><\/noscript>\n.mleft::-webkit-scrollbar{\n width: 6px;\n background-color: #f8f8f8;\n\n}\n.mleft::-webkit-scrollbar-thumb{\n width: 6px;\n background-color: #adacac;\n border-radius: 4px;\n}<\/code><\/pre>\nhead \u533a '\u53d1\u73b0' \u5b9e\u73b0\u4ea4\u4e92\u6548\u679c [\u8be5\u9996\u9875\u6700\u607c\u706b\u7684]<\/h2>\n<\/p>\n<\/p><\/noscript>\ntodo head \u533a'\u53d1\u73b0'\u4ea4\u4e92\u5b9e\u73b0\u601d\u8def:<\/h3>\n\n\u2460\u89c2\u5bdf\u8be5\u533a\u7ed3\u6784,\u4e00\u4e2a\u5927\u6a21\u5757,\u5176\u4e2d\u5206\u4e3a\u5de6\u4e2d\u53f3\u4e09\u4e2a\u6a21\u5757,\u5e76\u4f9d\u6b21\u5199\u51fa\u4e09\u4e2a\u6a21\u5757\u7684\u4ee3\u7801,<\/li>\n\u2461\u5de6\u4fa7\u533a\u57df: \u8981\u5c55\u793a\u7684\u6548\u679c\u6709: \u9f20\u6807\u4e0a\u4e0b\u79fb\u52a8,\u6240\u7ecf\u7684 menuItem \u4f1a\u5c55\u73b0\u9ec4\u8272\u80cc\u666f, \u5219\u5f15\u7528 vue \u7684 ref \u5c5e\u6027\u5bf9 DOM \u5143\u7d20\u8fdb\u884c\u52a8\u6001\u7ed1\u5b9a.\n\n\u6ce8\u610f:ref \u9700\u8981\u5728 dom \u6e32\u67d3\u5b8c\u6210\u540e\u624d\u4f1a\u6709,\u5728\u4f7f\u7528\u7684\u65f6\u5019\u786e\u4fdd dom \u5df2\u7ecf\u6e32\u67d3\u5b8c\u6210, \u6bd4\u5982\u5728\u751f\u547d\u5468\u671f mounted(){}\u94a9\u5b50\u4e2d\u8c03\u7528. this.$refs.xxx:\u51cf\u5c11\u83b7\u53d6 dom \u8282\u70b9\u7684\u6d88\u8017<\/li>\n<\/ul>\n<\/li>\n\u2462\u5de6\u4fa7\u533a\u57df\u8fc7\u6ee4\u5230\u53f3\u4fa7\u533a\u57df,\u5c55\u793a\u5bf9\u5e94\u7684\u8be6\u60c5\u9875: mleftIn(item,index)\u51fd\u6570\u901a\u8fc7\u4f20\u8f93 v-for \u5faa\u73af\u4e2d\u6570\u7ec4 menuList \u7684 item \u6bcf\u4e00\u9879\u4e3a\u5a92\u4ecb, \u800c\u6570\u636e\u4e2d menuList \u4e2d\u5305\u542b\u5de6\u4fa7\u6570\u636e menuItem \u4e0e\u53f3\u4fa7\u6bcf\u4e00\u9875\u7684\u6807\u9898 menu \u76f8\u540c, \u4ece\u800c\u5c06\u5de6\u4fa7\u548c\u53f3\u4fa7\u6570\u636e\u7ed1\u5b9a, \u6545\u800c\u5f62\u6210\u4ece\u5de6\u4fa7\u8fc7\u6ee4\u5230\u53f3\u4fa7\u533a\u57df\u662f\u56fa\u5b9a\u7684\u8be6\u60c5\u9875\u5185\u5bb9.<\/li>\n\u2463\u9875\u9762\u7b2c\u4e8c\u6b21\u672a\u5237\u65b0\u4e4b\u524d(\u9996\u6b21\u8fdb\u5165\u9875\u9762\u6e32\u67d3), \u9f20\u6807\u60ac\u6302'\u53d1\u73b0',\u8981\u51fa\u73b0\u7b2c\u4e00\u4e2a'\u7cbe\u9009'\u8be6\u60c5\u9875\u53ca'\u7cbe\u9009'item \u80cc\u666f\u53d8\u9ec4: \u9f20\u6807\u79fb\u51fa\u8be5\u5143\u7d20[\u4e8c\u7ea7\u76ee\u5f55\u6574\u4e2a\u5927\u6a21\u5757]\u4e4b\u5916,\u5219\u89e6\u53d1 mouseleave \u4e8b\u4ef6,\u521d\u59cb\u5316\u6570\u636e.<\/li>\n\u2464\u7b2c\u4e8c\u6b21\u9875\u9762\u5237\u65b0\u4e4b\u540e,\u521d\u59cb\u5316\u6570\u636e: \u91c7\u7528 mounted \u751f\u547d\u5468\u671f[\u6e32\u67d3\u6210 html \u540e\u8c03\u7528]: \u4f7f\u9f20\u6807\u60ac\u6302'\u53d1\u73b0',\u7b2c\u4e00\u4e2a menu-item \u663e\u793a\u9ec4\u8272<\/li>\n<\/ul>\n <li class="find">\n <a href="#">\u53d1\u73b0<\/a>\n <div class="h_menu" @mouseleave="mleftLeave()">\n <div class="menu_box mleft">\n <!-- <a href="">\u7cbe\u9009<\/a>-->\n <a v-for="(item,index) in menuList" :key="index" :ref="'test'+index" href="javascript:;"\n @mouseover="mleftIn(item,index)">{{ item.menu }}<\/a>\n <!-- <el-cascader-panel :options="findOptions" :props="props" \/>-->\n <\/div>\n <div class="mright">\n <div class="cate-box">\n <a class="cate-title" href="">\n <img :src="data.url" alt="">\n <span>{{ data.menu }}<\/span>\n <\/a>\n <div class="subCate">\n <a v-for="(itemOne) in data.items" :key="itemOne">{{ itemOne.text }}<\/a>\n <\/div>\n <\/div>\n <\/div>\n <div class="right_bar">\n <div class="icons">\n <a>\n <span class="icon-box">\n <span class="tangle-1"><\/span>\n <span class="tangle-2"><\/span>\n <i class="ani-star"><\/i>\n <span class="tangle-3"><\/span>\n <\/span>\n <span class="icon-text">\u6536\u85cf\u5939<\/span>\n <\/a>\n <a>\n <img alt="" src="..\/assets\/images\/icon-header-discover-designer.png">\n <span>\u8bbe\u8ba1\u5e08<\/span>\n <\/a>\n <a>\n <img alt="" src="..\/assets\/images\/icon-header-discover-focus.png">\n <span>\u699c\u5355<\/span>\n <!-- <sup class="subNavDot"><\/sup>-->\n <\/a>\n <\/div>\n <div class="ad_box">\n\n <\/div>\n <\/div>\n <\/div>\n <\/li><\/code><\/pre>\n data: {},\n menuList: [\n {\n menu: '\u7cbe\u9009',\n url: require('..\/assets\/images\/zuanshi.png'),\n items: [\n { text: '\u8fd0\u8425\u8bbe\u8ba1' },\n { text: '\u5305\u88c5' },\n { text: '\u52a8\u753b\/\u5f71\u89c6' },\n { text: '\u4eba\u50cf\u6444\u5f71' },\n { text: '\u5546\u4e1a\u63d2\u753b' },\n { text: '\u7535\u5546' },\n { text: 'APP \u754c\u9762' },\n { text: '\u827a\u672f\u63d2\u753b' },\n { text: '\u5bb6\u88c5\u8bbe\u8ba1' },\n { text: '\u6d77\u62a5' },\n { text: '\u6587\u7ae0' }\n ]\n },\n { menu: '\u5e73\u9762' },\n { menu: 'UI' },\n { menu: '\u7f51\u9875' },\n { menu: '\u63d2\u753b' },\n { menu: '\u52a8\u6f2b' },\n { menu: '\u6444\u5f71' },\n { menu: '\u7a7a\u95f4' },\n { menu: '\u5de5\u4e1a\/\u4ea7\u54c1' },\n { menu: '\u4e09\u7ef4' },\n { menu: '\u5f71\u89c6' },\n { menu: '\u624b\u5de5\u827a' },\n { menu: '\u7eaf\u827a\u672f' },\n { menu: '\u670d\u88c5' },\n { menu: '\u5176\u4ed6' }\n ],<\/code><\/pre>\n \/\/\u6e32\u67d3\u6210 html \u4e4b\u524d\u8c03\u7528,\u521d\u59cb\u5316\u4e00\u4e9b\u5c5e\u6027\u503c [\u9f20\u6807\u60ac\u6302'\u53d1\u73b0',\u5c31\u51fa\u73b0\u7b2c\u4e00\u4e2a\u7cbe\u9009\u9875\u9762]\n created () {\n this.data = this.menuList[0]\n },\n \/\/\u6e32\u67d3\u6210 html \u540e\u8c03\u7528 [\u9f20\u6807\u60ac\u6302'\u53d1\u73b0',\u7b2c\u4e00\u4e2a menu-item \u663e\u793a\u9ec4\u8272](\u9875\u9762\u5237\u65b0\u4e86\u4e4b\u540e\u7684)\n mounted () {\n this.$refs['test' + 0][0].style.backgroundColor = 'rgb(255, 242, 0)'\n },\n methods: {\n \/\/\u9f20\u6807\u8fdb\u5165\u51fd\u6570\n mleftIn (item, index) {\n \/\/\u83b7\u53d6 menuList \u4e2d\u6bcf\u4e2a menuItem \u5b57\u7b26\u4e32\u7684\u957f\u5ea6\n let menuSize = this.menuList.length\n for (let i = 0; i < menuSize; i++) {\n \/\/for \u5faa\u73af,i \u5982\u679c\u5c0f\u4e8e menuSize,\u5219\u7f6e\u4e8e menuItem \u989c\u8272\u4e3a\u7070\u8272,\u5b9e\u73b0\u5207\u6362\u6548\u679c\n this.$refs['test' + i][0].style.backgroundColor = '#f8f8f8'\n }\n \/\/\u8df3\u51fa for \u5faa\u73af,\u7531\u5de6\u4fa7\u79fb\u5411\u53f3\u4fa7\u8be6\u60c5\u9875\u65f6,\u5176 menuItem \u7684\u989c\u8272\u4e3a\u9ec4\u8272\n this.$refs['test' + index][0].style.backgroundColor = 'rgb(255, 242, 0)'\n \/\/\u5c06\u53f3\u4fa7\u6570\u636e\u8bbe\u7f6e\u4e3a item,\u663e\u793a\u6570\u636e\n this.data = item\n },\n \/\/\u9f20\u6807\u8fdb\u5165\u51fd\u6570\n \/\/\u6ce8\u610f: mouseleave:\u662f\u9f20\u6807\u79fb\u51fa\u8be5\u5143\u7d20\u4e4b\u5916,\u5219\u89e6\u53d1 mouseleave \u4e8b\u4ef6\n \/\/ mouseout : \u662f\u5f53\u6307\u9488\u79bb\u5f00\u8be5\u5143\u7d20\u53ca\u5176\u6240\u6709\u540e\u4ee3\u65f6\uff0c\u4f1a\u89e6\u53d1 mouseleave\n \/\/ \u800c\u5f53\u6307\u9488\u79bb\u5f00\u5143\u7d20\u6216\u79bb\u5f00\u5143\u7d20\u7684\u540e\u4ee3\uff08\u5373\u4f7f\u6307\u9488\u4ecd\u5728\u5143\u7d20\u5185\uff09\u65f6\uff0c\u4e5f\u4f1a\u89e6\u53d1 mouseout \u4e8b\u4ef6\n mleftLeave () {\n \/\/\u83b7\u53d6 menuList \u4e2d\u6bcf\u4e2a menuItem \u5b57\u7b26\u4e32\u7684\u957f\u5ea6\n let menuSize = this.menuList.length\n for (let i = 0; i < menuSize; i++) {\n this.$refs['test' + i][0].style.backgroundColor = '#f8f8f8'\n }\n \/\/ \u8df3\u51fa\u5faa\u73af,\u6d4f\u89c8\u5b8c'\u53d1\u73b0',\u9f20\u6807\u79fb\u51fa,\u7f6e\u4e8e\u53f3\u4fa7\u6570\u636e\u4e3a\u7b2c\u4e00\u4e2a\u7cbe\u9009\u6570\u636e\n this.data = this.menuList[0]\n \/\/\u9f20\u6807\u79fb\u51fa\u4e8b\u4ef6,\u7f6e\u4e8e\u7b2c\u4e00\u4e2a menuitem \u4e3a\u9ec4\u8272[\u672a\u5237\u65b0\u65f6\u7684\u8bbe\u7f6e]\n this.$refs['test' + 0][0].style.backgroundColor = 'rgb(255, 242, 0)'\n\n \/\/ this.data = {}\n \/\/ this.$refs['test'+index][0].style.backgroundColor = '#f8f8f8'\n \/\/ console.log('\u6eda\u51fa\u53bb')\n },\n}<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"\u4e0b\u8f7d\u4f9d\u8d56\u901f\u5ea6\u5feb npm install –registry=https:\/\/registry.npm.tao […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[],"class_list":["post-3462","post","type-post","status-publish","format-standard","hentry","category-web"],"_links":{"self":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/3462","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3462"}],"version-history":[{"count":38,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/3462\/revisions"}],"predecessor-version":[{"id":3558,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/3462\/revisions\/3558"}],"wp:attachment":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3462"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=3462"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=3462"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
\/*\u4e8c\u7ea7\u76ee\u5f55\u7684\u9ad8\u5ea6*\/\n\/deep\/.el-cascader-menu__wrap.el-scrollbar__wrap {\n height: 490px;\n}\n\/*item \u60ac\u6302\u9ec4\u8272\u80cc\u666f\u5bbd\u95f4\u8ddd*\/\n\/deep\/.el-cascader-node {\nheight: 45px;\n width: 165px;\n padding: 0;\n margin-left: 10px;\n}\n\/*item \u60ac\u6302\u9ec4\u8272\u80cc\u666f*\/\n\/deep\/ .el-cascader-node:not(.is-disabled):hover {\n background: #fff200;\n border-radius: 8px;\n}\n\/*\u70b9\u51fb\u540e\u6539\u53d8\u989c\u8272,\u7c97\u7ec6\u53d6\u6d88\u70b9\u51fb\u6548\u679c*\/\n\/deep\/.el-cascader-node.is-active{\ncolor: #222222;\n font-weight: normal;\n}\n\/*item \u5de6\u8fb9\u6709\u4e2a\u5c0f\u52fe\u221a*\/\n\/deep\/.el-icon svg {\n height: 0;\n width: 0;\n}\n\/*\u53d1\u73b0\u7684\u4e8c\u7ea7\u76ee\u5f55\u6d88\u5931*\/\n.el-cascader-panel{\n display: none;\n}\n\/*\u53d6\u6d88\u8fb9\u6846*\/\n.el-cascader-panel.is-bordered {\n border: none;\n}\n\/*\u60ac\u6302'\u53d1\u73b0'\u76ee\u5f55,\u51fa\u73b0\u4e8c\u7ea7\u76ee\u5f55*\/\n.topbar .shortcut-links > ul > li:nth-child(2):hover .el-cascader-panel{\n display: block;\n background-color: #f8f8f8;\n border-radius: 8px 0 8px 8px;\n}<\/code><\/pre>\n\u626b\u4e8c\u7ef4\u7801\u767b\u5f55\u548c\u5bc6\u7801\u767b\u5f55\u9875\u9762\u7684\u5207\u6362<\/h3>\n@click="handleChangeToLogin()"<\/code><\/pre>\n handleChangeToLogin () {\n const qr = document.getElementById('qr_code')\n const login = document.getElementById('login')\n qr.style.display = 'none';\n if (qr.style.display === 'none') {\n login.style.display = 'block'\n }\n },\n handleChangeToQr () {\n const qr = document.getElementById('qr_code')\n const login = document.getElementById('login')\n login.style.display = 'none'\n if (login.style.display === 'none') {\n qr.style.display = 'block'\n }\n }<\/code><\/pre>\n\u767b\u5f55\u6846\u7684\u6ed1\u5757\u9a8c\u8bc1<\/h3>\n<\/p>\n<\/p><\/noscript>\n<\/slider><\/p>\n<template>\n <div ref="dragDiv" class="drag">\n <div class="drag_bg"><\/div>\n <div class="drag_text">{{ confirmWords }}<\/div>\n <div ref="moveDiv" :class="{'handler_ok_bg':confirmSuccess}" class="handler handler_bg"\n style="position: absolute;top: 0;left: 0;" @mousedown="mouseDownFn($event)"><\/div>\n <\/div>\n<\/template>\n\n<script>\nexport default {\n data () {\n return {\n beginClientX: 0, \/*\u8ddd\u79bb\u5c4f\u5e55\u5de6\u7aef\u8ddd\u79bb*\/\n mouseMoveState: false, \/*\u89e6\u53d1\u62d6\u52a8\u72b6\u6001 \u5224\u65ad*\/\n maxWidth: '', \/*\u62d6\u52a8\u6700\u5927\u5bbd\u5ea6\uff0c\u4f9d\u636e\u6ed1\u5757\u5bbd\u5ea6\u7b97\u51fa\u6765\u7684*\/\n confirmWords: '\u8bf7\u6309\u4f4f\u6ed1\u5757,\u62d6\u52a8\u5230\u6700\u53f3\u8fb9', \/*\u6ed1\u5757\u6587\u5b57*\/\n confirmSuccess: false \/*\u9a8c\u8bc1\u6210\u529f\u5224\u65ad*\/\n }\n },\n methods: {\n \/\/mousedown \u4e8b\u4ef6\n mouseDownFn: function (e) {\n if (!this.confirmSuccess) {\n e.preventDefault && e.preventDefault() \/\/\u963b\u6b62\u6587\u5b57\u9009\u4e2d\u7b49 \u6d4f\u89c8\u5668\u9ed8\u8ba4\u4e8b\u4ef6\n this.mouseMoveState = true\n this.beginClientX = e.clientX\n }\n },\n \/\/\u9a8c\u8bc1\u6210\u529f\u51fd\u6570\n successFunction () {\n this.confirmSuccess = true\n this.confirmWords = '\u9a8c\u8bc1\u901a\u8fc7'\n if (window.addEventListener) {\n document.getElementsByTagName('html')[0].removeEventListener('mousemove', this.mouseMoveFn)\n document.getElementsByTagName('html')[0].removeEventListener('mouseup', this.moseUpFn)\n } else {\n document.getElementsByTagName('html')[0].removeEventListener('mouseup', () => {\n })\n }\n document.getElementsByClassName('drag_text')[0].style.color = '#fff'\n document.getElementsByClassName('handler')[0].style.left = this.maxWidth + 'px'\n document.getElementsByClassName('drag_bg')[0].style.width = this.maxWidth + 'px'\n },\n \/\/mousemove \u4e8b\u4ef6\n mouseMoveFn (e) {\n if (this.mouseMoveState) {\n let width = e.clientX - this.beginClientX\n if (width > 0 && width <= this.maxWidth) {\n document.getElementsByClassName('handler')[0].style.left = width + 'px'\n document.getElementsByClassName('drag_bg')[0].style.width = width + 'px'\n } else if (width > this.maxWidth) {\n this.successFunction()\n }\n }\n },\n \/\/mouseup \u4e8b\u4ef6\n moseUpFn (e) {\n this.mouseMoveState = false\n var width = e.clientX - this.beginClientX\n if (width < this.maxWidth) {\n document.getElementsByClassName('handler')[0].style.left = 0 + 'px'\n document.getElementsByClassName('drag_bg')[0].style.width = 0 + 'px'\n }\n }\n },\n mounted () {\n this.maxWidth = this.$refs.dragDiv.clientWidth - this.$refs.moveDiv.clientWidth\n document.getElementsByTagName('html')[0].addEventListener('mousemove', this.mouseMoveFn)\n document.getElementsByTagName('html')[0].addEventListener('mouseup', this.moseUpFn)\n }\n}\n<\/script>\n<style scoped>\n.drag {\n position: relative;\n background-color: #e8e8e8;\n width: 100%;\n height: 32px;\n line-height: 32px;\n text-align: center;\n border: 1px solid #ccc;\n\n}\n\n.handler {\n width: 40px;\n height: 32px;\n border: 1px solid #ccc;\n cursor: move;\n margin-top: -1px;\n margin-left: -1px;\n}\n\n.handler_bg {\n background: #fff url('..\/assets\/images\/arrow-r.png') no-repeat center;\n background-size: 25px;\n}\n\n.handler_ok_bg {\n background: #fff url('..\/assets\/images\/\u221a.png') no-repeat center;\n background-size: 18px;\n}\n\n.drag_bg {\n background-color: #7ac23c;\n height: 32px;\n width: 0;\n}\n\n.drag_text {\n position: absolute;\n top: 0;\n width: 100%;\n font-size: 12px;\n color: #706f6f;\n}\n\n<\/style>\n<\/code><\/pre>\nel-input \u805a\u7126\u540e\u80cc\u666f\u53d8\u767d<\/h3>\n<\/p>\n<\/p><\/noscript>\n.el-input__wrapper.is-focus {\n box-shadow: 0 0 0 1px #dcdfe6 inset;\n background-color: #fff;\n}<\/code><\/pre>\nel-input placeholder \u989c\u8272\u8bbe\u7f6e<\/h3>\n.el-input__inner::placeholder{\n color: #666666;\n}<\/code><\/pre>\n\u5224\u65ad el-checked \u662f\u5426\u9009\u4e2d,\u672a\u9009\u4e2d\u5219\u63d0\u793a\u8bf7\u52fe\u9009<\/h3>\n<\/p>\n<\/p><\/noscript>\nexport default {\nmounted() {\n const pleaseFit=document.getElementById('pleaseFit');\n $(".el-checkbox input").change(() => {\n if ($(".el-checkbox input[type='checkbox']").is(':checked') == true) {\n pleaseFit.style.display='none'\n } else {\n pleaseFit.style.display='block'\n }\n })\n }\n }<\/code><\/pre>\nel-input \u5728 style \u5168\u5c40\u6837\u5f0f,\u4f1a\u5f71\u54cd\u5230\u5176\u4ed6\u4e0d\u7b26\u5408\u8be5\u6837\u5f0f\u7684\u4f4d\u7f6e<\/h3>\n\n\u53ef\u4ee5\u5728 style scoped> \u5199,\u52a0\u4e0a\/deep\/<\/li>\n<\/ul>\n<\/p>\n<\/p><\/noscript>\n\/deep\/ .el-input__wrapper {\n box-shadow: 0 0 0 0 inset;\n background-color: rgb(255, 242, 0);\n}<\/code><\/pre>\nel-carousel \u8d70\u9a6c\u706f\u4fee\u6539 Carousel \u5de6\u53f3\u4e24\u4fa7\u7bad\u5934\u5b57\u4f53\u5927\u5c0f<\/h3>\n\/deep\/.el-carousel__arrow i {\n font-size: 29px !important;\n }<\/code><\/pre>\n\u9875\u9762\u5411\u4e0b\u6ed1\u52a8\u5bfc\u822a\u680f\u56fa\u5b9a<\/h3>\n<\/p>\n<\/p><\/noscript>\n.main_nav_fixed {\n position: sticky;\n top: 0;\n z-index: 999;\n}<\/code><\/pre>\n\u56fa\u5b9a\u5728\u53f3\u65b9\u7684,\u60ac\u6302\u51fa\u73b0\u4e8c\u7ef4\u7801<\/h3>\n<\/p>\n<\/p><\/noscript>\n<div class="share_box">\n <img src="..\/..\/assets\/images\/share_qr.png" alt=""\/>\n <\/div><\/code><\/pre>\n.share_box{\n width: 70px;\n height: 131px;\n top: 300px;\n right: 10px;\n cursor: pointer;\n position: fixed;\n z-index: 999;\n background: url("..\/..\/assets\/images\/share_wx.jpg") no-repeat;\n background-size: 100% 100%;\n}\n.share_box img{\n width: 100px;\n height: 100px;\n display: none;\n}\n.share_box:hover img {\n position: absolute;\n top: 50%;\n margin-top: -50px;\n right: 82px;\n display: block !important;\n}<\/code><\/pre>\nnth-child(n)\u6307\u7684\u662f\u5728\u7236\u5143\u7d20\u4e2d\u6240\u6709\u7684\u5143\u7d20\u7684\u987a\u5e8f<\/h3>\n\n\u5199\u4ee3\u7801\u8981\u6839\u636e\u76d2\u5b50\u4ee5\u53ca\u5185\u5bb9\u5199<\/li>\nbottom\uff1a0\uff1b\u8981\u76f8\u5bf9\u4e8e\u7236\u5143\u7d20\u7684 height \u5b9e\u73b0\uff0c\u5982\u679c\u7236\u7236\u5143\u7d20\u7684 height \u5927\u4e8e\u7236\u5143\u7d20\u7684 height\uff0c\uff0c\u5219\u4f1a\u6309\u7167\u7236\u7236\u5143\u7d20\u7684 height \u6765\u5b9e\u73b0 bottom\uff1a0\uff1b\u6765\u5b9e\u73b0\u3002\u3010\u9002\u5f53\u5220\u9664\u7236\u7236\u5143\u7d20\u7684 height\uff0c\u4e00\u677f\u5757\u901a\u5e38\u4e0d\u7528\u8bbe\u7f6e\u603b height\u3011<\/li>\n<\/ul>\n\u60ac\u6302\u56fe\u7247\u7f13\u7f13\u653e\u5927\u7684\u52a8\u753b\u6548\u679c<\/h3>\n<\/p>\n<\/p><\/noscript>\n.gc_project .item_img > img {\n width: 100%;\n height: 100%;\n transition: all 0.3s;\n}\n.gc_project .item_img > img:hover {\n transform: scale(1.05);\n box-shadow: rgb(0 0 0 \/ 23%) 0 4px 14px 0;\n}<\/code><\/pre>\n\u6eda\u52a8\u6761\u4fee\u6539<\/h3>\n<\/p>\n<\/p><\/noscript>\n.mleft::-webkit-scrollbar{\n width: 6px;\n background-color: #f8f8f8;\n\n}\n.mleft::-webkit-scrollbar-thumb{\n width: 6px;\n background-color: #adacac;\n border-radius: 4px;\n}<\/code><\/pre>\nhead \u533a '\u53d1\u73b0' \u5b9e\u73b0\u4ea4\u4e92\u6548\u679c [\u8be5\u9996\u9875\u6700\u607c\u706b\u7684]<\/h2>\n<\/p>\n<\/p><\/noscript>\ntodo head \u533a'\u53d1\u73b0'\u4ea4\u4e92\u5b9e\u73b0\u601d\u8def:<\/h3>\n\n\u2460\u89c2\u5bdf\u8be5\u533a\u7ed3\u6784,\u4e00\u4e2a\u5927\u6a21\u5757,\u5176\u4e2d\u5206\u4e3a\u5de6\u4e2d\u53f3\u4e09\u4e2a\u6a21\u5757,\u5e76\u4f9d\u6b21\u5199\u51fa\u4e09\u4e2a\u6a21\u5757\u7684\u4ee3\u7801,<\/li>\n\u2461\u5de6\u4fa7\u533a\u57df: \u8981\u5c55\u793a\u7684\u6548\u679c\u6709: \u9f20\u6807\u4e0a\u4e0b\u79fb\u52a8,\u6240\u7ecf\u7684 menuItem \u4f1a\u5c55\u73b0\u9ec4\u8272\u80cc\u666f, \u5219\u5f15\u7528 vue \u7684 ref \u5c5e\u6027\u5bf9 DOM \u5143\u7d20\u8fdb\u884c\u52a8\u6001\u7ed1\u5b9a.\n\n\u6ce8\u610f:ref \u9700\u8981\u5728 dom \u6e32\u67d3\u5b8c\u6210\u540e\u624d\u4f1a\u6709,\u5728\u4f7f\u7528\u7684\u65f6\u5019\u786e\u4fdd dom \u5df2\u7ecf\u6e32\u67d3\u5b8c\u6210, \u6bd4\u5982\u5728\u751f\u547d\u5468\u671f mounted(){}\u94a9\u5b50\u4e2d\u8c03\u7528. this.$refs.xxx:\u51cf\u5c11\u83b7\u53d6 dom \u8282\u70b9\u7684\u6d88\u8017<\/li>\n<\/ul>\n<\/li>\n\u2462\u5de6\u4fa7\u533a\u57df\u8fc7\u6ee4\u5230\u53f3\u4fa7\u533a\u57df,\u5c55\u793a\u5bf9\u5e94\u7684\u8be6\u60c5\u9875: mleftIn(item,index)\u51fd\u6570\u901a\u8fc7\u4f20\u8f93 v-for \u5faa\u73af\u4e2d\u6570\u7ec4 menuList \u7684 item \u6bcf\u4e00\u9879\u4e3a\u5a92\u4ecb, \u800c\u6570\u636e\u4e2d menuList \u4e2d\u5305\u542b\u5de6\u4fa7\u6570\u636e menuItem \u4e0e\u53f3\u4fa7\u6bcf\u4e00\u9875\u7684\u6807\u9898 menu \u76f8\u540c, \u4ece\u800c\u5c06\u5de6\u4fa7\u548c\u53f3\u4fa7\u6570\u636e\u7ed1\u5b9a, \u6545\u800c\u5f62\u6210\u4ece\u5de6\u4fa7\u8fc7\u6ee4\u5230\u53f3\u4fa7\u533a\u57df\u662f\u56fa\u5b9a\u7684\u8be6\u60c5\u9875\u5185\u5bb9.<\/li>\n\u2463\u9875\u9762\u7b2c\u4e8c\u6b21\u672a\u5237\u65b0\u4e4b\u524d(\u9996\u6b21\u8fdb\u5165\u9875\u9762\u6e32\u67d3), \u9f20\u6807\u60ac\u6302'\u53d1\u73b0',\u8981\u51fa\u73b0\u7b2c\u4e00\u4e2a'\u7cbe\u9009'\u8be6\u60c5\u9875\u53ca'\u7cbe\u9009'item \u80cc\u666f\u53d8\u9ec4: \u9f20\u6807\u79fb\u51fa\u8be5\u5143\u7d20[\u4e8c\u7ea7\u76ee\u5f55\u6574\u4e2a\u5927\u6a21\u5757]\u4e4b\u5916,\u5219\u89e6\u53d1 mouseleave \u4e8b\u4ef6,\u521d\u59cb\u5316\u6570\u636e.<\/li>\n\u2464\u7b2c\u4e8c\u6b21\u9875\u9762\u5237\u65b0\u4e4b\u540e,\u521d\u59cb\u5316\u6570\u636e: \u91c7\u7528 mounted \u751f\u547d\u5468\u671f[\u6e32\u67d3\u6210 html \u540e\u8c03\u7528]: \u4f7f\u9f20\u6807\u60ac\u6302'\u53d1\u73b0',\u7b2c\u4e00\u4e2a menu-item \u663e\u793a\u9ec4\u8272<\/li>\n<\/ul>\n <li class="find">\n <a href="#">\u53d1\u73b0<\/a>\n <div class="h_menu" @mouseleave="mleftLeave()">\n <div class="menu_box mleft">\n <!-- <a href="">\u7cbe\u9009<\/a>-->\n <a v-for="(item,index) in menuList" :key="index" :ref="'test'+index" href="javascript:;"\n @mouseover="mleftIn(item,index)">{{ item.menu }}<\/a>\n <!-- <el-cascader-panel :options="findOptions" :props="props" \/>-->\n <\/div>\n <div class="mright">\n <div class="cate-box">\n <a class="cate-title" href="">\n <img :src="data.url" alt="">\n <span>{{ data.menu }}<\/span>\n <\/a>\n <div class="subCate">\n <a v-for="(itemOne) in data.items" :key="itemOne">{{ itemOne.text }}<\/a>\n <\/div>\n <\/div>\n <\/div>\n <div class="right_bar">\n <div class="icons">\n <a>\n <span class="icon-box">\n <span class="tangle-1"><\/span>\n <span class="tangle-2"><\/span>\n <i class="ani-star"><\/i>\n <span class="tangle-3"><\/span>\n <\/span>\n <span class="icon-text">\u6536\u85cf\u5939<\/span>\n <\/a>\n <a>\n <img alt="" src="..\/assets\/images\/icon-header-discover-designer.png">\n <span>\u8bbe\u8ba1\u5e08<\/span>\n <\/a>\n <a>\n <img alt="" src="..\/assets\/images\/icon-header-discover-focus.png">\n <span>\u699c\u5355<\/span>\n <!-- <sup class="subNavDot"><\/sup>-->\n <\/a>\n <\/div>\n <div class="ad_box">\n\n <\/div>\n <\/div>\n <\/div>\n <\/li><\/code><\/pre>\n data: {},\n menuList: [\n {\n menu: '\u7cbe\u9009',\n url: require('..\/assets\/images\/zuanshi.png'),\n items: [\n { text: '\u8fd0\u8425\u8bbe\u8ba1' },\n { text: '\u5305\u88c5' },\n { text: '\u52a8\u753b\/\u5f71\u89c6' },\n { text: '\u4eba\u50cf\u6444\u5f71' },\n { text: '\u5546\u4e1a\u63d2\u753b' },\n { text: '\u7535\u5546' },\n { text: 'APP \u754c\u9762' },\n { text: '\u827a\u672f\u63d2\u753b' },\n { text: '\u5bb6\u88c5\u8bbe\u8ba1' },\n { text: '\u6d77\u62a5' },\n { text: '\u6587\u7ae0' }\n ]\n },\n { menu: '\u5e73\u9762' },\n { menu: 'UI' },\n { menu: '\u7f51\u9875' },\n { menu: '\u63d2\u753b' },\n { menu: '\u52a8\u6f2b' },\n { menu: '\u6444\u5f71' },\n { menu: '\u7a7a\u95f4' },\n { menu: '\u5de5\u4e1a\/\u4ea7\u54c1' },\n { menu: '\u4e09\u7ef4' },\n { menu: '\u5f71\u89c6' },\n { menu: '\u624b\u5de5\u827a' },\n { menu: '\u7eaf\u827a\u672f' },\n { menu: '\u670d\u88c5' },\n { menu: '\u5176\u4ed6' }\n ],<\/code><\/pre>\n \/\/\u6e32\u67d3\u6210 html \u4e4b\u524d\u8c03\u7528,\u521d\u59cb\u5316\u4e00\u4e9b\u5c5e\u6027\u503c [\u9f20\u6807\u60ac\u6302'\u53d1\u73b0',\u5c31\u51fa\u73b0\u7b2c\u4e00\u4e2a\u7cbe\u9009\u9875\u9762]\n created () {\n this.data = this.menuList[0]\n },\n \/\/\u6e32\u67d3\u6210 html \u540e\u8c03\u7528 [\u9f20\u6807\u60ac\u6302'\u53d1\u73b0',\u7b2c\u4e00\u4e2a menu-item \u663e\u793a\u9ec4\u8272](\u9875\u9762\u5237\u65b0\u4e86\u4e4b\u540e\u7684)\n mounted () {\n this.$refs['test' + 0][0].style.backgroundColor = 'rgb(255, 242, 0)'\n },\n methods: {\n \/\/\u9f20\u6807\u8fdb\u5165\u51fd\u6570\n mleftIn (item, index) {\n \/\/\u83b7\u53d6 menuList \u4e2d\u6bcf\u4e2a menuItem \u5b57\u7b26\u4e32\u7684\u957f\u5ea6\n let menuSize = this.menuList.length\n for (let i = 0; i < menuSize; i++) {\n \/\/for \u5faa\u73af,i \u5982\u679c\u5c0f\u4e8e menuSize,\u5219\u7f6e\u4e8e menuItem \u989c\u8272\u4e3a\u7070\u8272,\u5b9e\u73b0\u5207\u6362\u6548\u679c\n this.$refs['test' + i][0].style.backgroundColor = '#f8f8f8'\n }\n \/\/\u8df3\u51fa for \u5faa\u73af,\u7531\u5de6\u4fa7\u79fb\u5411\u53f3\u4fa7\u8be6\u60c5\u9875\u65f6,\u5176 menuItem \u7684\u989c\u8272\u4e3a\u9ec4\u8272\n this.$refs['test' + index][0].style.backgroundColor = 'rgb(255, 242, 0)'\n \/\/\u5c06\u53f3\u4fa7\u6570\u636e\u8bbe\u7f6e\u4e3a item,\u663e\u793a\u6570\u636e\n this.data = item\n },\n \/\/\u9f20\u6807\u8fdb\u5165\u51fd\u6570\n \/\/\u6ce8\u610f: mouseleave:\u662f\u9f20\u6807\u79fb\u51fa\u8be5\u5143\u7d20\u4e4b\u5916,\u5219\u89e6\u53d1 mouseleave \u4e8b\u4ef6\n \/\/ mouseout : \u662f\u5f53\u6307\u9488\u79bb\u5f00\u8be5\u5143\u7d20\u53ca\u5176\u6240\u6709\u540e\u4ee3\u65f6\uff0c\u4f1a\u89e6\u53d1 mouseleave\n \/\/ \u800c\u5f53\u6307\u9488\u79bb\u5f00\u5143\u7d20\u6216\u79bb\u5f00\u5143\u7d20\u7684\u540e\u4ee3\uff08\u5373\u4f7f\u6307\u9488\u4ecd\u5728\u5143\u7d20\u5185\uff09\u65f6\uff0c\u4e5f\u4f1a\u89e6\u53d1 mouseout \u4e8b\u4ef6\n mleftLeave () {\n \/\/\u83b7\u53d6 menuList \u4e2d\u6bcf\u4e2a menuItem \u5b57\u7b26\u4e32\u7684\u957f\u5ea6\n let menuSize = this.menuList.length\n for (let i = 0; i < menuSize; i++) {\n this.$refs['test' + i][0].style.backgroundColor = '#f8f8f8'\n }\n \/\/ \u8df3\u51fa\u5faa\u73af,\u6d4f\u89c8\u5b8c'\u53d1\u73b0',\u9f20\u6807\u79fb\u51fa,\u7f6e\u4e8e\u53f3\u4fa7\u6570\u636e\u4e3a\u7b2c\u4e00\u4e2a\u7cbe\u9009\u6570\u636e\n this.data = this.menuList[0]\n \/\/\u9f20\u6807\u79fb\u51fa\u4e8b\u4ef6,\u7f6e\u4e8e\u7b2c\u4e00\u4e2a menuitem \u4e3a\u9ec4\u8272[\u672a\u5237\u65b0\u65f6\u7684\u8bbe\u7f6e]\n this.$refs['test' + 0][0].style.backgroundColor = 'rgb(255, 242, 0)'\n\n \/\/ this.data = {}\n \/\/ this.$refs['test'+index][0].style.backgroundColor = '#f8f8f8'\n \/\/ console.log('\u6eda\u51fa\u53bb')\n },\n}<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"\u4e0b\u8f7d\u4f9d\u8d56\u901f\u5ea6\u5feb npm install –registry=https:\/\/registry.npm.tao […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[],"class_list":["post-3462","post","type-post","status-publish","format-standard","hentry","category-web"],"_links":{"self":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/3462","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3462"}],"version-history":[{"count":38,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/3462\/revisions"}],"predecessor-version":[{"id":3558,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/3462\/revisions\/3558"}],"wp:attachment":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3462"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=3462"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=3462"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
@click="handleChangeToLogin()"<\/code><\/pre>\n handleChangeToLogin () {\n const qr = document.getElementById('qr_code')\n const login = document.getElementById('login')\n qr.style.display = 'none';\n if (qr.style.display === 'none') {\n login.style.display = 'block'\n }\n },\n handleChangeToQr () {\n const qr = document.getElementById('qr_code')\n const login = document.getElementById('login')\n login.style.display = 'none'\n if (login.style.display === 'none') {\n qr.style.display = 'block'\n }\n }<\/code><\/pre>\n\u767b\u5f55\u6846\u7684\u6ed1\u5757\u9a8c\u8bc1<\/h3>\n<\/p>\n<\/p><\/noscript>\n<\/slider><\/p>\n<template>\n <div ref="dragDiv" class="drag">\n <div class="drag_bg"><\/div>\n <div class="drag_text">{{ confirmWords }}<\/div>\n <div ref="moveDiv" :class="{'handler_ok_bg':confirmSuccess}" class="handler handler_bg"\n style="position: absolute;top: 0;left: 0;" @mousedown="mouseDownFn($event)"><\/div>\n <\/div>\n<\/template>\n\n<script>\nexport default {\n data () {\n return {\n beginClientX: 0, \/*\u8ddd\u79bb\u5c4f\u5e55\u5de6\u7aef\u8ddd\u79bb*\/\n mouseMoveState: false, \/*\u89e6\u53d1\u62d6\u52a8\u72b6\u6001 \u5224\u65ad*\/\n maxWidth: '', \/*\u62d6\u52a8\u6700\u5927\u5bbd\u5ea6\uff0c\u4f9d\u636e\u6ed1\u5757\u5bbd\u5ea6\u7b97\u51fa\u6765\u7684*\/\n confirmWords: '\u8bf7\u6309\u4f4f\u6ed1\u5757,\u62d6\u52a8\u5230\u6700\u53f3\u8fb9', \/*\u6ed1\u5757\u6587\u5b57*\/\n confirmSuccess: false \/*\u9a8c\u8bc1\u6210\u529f\u5224\u65ad*\/\n }\n },\n methods: {\n \/\/mousedown \u4e8b\u4ef6\n mouseDownFn: function (e) {\n if (!this.confirmSuccess) {\n e.preventDefault && e.preventDefault() \/\/\u963b\u6b62\u6587\u5b57\u9009\u4e2d\u7b49 \u6d4f\u89c8\u5668\u9ed8\u8ba4\u4e8b\u4ef6\n this.mouseMoveState = true\n this.beginClientX = e.clientX\n }\n },\n \/\/\u9a8c\u8bc1\u6210\u529f\u51fd\u6570\n successFunction () {\n this.confirmSuccess = true\n this.confirmWords = '\u9a8c\u8bc1\u901a\u8fc7'\n if (window.addEventListener) {\n document.getElementsByTagName('html')[0].removeEventListener('mousemove', this.mouseMoveFn)\n document.getElementsByTagName('html')[0].removeEventListener('mouseup', this.moseUpFn)\n } else {\n document.getElementsByTagName('html')[0].removeEventListener('mouseup', () => {\n })\n }\n document.getElementsByClassName('drag_text')[0].style.color = '#fff'\n document.getElementsByClassName('handler')[0].style.left = this.maxWidth + 'px'\n document.getElementsByClassName('drag_bg')[0].style.width = this.maxWidth + 'px'\n },\n \/\/mousemove \u4e8b\u4ef6\n mouseMoveFn (e) {\n if (this.mouseMoveState) {\n let width = e.clientX - this.beginClientX\n if (width > 0 && width <= this.maxWidth) {\n document.getElementsByClassName('handler')[0].style.left = width + 'px'\n document.getElementsByClassName('drag_bg')[0].style.width = width + 'px'\n } else if (width > this.maxWidth) {\n this.successFunction()\n }\n }\n },\n \/\/mouseup \u4e8b\u4ef6\n moseUpFn (e) {\n this.mouseMoveState = false\n var width = e.clientX - this.beginClientX\n if (width < this.maxWidth) {\n document.getElementsByClassName('handler')[0].style.left = 0 + 'px'\n document.getElementsByClassName('drag_bg')[0].style.width = 0 + 'px'\n }\n }\n },\n mounted () {\n this.maxWidth = this.$refs.dragDiv.clientWidth - this.$refs.moveDiv.clientWidth\n document.getElementsByTagName('html')[0].addEventListener('mousemove', this.mouseMoveFn)\n document.getElementsByTagName('html')[0].addEventListener('mouseup', this.moseUpFn)\n }\n}\n<\/script>\n<style scoped>\n.drag {\n position: relative;\n background-color: #e8e8e8;\n width: 100%;\n height: 32px;\n line-height: 32px;\n text-align: center;\n border: 1px solid #ccc;\n\n}\n\n.handler {\n width: 40px;\n height: 32px;\n border: 1px solid #ccc;\n cursor: move;\n margin-top: -1px;\n margin-left: -1px;\n}\n\n.handler_bg {\n background: #fff url('..\/assets\/images\/arrow-r.png') no-repeat center;\n background-size: 25px;\n}\n\n.handler_ok_bg {\n background: #fff url('..\/assets\/images\/\u221a.png') no-repeat center;\n background-size: 18px;\n}\n\n.drag_bg {\n background-color: #7ac23c;\n height: 32px;\n width: 0;\n}\n\n.drag_text {\n position: absolute;\n top: 0;\n width: 100%;\n font-size: 12px;\n color: #706f6f;\n}\n\n<\/style>\n<\/code><\/pre>\nel-input \u805a\u7126\u540e\u80cc\u666f\u53d8\u767d<\/h3>\n<\/p>\n<\/p><\/noscript>\n.el-input__wrapper.is-focus {\n box-shadow: 0 0 0 1px #dcdfe6 inset;\n background-color: #fff;\n}<\/code><\/pre>\nel-input placeholder \u989c\u8272\u8bbe\u7f6e<\/h3>\n.el-input__inner::placeholder{\n color: #666666;\n}<\/code><\/pre>\n\u5224\u65ad el-checked \u662f\u5426\u9009\u4e2d,\u672a\u9009\u4e2d\u5219\u63d0\u793a\u8bf7\u52fe\u9009<\/h3>\n<\/p>\n<\/p><\/noscript>\nexport default {\nmounted() {\n const pleaseFit=document.getElementById('pleaseFit');\n $(".el-checkbox input").change(() => {\n if ($(".el-checkbox input[type='checkbox']").is(':checked') == true) {\n pleaseFit.style.display='none'\n } else {\n pleaseFit.style.display='block'\n }\n })\n }\n }<\/code><\/pre>\nel-input \u5728 style \u5168\u5c40\u6837\u5f0f,\u4f1a\u5f71\u54cd\u5230\u5176\u4ed6\u4e0d\u7b26\u5408\u8be5\u6837\u5f0f\u7684\u4f4d\u7f6e<\/h3>\n\n\u53ef\u4ee5\u5728 style scoped> \u5199,\u52a0\u4e0a\/deep\/<\/li>\n<\/ul>\n<\/p>\n<\/p><\/noscript>\n\/deep\/ .el-input__wrapper {\n box-shadow: 0 0 0 0 inset;\n background-color: rgb(255, 242, 0);\n}<\/code><\/pre>\nel-carousel \u8d70\u9a6c\u706f\u4fee\u6539 Carousel \u5de6\u53f3\u4e24\u4fa7\u7bad\u5934\u5b57\u4f53\u5927\u5c0f<\/h3>\n\/deep\/.el-carousel__arrow i {\n font-size: 29px !important;\n }<\/code><\/pre>\n\u9875\u9762\u5411\u4e0b\u6ed1\u52a8\u5bfc\u822a\u680f\u56fa\u5b9a<\/h3>\n<\/p>\n<\/p><\/noscript>\n.main_nav_fixed {\n position: sticky;\n top: 0;\n z-index: 999;\n}<\/code><\/pre>\n\u56fa\u5b9a\u5728\u53f3\u65b9\u7684,\u60ac\u6302\u51fa\u73b0\u4e8c\u7ef4\u7801<\/h3>\n<\/p>\n<\/p><\/noscript>\n<div class="share_box">\n <img src="..\/..\/assets\/images\/share_qr.png" alt=""\/>\n <\/div><\/code><\/pre>\n.share_box{\n width: 70px;\n height: 131px;\n top: 300px;\n right: 10px;\n cursor: pointer;\n position: fixed;\n z-index: 999;\n background: url("..\/..\/assets\/images\/share_wx.jpg") no-repeat;\n background-size: 100% 100%;\n}\n.share_box img{\n width: 100px;\n height: 100px;\n display: none;\n}\n.share_box:hover img {\n position: absolute;\n top: 50%;\n margin-top: -50px;\n right: 82px;\n display: block !important;\n}<\/code><\/pre>\nnth-child(n)\u6307\u7684\u662f\u5728\u7236\u5143\u7d20\u4e2d\u6240\u6709\u7684\u5143\u7d20\u7684\u987a\u5e8f<\/h3>\n\n\u5199\u4ee3\u7801\u8981\u6839\u636e\u76d2\u5b50\u4ee5\u53ca\u5185\u5bb9\u5199<\/li>\nbottom\uff1a0\uff1b\u8981\u76f8\u5bf9\u4e8e\u7236\u5143\u7d20\u7684 height \u5b9e\u73b0\uff0c\u5982\u679c\u7236\u7236\u5143\u7d20\u7684 height \u5927\u4e8e\u7236\u5143\u7d20\u7684 height\uff0c\uff0c\u5219\u4f1a\u6309\u7167\u7236\u7236\u5143\u7d20\u7684 height \u6765\u5b9e\u73b0 bottom\uff1a0\uff1b\u6765\u5b9e\u73b0\u3002\u3010\u9002\u5f53\u5220\u9664\u7236\u7236\u5143\u7d20\u7684 height\uff0c\u4e00\u677f\u5757\u901a\u5e38\u4e0d\u7528\u8bbe\u7f6e\u603b height\u3011<\/li>\n<\/ul>\n\u60ac\u6302\u56fe\u7247\u7f13\u7f13\u653e\u5927\u7684\u52a8\u753b\u6548\u679c<\/h3>\n<\/p>\n<\/p><\/noscript>\n.gc_project .item_img > img {\n width: 100%;\n height: 100%;\n transition: all 0.3s;\n}\n.gc_project .item_img > img:hover {\n transform: scale(1.05);\n box-shadow: rgb(0 0 0 \/ 23%) 0 4px 14px 0;\n}<\/code><\/pre>\n\u6eda\u52a8\u6761\u4fee\u6539<\/h3>\n<\/p>\n<\/p><\/noscript>\n.mleft::-webkit-scrollbar{\n width: 6px;\n background-color: #f8f8f8;\n\n}\n.mleft::-webkit-scrollbar-thumb{\n width: 6px;\n background-color: #adacac;\n border-radius: 4px;\n}<\/code><\/pre>\nhead \u533a '\u53d1\u73b0' \u5b9e\u73b0\u4ea4\u4e92\u6548\u679c [\u8be5\u9996\u9875\u6700\u607c\u706b\u7684]<\/h2>\n<\/p>\n<\/p><\/noscript>\ntodo head \u533a'\u53d1\u73b0'\u4ea4\u4e92\u5b9e\u73b0\u601d\u8def:<\/h3>\n\n\u2460\u89c2\u5bdf\u8be5\u533a\u7ed3\u6784,\u4e00\u4e2a\u5927\u6a21\u5757,\u5176\u4e2d\u5206\u4e3a\u5de6\u4e2d\u53f3\u4e09\u4e2a\u6a21\u5757,\u5e76\u4f9d\u6b21\u5199\u51fa\u4e09\u4e2a\u6a21\u5757\u7684\u4ee3\u7801,<\/li>\n\u2461\u5de6\u4fa7\u533a\u57df: \u8981\u5c55\u793a\u7684\u6548\u679c\u6709: \u9f20\u6807\u4e0a\u4e0b\u79fb\u52a8,\u6240\u7ecf\u7684 menuItem \u4f1a\u5c55\u73b0\u9ec4\u8272\u80cc\u666f, \u5219\u5f15\u7528 vue \u7684 ref \u5c5e\u6027\u5bf9 DOM \u5143\u7d20\u8fdb\u884c\u52a8\u6001\u7ed1\u5b9a.\n\n\u6ce8\u610f:ref \u9700\u8981\u5728 dom \u6e32\u67d3\u5b8c\u6210\u540e\u624d\u4f1a\u6709,\u5728\u4f7f\u7528\u7684\u65f6\u5019\u786e\u4fdd dom \u5df2\u7ecf\u6e32\u67d3\u5b8c\u6210, \u6bd4\u5982\u5728\u751f\u547d\u5468\u671f mounted(){}\u94a9\u5b50\u4e2d\u8c03\u7528. this.$refs.xxx:\u51cf\u5c11\u83b7\u53d6 dom \u8282\u70b9\u7684\u6d88\u8017<\/li>\n<\/ul>\n<\/li>\n\u2462\u5de6\u4fa7\u533a\u57df\u8fc7\u6ee4\u5230\u53f3\u4fa7\u533a\u57df,\u5c55\u793a\u5bf9\u5e94\u7684\u8be6\u60c5\u9875: mleftIn(item,index)\u51fd\u6570\u901a\u8fc7\u4f20\u8f93 v-for \u5faa\u73af\u4e2d\u6570\u7ec4 menuList \u7684 item \u6bcf\u4e00\u9879\u4e3a\u5a92\u4ecb, \u800c\u6570\u636e\u4e2d menuList \u4e2d\u5305\u542b\u5de6\u4fa7\u6570\u636e menuItem \u4e0e\u53f3\u4fa7\u6bcf\u4e00\u9875\u7684\u6807\u9898 menu \u76f8\u540c, \u4ece\u800c\u5c06\u5de6\u4fa7\u548c\u53f3\u4fa7\u6570\u636e\u7ed1\u5b9a, \u6545\u800c\u5f62\u6210\u4ece\u5de6\u4fa7\u8fc7\u6ee4\u5230\u53f3\u4fa7\u533a\u57df\u662f\u56fa\u5b9a\u7684\u8be6\u60c5\u9875\u5185\u5bb9.<\/li>\n\u2463\u9875\u9762\u7b2c\u4e8c\u6b21\u672a\u5237\u65b0\u4e4b\u524d(\u9996\u6b21\u8fdb\u5165\u9875\u9762\u6e32\u67d3), \u9f20\u6807\u60ac\u6302'\u53d1\u73b0',\u8981\u51fa\u73b0\u7b2c\u4e00\u4e2a'\u7cbe\u9009'\u8be6\u60c5\u9875\u53ca'\u7cbe\u9009'item \u80cc\u666f\u53d8\u9ec4: \u9f20\u6807\u79fb\u51fa\u8be5\u5143\u7d20[\u4e8c\u7ea7\u76ee\u5f55\u6574\u4e2a\u5927\u6a21\u5757]\u4e4b\u5916,\u5219\u89e6\u53d1 mouseleave \u4e8b\u4ef6,\u521d\u59cb\u5316\u6570\u636e.<\/li>\n\u2464\u7b2c\u4e8c\u6b21\u9875\u9762\u5237\u65b0\u4e4b\u540e,\u521d\u59cb\u5316\u6570\u636e: \u91c7\u7528 mounted \u751f\u547d\u5468\u671f[\u6e32\u67d3\u6210 html \u540e\u8c03\u7528]: \u4f7f\u9f20\u6807\u60ac\u6302'\u53d1\u73b0',\u7b2c\u4e00\u4e2a menu-item \u663e\u793a\u9ec4\u8272<\/li>\n<\/ul>\n <li class="find">\n <a href="#">\u53d1\u73b0<\/a>\n <div class="h_menu" @mouseleave="mleftLeave()">\n <div class="menu_box mleft">\n <!-- <a href="">\u7cbe\u9009<\/a>-->\n <a v-for="(item,index) in menuList" :key="index" :ref="'test'+index" href="javascript:;"\n @mouseover="mleftIn(item,index)">{{ item.menu }}<\/a>\n <!-- <el-cascader-panel :options="findOptions" :props="props" \/>-->\n <\/div>\n <div class="mright">\n <div class="cate-box">\n <a class="cate-title" href="">\n <img :src="data.url" alt="">\n <span>{{ data.menu }}<\/span>\n <\/a>\n <div class="subCate">\n <a v-for="(itemOne) in data.items" :key="itemOne">{{ itemOne.text }}<\/a>\n <\/div>\n <\/div>\n <\/div>\n <div class="right_bar">\n <div class="icons">\n <a>\n <span class="icon-box">\n <span class="tangle-1"><\/span>\n <span class="tangle-2"><\/span>\n <i class="ani-star"><\/i>\n <span class="tangle-3"><\/span>\n <\/span>\n <span class="icon-text">\u6536\u85cf\u5939<\/span>\n <\/a>\n <a>\n <img alt="" src="..\/assets\/images\/icon-header-discover-designer.png">\n <span>\u8bbe\u8ba1\u5e08<\/span>\n <\/a>\n <a>\n <img alt="" src="..\/assets\/images\/icon-header-discover-focus.png">\n <span>\u699c\u5355<\/span>\n <!-- <sup class="subNavDot"><\/sup>-->\n <\/a>\n <\/div>\n <div class="ad_box">\n\n <\/div>\n <\/div>\n <\/div>\n <\/li><\/code><\/pre>\n data: {},\n menuList: [\n {\n menu: '\u7cbe\u9009',\n url: require('..\/assets\/images\/zuanshi.png'),\n items: [\n { text: '\u8fd0\u8425\u8bbe\u8ba1' },\n { text: '\u5305\u88c5' },\n { text: '\u52a8\u753b\/\u5f71\u89c6' },\n { text: '\u4eba\u50cf\u6444\u5f71' },\n { text: '\u5546\u4e1a\u63d2\u753b' },\n { text: '\u7535\u5546' },\n { text: 'APP \u754c\u9762' },\n { text: '\u827a\u672f\u63d2\u753b' },\n { text: '\u5bb6\u88c5\u8bbe\u8ba1' },\n { text: '\u6d77\u62a5' },\n { text: '\u6587\u7ae0' }\n ]\n },\n { menu: '\u5e73\u9762' },\n { menu: 'UI' },\n { menu: '\u7f51\u9875' },\n { menu: '\u63d2\u753b' },\n { menu: '\u52a8\u6f2b' },\n { menu: '\u6444\u5f71' },\n { menu: '\u7a7a\u95f4' },\n { menu: '\u5de5\u4e1a\/\u4ea7\u54c1' },\n { menu: '\u4e09\u7ef4' },\n { menu: '\u5f71\u89c6' },\n { menu: '\u624b\u5de5\u827a' },\n { menu: '\u7eaf\u827a\u672f' },\n { menu: '\u670d\u88c5' },\n { menu: '\u5176\u4ed6' }\n ],<\/code><\/pre>\n \/\/\u6e32\u67d3\u6210 html \u4e4b\u524d\u8c03\u7528,\u521d\u59cb\u5316\u4e00\u4e9b\u5c5e\u6027\u503c [\u9f20\u6807\u60ac\u6302'\u53d1\u73b0',\u5c31\u51fa\u73b0\u7b2c\u4e00\u4e2a\u7cbe\u9009\u9875\u9762]\n created () {\n this.data = this.menuList[0]\n },\n \/\/\u6e32\u67d3\u6210 html \u540e\u8c03\u7528 [\u9f20\u6807\u60ac\u6302'\u53d1\u73b0',\u7b2c\u4e00\u4e2a menu-item \u663e\u793a\u9ec4\u8272](\u9875\u9762\u5237\u65b0\u4e86\u4e4b\u540e\u7684)\n mounted () {\n this.$refs['test' + 0][0].style.backgroundColor = 'rgb(255, 242, 0)'\n },\n methods: {\n \/\/\u9f20\u6807\u8fdb\u5165\u51fd\u6570\n mleftIn (item, index) {\n \/\/\u83b7\u53d6 menuList \u4e2d\u6bcf\u4e2a menuItem \u5b57\u7b26\u4e32\u7684\u957f\u5ea6\n let menuSize = this.menuList.length\n for (let i = 0; i < menuSize; i++) {\n \/\/for \u5faa\u73af,i \u5982\u679c\u5c0f\u4e8e menuSize,\u5219\u7f6e\u4e8e menuItem \u989c\u8272\u4e3a\u7070\u8272,\u5b9e\u73b0\u5207\u6362\u6548\u679c\n this.$refs['test' + i][0].style.backgroundColor = '#f8f8f8'\n }\n \/\/\u8df3\u51fa for \u5faa\u73af,\u7531\u5de6\u4fa7\u79fb\u5411\u53f3\u4fa7\u8be6\u60c5\u9875\u65f6,\u5176 menuItem \u7684\u989c\u8272\u4e3a\u9ec4\u8272\n this.$refs['test' + index][0].style.backgroundColor = 'rgb(255, 242, 0)'\n \/\/\u5c06\u53f3\u4fa7\u6570\u636e\u8bbe\u7f6e\u4e3a item,\u663e\u793a\u6570\u636e\n this.data = item\n },\n \/\/\u9f20\u6807\u8fdb\u5165\u51fd\u6570\n \/\/\u6ce8\u610f: mouseleave:\u662f\u9f20\u6807\u79fb\u51fa\u8be5\u5143\u7d20\u4e4b\u5916,\u5219\u89e6\u53d1 mouseleave \u4e8b\u4ef6\n \/\/ mouseout : \u662f\u5f53\u6307\u9488\u79bb\u5f00\u8be5\u5143\u7d20\u53ca\u5176\u6240\u6709\u540e\u4ee3\u65f6\uff0c\u4f1a\u89e6\u53d1 mouseleave\n \/\/ \u800c\u5f53\u6307\u9488\u79bb\u5f00\u5143\u7d20\u6216\u79bb\u5f00\u5143\u7d20\u7684\u540e\u4ee3\uff08\u5373\u4f7f\u6307\u9488\u4ecd\u5728\u5143\u7d20\u5185\uff09\u65f6\uff0c\u4e5f\u4f1a\u89e6\u53d1 mouseout \u4e8b\u4ef6\n mleftLeave () {\n \/\/\u83b7\u53d6 menuList \u4e2d\u6bcf\u4e2a menuItem \u5b57\u7b26\u4e32\u7684\u957f\u5ea6\n let menuSize = this.menuList.length\n for (let i = 0; i < menuSize; i++) {\n this.$refs['test' + i][0].style.backgroundColor = '#f8f8f8'\n }\n \/\/ \u8df3\u51fa\u5faa\u73af,\u6d4f\u89c8\u5b8c'\u53d1\u73b0',\u9f20\u6807\u79fb\u51fa,\u7f6e\u4e8e\u53f3\u4fa7\u6570\u636e\u4e3a\u7b2c\u4e00\u4e2a\u7cbe\u9009\u6570\u636e\n this.data = this.menuList[0]\n \/\/\u9f20\u6807\u79fb\u51fa\u4e8b\u4ef6,\u7f6e\u4e8e\u7b2c\u4e00\u4e2a menuitem \u4e3a\u9ec4\u8272[\u672a\u5237\u65b0\u65f6\u7684\u8bbe\u7f6e]\n this.$refs['test' + 0][0].style.backgroundColor = 'rgb(255, 242, 0)'\n\n \/\/ this.data = {}\n \/\/ this.$refs['test'+index][0].style.backgroundColor = '#f8f8f8'\n \/\/ console.log('\u6eda\u51fa\u53bb')\n },\n}<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"\u4e0b\u8f7d\u4f9d\u8d56\u901f\u5ea6\u5feb npm install –registry=https:\/\/registry.npm.tao […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[],"class_list":["post-3462","post","type-post","status-publish","format-standard","hentry","category-web"],"_links":{"self":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/3462","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3462"}],"version-history":[{"count":38,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/3462\/revisions"}],"predecessor-version":[{"id":3558,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/3462\/revisions\/3558"}],"wp:attachment":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3462"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=3462"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=3462"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
handleChangeToLogin () {\n const qr = document.getElementById('qr_code')\n const login = document.getElementById('login')\n qr.style.display = 'none';\n if (qr.style.display === 'none') {\n login.style.display = 'block'\n }\n },\n handleChangeToQr () {\n const qr = document.getElementById('qr_code')\n const login = document.getElementById('login')\n login.style.display = 'none'\n if (login.style.display === 'none') {\n qr.style.display = 'block'\n }\n }<\/code><\/pre>\n\u767b\u5f55\u6846\u7684\u6ed1\u5757\u9a8c\u8bc1<\/h3>\n<\/p>\n<\/p><\/noscript>\n<\/slider><\/p>\n<template>\n <div ref="dragDiv" class="drag">\n <div class="drag_bg"><\/div>\n <div class="drag_text">{{ confirmWords }}<\/div>\n <div ref="moveDiv" :class="{'handler_ok_bg':confirmSuccess}" class="handler handler_bg"\n style="position: absolute;top: 0;left: 0;" @mousedown="mouseDownFn($event)"><\/div>\n <\/div>\n<\/template>\n\n<script>\nexport default {\n data () {\n return {\n beginClientX: 0, \/*\u8ddd\u79bb\u5c4f\u5e55\u5de6\u7aef\u8ddd\u79bb*\/\n mouseMoveState: false, \/*\u89e6\u53d1\u62d6\u52a8\u72b6\u6001 \u5224\u65ad*\/\n maxWidth: '', \/*\u62d6\u52a8\u6700\u5927\u5bbd\u5ea6\uff0c\u4f9d\u636e\u6ed1\u5757\u5bbd\u5ea6\u7b97\u51fa\u6765\u7684*\/\n confirmWords: '\u8bf7\u6309\u4f4f\u6ed1\u5757,\u62d6\u52a8\u5230\u6700\u53f3\u8fb9', \/*\u6ed1\u5757\u6587\u5b57*\/\n confirmSuccess: false \/*\u9a8c\u8bc1\u6210\u529f\u5224\u65ad*\/\n }\n },\n methods: {\n \/\/mousedown \u4e8b\u4ef6\n mouseDownFn: function (e) {\n if (!this.confirmSuccess) {\n e.preventDefault && e.preventDefault() \/\/\u963b\u6b62\u6587\u5b57\u9009\u4e2d\u7b49 \u6d4f\u89c8\u5668\u9ed8\u8ba4\u4e8b\u4ef6\n this.mouseMoveState = true\n this.beginClientX = e.clientX\n }\n },\n \/\/\u9a8c\u8bc1\u6210\u529f\u51fd\u6570\n successFunction () {\n this.confirmSuccess = true\n this.confirmWords = '\u9a8c\u8bc1\u901a\u8fc7'\n if (window.addEventListener) {\n document.getElementsByTagName('html')[0].removeEventListener('mousemove', this.mouseMoveFn)\n document.getElementsByTagName('html')[0].removeEventListener('mouseup', this.moseUpFn)\n } else {\n document.getElementsByTagName('html')[0].removeEventListener('mouseup', () => {\n })\n }\n document.getElementsByClassName('drag_text')[0].style.color = '#fff'\n document.getElementsByClassName('handler')[0].style.left = this.maxWidth + 'px'\n document.getElementsByClassName('drag_bg')[0].style.width = this.maxWidth + 'px'\n },\n \/\/mousemove \u4e8b\u4ef6\n mouseMoveFn (e) {\n if (this.mouseMoveState) {\n let width = e.clientX - this.beginClientX\n if (width > 0 && width <= this.maxWidth) {\n document.getElementsByClassName('handler')[0].style.left = width + 'px'\n document.getElementsByClassName('drag_bg')[0].style.width = width + 'px'\n } else if (width > this.maxWidth) {\n this.successFunction()\n }\n }\n },\n \/\/mouseup \u4e8b\u4ef6\n moseUpFn (e) {\n this.mouseMoveState = false\n var width = e.clientX - this.beginClientX\n if (width < this.maxWidth) {\n document.getElementsByClassName('handler')[0].style.left = 0 + 'px'\n document.getElementsByClassName('drag_bg')[0].style.width = 0 + 'px'\n }\n }\n },\n mounted () {\n this.maxWidth = this.$refs.dragDiv.clientWidth - this.$refs.moveDiv.clientWidth\n document.getElementsByTagName('html')[0].addEventListener('mousemove', this.mouseMoveFn)\n document.getElementsByTagName('html')[0].addEventListener('mouseup', this.moseUpFn)\n }\n}\n<\/script>\n<style scoped>\n.drag {\n position: relative;\n background-color: #e8e8e8;\n width: 100%;\n height: 32px;\n line-height: 32px;\n text-align: center;\n border: 1px solid #ccc;\n\n}\n\n.handler {\n width: 40px;\n height: 32px;\n border: 1px solid #ccc;\n cursor: move;\n margin-top: -1px;\n margin-left: -1px;\n}\n\n.handler_bg {\n background: #fff url('..\/assets\/images\/arrow-r.png') no-repeat center;\n background-size: 25px;\n}\n\n.handler_ok_bg {\n background: #fff url('..\/assets\/images\/\u221a.png') no-repeat center;\n background-size: 18px;\n}\n\n.drag_bg {\n background-color: #7ac23c;\n height: 32px;\n width: 0;\n}\n\n.drag_text {\n position: absolute;\n top: 0;\n width: 100%;\n font-size: 12px;\n color: #706f6f;\n}\n\n<\/style>\n<\/code><\/pre>\nel-input \u805a\u7126\u540e\u80cc\u666f\u53d8\u767d<\/h3>\n<\/p>\n<\/p><\/noscript>\n.el-input__wrapper.is-focus {\n box-shadow: 0 0 0 1px #dcdfe6 inset;\n background-color: #fff;\n}<\/code><\/pre>\nel-input placeholder \u989c\u8272\u8bbe\u7f6e<\/h3>\n.el-input__inner::placeholder{\n color: #666666;\n}<\/code><\/pre>\n\u5224\u65ad el-checked \u662f\u5426\u9009\u4e2d,\u672a\u9009\u4e2d\u5219\u63d0\u793a\u8bf7\u52fe\u9009<\/h3>\n<\/p>\n<\/p><\/noscript>\nexport default {\nmounted() {\n const pleaseFit=document.getElementById('pleaseFit');\n $(".el-checkbox input").change(() => {\n if ($(".el-checkbox input[type='checkbox']").is(':checked') == true) {\n pleaseFit.style.display='none'\n } else {\n pleaseFit.style.display='block'\n }\n })\n }\n }<\/code><\/pre>\nel-input \u5728 style \u5168\u5c40\u6837\u5f0f,\u4f1a\u5f71\u54cd\u5230\u5176\u4ed6\u4e0d\u7b26\u5408\u8be5\u6837\u5f0f\u7684\u4f4d\u7f6e<\/h3>\n\n\u53ef\u4ee5\u5728 style scoped> \u5199,\u52a0\u4e0a\/deep\/<\/li>\n<\/ul>\n<\/p>\n<\/p><\/noscript>\n\/deep\/ .el-input__wrapper {\n box-shadow: 0 0 0 0 inset;\n background-color: rgb(255, 242, 0);\n}<\/code><\/pre>\nel-carousel \u8d70\u9a6c\u706f\u4fee\u6539 Carousel \u5de6\u53f3\u4e24\u4fa7\u7bad\u5934\u5b57\u4f53\u5927\u5c0f<\/h3>\n\/deep\/.el-carousel__arrow i {\n font-size: 29px !important;\n }<\/code><\/pre>\n\u9875\u9762\u5411\u4e0b\u6ed1\u52a8\u5bfc\u822a\u680f\u56fa\u5b9a<\/h3>\n<\/p>\n<\/p><\/noscript>\n.main_nav_fixed {\n position: sticky;\n top: 0;\n z-index: 999;\n}<\/code><\/pre>\n\u56fa\u5b9a\u5728\u53f3\u65b9\u7684,\u60ac\u6302\u51fa\u73b0\u4e8c\u7ef4\u7801<\/h3>\n<\/p>\n<\/p><\/noscript>\n<div class="share_box">\n <img src="..\/..\/assets\/images\/share_qr.png" alt=""\/>\n <\/div><\/code><\/pre>\n.share_box{\n width: 70px;\n height: 131px;\n top: 300px;\n right: 10px;\n cursor: pointer;\n position: fixed;\n z-index: 999;\n background: url("..\/..\/assets\/images\/share_wx.jpg") no-repeat;\n background-size: 100% 100%;\n}\n.share_box img{\n width: 100px;\n height: 100px;\n display: none;\n}\n.share_box:hover img {\n position: absolute;\n top: 50%;\n margin-top: -50px;\n right: 82px;\n display: block !important;\n}<\/code><\/pre>\nnth-child(n)\u6307\u7684\u662f\u5728\u7236\u5143\u7d20\u4e2d\u6240\u6709\u7684\u5143\u7d20\u7684\u987a\u5e8f<\/h3>\n\n\u5199\u4ee3\u7801\u8981\u6839\u636e\u76d2\u5b50\u4ee5\u53ca\u5185\u5bb9\u5199<\/li>\nbottom\uff1a0\uff1b\u8981\u76f8\u5bf9\u4e8e\u7236\u5143\u7d20\u7684 height \u5b9e\u73b0\uff0c\u5982\u679c\u7236\u7236\u5143\u7d20\u7684 height \u5927\u4e8e\u7236\u5143\u7d20\u7684 height\uff0c\uff0c\u5219\u4f1a\u6309\u7167\u7236\u7236\u5143\u7d20\u7684 height \u6765\u5b9e\u73b0 bottom\uff1a0\uff1b\u6765\u5b9e\u73b0\u3002\u3010\u9002\u5f53\u5220\u9664\u7236\u7236\u5143\u7d20\u7684 height\uff0c\u4e00\u677f\u5757\u901a\u5e38\u4e0d\u7528\u8bbe\u7f6e\u603b height\u3011<\/li>\n<\/ul>\n\u60ac\u6302\u56fe\u7247\u7f13\u7f13\u653e\u5927\u7684\u52a8\u753b\u6548\u679c<\/h3>\n<\/p>\n<\/p><\/noscript>\n.gc_project .item_img > img {\n width: 100%;\n height: 100%;\n transition: all 0.3s;\n}\n.gc_project .item_img > img:hover {\n transform: scale(1.05);\n box-shadow: rgb(0 0 0 \/ 23%) 0 4px 14px 0;\n}<\/code><\/pre>\n\u6eda\u52a8\u6761\u4fee\u6539<\/h3>\n<\/p>\n<\/p><\/noscript>\n.mleft::-webkit-scrollbar{\n width: 6px;\n background-color: #f8f8f8;\n\n}\n.mleft::-webkit-scrollbar-thumb{\n width: 6px;\n background-color: #adacac;\n border-radius: 4px;\n}<\/code><\/pre>\nhead \u533a '\u53d1\u73b0' \u5b9e\u73b0\u4ea4\u4e92\u6548\u679c [\u8be5\u9996\u9875\u6700\u607c\u706b\u7684]<\/h2>\n<\/p>\n<\/p><\/noscript>\ntodo head \u533a'\u53d1\u73b0'\u4ea4\u4e92\u5b9e\u73b0\u601d\u8def:<\/h3>\n\n\u2460\u89c2\u5bdf\u8be5\u533a\u7ed3\u6784,\u4e00\u4e2a\u5927\u6a21\u5757,\u5176\u4e2d\u5206\u4e3a\u5de6\u4e2d\u53f3\u4e09\u4e2a\u6a21\u5757,\u5e76\u4f9d\u6b21\u5199\u51fa\u4e09\u4e2a\u6a21\u5757\u7684\u4ee3\u7801,<\/li>\n\u2461\u5de6\u4fa7\u533a\u57df: \u8981\u5c55\u793a\u7684\u6548\u679c\u6709: \u9f20\u6807\u4e0a\u4e0b\u79fb\u52a8,\u6240\u7ecf\u7684 menuItem \u4f1a\u5c55\u73b0\u9ec4\u8272\u80cc\u666f, \u5219\u5f15\u7528 vue \u7684 ref \u5c5e\u6027\u5bf9 DOM \u5143\u7d20\u8fdb\u884c\u52a8\u6001\u7ed1\u5b9a.\n\n\u6ce8\u610f:ref \u9700\u8981\u5728 dom \u6e32\u67d3\u5b8c\u6210\u540e\u624d\u4f1a\u6709,\u5728\u4f7f\u7528\u7684\u65f6\u5019\u786e\u4fdd dom \u5df2\u7ecf\u6e32\u67d3\u5b8c\u6210, \u6bd4\u5982\u5728\u751f\u547d\u5468\u671f mounted(){}\u94a9\u5b50\u4e2d\u8c03\u7528. this.$refs.xxx:\u51cf\u5c11\u83b7\u53d6 dom \u8282\u70b9\u7684\u6d88\u8017<\/li>\n<\/ul>\n<\/li>\n\u2462\u5de6\u4fa7\u533a\u57df\u8fc7\u6ee4\u5230\u53f3\u4fa7\u533a\u57df,\u5c55\u793a\u5bf9\u5e94\u7684\u8be6\u60c5\u9875: mleftIn(item,index)\u51fd\u6570\u901a\u8fc7\u4f20\u8f93 v-for \u5faa\u73af\u4e2d\u6570\u7ec4 menuList \u7684 item \u6bcf\u4e00\u9879\u4e3a\u5a92\u4ecb, \u800c\u6570\u636e\u4e2d menuList \u4e2d\u5305\u542b\u5de6\u4fa7\u6570\u636e menuItem \u4e0e\u53f3\u4fa7\u6bcf\u4e00\u9875\u7684\u6807\u9898 menu \u76f8\u540c, \u4ece\u800c\u5c06\u5de6\u4fa7\u548c\u53f3\u4fa7\u6570\u636e\u7ed1\u5b9a, \u6545\u800c\u5f62\u6210\u4ece\u5de6\u4fa7\u8fc7\u6ee4\u5230\u53f3\u4fa7\u533a\u57df\u662f\u56fa\u5b9a\u7684\u8be6\u60c5\u9875\u5185\u5bb9.<\/li>\n\u2463\u9875\u9762\u7b2c\u4e8c\u6b21\u672a\u5237\u65b0\u4e4b\u524d(\u9996\u6b21\u8fdb\u5165\u9875\u9762\u6e32\u67d3), \u9f20\u6807\u60ac\u6302'\u53d1\u73b0',\u8981\u51fa\u73b0\u7b2c\u4e00\u4e2a'\u7cbe\u9009'\u8be6\u60c5\u9875\u53ca'\u7cbe\u9009'item \u80cc\u666f\u53d8\u9ec4: \u9f20\u6807\u79fb\u51fa\u8be5\u5143\u7d20[\u4e8c\u7ea7\u76ee\u5f55\u6574\u4e2a\u5927\u6a21\u5757]\u4e4b\u5916,\u5219\u89e6\u53d1 mouseleave \u4e8b\u4ef6,\u521d\u59cb\u5316\u6570\u636e.<\/li>\n\u2464\u7b2c\u4e8c\u6b21\u9875\u9762\u5237\u65b0\u4e4b\u540e,\u521d\u59cb\u5316\u6570\u636e: \u91c7\u7528 mounted \u751f\u547d\u5468\u671f[\u6e32\u67d3\u6210 html \u540e\u8c03\u7528]: \u4f7f\u9f20\u6807\u60ac\u6302'\u53d1\u73b0',\u7b2c\u4e00\u4e2a menu-item \u663e\u793a\u9ec4\u8272<\/li>\n<\/ul>\n <li class="find">\n <a href="#">\u53d1\u73b0<\/a>\n <div class="h_menu" @mouseleave="mleftLeave()">\n <div class="menu_box mleft">\n <!-- <a href="">\u7cbe\u9009<\/a>-->\n <a v-for="(item,index) in menuList" :key="index" :ref="'test'+index" href="javascript:;"\n @mouseover="mleftIn(item,index)">{{ item.menu }}<\/a>\n <!-- <el-cascader-panel :options="findOptions" :props="props" \/>-->\n <\/div>\n <div class="mright">\n <div class="cate-box">\n <a class="cate-title" href="">\n <img :src="data.url" alt="">\n <span>{{ data.menu }}<\/span>\n <\/a>\n <div class="subCate">\n <a v-for="(itemOne) in data.items" :key="itemOne">{{ itemOne.text }}<\/a>\n <\/div>\n <\/div>\n <\/div>\n <div class="right_bar">\n <div class="icons">\n <a>\n <span class="icon-box">\n <span class="tangle-1"><\/span>\n <span class="tangle-2"><\/span>\n <i class="ani-star"><\/i>\n <span class="tangle-3"><\/span>\n <\/span>\n <span class="icon-text">\u6536\u85cf\u5939<\/span>\n <\/a>\n <a>\n <img alt="" src="..\/assets\/images\/icon-header-discover-designer.png">\n <span>\u8bbe\u8ba1\u5e08<\/span>\n <\/a>\n <a>\n <img alt="" src="..\/assets\/images\/icon-header-discover-focus.png">\n <span>\u699c\u5355<\/span>\n <!-- <sup class="subNavDot"><\/sup>-->\n <\/a>\n <\/div>\n <div class="ad_box">\n\n <\/div>\n <\/div>\n <\/div>\n <\/li><\/code><\/pre>\n data: {},\n menuList: [\n {\n menu: '\u7cbe\u9009',\n url: require('..\/assets\/images\/zuanshi.png'),\n items: [\n { text: '\u8fd0\u8425\u8bbe\u8ba1' },\n { text: '\u5305\u88c5' },\n { text: '\u52a8\u753b\/\u5f71\u89c6' },\n { text: '\u4eba\u50cf\u6444\u5f71' },\n { text: '\u5546\u4e1a\u63d2\u753b' },\n { text: '\u7535\u5546' },\n { text: 'APP \u754c\u9762' },\n { text: '\u827a\u672f\u63d2\u753b' },\n { text: '\u5bb6\u88c5\u8bbe\u8ba1' },\n { text: '\u6d77\u62a5' },\n { text: '\u6587\u7ae0' }\n ]\n },\n { menu: '\u5e73\u9762' },\n { menu: 'UI' },\n { menu: '\u7f51\u9875' },\n { menu: '\u63d2\u753b' },\n { menu: '\u52a8\u6f2b' },\n { menu: '\u6444\u5f71' },\n { menu: '\u7a7a\u95f4' },\n { menu: '\u5de5\u4e1a\/\u4ea7\u54c1' },\n { menu: '\u4e09\u7ef4' },\n { menu: '\u5f71\u89c6' },\n { menu: '\u624b\u5de5\u827a' },\n { menu: '\u7eaf\u827a\u672f' },\n { menu: '\u670d\u88c5' },\n { menu: '\u5176\u4ed6' }\n ],<\/code><\/pre>\n \/\/\u6e32\u67d3\u6210 html \u4e4b\u524d\u8c03\u7528,\u521d\u59cb\u5316\u4e00\u4e9b\u5c5e\u6027\u503c [\u9f20\u6807\u60ac\u6302'\u53d1\u73b0',\u5c31\u51fa\u73b0\u7b2c\u4e00\u4e2a\u7cbe\u9009\u9875\u9762]\n created () {\n this.data = this.menuList[0]\n },\n \/\/\u6e32\u67d3\u6210 html \u540e\u8c03\u7528 [\u9f20\u6807\u60ac\u6302'\u53d1\u73b0',\u7b2c\u4e00\u4e2a menu-item \u663e\u793a\u9ec4\u8272](\u9875\u9762\u5237\u65b0\u4e86\u4e4b\u540e\u7684)\n mounted () {\n this.$refs['test' + 0][0].style.backgroundColor = 'rgb(255, 242, 0)'\n },\n methods: {\n \/\/\u9f20\u6807\u8fdb\u5165\u51fd\u6570\n mleftIn (item, index) {\n \/\/\u83b7\u53d6 menuList \u4e2d\u6bcf\u4e2a menuItem \u5b57\u7b26\u4e32\u7684\u957f\u5ea6\n let menuSize = this.menuList.length\n for (let i = 0; i < menuSize; i++) {\n \/\/for \u5faa\u73af,i \u5982\u679c\u5c0f\u4e8e menuSize,\u5219\u7f6e\u4e8e menuItem \u989c\u8272\u4e3a\u7070\u8272,\u5b9e\u73b0\u5207\u6362\u6548\u679c\n this.$refs['test' + i][0].style.backgroundColor = '#f8f8f8'\n }\n \/\/\u8df3\u51fa for \u5faa\u73af,\u7531\u5de6\u4fa7\u79fb\u5411\u53f3\u4fa7\u8be6\u60c5\u9875\u65f6,\u5176 menuItem \u7684\u989c\u8272\u4e3a\u9ec4\u8272\n this.$refs['test' + index][0].style.backgroundColor = 'rgb(255, 242, 0)'\n \/\/\u5c06\u53f3\u4fa7\u6570\u636e\u8bbe\u7f6e\u4e3a item,\u663e\u793a\u6570\u636e\n this.data = item\n },\n \/\/\u9f20\u6807\u8fdb\u5165\u51fd\u6570\n \/\/\u6ce8\u610f: mouseleave:\u662f\u9f20\u6807\u79fb\u51fa\u8be5\u5143\u7d20\u4e4b\u5916,\u5219\u89e6\u53d1 mouseleave \u4e8b\u4ef6\n \/\/ mouseout : \u662f\u5f53\u6307\u9488\u79bb\u5f00\u8be5\u5143\u7d20\u53ca\u5176\u6240\u6709\u540e\u4ee3\u65f6\uff0c\u4f1a\u89e6\u53d1 mouseleave\n \/\/ \u800c\u5f53\u6307\u9488\u79bb\u5f00\u5143\u7d20\u6216\u79bb\u5f00\u5143\u7d20\u7684\u540e\u4ee3\uff08\u5373\u4f7f\u6307\u9488\u4ecd\u5728\u5143\u7d20\u5185\uff09\u65f6\uff0c\u4e5f\u4f1a\u89e6\u53d1 mouseout \u4e8b\u4ef6\n mleftLeave () {\n \/\/\u83b7\u53d6 menuList \u4e2d\u6bcf\u4e2a menuItem \u5b57\u7b26\u4e32\u7684\u957f\u5ea6\n let menuSize = this.menuList.length\n for (let i = 0; i < menuSize; i++) {\n this.$refs['test' + i][0].style.backgroundColor = '#f8f8f8'\n }\n \/\/ \u8df3\u51fa\u5faa\u73af,\u6d4f\u89c8\u5b8c'\u53d1\u73b0',\u9f20\u6807\u79fb\u51fa,\u7f6e\u4e8e\u53f3\u4fa7\u6570\u636e\u4e3a\u7b2c\u4e00\u4e2a\u7cbe\u9009\u6570\u636e\n this.data = this.menuList[0]\n \/\/\u9f20\u6807\u79fb\u51fa\u4e8b\u4ef6,\u7f6e\u4e8e\u7b2c\u4e00\u4e2a menuitem \u4e3a\u9ec4\u8272[\u672a\u5237\u65b0\u65f6\u7684\u8bbe\u7f6e]\n this.$refs['test' + 0][0].style.backgroundColor = 'rgb(255, 242, 0)'\n\n \/\/ this.data = {}\n \/\/ this.$refs['test'+index][0].style.backgroundColor = '#f8f8f8'\n \/\/ console.log('\u6eda\u51fa\u53bb')\n },\n}<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"\u4e0b\u8f7d\u4f9d\u8d56\u901f\u5ea6\u5feb npm install –registry=https:\/\/registry.npm.tao […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[],"class_list":["post-3462","post","type-post","status-publish","format-standard","hentry","category-web"],"_links":{"self":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/3462","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3462"}],"version-history":[{"count":38,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/3462\/revisions"}],"predecessor-version":[{"id":3558,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/3462\/revisions\/3558"}],"wp:attachment":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3462"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=3462"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=3462"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
<\/p>\n<\/p><\/noscript>\n<\/slider><\/p>\n<template>\n <div ref="dragDiv" class="drag">\n <div class="drag_bg"><\/div>\n <div class="drag_text">{{ confirmWords }}<\/div>\n <div ref="moveDiv" :class="{'handler_ok_bg':confirmSuccess}" class="handler handler_bg"\n style="position: absolute;top: 0;left: 0;" @mousedown="mouseDownFn($event)"><\/div>\n <\/div>\n<\/template>\n\n<script>\nexport default {\n data () {\n return {\n beginClientX: 0, \/*\u8ddd\u79bb\u5c4f\u5e55\u5de6\u7aef\u8ddd\u79bb*\/\n mouseMoveState: false, \/*\u89e6\u53d1\u62d6\u52a8\u72b6\u6001 \u5224\u65ad*\/\n maxWidth: '', \/*\u62d6\u52a8\u6700\u5927\u5bbd\u5ea6\uff0c\u4f9d\u636e\u6ed1\u5757\u5bbd\u5ea6\u7b97\u51fa\u6765\u7684*\/\n confirmWords: '\u8bf7\u6309\u4f4f\u6ed1\u5757,\u62d6\u52a8\u5230\u6700\u53f3\u8fb9', \/*\u6ed1\u5757\u6587\u5b57*\/\n confirmSuccess: false \/*\u9a8c\u8bc1\u6210\u529f\u5224\u65ad*\/\n }\n },\n methods: {\n \/\/mousedown \u4e8b\u4ef6\n mouseDownFn: function (e) {\n if (!this.confirmSuccess) {\n e.preventDefault && e.preventDefault() \/\/\u963b\u6b62\u6587\u5b57\u9009\u4e2d\u7b49 \u6d4f\u89c8\u5668\u9ed8\u8ba4\u4e8b\u4ef6\n this.mouseMoveState = true\n this.beginClientX = e.clientX\n }\n },\n \/\/\u9a8c\u8bc1\u6210\u529f\u51fd\u6570\n successFunction () {\n this.confirmSuccess = true\n this.confirmWords = '\u9a8c\u8bc1\u901a\u8fc7'\n if (window.addEventListener) {\n document.getElementsByTagName('html')[0].removeEventListener('mousemove', this.mouseMoveFn)\n document.getElementsByTagName('html')[0].removeEventListener('mouseup', this.moseUpFn)\n } else {\n document.getElementsByTagName('html')[0].removeEventListener('mouseup', () => {\n })\n }\n document.getElementsByClassName('drag_text')[0].style.color = '#fff'\n document.getElementsByClassName('handler')[0].style.left = this.maxWidth + 'px'\n document.getElementsByClassName('drag_bg')[0].style.width = this.maxWidth + 'px'\n },\n \/\/mousemove \u4e8b\u4ef6\n mouseMoveFn (e) {\n if (this.mouseMoveState) {\n let width = e.clientX - this.beginClientX\n if (width > 0 && width <= this.maxWidth) {\n document.getElementsByClassName('handler')[0].style.left = width + 'px'\n document.getElementsByClassName('drag_bg')[0].style.width = width + 'px'\n } else if (width > this.maxWidth) {\n this.successFunction()\n }\n }\n },\n \/\/mouseup \u4e8b\u4ef6\n moseUpFn (e) {\n this.mouseMoveState = false\n var width = e.clientX - this.beginClientX\n if (width < this.maxWidth) {\n document.getElementsByClassName('handler')[0].style.left = 0 + 'px'\n document.getElementsByClassName('drag_bg')[0].style.width = 0 + 'px'\n }\n }\n },\n mounted () {\n this.maxWidth = this.$refs.dragDiv.clientWidth - this.$refs.moveDiv.clientWidth\n document.getElementsByTagName('html')[0].addEventListener('mousemove', this.mouseMoveFn)\n document.getElementsByTagName('html')[0].addEventListener('mouseup', this.moseUpFn)\n }\n}\n<\/script>\n<style scoped>\n.drag {\n position: relative;\n background-color: #e8e8e8;\n width: 100%;\n height: 32px;\n line-height: 32px;\n text-align: center;\n border: 1px solid #ccc;\n\n}\n\n.handler {\n width: 40px;\n height: 32px;\n border: 1px solid #ccc;\n cursor: move;\n margin-top: -1px;\n margin-left: -1px;\n}\n\n.handler_bg {\n background: #fff url('..\/assets\/images\/arrow-r.png') no-repeat center;\n background-size: 25px;\n}\n\n.handler_ok_bg {\n background: #fff url('..\/assets\/images\/\u221a.png') no-repeat center;\n background-size: 18px;\n}\n\n.drag_bg {\n background-color: #7ac23c;\n height: 32px;\n width: 0;\n}\n\n.drag_text {\n position: absolute;\n top: 0;\n width: 100%;\n font-size: 12px;\n color: #706f6f;\n}\n\n<\/style>\n<\/code><\/pre>\nel-input \u805a\u7126\u540e\u80cc\u666f\u53d8\u767d<\/h3>\n<\/p>\n<\/p><\/noscript>\n.el-input__wrapper.is-focus {\n box-shadow: 0 0 0 1px #dcdfe6 inset;\n background-color: #fff;\n}<\/code><\/pre>\nel-input placeholder \u989c\u8272\u8bbe\u7f6e<\/h3>\n.el-input__inner::placeholder{\n color: #666666;\n}<\/code><\/pre>\n\u5224\u65ad el-checked \u662f\u5426\u9009\u4e2d,\u672a\u9009\u4e2d\u5219\u63d0\u793a\u8bf7\u52fe\u9009<\/h3>\n<\/p>\n<\/p><\/noscript>\nexport default {\nmounted() {\n const pleaseFit=document.getElementById('pleaseFit');\n $(".el-checkbox input").change(() => {\n if ($(".el-checkbox input[type='checkbox']").is(':checked') == true) {\n pleaseFit.style.display='none'\n } else {\n pleaseFit.style.display='block'\n }\n })\n }\n }<\/code><\/pre>\nel-input \u5728 style \u5168\u5c40\u6837\u5f0f,\u4f1a\u5f71\u54cd\u5230\u5176\u4ed6\u4e0d\u7b26\u5408\u8be5\u6837\u5f0f\u7684\u4f4d\u7f6e<\/h3>\n\n\u53ef\u4ee5\u5728 style scoped> \u5199,\u52a0\u4e0a\/deep\/<\/li>\n<\/ul>\n<\/p>\n<\/p><\/noscript>\n\/deep\/ .el-input__wrapper {\n box-shadow: 0 0 0 0 inset;\n background-color: rgb(255, 242, 0);\n}<\/code><\/pre>\nel-carousel \u8d70\u9a6c\u706f\u4fee\u6539 Carousel \u5de6\u53f3\u4e24\u4fa7\u7bad\u5934\u5b57\u4f53\u5927\u5c0f<\/h3>\n\/deep\/.el-carousel__arrow i {\n font-size: 29px !important;\n }<\/code><\/pre>\n\u9875\u9762\u5411\u4e0b\u6ed1\u52a8\u5bfc\u822a\u680f\u56fa\u5b9a<\/h3>\n<\/p>\n<\/p><\/noscript>\n.main_nav_fixed {\n position: sticky;\n top: 0;\n z-index: 999;\n}<\/code><\/pre>\n\u56fa\u5b9a\u5728\u53f3\u65b9\u7684,\u60ac\u6302\u51fa\u73b0\u4e8c\u7ef4\u7801<\/h3>\n<\/p>\n<\/p><\/noscript>\n<div class="share_box">\n <img src="..\/..\/assets\/images\/share_qr.png" alt=""\/>\n <\/div><\/code><\/pre>\n.share_box{\n width: 70px;\n height: 131px;\n top: 300px;\n right: 10px;\n cursor: pointer;\n position: fixed;\n z-index: 999;\n background: url("..\/..\/assets\/images\/share_wx.jpg") no-repeat;\n background-size: 100% 100%;\n}\n.share_box img{\n width: 100px;\n height: 100px;\n display: none;\n}\n.share_box:hover img {\n position: absolute;\n top: 50%;\n margin-top: -50px;\n right: 82px;\n display: block !important;\n}<\/code><\/pre>\nnth-child(n)\u6307\u7684\u662f\u5728\u7236\u5143\u7d20\u4e2d\u6240\u6709\u7684\u5143\u7d20\u7684\u987a\u5e8f<\/h3>\n\n\u5199\u4ee3\u7801\u8981\u6839\u636e\u76d2\u5b50\u4ee5\u53ca\u5185\u5bb9\u5199<\/li>\nbottom\uff1a0\uff1b\u8981\u76f8\u5bf9\u4e8e\u7236\u5143\u7d20\u7684 height \u5b9e\u73b0\uff0c\u5982\u679c\u7236\u7236\u5143\u7d20\u7684 height \u5927\u4e8e\u7236\u5143\u7d20\u7684 height\uff0c\uff0c\u5219\u4f1a\u6309\u7167\u7236\u7236\u5143\u7d20\u7684 height \u6765\u5b9e\u73b0 bottom\uff1a0\uff1b\u6765\u5b9e\u73b0\u3002\u3010\u9002\u5f53\u5220\u9664\u7236\u7236\u5143\u7d20\u7684 height\uff0c\u4e00\u677f\u5757\u901a\u5e38\u4e0d\u7528\u8bbe\u7f6e\u603b height\u3011<\/li>\n<\/ul>\n\u60ac\u6302\u56fe\u7247\u7f13\u7f13\u653e\u5927\u7684\u52a8\u753b\u6548\u679c<\/h3>\n<\/p>\n<\/p><\/noscript>\n.gc_project .item_img > img {\n width: 100%;\n height: 100%;\n transition: all 0.3s;\n}\n.gc_project .item_img > img:hover {\n transform: scale(1.05);\n box-shadow: rgb(0 0 0 \/ 23%) 0 4px 14px 0;\n}<\/code><\/pre>\n\u6eda\u52a8\u6761\u4fee\u6539<\/h3>\n<\/p>\n<\/p><\/noscript>\n.mleft::-webkit-scrollbar{\n width: 6px;\n background-color: #f8f8f8;\n\n}\n.mleft::-webkit-scrollbar-thumb{\n width: 6px;\n background-color: #adacac;\n border-radius: 4px;\n}<\/code><\/pre>\nhead \u533a '\u53d1\u73b0' \u5b9e\u73b0\u4ea4\u4e92\u6548\u679c [\u8be5\u9996\u9875\u6700\u607c\u706b\u7684]<\/h2>\n<\/p>\n<\/p><\/noscript>\ntodo head \u533a'\u53d1\u73b0'\u4ea4\u4e92\u5b9e\u73b0\u601d\u8def:<\/h3>\n\n\u2460\u89c2\u5bdf\u8be5\u533a\u7ed3\u6784,\u4e00\u4e2a\u5927\u6a21\u5757,\u5176\u4e2d\u5206\u4e3a\u5de6\u4e2d\u53f3\u4e09\u4e2a\u6a21\u5757,\u5e76\u4f9d\u6b21\u5199\u51fa\u4e09\u4e2a\u6a21\u5757\u7684\u4ee3\u7801,<\/li>\n\u2461\u5de6\u4fa7\u533a\u57df: \u8981\u5c55\u793a\u7684\u6548\u679c\u6709: \u9f20\u6807\u4e0a\u4e0b\u79fb\u52a8,\u6240\u7ecf\u7684 menuItem \u4f1a\u5c55\u73b0\u9ec4\u8272\u80cc\u666f, \u5219\u5f15\u7528 vue \u7684 ref \u5c5e\u6027\u5bf9 DOM \u5143\u7d20\u8fdb\u884c\u52a8\u6001\u7ed1\u5b9a.\n\n\u6ce8\u610f:ref \u9700\u8981\u5728 dom \u6e32\u67d3\u5b8c\u6210\u540e\u624d\u4f1a\u6709,\u5728\u4f7f\u7528\u7684\u65f6\u5019\u786e\u4fdd dom \u5df2\u7ecf\u6e32\u67d3\u5b8c\u6210, \u6bd4\u5982\u5728\u751f\u547d\u5468\u671f mounted(){}\u94a9\u5b50\u4e2d\u8c03\u7528. this.$refs.xxx:\u51cf\u5c11\u83b7\u53d6 dom \u8282\u70b9\u7684\u6d88\u8017<\/li>\n<\/ul>\n<\/li>\n\u2462\u5de6\u4fa7\u533a\u57df\u8fc7\u6ee4\u5230\u53f3\u4fa7\u533a\u57df,\u5c55\u793a\u5bf9\u5e94\u7684\u8be6\u60c5\u9875: mleftIn(item,index)\u51fd\u6570\u901a\u8fc7\u4f20\u8f93 v-for \u5faa\u73af\u4e2d\u6570\u7ec4 menuList \u7684 item \u6bcf\u4e00\u9879\u4e3a\u5a92\u4ecb, \u800c\u6570\u636e\u4e2d menuList \u4e2d\u5305\u542b\u5de6\u4fa7\u6570\u636e menuItem \u4e0e\u53f3\u4fa7\u6bcf\u4e00\u9875\u7684\u6807\u9898 menu \u76f8\u540c, \u4ece\u800c\u5c06\u5de6\u4fa7\u548c\u53f3\u4fa7\u6570\u636e\u7ed1\u5b9a, \u6545\u800c\u5f62\u6210\u4ece\u5de6\u4fa7\u8fc7\u6ee4\u5230\u53f3\u4fa7\u533a\u57df\u662f\u56fa\u5b9a\u7684\u8be6\u60c5\u9875\u5185\u5bb9.<\/li>\n\u2463\u9875\u9762\u7b2c\u4e8c\u6b21\u672a\u5237\u65b0\u4e4b\u524d(\u9996\u6b21\u8fdb\u5165\u9875\u9762\u6e32\u67d3), \u9f20\u6807\u60ac\u6302'\u53d1\u73b0',\u8981\u51fa\u73b0\u7b2c\u4e00\u4e2a'\u7cbe\u9009'\u8be6\u60c5\u9875\u53ca'\u7cbe\u9009'item \u80cc\u666f\u53d8\u9ec4: \u9f20\u6807\u79fb\u51fa\u8be5\u5143\u7d20[\u4e8c\u7ea7\u76ee\u5f55\u6574\u4e2a\u5927\u6a21\u5757]\u4e4b\u5916,\u5219\u89e6\u53d1 mouseleave \u4e8b\u4ef6,\u521d\u59cb\u5316\u6570\u636e.<\/li>\n\u2464\u7b2c\u4e8c\u6b21\u9875\u9762\u5237\u65b0\u4e4b\u540e,\u521d\u59cb\u5316\u6570\u636e: \u91c7\u7528 mounted \u751f\u547d\u5468\u671f[\u6e32\u67d3\u6210 html \u540e\u8c03\u7528]: \u4f7f\u9f20\u6807\u60ac\u6302'\u53d1\u73b0',\u7b2c\u4e00\u4e2a menu-item \u663e\u793a\u9ec4\u8272<\/li>\n<\/ul>\n <li class="find">\n <a href="#">\u53d1\u73b0<\/a>\n <div class="h_menu" @mouseleave="mleftLeave()">\n <div class="menu_box mleft">\n <!-- <a href="">\u7cbe\u9009<\/a>-->\n <a v-for="(item,index) in menuList" :key="index" :ref="'test'+index" href="javascript:;"\n @mouseover="mleftIn(item,index)">{{ item.menu }}<\/a>\n <!-- <el-cascader-panel :options="findOptions" :props="props" \/>-->\n <\/div>\n <div class="mright">\n <div class="cate-box">\n <a class="cate-title" href="">\n <img :src="data.url" alt="">\n <span>{{ data.menu }}<\/span>\n <\/a>\n <div class="subCate">\n <a v-for="(itemOne) in data.items" :key="itemOne">{{ itemOne.text }}<\/a>\n <\/div>\n <\/div>\n <\/div>\n <div class="right_bar">\n <div class="icons">\n <a>\n <span class="icon-box">\n <span class="tangle-1"><\/span>\n <span class="tangle-2"><\/span>\n <i class="ani-star"><\/i>\n <span class="tangle-3"><\/span>\n <\/span>\n <span class="icon-text">\u6536\u85cf\u5939<\/span>\n <\/a>\n <a>\n <img alt="" src="..\/assets\/images\/icon-header-discover-designer.png">\n <span>\u8bbe\u8ba1\u5e08<\/span>\n <\/a>\n <a>\n <img alt="" src="..\/assets\/images\/icon-header-discover-focus.png">\n <span>\u699c\u5355<\/span>\n <!-- <sup class="subNavDot"><\/sup>-->\n <\/a>\n <\/div>\n <div class="ad_box">\n\n <\/div>\n <\/div>\n <\/div>\n <\/li><\/code><\/pre>\n data: {},\n menuList: [\n {\n menu: '\u7cbe\u9009',\n url: require('..\/assets\/images\/zuanshi.png'),\n items: [\n { text: '\u8fd0\u8425\u8bbe\u8ba1' },\n { text: '\u5305\u88c5' },\n { text: '\u52a8\u753b\/\u5f71\u89c6' },\n { text: '\u4eba\u50cf\u6444\u5f71' },\n { text: '\u5546\u4e1a\u63d2\u753b' },\n { text: '\u7535\u5546' },\n { text: 'APP \u754c\u9762' },\n { text: '\u827a\u672f\u63d2\u753b' },\n { text: '\u5bb6\u88c5\u8bbe\u8ba1' },\n { text: '\u6d77\u62a5' },\n { text: '\u6587\u7ae0' }\n ]\n },\n { menu: '\u5e73\u9762' },\n { menu: 'UI' },\n { menu: '\u7f51\u9875' },\n { menu: '\u63d2\u753b' },\n { menu: '\u52a8\u6f2b' },\n { menu: '\u6444\u5f71' },\n { menu: '\u7a7a\u95f4' },\n { menu: '\u5de5\u4e1a\/\u4ea7\u54c1' },\n { menu: '\u4e09\u7ef4' },\n { menu: '\u5f71\u89c6' },\n { menu: '\u624b\u5de5\u827a' },\n { menu: '\u7eaf\u827a\u672f' },\n { menu: '\u670d\u88c5' },\n { menu: '\u5176\u4ed6' }\n ],<\/code><\/pre>\n \/\/\u6e32\u67d3\u6210 html \u4e4b\u524d\u8c03\u7528,\u521d\u59cb\u5316\u4e00\u4e9b\u5c5e\u6027\u503c [\u9f20\u6807\u60ac\u6302'\u53d1\u73b0',\u5c31\u51fa\u73b0\u7b2c\u4e00\u4e2a\u7cbe\u9009\u9875\u9762]\n created () {\n this.data = this.menuList[0]\n },\n \/\/\u6e32\u67d3\u6210 html \u540e\u8c03\u7528 [\u9f20\u6807\u60ac\u6302'\u53d1\u73b0',\u7b2c\u4e00\u4e2a menu-item \u663e\u793a\u9ec4\u8272](\u9875\u9762\u5237\u65b0\u4e86\u4e4b\u540e\u7684)\n mounted () {\n this.$refs['test' + 0][0].style.backgroundColor = 'rgb(255, 242, 0)'\n },\n methods: {\n \/\/\u9f20\u6807\u8fdb\u5165\u51fd\u6570\n mleftIn (item, index) {\n \/\/\u83b7\u53d6 menuList \u4e2d\u6bcf\u4e2a menuItem \u5b57\u7b26\u4e32\u7684\u957f\u5ea6\n let menuSize = this.menuList.length\n for (let i = 0; i < menuSize; i++) {\n \/\/for \u5faa\u73af,i \u5982\u679c\u5c0f\u4e8e menuSize,\u5219\u7f6e\u4e8e menuItem \u989c\u8272\u4e3a\u7070\u8272,\u5b9e\u73b0\u5207\u6362\u6548\u679c\n this.$refs['test' + i][0].style.backgroundColor = '#f8f8f8'\n }\n \/\/\u8df3\u51fa for \u5faa\u73af,\u7531\u5de6\u4fa7\u79fb\u5411\u53f3\u4fa7\u8be6\u60c5\u9875\u65f6,\u5176 menuItem \u7684\u989c\u8272\u4e3a\u9ec4\u8272\n this.$refs['test' + index][0].style.backgroundColor = 'rgb(255, 242, 0)'\n \/\/\u5c06\u53f3\u4fa7\u6570\u636e\u8bbe\u7f6e\u4e3a item,\u663e\u793a\u6570\u636e\n this.data = item\n },\n \/\/\u9f20\u6807\u8fdb\u5165\u51fd\u6570\n \/\/\u6ce8\u610f: mouseleave:\u662f\u9f20\u6807\u79fb\u51fa\u8be5\u5143\u7d20\u4e4b\u5916,\u5219\u89e6\u53d1 mouseleave \u4e8b\u4ef6\n \/\/ mouseout : \u662f\u5f53\u6307\u9488\u79bb\u5f00\u8be5\u5143\u7d20\u53ca\u5176\u6240\u6709\u540e\u4ee3\u65f6\uff0c\u4f1a\u89e6\u53d1 mouseleave\n \/\/ \u800c\u5f53\u6307\u9488\u79bb\u5f00\u5143\u7d20\u6216\u79bb\u5f00\u5143\u7d20\u7684\u540e\u4ee3\uff08\u5373\u4f7f\u6307\u9488\u4ecd\u5728\u5143\u7d20\u5185\uff09\u65f6\uff0c\u4e5f\u4f1a\u89e6\u53d1 mouseout \u4e8b\u4ef6\n mleftLeave () {\n \/\/\u83b7\u53d6 menuList \u4e2d\u6bcf\u4e2a menuItem \u5b57\u7b26\u4e32\u7684\u957f\u5ea6\n let menuSize = this.menuList.length\n for (let i = 0; i < menuSize; i++) {\n this.$refs['test' + i][0].style.backgroundColor = '#f8f8f8'\n }\n \/\/ \u8df3\u51fa\u5faa\u73af,\u6d4f\u89c8\u5b8c'\u53d1\u73b0',\u9f20\u6807\u79fb\u51fa,\u7f6e\u4e8e\u53f3\u4fa7\u6570\u636e\u4e3a\u7b2c\u4e00\u4e2a\u7cbe\u9009\u6570\u636e\n this.data = this.menuList[0]\n \/\/\u9f20\u6807\u79fb\u51fa\u4e8b\u4ef6,\u7f6e\u4e8e\u7b2c\u4e00\u4e2a menuitem \u4e3a\u9ec4\u8272[\u672a\u5237\u65b0\u65f6\u7684\u8bbe\u7f6e]\n this.$refs['test' + 0][0].style.backgroundColor = 'rgb(255, 242, 0)'\n\n \/\/ this.data = {}\n \/\/ this.$refs['test'+index][0].style.backgroundColor = '#f8f8f8'\n \/\/ console.log('\u6eda\u51fa\u53bb')\n },\n}<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"\u4e0b\u8f7d\u4f9d\u8d56\u901f\u5ea6\u5feb npm install –registry=https:\/\/registry.npm.tao […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[],"class_list":["post-3462","post","type-post","status-publish","format-standard","hentry","category-web"],"_links":{"self":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/3462","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3462"}],"version-history":[{"count":38,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/3462\/revisions"}],"predecessor-version":[{"id":3558,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/3462\/revisions\/3558"}],"wp:attachment":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3462"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=3462"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=3462"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
<\/slider><\/p>\n<template>\n <div ref="dragDiv" class="drag">\n <div class="drag_bg"><\/div>\n <div class="drag_text">{{ confirmWords }}<\/div>\n <div ref="moveDiv" :class="{'handler_ok_bg':confirmSuccess}" class="handler handler_bg"\n style="position: absolute;top: 0;left: 0;" @mousedown="mouseDownFn($event)"><\/div>\n <\/div>\n<\/template>\n\n<script>\nexport default {\n data () {\n return {\n beginClientX: 0, \/*\u8ddd\u79bb\u5c4f\u5e55\u5de6\u7aef\u8ddd\u79bb*\/\n mouseMoveState: false, \/*\u89e6\u53d1\u62d6\u52a8\u72b6\u6001 \u5224\u65ad*\/\n maxWidth: '', \/*\u62d6\u52a8\u6700\u5927\u5bbd\u5ea6\uff0c\u4f9d\u636e\u6ed1\u5757\u5bbd\u5ea6\u7b97\u51fa\u6765\u7684*\/\n confirmWords: '\u8bf7\u6309\u4f4f\u6ed1\u5757,\u62d6\u52a8\u5230\u6700\u53f3\u8fb9', \/*\u6ed1\u5757\u6587\u5b57*\/\n confirmSuccess: false \/*\u9a8c\u8bc1\u6210\u529f\u5224\u65ad*\/\n }\n },\n methods: {\n \/\/mousedown \u4e8b\u4ef6\n mouseDownFn: function (e) {\n if (!this.confirmSuccess) {\n e.preventDefault && e.preventDefault() \/\/\u963b\u6b62\u6587\u5b57\u9009\u4e2d\u7b49 \u6d4f\u89c8\u5668\u9ed8\u8ba4\u4e8b\u4ef6\n this.mouseMoveState = true\n this.beginClientX = e.clientX\n }\n },\n \/\/\u9a8c\u8bc1\u6210\u529f\u51fd\u6570\n successFunction () {\n this.confirmSuccess = true\n this.confirmWords = '\u9a8c\u8bc1\u901a\u8fc7'\n if (window.addEventListener) {\n document.getElementsByTagName('html')[0].removeEventListener('mousemove', this.mouseMoveFn)\n document.getElementsByTagName('html')[0].removeEventListener('mouseup', this.moseUpFn)\n } else {\n document.getElementsByTagName('html')[0].removeEventListener('mouseup', () => {\n })\n }\n document.getElementsByClassName('drag_text')[0].style.color = '#fff'\n document.getElementsByClassName('handler')[0].style.left = this.maxWidth + 'px'\n document.getElementsByClassName('drag_bg')[0].style.width = this.maxWidth + 'px'\n },\n \/\/mousemove \u4e8b\u4ef6\n mouseMoveFn (e) {\n if (this.mouseMoveState) {\n let width = e.clientX - this.beginClientX\n if (width > 0 && width <= this.maxWidth) {\n document.getElementsByClassName('handler')[0].style.left = width + 'px'\n document.getElementsByClassName('drag_bg')[0].style.width = width + 'px'\n } else if (width > this.maxWidth) {\n this.successFunction()\n }\n }\n },\n \/\/mouseup \u4e8b\u4ef6\n moseUpFn (e) {\n this.mouseMoveState = false\n var width = e.clientX - this.beginClientX\n if (width < this.maxWidth) {\n document.getElementsByClassName('handler')[0].style.left = 0 + 'px'\n document.getElementsByClassName('drag_bg')[0].style.width = 0 + 'px'\n }\n }\n },\n mounted () {\n this.maxWidth = this.$refs.dragDiv.clientWidth - this.$refs.moveDiv.clientWidth\n document.getElementsByTagName('html')[0].addEventListener('mousemove', this.mouseMoveFn)\n document.getElementsByTagName('html')[0].addEventListener('mouseup', this.moseUpFn)\n }\n}\n<\/script>\n<style scoped>\n.drag {\n position: relative;\n background-color: #e8e8e8;\n width: 100%;\n height: 32px;\n line-height: 32px;\n text-align: center;\n border: 1px solid #ccc;\n\n}\n\n.handler {\n width: 40px;\n height: 32px;\n border: 1px solid #ccc;\n cursor: move;\n margin-top: -1px;\n margin-left: -1px;\n}\n\n.handler_bg {\n background: #fff url('..\/assets\/images\/arrow-r.png') no-repeat center;\n background-size: 25px;\n}\n\n.handler_ok_bg {\n background: #fff url('..\/assets\/images\/\u221a.png') no-repeat center;\n background-size: 18px;\n}\n\n.drag_bg {\n background-color: #7ac23c;\n height: 32px;\n width: 0;\n}\n\n.drag_text {\n position: absolute;\n top: 0;\n width: 100%;\n font-size: 12px;\n color: #706f6f;\n}\n\n<\/style>\n<\/code><\/pre>\nel-input \u805a\u7126\u540e\u80cc\u666f\u53d8\u767d<\/h3>\n<\/p>\n<\/p><\/noscript>\n.el-input__wrapper.is-focus {\n box-shadow: 0 0 0 1px #dcdfe6 inset;\n background-color: #fff;\n}<\/code><\/pre>\nel-input placeholder \u989c\u8272\u8bbe\u7f6e<\/h3>\n.el-input__inner::placeholder{\n color: #666666;\n}<\/code><\/pre>\n\u5224\u65ad el-checked \u662f\u5426\u9009\u4e2d,\u672a\u9009\u4e2d\u5219\u63d0\u793a\u8bf7\u52fe\u9009<\/h3>\n<\/p>\n<\/p><\/noscript>\nexport default {\nmounted() {\n const pleaseFit=document.getElementById('pleaseFit');\n $(".el-checkbox input").change(() => {\n if ($(".el-checkbox input[type='checkbox']").is(':checked') == true) {\n pleaseFit.style.display='none'\n } else {\n pleaseFit.style.display='block'\n }\n })\n }\n }<\/code><\/pre>\nel-input \u5728 style \u5168\u5c40\u6837\u5f0f,\u4f1a\u5f71\u54cd\u5230\u5176\u4ed6\u4e0d\u7b26\u5408\u8be5\u6837\u5f0f\u7684\u4f4d\u7f6e<\/h3>\n\n\u53ef\u4ee5\u5728 style scoped> \u5199,\u52a0\u4e0a\/deep\/<\/li>\n<\/ul>\n<\/p>\n<\/p><\/noscript>\n\/deep\/ .el-input__wrapper {\n box-shadow: 0 0 0 0 inset;\n background-color: rgb(255, 242, 0);\n}<\/code><\/pre>\nel-carousel \u8d70\u9a6c\u706f\u4fee\u6539 Carousel \u5de6\u53f3\u4e24\u4fa7\u7bad\u5934\u5b57\u4f53\u5927\u5c0f<\/h3>\n\/deep\/.el-carousel__arrow i {\n font-size: 29px !important;\n }<\/code><\/pre>\n\u9875\u9762\u5411\u4e0b\u6ed1\u52a8\u5bfc\u822a\u680f\u56fa\u5b9a<\/h3>\n<\/p>\n<\/p><\/noscript>\n.main_nav_fixed {\n position: sticky;\n top: 0;\n z-index: 999;\n}<\/code><\/pre>\n\u56fa\u5b9a\u5728\u53f3\u65b9\u7684,\u60ac\u6302\u51fa\u73b0\u4e8c\u7ef4\u7801<\/h3>\n<\/p>\n<\/p><\/noscript>\n<div class="share_box">\n <img src="..\/..\/assets\/images\/share_qr.png" alt=""\/>\n <\/div><\/code><\/pre>\n.share_box{\n width: 70px;\n height: 131px;\n top: 300px;\n right: 10px;\n cursor: pointer;\n position: fixed;\n z-index: 999;\n background: url("..\/..\/assets\/images\/share_wx.jpg") no-repeat;\n background-size: 100% 100%;\n}\n.share_box img{\n width: 100px;\n height: 100px;\n display: none;\n}\n.share_box:hover img {\n position: absolute;\n top: 50%;\n margin-top: -50px;\n right: 82px;\n display: block !important;\n}<\/code><\/pre>\nnth-child(n)\u6307\u7684\u662f\u5728\u7236\u5143\u7d20\u4e2d\u6240\u6709\u7684\u5143\u7d20\u7684\u987a\u5e8f<\/h3>\n\n\u5199\u4ee3\u7801\u8981\u6839\u636e\u76d2\u5b50\u4ee5\u53ca\u5185\u5bb9\u5199<\/li>\nbottom\uff1a0\uff1b\u8981\u76f8\u5bf9\u4e8e\u7236\u5143\u7d20\u7684 height \u5b9e\u73b0\uff0c\u5982\u679c\u7236\u7236\u5143\u7d20\u7684 height \u5927\u4e8e\u7236\u5143\u7d20\u7684 height\uff0c\uff0c\u5219\u4f1a\u6309\u7167\u7236\u7236\u5143\u7d20\u7684 height \u6765\u5b9e\u73b0 bottom\uff1a0\uff1b\u6765\u5b9e\u73b0\u3002\u3010\u9002\u5f53\u5220\u9664\u7236\u7236\u5143\u7d20\u7684 height\uff0c\u4e00\u677f\u5757\u901a\u5e38\u4e0d\u7528\u8bbe\u7f6e\u603b height\u3011<\/li>\n<\/ul>\n\u60ac\u6302\u56fe\u7247\u7f13\u7f13\u653e\u5927\u7684\u52a8\u753b\u6548\u679c<\/h3>\n<\/p>\n<\/p><\/noscript>\n.gc_project .item_img > img {\n width: 100%;\n height: 100%;\n transition: all 0.3s;\n}\n.gc_project .item_img > img:hover {\n transform: scale(1.05);\n box-shadow: rgb(0 0 0 \/ 23%) 0 4px 14px 0;\n}<\/code><\/pre>\n\u6eda\u52a8\u6761\u4fee\u6539<\/h3>\n<\/p>\n<\/p><\/noscript>\n.mleft::-webkit-scrollbar{\n width: 6px;\n background-color: #f8f8f8;\n\n}\n.mleft::-webkit-scrollbar-thumb{\n width: 6px;\n background-color: #adacac;\n border-radius: 4px;\n}<\/code><\/pre>\nhead \u533a '\u53d1\u73b0' \u5b9e\u73b0\u4ea4\u4e92\u6548\u679c [\u8be5\u9996\u9875\u6700\u607c\u706b\u7684]<\/h2>\n<\/p>\n<\/p><\/noscript>\ntodo head \u533a'\u53d1\u73b0'\u4ea4\u4e92\u5b9e\u73b0\u601d\u8def:<\/h3>\n\n\u2460\u89c2\u5bdf\u8be5\u533a\u7ed3\u6784,\u4e00\u4e2a\u5927\u6a21\u5757,\u5176\u4e2d\u5206\u4e3a\u5de6\u4e2d\u53f3\u4e09\u4e2a\u6a21\u5757,\u5e76\u4f9d\u6b21\u5199\u51fa\u4e09\u4e2a\u6a21\u5757\u7684\u4ee3\u7801,<\/li>\n\u2461\u5de6\u4fa7\u533a\u57df: \u8981\u5c55\u793a\u7684\u6548\u679c\u6709: \u9f20\u6807\u4e0a\u4e0b\u79fb\u52a8,\u6240\u7ecf\u7684 menuItem \u4f1a\u5c55\u73b0\u9ec4\u8272\u80cc\u666f, \u5219\u5f15\u7528 vue \u7684 ref \u5c5e\u6027\u5bf9 DOM \u5143\u7d20\u8fdb\u884c\u52a8\u6001\u7ed1\u5b9a.\n\n\u6ce8\u610f:ref \u9700\u8981\u5728 dom \u6e32\u67d3\u5b8c\u6210\u540e\u624d\u4f1a\u6709,\u5728\u4f7f\u7528\u7684\u65f6\u5019\u786e\u4fdd dom \u5df2\u7ecf\u6e32\u67d3\u5b8c\u6210, \u6bd4\u5982\u5728\u751f\u547d\u5468\u671f mounted(){}\u94a9\u5b50\u4e2d\u8c03\u7528. this.$refs.xxx:\u51cf\u5c11\u83b7\u53d6 dom \u8282\u70b9\u7684\u6d88\u8017<\/li>\n<\/ul>\n<\/li>\n\u2462\u5de6\u4fa7\u533a\u57df\u8fc7\u6ee4\u5230\u53f3\u4fa7\u533a\u57df,\u5c55\u793a\u5bf9\u5e94\u7684\u8be6\u60c5\u9875: mleftIn(item,index)\u51fd\u6570\u901a\u8fc7\u4f20\u8f93 v-for \u5faa\u73af\u4e2d\u6570\u7ec4 menuList \u7684 item \u6bcf\u4e00\u9879\u4e3a\u5a92\u4ecb, \u800c\u6570\u636e\u4e2d menuList \u4e2d\u5305\u542b\u5de6\u4fa7\u6570\u636e menuItem \u4e0e\u53f3\u4fa7\u6bcf\u4e00\u9875\u7684\u6807\u9898 menu \u76f8\u540c, \u4ece\u800c\u5c06\u5de6\u4fa7\u548c\u53f3\u4fa7\u6570\u636e\u7ed1\u5b9a, \u6545\u800c\u5f62\u6210\u4ece\u5de6\u4fa7\u8fc7\u6ee4\u5230\u53f3\u4fa7\u533a\u57df\u662f\u56fa\u5b9a\u7684\u8be6\u60c5\u9875\u5185\u5bb9.<\/li>\n\u2463\u9875\u9762\u7b2c\u4e8c\u6b21\u672a\u5237\u65b0\u4e4b\u524d(\u9996\u6b21\u8fdb\u5165\u9875\u9762\u6e32\u67d3), \u9f20\u6807\u60ac\u6302'\u53d1\u73b0',\u8981\u51fa\u73b0\u7b2c\u4e00\u4e2a'\u7cbe\u9009'\u8be6\u60c5\u9875\u53ca'\u7cbe\u9009'item \u80cc\u666f\u53d8\u9ec4: \u9f20\u6807\u79fb\u51fa\u8be5\u5143\u7d20[\u4e8c\u7ea7\u76ee\u5f55\u6574\u4e2a\u5927\u6a21\u5757]\u4e4b\u5916,\u5219\u89e6\u53d1 mouseleave \u4e8b\u4ef6,\u521d\u59cb\u5316\u6570\u636e.<\/li>\n\u2464\u7b2c\u4e8c\u6b21\u9875\u9762\u5237\u65b0\u4e4b\u540e,\u521d\u59cb\u5316\u6570\u636e: \u91c7\u7528 mounted \u751f\u547d\u5468\u671f[\u6e32\u67d3\u6210 html \u540e\u8c03\u7528]: \u4f7f\u9f20\u6807\u60ac\u6302'\u53d1\u73b0',\u7b2c\u4e00\u4e2a menu-item \u663e\u793a\u9ec4\u8272<\/li>\n<\/ul>\n <li class="find">\n <a href="#">\u53d1\u73b0<\/a>\n <div class="h_menu" @mouseleave="mleftLeave()">\n <div class="menu_box mleft">\n <!-- <a href="">\u7cbe\u9009<\/a>-->\n <a v-for="(item,index) in menuList" :key="index" :ref="'test'+index" href="javascript:;"\n @mouseover="mleftIn(item,index)">{{ item.menu }}<\/a>\n <!-- <el-cascader-panel :options="findOptions" :props="props" \/>-->\n <\/div>\n <div class="mright">\n <div class="cate-box">\n <a class="cate-title" href="">\n <img :src="data.url" alt="">\n <span>{{ data.menu }}<\/span>\n <\/a>\n <div class="subCate">\n <a v-for="(itemOne) in data.items" :key="itemOne">{{ itemOne.text }}<\/a>\n <\/div>\n <\/div>\n <\/div>\n <div class="right_bar">\n <div class="icons">\n <a>\n <span class="icon-box">\n <span class="tangle-1"><\/span>\n <span class="tangle-2"><\/span>\n <i class="ani-star"><\/i>\n <span class="tangle-3"><\/span>\n <\/span>\n <span class="icon-text">\u6536\u85cf\u5939<\/span>\n <\/a>\n <a>\n <img alt="" src="..\/assets\/images\/icon-header-discover-designer.png">\n <span>\u8bbe\u8ba1\u5e08<\/span>\n <\/a>\n <a>\n <img alt="" src="..\/assets\/images\/icon-header-discover-focus.png">\n <span>\u699c\u5355<\/span>\n <!-- <sup class="subNavDot"><\/sup>-->\n <\/a>\n <\/div>\n <div class="ad_box">\n\n <\/div>\n <\/div>\n <\/div>\n <\/li><\/code><\/pre>\n data: {},\n menuList: [\n {\n menu: '\u7cbe\u9009',\n url: require('..\/assets\/images\/zuanshi.png'),\n items: [\n { text: '\u8fd0\u8425\u8bbe\u8ba1' },\n { text: '\u5305\u88c5' },\n { text: '\u52a8\u753b\/\u5f71\u89c6' },\n { text: '\u4eba\u50cf\u6444\u5f71' },\n { text: '\u5546\u4e1a\u63d2\u753b' },\n { text: '\u7535\u5546' },\n { text: 'APP \u754c\u9762' },\n { text: '\u827a\u672f\u63d2\u753b' },\n { text: '\u5bb6\u88c5\u8bbe\u8ba1' },\n { text: '\u6d77\u62a5' },\n { text: '\u6587\u7ae0' }\n ]\n },\n { menu: '\u5e73\u9762' },\n { menu: 'UI' },\n { menu: '\u7f51\u9875' },\n { menu: '\u63d2\u753b' },\n { menu: '\u52a8\u6f2b' },\n { menu: '\u6444\u5f71' },\n { menu: '\u7a7a\u95f4' },\n { menu: '\u5de5\u4e1a\/\u4ea7\u54c1' },\n { menu: '\u4e09\u7ef4' },\n { menu: '\u5f71\u89c6' },\n { menu: '\u624b\u5de5\u827a' },\n { menu: '\u7eaf\u827a\u672f' },\n { menu: '\u670d\u88c5' },\n { menu: '\u5176\u4ed6' }\n ],<\/code><\/pre>\n \/\/\u6e32\u67d3\u6210 html \u4e4b\u524d\u8c03\u7528,\u521d\u59cb\u5316\u4e00\u4e9b\u5c5e\u6027\u503c [\u9f20\u6807\u60ac\u6302'\u53d1\u73b0',\u5c31\u51fa\u73b0\u7b2c\u4e00\u4e2a\u7cbe\u9009\u9875\u9762]\n created () {\n this.data = this.menuList[0]\n },\n \/\/\u6e32\u67d3\u6210 html \u540e\u8c03\u7528 [\u9f20\u6807\u60ac\u6302'\u53d1\u73b0',\u7b2c\u4e00\u4e2a menu-item \u663e\u793a\u9ec4\u8272](\u9875\u9762\u5237\u65b0\u4e86\u4e4b\u540e\u7684)\n mounted () {\n this.$refs['test' + 0][0].style.backgroundColor = 'rgb(255, 242, 0)'\n },\n methods: {\n \/\/\u9f20\u6807\u8fdb\u5165\u51fd\u6570\n mleftIn (item, index) {\n \/\/\u83b7\u53d6 menuList \u4e2d\u6bcf\u4e2a menuItem \u5b57\u7b26\u4e32\u7684\u957f\u5ea6\n let menuSize = this.menuList.length\n for (let i = 0; i < menuSize; i++) {\n \/\/for \u5faa\u73af,i \u5982\u679c\u5c0f\u4e8e menuSize,\u5219\u7f6e\u4e8e menuItem \u989c\u8272\u4e3a\u7070\u8272,\u5b9e\u73b0\u5207\u6362\u6548\u679c\n this.$refs['test' + i][0].style.backgroundColor = '#f8f8f8'\n }\n \/\/\u8df3\u51fa for \u5faa\u73af,\u7531\u5de6\u4fa7\u79fb\u5411\u53f3\u4fa7\u8be6\u60c5\u9875\u65f6,\u5176 menuItem \u7684\u989c\u8272\u4e3a\u9ec4\u8272\n this.$refs['test' + index][0].style.backgroundColor = 'rgb(255, 242, 0)'\n \/\/\u5c06\u53f3\u4fa7\u6570\u636e\u8bbe\u7f6e\u4e3a item,\u663e\u793a\u6570\u636e\n this.data = item\n },\n \/\/\u9f20\u6807\u8fdb\u5165\u51fd\u6570\n \/\/\u6ce8\u610f: mouseleave:\u662f\u9f20\u6807\u79fb\u51fa\u8be5\u5143\u7d20\u4e4b\u5916,\u5219\u89e6\u53d1 mouseleave \u4e8b\u4ef6\n \/\/ mouseout : \u662f\u5f53\u6307\u9488\u79bb\u5f00\u8be5\u5143\u7d20\u53ca\u5176\u6240\u6709\u540e\u4ee3\u65f6\uff0c\u4f1a\u89e6\u53d1 mouseleave\n \/\/ \u800c\u5f53\u6307\u9488\u79bb\u5f00\u5143\u7d20\u6216\u79bb\u5f00\u5143\u7d20\u7684\u540e\u4ee3\uff08\u5373\u4f7f\u6307\u9488\u4ecd\u5728\u5143\u7d20\u5185\uff09\u65f6\uff0c\u4e5f\u4f1a\u89e6\u53d1 mouseout \u4e8b\u4ef6\n mleftLeave () {\n \/\/\u83b7\u53d6 menuList \u4e2d\u6bcf\u4e2a menuItem \u5b57\u7b26\u4e32\u7684\u957f\u5ea6\n let menuSize = this.menuList.length\n for (let i = 0; i < menuSize; i++) {\n this.$refs['test' + i][0].style.backgroundColor = '#f8f8f8'\n }\n \/\/ \u8df3\u51fa\u5faa\u73af,\u6d4f\u89c8\u5b8c'\u53d1\u73b0',\u9f20\u6807\u79fb\u51fa,\u7f6e\u4e8e\u53f3\u4fa7\u6570\u636e\u4e3a\u7b2c\u4e00\u4e2a\u7cbe\u9009\u6570\u636e\n this.data = this.menuList[0]\n \/\/\u9f20\u6807\u79fb\u51fa\u4e8b\u4ef6,\u7f6e\u4e8e\u7b2c\u4e00\u4e2a menuitem \u4e3a\u9ec4\u8272[\u672a\u5237\u65b0\u65f6\u7684\u8bbe\u7f6e]\n this.$refs['test' + 0][0].style.backgroundColor = 'rgb(255, 242, 0)'\n\n \/\/ this.data = {}\n \/\/ this.$refs['test'+index][0].style.backgroundColor = '#f8f8f8'\n \/\/ console.log('\u6eda\u51fa\u53bb')\n },\n}<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"\u4e0b\u8f7d\u4f9d\u8d56\u901f\u5ea6\u5feb npm install –registry=https:\/\/registry.npm.tao […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[],"class_list":["post-3462","post","type-post","status-publish","format-standard","hentry","category-web"],"_links":{"self":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/3462","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3462"}],"version-history":[{"count":38,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/3462\/revisions"}],"predecessor-version":[{"id":3558,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/3462\/revisions\/3558"}],"wp:attachment":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3462"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=3462"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=3462"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
<template>\n <div ref="dragDiv" class="drag">\n <div class="drag_bg"><\/div>\n <div class="drag_text">{{ confirmWords }}<\/div>\n <div ref="moveDiv" :class="{'handler_ok_bg':confirmSuccess}" class="handler handler_bg"\n style="position: absolute;top: 0;left: 0;" @mousedown="mouseDownFn($event)"><\/div>\n <\/div>\n<\/template>\n\n<script>\nexport default {\n data () {\n return {\n beginClientX: 0, \/*\u8ddd\u79bb\u5c4f\u5e55\u5de6\u7aef\u8ddd\u79bb*\/\n mouseMoveState: false, \/*\u89e6\u53d1\u62d6\u52a8\u72b6\u6001 \u5224\u65ad*\/\n maxWidth: '', \/*\u62d6\u52a8\u6700\u5927\u5bbd\u5ea6\uff0c\u4f9d\u636e\u6ed1\u5757\u5bbd\u5ea6\u7b97\u51fa\u6765\u7684*\/\n confirmWords: '\u8bf7\u6309\u4f4f\u6ed1\u5757,\u62d6\u52a8\u5230\u6700\u53f3\u8fb9', \/*\u6ed1\u5757\u6587\u5b57*\/\n confirmSuccess: false \/*\u9a8c\u8bc1\u6210\u529f\u5224\u65ad*\/\n }\n },\n methods: {\n \/\/mousedown \u4e8b\u4ef6\n mouseDownFn: function (e) {\n if (!this.confirmSuccess) {\n e.preventDefault && e.preventDefault() \/\/\u963b\u6b62\u6587\u5b57\u9009\u4e2d\u7b49 \u6d4f\u89c8\u5668\u9ed8\u8ba4\u4e8b\u4ef6\n this.mouseMoveState = true\n this.beginClientX = e.clientX\n }\n },\n \/\/\u9a8c\u8bc1\u6210\u529f\u51fd\u6570\n successFunction () {\n this.confirmSuccess = true\n this.confirmWords = '\u9a8c\u8bc1\u901a\u8fc7'\n if (window.addEventListener) {\n document.getElementsByTagName('html')[0].removeEventListener('mousemove', this.mouseMoveFn)\n document.getElementsByTagName('html')[0].removeEventListener('mouseup', this.moseUpFn)\n } else {\n document.getElementsByTagName('html')[0].removeEventListener('mouseup', () => {\n })\n }\n document.getElementsByClassName('drag_text')[0].style.color = '#fff'\n document.getElementsByClassName('handler')[0].style.left = this.maxWidth + 'px'\n document.getElementsByClassName('drag_bg')[0].style.width = this.maxWidth + 'px'\n },\n \/\/mousemove \u4e8b\u4ef6\n mouseMoveFn (e) {\n if (this.mouseMoveState) {\n let width = e.clientX - this.beginClientX\n if (width > 0 && width <= this.maxWidth) {\n document.getElementsByClassName('handler')[0].style.left = width + 'px'\n document.getElementsByClassName('drag_bg')[0].style.width = width + 'px'\n } else if (width > this.maxWidth) {\n this.successFunction()\n }\n }\n },\n \/\/mouseup \u4e8b\u4ef6\n moseUpFn (e) {\n this.mouseMoveState = false\n var width = e.clientX - this.beginClientX\n if (width < this.maxWidth) {\n document.getElementsByClassName('handler')[0].style.left = 0 + 'px'\n document.getElementsByClassName('drag_bg')[0].style.width = 0 + 'px'\n }\n }\n },\n mounted () {\n this.maxWidth = this.$refs.dragDiv.clientWidth - this.$refs.moveDiv.clientWidth\n document.getElementsByTagName('html')[0].addEventListener('mousemove', this.mouseMoveFn)\n document.getElementsByTagName('html')[0].addEventListener('mouseup', this.moseUpFn)\n }\n}\n<\/script>\n<style scoped>\n.drag {\n position: relative;\n background-color: #e8e8e8;\n width: 100%;\n height: 32px;\n line-height: 32px;\n text-align: center;\n border: 1px solid #ccc;\n\n}\n\n.handler {\n width: 40px;\n height: 32px;\n border: 1px solid #ccc;\n cursor: move;\n margin-top: -1px;\n margin-left: -1px;\n}\n\n.handler_bg {\n background: #fff url('..\/assets\/images\/arrow-r.png') no-repeat center;\n background-size: 25px;\n}\n\n.handler_ok_bg {\n background: #fff url('..\/assets\/images\/\u221a.png') no-repeat center;\n background-size: 18px;\n}\n\n.drag_bg {\n background-color: #7ac23c;\n height: 32px;\n width: 0;\n}\n\n.drag_text {\n position: absolute;\n top: 0;\n width: 100%;\n font-size: 12px;\n color: #706f6f;\n}\n\n<\/style>\n<\/code><\/pre>\nel-input \u805a\u7126\u540e\u80cc\u666f\u53d8\u767d<\/h3>\n<\/p>\n<\/p><\/noscript>\n.el-input__wrapper.is-focus {\n box-shadow: 0 0 0 1px #dcdfe6 inset;\n background-color: #fff;\n}<\/code><\/pre>\nel-input placeholder \u989c\u8272\u8bbe\u7f6e<\/h3>\n.el-input__inner::placeholder{\n color: #666666;\n}<\/code><\/pre>\n\u5224\u65ad el-checked \u662f\u5426\u9009\u4e2d,\u672a\u9009\u4e2d\u5219\u63d0\u793a\u8bf7\u52fe\u9009<\/h3>\n<\/p>\n<\/p><\/noscript>\nexport default {\nmounted() {\n const pleaseFit=document.getElementById('pleaseFit');\n $(".el-checkbox input").change(() => {\n if ($(".el-checkbox input[type='checkbox']").is(':checked') == true) {\n pleaseFit.style.display='none'\n } else {\n pleaseFit.style.display='block'\n }\n })\n }\n }<\/code><\/pre>\nel-input \u5728 style \u5168\u5c40\u6837\u5f0f,\u4f1a\u5f71\u54cd\u5230\u5176\u4ed6\u4e0d\u7b26\u5408\u8be5\u6837\u5f0f\u7684\u4f4d\u7f6e<\/h3>\n\n\u53ef\u4ee5\u5728 style scoped> \u5199,\u52a0\u4e0a\/deep\/<\/li>\n<\/ul>\n<\/p>\n<\/p><\/noscript>\n\/deep\/ .el-input__wrapper {\n box-shadow: 0 0 0 0 inset;\n background-color: rgb(255, 242, 0);\n}<\/code><\/pre>\nel-carousel \u8d70\u9a6c\u706f\u4fee\u6539 Carousel \u5de6\u53f3\u4e24\u4fa7\u7bad\u5934\u5b57\u4f53\u5927\u5c0f<\/h3>\n\/deep\/.el-carousel__arrow i {\n font-size: 29px !important;\n }<\/code><\/pre>\n\u9875\u9762\u5411\u4e0b\u6ed1\u52a8\u5bfc\u822a\u680f\u56fa\u5b9a<\/h3>\n<\/p>\n<\/p><\/noscript>\n.main_nav_fixed {\n position: sticky;\n top: 0;\n z-index: 999;\n}<\/code><\/pre>\n\u56fa\u5b9a\u5728\u53f3\u65b9\u7684,\u60ac\u6302\u51fa\u73b0\u4e8c\u7ef4\u7801<\/h3>\n<\/p>\n<\/p><\/noscript>\n<div class="share_box">\n <img src="..\/..\/assets\/images\/share_qr.png" alt=""\/>\n <\/div><\/code><\/pre>\n.share_box{\n width: 70px;\n height: 131px;\n top: 300px;\n right: 10px;\n cursor: pointer;\n position: fixed;\n z-index: 999;\n background: url("..\/..\/assets\/images\/share_wx.jpg") no-repeat;\n background-size: 100% 100%;\n}\n.share_box img{\n width: 100px;\n height: 100px;\n display: none;\n}\n.share_box:hover img {\n position: absolute;\n top: 50%;\n margin-top: -50px;\n right: 82px;\n display: block !important;\n}<\/code><\/pre>\nnth-child(n)\u6307\u7684\u662f\u5728\u7236\u5143\u7d20\u4e2d\u6240\u6709\u7684\u5143\u7d20\u7684\u987a\u5e8f<\/h3>\n\n\u5199\u4ee3\u7801\u8981\u6839\u636e\u76d2\u5b50\u4ee5\u53ca\u5185\u5bb9\u5199<\/li>\nbottom\uff1a0\uff1b\u8981\u76f8\u5bf9\u4e8e\u7236\u5143\u7d20\u7684 height \u5b9e\u73b0\uff0c\u5982\u679c\u7236\u7236\u5143\u7d20\u7684 height \u5927\u4e8e\u7236\u5143\u7d20\u7684 height\uff0c\uff0c\u5219\u4f1a\u6309\u7167\u7236\u7236\u5143\u7d20\u7684 height \u6765\u5b9e\u73b0 bottom\uff1a0\uff1b\u6765\u5b9e\u73b0\u3002\u3010\u9002\u5f53\u5220\u9664\u7236\u7236\u5143\u7d20\u7684 height\uff0c\u4e00\u677f\u5757\u901a\u5e38\u4e0d\u7528\u8bbe\u7f6e\u603b height\u3011<\/li>\n<\/ul>\n\u60ac\u6302\u56fe\u7247\u7f13\u7f13\u653e\u5927\u7684\u52a8\u753b\u6548\u679c<\/h3>\n<\/p>\n<\/p><\/noscript>\n.gc_project .item_img > img {\n width: 100%;\n height: 100%;\n transition: all 0.3s;\n}\n.gc_project .item_img > img:hover {\n transform: scale(1.05);\n box-shadow: rgb(0 0 0 \/ 23%) 0 4px 14px 0;\n}<\/code><\/pre>\n\u6eda\u52a8\u6761\u4fee\u6539<\/h3>\n<\/p>\n<\/p><\/noscript>\n.mleft::-webkit-scrollbar{\n width: 6px;\n background-color: #f8f8f8;\n\n}\n.mleft::-webkit-scrollbar-thumb{\n width: 6px;\n background-color: #adacac;\n border-radius: 4px;\n}<\/code><\/pre>\nhead \u533a '\u53d1\u73b0' \u5b9e\u73b0\u4ea4\u4e92\u6548\u679c [\u8be5\u9996\u9875\u6700\u607c\u706b\u7684]<\/h2>\n<\/p>\n<\/p><\/noscript>\ntodo head \u533a'\u53d1\u73b0'\u4ea4\u4e92\u5b9e\u73b0\u601d\u8def:<\/h3>\n\n\u2460\u89c2\u5bdf\u8be5\u533a\u7ed3\u6784,\u4e00\u4e2a\u5927\u6a21\u5757,\u5176\u4e2d\u5206\u4e3a\u5de6\u4e2d\u53f3\u4e09\u4e2a\u6a21\u5757,\u5e76\u4f9d\u6b21\u5199\u51fa\u4e09\u4e2a\u6a21\u5757\u7684\u4ee3\u7801,<\/li>\n\u2461\u5de6\u4fa7\u533a\u57df: \u8981\u5c55\u793a\u7684\u6548\u679c\u6709: \u9f20\u6807\u4e0a\u4e0b\u79fb\u52a8,\u6240\u7ecf\u7684 menuItem \u4f1a\u5c55\u73b0\u9ec4\u8272\u80cc\u666f, \u5219\u5f15\u7528 vue \u7684 ref \u5c5e\u6027\u5bf9 DOM \u5143\u7d20\u8fdb\u884c\u52a8\u6001\u7ed1\u5b9a.\n\n\u6ce8\u610f:ref \u9700\u8981\u5728 dom \u6e32\u67d3\u5b8c\u6210\u540e\u624d\u4f1a\u6709,\u5728\u4f7f\u7528\u7684\u65f6\u5019\u786e\u4fdd dom \u5df2\u7ecf\u6e32\u67d3\u5b8c\u6210, \u6bd4\u5982\u5728\u751f\u547d\u5468\u671f mounted(){}\u94a9\u5b50\u4e2d\u8c03\u7528. this.$refs.xxx:\u51cf\u5c11\u83b7\u53d6 dom \u8282\u70b9\u7684\u6d88\u8017<\/li>\n<\/ul>\n<\/li>\n\u2462\u5de6\u4fa7\u533a\u57df\u8fc7\u6ee4\u5230\u53f3\u4fa7\u533a\u57df,\u5c55\u793a\u5bf9\u5e94\u7684\u8be6\u60c5\u9875: mleftIn(item,index)\u51fd\u6570\u901a\u8fc7\u4f20\u8f93 v-for \u5faa\u73af\u4e2d\u6570\u7ec4 menuList \u7684 item \u6bcf\u4e00\u9879\u4e3a\u5a92\u4ecb, \u800c\u6570\u636e\u4e2d menuList \u4e2d\u5305\u542b\u5de6\u4fa7\u6570\u636e menuItem \u4e0e\u53f3\u4fa7\u6bcf\u4e00\u9875\u7684\u6807\u9898 menu \u76f8\u540c, \u4ece\u800c\u5c06\u5de6\u4fa7\u548c\u53f3\u4fa7\u6570\u636e\u7ed1\u5b9a, \u6545\u800c\u5f62\u6210\u4ece\u5de6\u4fa7\u8fc7\u6ee4\u5230\u53f3\u4fa7\u533a\u57df\u662f\u56fa\u5b9a\u7684\u8be6\u60c5\u9875\u5185\u5bb9.<\/li>\n\u2463\u9875\u9762\u7b2c\u4e8c\u6b21\u672a\u5237\u65b0\u4e4b\u524d(\u9996\u6b21\u8fdb\u5165\u9875\u9762\u6e32\u67d3), \u9f20\u6807\u60ac\u6302'\u53d1\u73b0',\u8981\u51fa\u73b0\u7b2c\u4e00\u4e2a'\u7cbe\u9009'\u8be6\u60c5\u9875\u53ca'\u7cbe\u9009'item \u80cc\u666f\u53d8\u9ec4: \u9f20\u6807\u79fb\u51fa\u8be5\u5143\u7d20[\u4e8c\u7ea7\u76ee\u5f55\u6574\u4e2a\u5927\u6a21\u5757]\u4e4b\u5916,\u5219\u89e6\u53d1 mouseleave \u4e8b\u4ef6,\u521d\u59cb\u5316\u6570\u636e.<\/li>\n\u2464\u7b2c\u4e8c\u6b21\u9875\u9762\u5237\u65b0\u4e4b\u540e,\u521d\u59cb\u5316\u6570\u636e: \u91c7\u7528 mounted \u751f\u547d\u5468\u671f[\u6e32\u67d3\u6210 html \u540e\u8c03\u7528]: \u4f7f\u9f20\u6807\u60ac\u6302'\u53d1\u73b0',\u7b2c\u4e00\u4e2a menu-item \u663e\u793a\u9ec4\u8272<\/li>\n<\/ul>\n <li class="find">\n <a href="#">\u53d1\u73b0<\/a>\n <div class="h_menu" @mouseleave="mleftLeave()">\n <div class="menu_box mleft">\n <!-- <a href="">\u7cbe\u9009<\/a>-->\n <a v-for="(item,index) in menuList" :key="index" :ref="'test'+index" href="javascript:;"\n @mouseover="mleftIn(item,index)">{{ item.menu }}<\/a>\n <!-- <el-cascader-panel :options="findOptions" :props="props" \/>-->\n <\/div>\n <div class="mright">\n <div class="cate-box">\n <a class="cate-title" href="">\n <img :src="data.url" alt="">\n <span>{{ data.menu }}<\/span>\n <\/a>\n <div class="subCate">\n <a v-for="(itemOne) in data.items" :key="itemOne">{{ itemOne.text }}<\/a>\n <\/div>\n <\/div>\n <\/div>\n <div class="right_bar">\n <div class="icons">\n <a>\n <span class="icon-box">\n <span class="tangle-1"><\/span>\n <span class="tangle-2"><\/span>\n <i class="ani-star"><\/i>\n <span class="tangle-3"><\/span>\n <\/span>\n <span class="icon-text">\u6536\u85cf\u5939<\/span>\n <\/a>\n <a>\n <img alt="" src="..\/assets\/images\/icon-header-discover-designer.png">\n <span>\u8bbe\u8ba1\u5e08<\/span>\n <\/a>\n <a>\n <img alt="" src="..\/assets\/images\/icon-header-discover-focus.png">\n <span>\u699c\u5355<\/span>\n <!-- <sup class="subNavDot"><\/sup>-->\n <\/a>\n <\/div>\n <div class="ad_box">\n\n <\/div>\n <\/div>\n <\/div>\n <\/li><\/code><\/pre>\n data: {},\n menuList: [\n {\n menu: '\u7cbe\u9009',\n url: require('..\/assets\/images\/zuanshi.png'),\n items: [\n { text: '\u8fd0\u8425\u8bbe\u8ba1' },\n { text: '\u5305\u88c5' },\n { text: '\u52a8\u753b\/\u5f71\u89c6' },\n { text: '\u4eba\u50cf\u6444\u5f71' },\n { text: '\u5546\u4e1a\u63d2\u753b' },\n { text: '\u7535\u5546' },\n { text: 'APP \u754c\u9762' },\n { text: '\u827a\u672f\u63d2\u753b' },\n { text: '\u5bb6\u88c5\u8bbe\u8ba1' },\n { text: '\u6d77\u62a5' },\n { text: '\u6587\u7ae0' }\n ]\n },\n { menu: '\u5e73\u9762' },\n { menu: 'UI' },\n { menu: '\u7f51\u9875' },\n { menu: '\u63d2\u753b' },\n { menu: '\u52a8\u6f2b' },\n { menu: '\u6444\u5f71' },\n { menu: '\u7a7a\u95f4' },\n { menu: '\u5de5\u4e1a\/\u4ea7\u54c1' },\n { menu: '\u4e09\u7ef4' },\n { menu: '\u5f71\u89c6' },\n { menu: '\u624b\u5de5\u827a' },\n { menu: '\u7eaf\u827a\u672f' },\n { menu: '\u670d\u88c5' },\n { menu: '\u5176\u4ed6' }\n ],<\/code><\/pre>\n \/\/\u6e32\u67d3\u6210 html \u4e4b\u524d\u8c03\u7528,\u521d\u59cb\u5316\u4e00\u4e9b\u5c5e\u6027\u503c [\u9f20\u6807\u60ac\u6302'\u53d1\u73b0',\u5c31\u51fa\u73b0\u7b2c\u4e00\u4e2a\u7cbe\u9009\u9875\u9762]\n created () {\n this.data = this.menuList[0]\n },\n \/\/\u6e32\u67d3\u6210 html \u540e\u8c03\u7528 [\u9f20\u6807\u60ac\u6302'\u53d1\u73b0',\u7b2c\u4e00\u4e2a menu-item \u663e\u793a\u9ec4\u8272](\u9875\u9762\u5237\u65b0\u4e86\u4e4b\u540e\u7684)\n mounted () {\n this.$refs['test' + 0][0].style.backgroundColor = 'rgb(255, 242, 0)'\n },\n methods: {\n \/\/\u9f20\u6807\u8fdb\u5165\u51fd\u6570\n mleftIn (item, index) {\n \/\/\u83b7\u53d6 menuList \u4e2d\u6bcf\u4e2a menuItem \u5b57\u7b26\u4e32\u7684\u957f\u5ea6\n let menuSize = this.menuList.length\n for (let i = 0; i < menuSize; i++) {\n \/\/for \u5faa\u73af,i \u5982\u679c\u5c0f\u4e8e menuSize,\u5219\u7f6e\u4e8e menuItem \u989c\u8272\u4e3a\u7070\u8272,\u5b9e\u73b0\u5207\u6362\u6548\u679c\n this.$refs['test' + i][0].style.backgroundColor = '#f8f8f8'\n }\n \/\/\u8df3\u51fa for \u5faa\u73af,\u7531\u5de6\u4fa7\u79fb\u5411\u53f3\u4fa7\u8be6\u60c5\u9875\u65f6,\u5176 menuItem \u7684\u989c\u8272\u4e3a\u9ec4\u8272\n this.$refs['test' + index][0].style.backgroundColor = 'rgb(255, 242, 0)'\n \/\/\u5c06\u53f3\u4fa7\u6570\u636e\u8bbe\u7f6e\u4e3a item,\u663e\u793a\u6570\u636e\n this.data = item\n },\n \/\/\u9f20\u6807\u8fdb\u5165\u51fd\u6570\n \/\/\u6ce8\u610f: mouseleave:\u662f\u9f20\u6807\u79fb\u51fa\u8be5\u5143\u7d20\u4e4b\u5916,\u5219\u89e6\u53d1 mouseleave \u4e8b\u4ef6\n \/\/ mouseout : \u662f\u5f53\u6307\u9488\u79bb\u5f00\u8be5\u5143\u7d20\u53ca\u5176\u6240\u6709\u540e\u4ee3\u65f6\uff0c\u4f1a\u89e6\u53d1 mouseleave\n \/\/ \u800c\u5f53\u6307\u9488\u79bb\u5f00\u5143\u7d20\u6216\u79bb\u5f00\u5143\u7d20\u7684\u540e\u4ee3\uff08\u5373\u4f7f\u6307\u9488\u4ecd\u5728\u5143\u7d20\u5185\uff09\u65f6\uff0c\u4e5f\u4f1a\u89e6\u53d1 mouseout \u4e8b\u4ef6\n mleftLeave () {\n \/\/\u83b7\u53d6 menuList \u4e2d\u6bcf\u4e2a menuItem \u5b57\u7b26\u4e32\u7684\u957f\u5ea6\n let menuSize = this.menuList.length\n for (let i = 0; i < menuSize; i++) {\n this.$refs['test' + i][0].style.backgroundColor = '#f8f8f8'\n }\n \/\/ \u8df3\u51fa\u5faa\u73af,\u6d4f\u89c8\u5b8c'\u53d1\u73b0',\u9f20\u6807\u79fb\u51fa,\u7f6e\u4e8e\u53f3\u4fa7\u6570\u636e\u4e3a\u7b2c\u4e00\u4e2a\u7cbe\u9009\u6570\u636e\n this.data = this.menuList[0]\n \/\/\u9f20\u6807\u79fb\u51fa\u4e8b\u4ef6,\u7f6e\u4e8e\u7b2c\u4e00\u4e2a menuitem \u4e3a\u9ec4\u8272[\u672a\u5237\u65b0\u65f6\u7684\u8bbe\u7f6e]\n this.$refs['test' + 0][0].style.backgroundColor = 'rgb(255, 242, 0)'\n\n \/\/ this.data = {}\n \/\/ this.$refs['test'+index][0].style.backgroundColor = '#f8f8f8'\n \/\/ console.log('\u6eda\u51fa\u53bb')\n },\n}<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"\u4e0b\u8f7d\u4f9d\u8d56\u901f\u5ea6\u5feb npm install –registry=https:\/\/registry.npm.tao […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[],"class_list":["post-3462","post","type-post","status-publish","format-standard","hentry","category-web"],"_links":{"self":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/3462","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3462"}],"version-history":[{"count":38,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/3462\/revisions"}],"predecessor-version":[{"id":3558,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/3462\/revisions\/3558"}],"wp:attachment":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3462"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=3462"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=3462"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
<\/p>\n<\/p><\/noscript>\n.el-input__wrapper.is-focus {\n box-shadow: 0 0 0 1px #dcdfe6 inset;\n background-color: #fff;\n}<\/code><\/pre>\nel-input placeholder \u989c\u8272\u8bbe\u7f6e<\/h3>\n.el-input__inner::placeholder{\n color: #666666;\n}<\/code><\/pre>\n\u5224\u65ad el-checked \u662f\u5426\u9009\u4e2d,\u672a\u9009\u4e2d\u5219\u63d0\u793a\u8bf7\u52fe\u9009<\/h3>\n<\/p>\n<\/p><\/noscript>\nexport default {\nmounted() {\n const pleaseFit=document.getElementById('pleaseFit');\n $(".el-checkbox input").change(() => {\n if ($(".el-checkbox input[type='checkbox']").is(':checked') == true) {\n pleaseFit.style.display='none'\n } else {\n pleaseFit.style.display='block'\n }\n })\n }\n }<\/code><\/pre>\nel-input \u5728 style \u5168\u5c40\u6837\u5f0f,\u4f1a\u5f71\u54cd\u5230\u5176\u4ed6\u4e0d\u7b26\u5408\u8be5\u6837\u5f0f\u7684\u4f4d\u7f6e<\/h3>\n\n\u53ef\u4ee5\u5728 style scoped> \u5199,\u52a0\u4e0a\/deep\/<\/li>\n<\/ul>\n<\/p>\n<\/p><\/noscript>\n\/deep\/ .el-input__wrapper {\n box-shadow: 0 0 0 0 inset;\n background-color: rgb(255, 242, 0);\n}<\/code><\/pre>\nel-carousel \u8d70\u9a6c\u706f\u4fee\u6539 Carousel \u5de6\u53f3\u4e24\u4fa7\u7bad\u5934\u5b57\u4f53\u5927\u5c0f<\/h3>\n\/deep\/.el-carousel__arrow i {\n font-size: 29px !important;\n }<\/code><\/pre>\n\u9875\u9762\u5411\u4e0b\u6ed1\u52a8\u5bfc\u822a\u680f\u56fa\u5b9a<\/h3>\n<\/p>\n<\/p><\/noscript>\n.main_nav_fixed {\n position: sticky;\n top: 0;\n z-index: 999;\n}<\/code><\/pre>\n\u56fa\u5b9a\u5728\u53f3\u65b9\u7684,\u60ac\u6302\u51fa\u73b0\u4e8c\u7ef4\u7801<\/h3>\n<\/p>\n<\/p><\/noscript>\n<div class="share_box">\n <img src="..\/..\/assets\/images\/share_qr.png" alt=""\/>\n <\/div><\/code><\/pre>\n.share_box{\n width: 70px;\n height: 131px;\n top: 300px;\n right: 10px;\n cursor: pointer;\n position: fixed;\n z-index: 999;\n background: url("..\/..\/assets\/images\/share_wx.jpg") no-repeat;\n background-size: 100% 100%;\n}\n.share_box img{\n width: 100px;\n height: 100px;\n display: none;\n}\n.share_box:hover img {\n position: absolute;\n top: 50%;\n margin-top: -50px;\n right: 82px;\n display: block !important;\n}<\/code><\/pre>\nnth-child(n)\u6307\u7684\u662f\u5728\u7236\u5143\u7d20\u4e2d\u6240\u6709\u7684\u5143\u7d20\u7684\u987a\u5e8f<\/h3>\n\n\u5199\u4ee3\u7801\u8981\u6839\u636e\u76d2\u5b50\u4ee5\u53ca\u5185\u5bb9\u5199<\/li>\nbottom\uff1a0\uff1b\u8981\u76f8\u5bf9\u4e8e\u7236\u5143\u7d20\u7684 height \u5b9e\u73b0\uff0c\u5982\u679c\u7236\u7236\u5143\u7d20\u7684 height \u5927\u4e8e\u7236\u5143\u7d20\u7684 height\uff0c\uff0c\u5219\u4f1a\u6309\u7167\u7236\u7236\u5143\u7d20\u7684 height \u6765\u5b9e\u73b0 bottom\uff1a0\uff1b\u6765\u5b9e\u73b0\u3002\u3010\u9002\u5f53\u5220\u9664\u7236\u7236\u5143\u7d20\u7684 height\uff0c\u4e00\u677f\u5757\u901a\u5e38\u4e0d\u7528\u8bbe\u7f6e\u603b height\u3011<\/li>\n<\/ul>\n\u60ac\u6302\u56fe\u7247\u7f13\u7f13\u653e\u5927\u7684\u52a8\u753b\u6548\u679c<\/h3>\n<\/p>\n<\/p><\/noscript>\n.gc_project .item_img > img {\n width: 100%;\n height: 100%;\n transition: all 0.3s;\n}\n.gc_project .item_img > img:hover {\n transform: scale(1.05);\n box-shadow: rgb(0 0 0 \/ 23%) 0 4px 14px 0;\n}<\/code><\/pre>\n\u6eda\u52a8\u6761\u4fee\u6539<\/h3>\n<\/p>\n<\/p><\/noscript>\n.mleft::-webkit-scrollbar{\n width: 6px;\n background-color: #f8f8f8;\n\n}\n.mleft::-webkit-scrollbar-thumb{\n width: 6px;\n background-color: #adacac;\n border-radius: 4px;\n}<\/code><\/pre>\nhead \u533a '\u53d1\u73b0' \u5b9e\u73b0\u4ea4\u4e92\u6548\u679c [\u8be5\u9996\u9875\u6700\u607c\u706b\u7684]<\/h2>\n<\/p>\n<\/p><\/noscript>\ntodo head \u533a'\u53d1\u73b0'\u4ea4\u4e92\u5b9e\u73b0\u601d\u8def:<\/h3>\n\n\u2460\u89c2\u5bdf\u8be5\u533a\u7ed3\u6784,\u4e00\u4e2a\u5927\u6a21\u5757,\u5176\u4e2d\u5206\u4e3a\u5de6\u4e2d\u53f3\u4e09\u4e2a\u6a21\u5757,\u5e76\u4f9d\u6b21\u5199\u51fa\u4e09\u4e2a\u6a21\u5757\u7684\u4ee3\u7801,<\/li>\n\u2461\u5de6\u4fa7\u533a\u57df: \u8981\u5c55\u793a\u7684\u6548\u679c\u6709: \u9f20\u6807\u4e0a\u4e0b\u79fb\u52a8,\u6240\u7ecf\u7684 menuItem \u4f1a\u5c55\u73b0\u9ec4\u8272\u80cc\u666f, \u5219\u5f15\u7528 vue \u7684 ref \u5c5e\u6027\u5bf9 DOM \u5143\u7d20\u8fdb\u884c\u52a8\u6001\u7ed1\u5b9a.\n\n\u6ce8\u610f:ref \u9700\u8981\u5728 dom \u6e32\u67d3\u5b8c\u6210\u540e\u624d\u4f1a\u6709,\u5728\u4f7f\u7528\u7684\u65f6\u5019\u786e\u4fdd dom \u5df2\u7ecf\u6e32\u67d3\u5b8c\u6210, \u6bd4\u5982\u5728\u751f\u547d\u5468\u671f mounted(){}\u94a9\u5b50\u4e2d\u8c03\u7528. this.$refs.xxx:\u51cf\u5c11\u83b7\u53d6 dom \u8282\u70b9\u7684\u6d88\u8017<\/li>\n<\/ul>\n<\/li>\n\u2462\u5de6\u4fa7\u533a\u57df\u8fc7\u6ee4\u5230\u53f3\u4fa7\u533a\u57df,\u5c55\u793a\u5bf9\u5e94\u7684\u8be6\u60c5\u9875: mleftIn(item,index)\u51fd\u6570\u901a\u8fc7\u4f20\u8f93 v-for \u5faa\u73af\u4e2d\u6570\u7ec4 menuList \u7684 item \u6bcf\u4e00\u9879\u4e3a\u5a92\u4ecb, \u800c\u6570\u636e\u4e2d menuList \u4e2d\u5305\u542b\u5de6\u4fa7\u6570\u636e menuItem \u4e0e\u53f3\u4fa7\u6bcf\u4e00\u9875\u7684\u6807\u9898 menu \u76f8\u540c, \u4ece\u800c\u5c06\u5de6\u4fa7\u548c\u53f3\u4fa7\u6570\u636e\u7ed1\u5b9a, \u6545\u800c\u5f62\u6210\u4ece\u5de6\u4fa7\u8fc7\u6ee4\u5230\u53f3\u4fa7\u533a\u57df\u662f\u56fa\u5b9a\u7684\u8be6\u60c5\u9875\u5185\u5bb9.<\/li>\n\u2463\u9875\u9762\u7b2c\u4e8c\u6b21\u672a\u5237\u65b0\u4e4b\u524d(\u9996\u6b21\u8fdb\u5165\u9875\u9762\u6e32\u67d3), \u9f20\u6807\u60ac\u6302'\u53d1\u73b0',\u8981\u51fa\u73b0\u7b2c\u4e00\u4e2a'\u7cbe\u9009'\u8be6\u60c5\u9875\u53ca'\u7cbe\u9009'item \u80cc\u666f\u53d8\u9ec4: \u9f20\u6807\u79fb\u51fa\u8be5\u5143\u7d20[\u4e8c\u7ea7\u76ee\u5f55\u6574\u4e2a\u5927\u6a21\u5757]\u4e4b\u5916,\u5219\u89e6\u53d1 mouseleave \u4e8b\u4ef6,\u521d\u59cb\u5316\u6570\u636e.<\/li>\n\u2464\u7b2c\u4e8c\u6b21\u9875\u9762\u5237\u65b0\u4e4b\u540e,\u521d\u59cb\u5316\u6570\u636e: \u91c7\u7528 mounted \u751f\u547d\u5468\u671f[\u6e32\u67d3\u6210 html \u540e\u8c03\u7528]: \u4f7f\u9f20\u6807\u60ac\u6302'\u53d1\u73b0',\u7b2c\u4e00\u4e2a menu-item \u663e\u793a\u9ec4\u8272<\/li>\n<\/ul>\n <li class="find">\n <a href="#">\u53d1\u73b0<\/a>\n <div class="h_menu" @mouseleave="mleftLeave()">\n <div class="menu_box mleft">\n <!-- <a href="">\u7cbe\u9009<\/a>-->\n <a v-for="(item,index) in menuList" :key="index" :ref="'test'+index" href="javascript:;"\n @mouseover="mleftIn(item,index)">{{ item.menu }}<\/a>\n <!-- <el-cascader-panel :options="findOptions" :props="props" \/>-->\n <\/div>\n <div class="mright">\n <div class="cate-box">\n <a class="cate-title" href="">\n <img :src="data.url" alt="">\n <span>{{ data.menu }}<\/span>\n <\/a>\n <div class="subCate">\n <a v-for="(itemOne) in data.items" :key="itemOne">{{ itemOne.text }}<\/a>\n <\/div>\n <\/div>\n <\/div>\n <div class="right_bar">\n <div class="icons">\n <a>\n <span class="icon-box">\n <span class="tangle-1"><\/span>\n <span class="tangle-2"><\/span>\n <i class="ani-star"><\/i>\n <span class="tangle-3"><\/span>\n <\/span>\n <span class="icon-text">\u6536\u85cf\u5939<\/span>\n <\/a>\n <a>\n <img alt="" src="..\/assets\/images\/icon-header-discover-designer.png">\n <span>\u8bbe\u8ba1\u5e08<\/span>\n <\/a>\n <a>\n <img alt="" src="..\/assets\/images\/icon-header-discover-focus.png">\n <span>\u699c\u5355<\/span>\n <!-- <sup class="subNavDot"><\/sup>-->\n <\/a>\n <\/div>\n <div class="ad_box">\n\n <\/div>\n <\/div>\n <\/div>\n <\/li><\/code><\/pre>\n data: {},\n menuList: [\n {\n menu: '\u7cbe\u9009',\n url: require('..\/assets\/images\/zuanshi.png'),\n items: [\n { text: '\u8fd0\u8425\u8bbe\u8ba1' },\n { text: '\u5305\u88c5' },\n { text: '\u52a8\u753b\/\u5f71\u89c6' },\n { text: '\u4eba\u50cf\u6444\u5f71' },\n { text: '\u5546\u4e1a\u63d2\u753b' },\n { text: '\u7535\u5546' },\n { text: 'APP \u754c\u9762' },\n { text: '\u827a\u672f\u63d2\u753b' },\n { text: '\u5bb6\u88c5\u8bbe\u8ba1' },\n { text: '\u6d77\u62a5' },\n { text: '\u6587\u7ae0' }\n ]\n },\n { menu: '\u5e73\u9762' },\n { menu: 'UI' },\n { menu: '\u7f51\u9875' },\n { menu: '\u63d2\u753b' },\n { menu: '\u52a8\u6f2b' },\n { menu: '\u6444\u5f71' },\n { menu: '\u7a7a\u95f4' },\n { menu: '\u5de5\u4e1a\/\u4ea7\u54c1' },\n { menu: '\u4e09\u7ef4' },\n { menu: '\u5f71\u89c6' },\n { menu: '\u624b\u5de5\u827a' },\n { menu: '\u7eaf\u827a\u672f' },\n { menu: '\u670d\u88c5' },\n { menu: '\u5176\u4ed6' }\n ],<\/code><\/pre>\n \/\/\u6e32\u67d3\u6210 html \u4e4b\u524d\u8c03\u7528,\u521d\u59cb\u5316\u4e00\u4e9b\u5c5e\u6027\u503c [\u9f20\u6807\u60ac\u6302'\u53d1\u73b0',\u5c31\u51fa\u73b0\u7b2c\u4e00\u4e2a\u7cbe\u9009\u9875\u9762]\n created () {\n this.data = this.menuList[0]\n },\n \/\/\u6e32\u67d3\u6210 html \u540e\u8c03\u7528 [\u9f20\u6807\u60ac\u6302'\u53d1\u73b0',\u7b2c\u4e00\u4e2a menu-item \u663e\u793a\u9ec4\u8272](\u9875\u9762\u5237\u65b0\u4e86\u4e4b\u540e\u7684)\n mounted () {\n this.$refs['test' + 0][0].style.backgroundColor = 'rgb(255, 242, 0)'\n },\n methods: {\n \/\/\u9f20\u6807\u8fdb\u5165\u51fd\u6570\n mleftIn (item, index) {\n \/\/\u83b7\u53d6 menuList \u4e2d\u6bcf\u4e2a menuItem \u5b57\u7b26\u4e32\u7684\u957f\u5ea6\n let menuSize = this.menuList.length\n for (let i = 0; i < menuSize; i++) {\n \/\/for \u5faa\u73af,i \u5982\u679c\u5c0f\u4e8e menuSize,\u5219\u7f6e\u4e8e menuItem \u989c\u8272\u4e3a\u7070\u8272,\u5b9e\u73b0\u5207\u6362\u6548\u679c\n this.$refs['test' + i][0].style.backgroundColor = '#f8f8f8'\n }\n \/\/\u8df3\u51fa for \u5faa\u73af,\u7531\u5de6\u4fa7\u79fb\u5411\u53f3\u4fa7\u8be6\u60c5\u9875\u65f6,\u5176 menuItem \u7684\u989c\u8272\u4e3a\u9ec4\u8272\n this.$refs['test' + index][0].style.backgroundColor = 'rgb(255, 242, 0)'\n \/\/\u5c06\u53f3\u4fa7\u6570\u636e\u8bbe\u7f6e\u4e3a item,\u663e\u793a\u6570\u636e\n this.data = item\n },\n \/\/\u9f20\u6807\u8fdb\u5165\u51fd\u6570\n \/\/\u6ce8\u610f: mouseleave:\u662f\u9f20\u6807\u79fb\u51fa\u8be5\u5143\u7d20\u4e4b\u5916,\u5219\u89e6\u53d1 mouseleave \u4e8b\u4ef6\n \/\/ mouseout : \u662f\u5f53\u6307\u9488\u79bb\u5f00\u8be5\u5143\u7d20\u53ca\u5176\u6240\u6709\u540e\u4ee3\u65f6\uff0c\u4f1a\u89e6\u53d1 mouseleave\n \/\/ \u800c\u5f53\u6307\u9488\u79bb\u5f00\u5143\u7d20\u6216\u79bb\u5f00\u5143\u7d20\u7684\u540e\u4ee3\uff08\u5373\u4f7f\u6307\u9488\u4ecd\u5728\u5143\u7d20\u5185\uff09\u65f6\uff0c\u4e5f\u4f1a\u89e6\u53d1 mouseout \u4e8b\u4ef6\n mleftLeave () {\n \/\/\u83b7\u53d6 menuList \u4e2d\u6bcf\u4e2a menuItem \u5b57\u7b26\u4e32\u7684\u957f\u5ea6\n let menuSize = this.menuList.length\n for (let i = 0; i < menuSize; i++) {\n this.$refs['test' + i][0].style.backgroundColor = '#f8f8f8'\n }\n \/\/ \u8df3\u51fa\u5faa\u73af,\u6d4f\u89c8\u5b8c'\u53d1\u73b0',\u9f20\u6807\u79fb\u51fa,\u7f6e\u4e8e\u53f3\u4fa7\u6570\u636e\u4e3a\u7b2c\u4e00\u4e2a\u7cbe\u9009\u6570\u636e\n this.data = this.menuList[0]\n \/\/\u9f20\u6807\u79fb\u51fa\u4e8b\u4ef6,\u7f6e\u4e8e\u7b2c\u4e00\u4e2a menuitem \u4e3a\u9ec4\u8272[\u672a\u5237\u65b0\u65f6\u7684\u8bbe\u7f6e]\n this.$refs['test' + 0][0].style.backgroundColor = 'rgb(255, 242, 0)'\n\n \/\/ this.data = {}\n \/\/ this.$refs['test'+index][0].style.backgroundColor = '#f8f8f8'\n \/\/ console.log('\u6eda\u51fa\u53bb')\n },\n}<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"\u4e0b\u8f7d\u4f9d\u8d56\u901f\u5ea6\u5feb npm install –registry=https:\/\/registry.npm.tao […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[],"class_list":["post-3462","post","type-post","status-publish","format-standard","hentry","category-web"],"_links":{"self":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/3462","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3462"}],"version-history":[{"count":38,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/3462\/revisions"}],"predecessor-version":[{"id":3558,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/3462\/revisions\/3558"}],"wp:attachment":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3462"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=3462"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=3462"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
.el-input__wrapper.is-focus {\n box-shadow: 0 0 0 1px #dcdfe6 inset;\n background-color: #fff;\n}<\/code><\/pre>\nel-input placeholder \u989c\u8272\u8bbe\u7f6e<\/h3>\n.el-input__inner::placeholder{\n color: #666666;\n}<\/code><\/pre>\n\u5224\u65ad el-checked \u662f\u5426\u9009\u4e2d,\u672a\u9009\u4e2d\u5219\u63d0\u793a\u8bf7\u52fe\u9009<\/h3>\n<\/p>\n<\/p><\/noscript>\nexport default {\nmounted() {\n const pleaseFit=document.getElementById('pleaseFit');\n $(".el-checkbox input").change(() => {\n if ($(".el-checkbox input[type='checkbox']").is(':checked') == true) {\n pleaseFit.style.display='none'\n } else {\n pleaseFit.style.display='block'\n }\n })\n }\n }<\/code><\/pre>\nel-input \u5728 style \u5168\u5c40\u6837\u5f0f,\u4f1a\u5f71\u54cd\u5230\u5176\u4ed6\u4e0d\u7b26\u5408\u8be5\u6837\u5f0f\u7684\u4f4d\u7f6e<\/h3>\n\n\u53ef\u4ee5\u5728 style scoped> \u5199,\u52a0\u4e0a\/deep\/<\/li>\n<\/ul>\n<\/p>\n<\/p><\/noscript>\n\/deep\/ .el-input__wrapper {\n box-shadow: 0 0 0 0 inset;\n background-color: rgb(255, 242, 0);\n}<\/code><\/pre>\nel-carousel \u8d70\u9a6c\u706f\u4fee\u6539 Carousel \u5de6\u53f3\u4e24\u4fa7\u7bad\u5934\u5b57\u4f53\u5927\u5c0f<\/h3>\n\/deep\/.el-carousel__arrow i {\n font-size: 29px !important;\n }<\/code><\/pre>\n\u9875\u9762\u5411\u4e0b\u6ed1\u52a8\u5bfc\u822a\u680f\u56fa\u5b9a<\/h3>\n<\/p>\n<\/p><\/noscript>\n.main_nav_fixed {\n position: sticky;\n top: 0;\n z-index: 999;\n}<\/code><\/pre>\n\u56fa\u5b9a\u5728\u53f3\u65b9\u7684,\u60ac\u6302\u51fa\u73b0\u4e8c\u7ef4\u7801<\/h3>\n<\/p>\n<\/p><\/noscript>\n<div class="share_box">\n <img src="..\/..\/assets\/images\/share_qr.png" alt=""\/>\n <\/div><\/code><\/pre>\n.share_box{\n width: 70px;\n height: 131px;\n top: 300px;\n right: 10px;\n cursor: pointer;\n position: fixed;\n z-index: 999;\n background: url("..\/..\/assets\/images\/share_wx.jpg") no-repeat;\n background-size: 100% 100%;\n}\n.share_box img{\n width: 100px;\n height: 100px;\n display: none;\n}\n.share_box:hover img {\n position: absolute;\n top: 50%;\n margin-top: -50px;\n right: 82px;\n display: block !important;\n}<\/code><\/pre>\nnth-child(n)\u6307\u7684\u662f\u5728\u7236\u5143\u7d20\u4e2d\u6240\u6709\u7684\u5143\u7d20\u7684\u987a\u5e8f<\/h3>\n\n\u5199\u4ee3\u7801\u8981\u6839\u636e\u76d2\u5b50\u4ee5\u53ca\u5185\u5bb9\u5199<\/li>\nbottom\uff1a0\uff1b\u8981\u76f8\u5bf9\u4e8e\u7236\u5143\u7d20\u7684 height \u5b9e\u73b0\uff0c\u5982\u679c\u7236\u7236\u5143\u7d20\u7684 height \u5927\u4e8e\u7236\u5143\u7d20\u7684 height\uff0c\uff0c\u5219\u4f1a\u6309\u7167\u7236\u7236\u5143\u7d20\u7684 height \u6765\u5b9e\u73b0 bottom\uff1a0\uff1b\u6765\u5b9e\u73b0\u3002\u3010\u9002\u5f53\u5220\u9664\u7236\u7236\u5143\u7d20\u7684 height\uff0c\u4e00\u677f\u5757\u901a\u5e38\u4e0d\u7528\u8bbe\u7f6e\u603b height\u3011<\/li>\n<\/ul>\n\u60ac\u6302\u56fe\u7247\u7f13\u7f13\u653e\u5927\u7684\u52a8\u753b\u6548\u679c<\/h3>\n<\/p>\n<\/p><\/noscript>\n.gc_project .item_img > img {\n width: 100%;\n height: 100%;\n transition: all 0.3s;\n}\n.gc_project .item_img > img:hover {\n transform: scale(1.05);\n box-shadow: rgb(0 0 0 \/ 23%) 0 4px 14px 0;\n}<\/code><\/pre>\n\u6eda\u52a8\u6761\u4fee\u6539<\/h3>\n<\/p>\n<\/p><\/noscript>\n.mleft::-webkit-scrollbar{\n width: 6px;\n background-color: #f8f8f8;\n\n}\n.mleft::-webkit-scrollbar-thumb{\n width: 6px;\n background-color: #adacac;\n border-radius: 4px;\n}<\/code><\/pre>\nhead \u533a '\u53d1\u73b0' \u5b9e\u73b0\u4ea4\u4e92\u6548\u679c [\u8be5\u9996\u9875\u6700\u607c\u706b\u7684]<\/h2>\n<\/p>\n<\/p><\/noscript>\ntodo head \u533a'\u53d1\u73b0'\u4ea4\u4e92\u5b9e\u73b0\u601d\u8def:<\/h3>\n\n\u2460\u89c2\u5bdf\u8be5\u533a\u7ed3\u6784,\u4e00\u4e2a\u5927\u6a21\u5757,\u5176\u4e2d\u5206\u4e3a\u5de6\u4e2d\u53f3\u4e09\u4e2a\u6a21\u5757,\u5e76\u4f9d\u6b21\u5199\u51fa\u4e09\u4e2a\u6a21\u5757\u7684\u4ee3\u7801,<\/li>\n\u2461\u5de6\u4fa7\u533a\u57df: \u8981\u5c55\u793a\u7684\u6548\u679c\u6709: \u9f20\u6807\u4e0a\u4e0b\u79fb\u52a8,\u6240\u7ecf\u7684 menuItem \u4f1a\u5c55\u73b0\u9ec4\u8272\u80cc\u666f, \u5219\u5f15\u7528 vue \u7684 ref \u5c5e\u6027\u5bf9 DOM \u5143\u7d20\u8fdb\u884c\u52a8\u6001\u7ed1\u5b9a.\n\n\u6ce8\u610f:ref \u9700\u8981\u5728 dom \u6e32\u67d3\u5b8c\u6210\u540e\u624d\u4f1a\u6709,\u5728\u4f7f\u7528\u7684\u65f6\u5019\u786e\u4fdd dom \u5df2\u7ecf\u6e32\u67d3\u5b8c\u6210, \u6bd4\u5982\u5728\u751f\u547d\u5468\u671f mounted(){}\u94a9\u5b50\u4e2d\u8c03\u7528. this.$refs.xxx:\u51cf\u5c11\u83b7\u53d6 dom \u8282\u70b9\u7684\u6d88\u8017<\/li>\n<\/ul>\n<\/li>\n\u2462\u5de6\u4fa7\u533a\u57df\u8fc7\u6ee4\u5230\u53f3\u4fa7\u533a\u57df,\u5c55\u793a\u5bf9\u5e94\u7684\u8be6\u60c5\u9875: mleftIn(item,index)\u51fd\u6570\u901a\u8fc7\u4f20\u8f93 v-for \u5faa\u73af\u4e2d\u6570\u7ec4 menuList \u7684 item \u6bcf\u4e00\u9879\u4e3a\u5a92\u4ecb, \u800c\u6570\u636e\u4e2d menuList \u4e2d\u5305\u542b\u5de6\u4fa7\u6570\u636e menuItem \u4e0e\u53f3\u4fa7\u6bcf\u4e00\u9875\u7684\u6807\u9898 menu \u76f8\u540c, \u4ece\u800c\u5c06\u5de6\u4fa7\u548c\u53f3\u4fa7\u6570\u636e\u7ed1\u5b9a, \u6545\u800c\u5f62\u6210\u4ece\u5de6\u4fa7\u8fc7\u6ee4\u5230\u53f3\u4fa7\u533a\u57df\u662f\u56fa\u5b9a\u7684\u8be6\u60c5\u9875\u5185\u5bb9.<\/li>\n\u2463\u9875\u9762\u7b2c\u4e8c\u6b21\u672a\u5237\u65b0\u4e4b\u524d(\u9996\u6b21\u8fdb\u5165\u9875\u9762\u6e32\u67d3), \u9f20\u6807\u60ac\u6302'\u53d1\u73b0',\u8981\u51fa\u73b0\u7b2c\u4e00\u4e2a'\u7cbe\u9009'\u8be6\u60c5\u9875\u53ca'\u7cbe\u9009'item \u80cc\u666f\u53d8\u9ec4: \u9f20\u6807\u79fb\u51fa\u8be5\u5143\u7d20[\u4e8c\u7ea7\u76ee\u5f55\u6574\u4e2a\u5927\u6a21\u5757]\u4e4b\u5916,\u5219\u89e6\u53d1 mouseleave \u4e8b\u4ef6,\u521d\u59cb\u5316\u6570\u636e.<\/li>\n\u2464\u7b2c\u4e8c\u6b21\u9875\u9762\u5237\u65b0\u4e4b\u540e,\u521d\u59cb\u5316\u6570\u636e: \u91c7\u7528 mounted \u751f\u547d\u5468\u671f[\u6e32\u67d3\u6210 html \u540e\u8c03\u7528]: \u4f7f\u9f20\u6807\u60ac\u6302'\u53d1\u73b0',\u7b2c\u4e00\u4e2a menu-item \u663e\u793a\u9ec4\u8272<\/li>\n<\/ul>\n <li class="find">\n <a href="#">\u53d1\u73b0<\/a>\n <div class="h_menu" @mouseleave="mleftLeave()">\n <div class="menu_box mleft">\n <!-- <a href="">\u7cbe\u9009<\/a>-->\n <a v-for="(item,index) in menuList" :key="index" :ref="'test'+index" href="javascript:;"\n @mouseover="mleftIn(item,index)">{{ item.menu }}<\/a>\n <!-- <el-cascader-panel :options="findOptions" :props="props" \/>-->\n <\/div>\n <div class="mright">\n <div class="cate-box">\n <a class="cate-title" href="">\n <img :src="data.url" alt="">\n <span>{{ data.menu }}<\/span>\n <\/a>\n <div class="subCate">\n <a v-for="(itemOne) in data.items" :key="itemOne">{{ itemOne.text }}<\/a>\n <\/div>\n <\/div>\n <\/div>\n <div class="right_bar">\n <div class="icons">\n <a>\n <span class="icon-box">\n <span class="tangle-1"><\/span>\n <span class="tangle-2"><\/span>\n <i class="ani-star"><\/i>\n <span class="tangle-3"><\/span>\n <\/span>\n <span class="icon-text">\u6536\u85cf\u5939<\/span>\n <\/a>\n <a>\n <img alt="" src="..\/assets\/images\/icon-header-discover-designer.png">\n <span>\u8bbe\u8ba1\u5e08<\/span>\n <\/a>\n <a>\n <img alt="" src="..\/assets\/images\/icon-header-discover-focus.png">\n <span>\u699c\u5355<\/span>\n <!-- <sup class="subNavDot"><\/sup>-->\n <\/a>\n <\/div>\n <div class="ad_box">\n\n <\/div>\n <\/div>\n <\/div>\n <\/li><\/code><\/pre>\n data: {},\n menuList: [\n {\n menu: '\u7cbe\u9009',\n url: require('..\/assets\/images\/zuanshi.png'),\n items: [\n { text: '\u8fd0\u8425\u8bbe\u8ba1' },\n { text: '\u5305\u88c5' },\n { text: '\u52a8\u753b\/\u5f71\u89c6' },\n { text: '\u4eba\u50cf\u6444\u5f71' },\n { text: '\u5546\u4e1a\u63d2\u753b' },\n { text: '\u7535\u5546' },\n { text: 'APP \u754c\u9762' },\n { text: '\u827a\u672f\u63d2\u753b' },\n { text: '\u5bb6\u88c5\u8bbe\u8ba1' },\n { text: '\u6d77\u62a5' },\n { text: '\u6587\u7ae0' }\n ]\n },\n { menu: '\u5e73\u9762' },\n { menu: 'UI' },\n { menu: '\u7f51\u9875' },\n { menu: '\u63d2\u753b' },\n { menu: '\u52a8\u6f2b' },\n { menu: '\u6444\u5f71' },\n { menu: '\u7a7a\u95f4' },\n { menu: '\u5de5\u4e1a\/\u4ea7\u54c1' },\n { menu: '\u4e09\u7ef4' },\n { menu: '\u5f71\u89c6' },\n { menu: '\u624b\u5de5\u827a' },\n { menu: '\u7eaf\u827a\u672f' },\n { menu: '\u670d\u88c5' },\n { menu: '\u5176\u4ed6' }\n ],<\/code><\/pre>\n \/\/\u6e32\u67d3\u6210 html \u4e4b\u524d\u8c03\u7528,\u521d\u59cb\u5316\u4e00\u4e9b\u5c5e\u6027\u503c [\u9f20\u6807\u60ac\u6302'\u53d1\u73b0',\u5c31\u51fa\u73b0\u7b2c\u4e00\u4e2a\u7cbe\u9009\u9875\u9762]\n created () {\n this.data = this.menuList[0]\n },\n \/\/\u6e32\u67d3\u6210 html \u540e\u8c03\u7528 [\u9f20\u6807\u60ac\u6302'\u53d1\u73b0',\u7b2c\u4e00\u4e2a menu-item \u663e\u793a\u9ec4\u8272](\u9875\u9762\u5237\u65b0\u4e86\u4e4b\u540e\u7684)\n mounted () {\n this.$refs['test' + 0][0].style.backgroundColor = 'rgb(255, 242, 0)'\n },\n methods: {\n \/\/\u9f20\u6807\u8fdb\u5165\u51fd\u6570\n mleftIn (item, index) {\n \/\/\u83b7\u53d6 menuList \u4e2d\u6bcf\u4e2a menuItem \u5b57\u7b26\u4e32\u7684\u957f\u5ea6\n let menuSize = this.menuList.length\n for (let i = 0; i < menuSize; i++) {\n \/\/for \u5faa\u73af,i \u5982\u679c\u5c0f\u4e8e menuSize,\u5219\u7f6e\u4e8e menuItem \u989c\u8272\u4e3a\u7070\u8272,\u5b9e\u73b0\u5207\u6362\u6548\u679c\n this.$refs['test' + i][0].style.backgroundColor = '#f8f8f8'\n }\n \/\/\u8df3\u51fa for \u5faa\u73af,\u7531\u5de6\u4fa7\u79fb\u5411\u53f3\u4fa7\u8be6\u60c5\u9875\u65f6,\u5176 menuItem \u7684\u989c\u8272\u4e3a\u9ec4\u8272\n this.$refs['test' + index][0].style.backgroundColor = 'rgb(255, 242, 0)'\n \/\/\u5c06\u53f3\u4fa7\u6570\u636e\u8bbe\u7f6e\u4e3a item,\u663e\u793a\u6570\u636e\n this.data = item\n },\n \/\/\u9f20\u6807\u8fdb\u5165\u51fd\u6570\n \/\/\u6ce8\u610f: mouseleave:\u662f\u9f20\u6807\u79fb\u51fa\u8be5\u5143\u7d20\u4e4b\u5916,\u5219\u89e6\u53d1 mouseleave \u4e8b\u4ef6\n \/\/ mouseout : \u662f\u5f53\u6307\u9488\u79bb\u5f00\u8be5\u5143\u7d20\u53ca\u5176\u6240\u6709\u540e\u4ee3\u65f6\uff0c\u4f1a\u89e6\u53d1 mouseleave\n \/\/ \u800c\u5f53\u6307\u9488\u79bb\u5f00\u5143\u7d20\u6216\u79bb\u5f00\u5143\u7d20\u7684\u540e\u4ee3\uff08\u5373\u4f7f\u6307\u9488\u4ecd\u5728\u5143\u7d20\u5185\uff09\u65f6\uff0c\u4e5f\u4f1a\u89e6\u53d1 mouseout \u4e8b\u4ef6\n mleftLeave () {\n \/\/\u83b7\u53d6 menuList \u4e2d\u6bcf\u4e2a menuItem \u5b57\u7b26\u4e32\u7684\u957f\u5ea6\n let menuSize = this.menuList.length\n for (let i = 0; i < menuSize; i++) {\n this.$refs['test' + i][0].style.backgroundColor = '#f8f8f8'\n }\n \/\/ \u8df3\u51fa\u5faa\u73af,\u6d4f\u89c8\u5b8c'\u53d1\u73b0',\u9f20\u6807\u79fb\u51fa,\u7f6e\u4e8e\u53f3\u4fa7\u6570\u636e\u4e3a\u7b2c\u4e00\u4e2a\u7cbe\u9009\u6570\u636e\n this.data = this.menuList[0]\n \/\/\u9f20\u6807\u79fb\u51fa\u4e8b\u4ef6,\u7f6e\u4e8e\u7b2c\u4e00\u4e2a menuitem \u4e3a\u9ec4\u8272[\u672a\u5237\u65b0\u65f6\u7684\u8bbe\u7f6e]\n this.$refs['test' + 0][0].style.backgroundColor = 'rgb(255, 242, 0)'\n\n \/\/ this.data = {}\n \/\/ this.$refs['test'+index][0].style.backgroundColor = '#f8f8f8'\n \/\/ console.log('\u6eda\u51fa\u53bb')\n },\n}<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"\u4e0b\u8f7d\u4f9d\u8d56\u901f\u5ea6\u5feb npm install –registry=https:\/\/registry.npm.tao […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[],"class_list":["post-3462","post","type-post","status-publish","format-standard","hentry","category-web"],"_links":{"self":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/3462","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3462"}],"version-history":[{"count":38,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/3462\/revisions"}],"predecessor-version":[{"id":3558,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/3462\/revisions\/3558"}],"wp:attachment":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3462"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=3462"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=3462"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
.el-input__inner::placeholder{\n color: #666666;\n}<\/code><\/pre>\n\u5224\u65ad el-checked \u662f\u5426\u9009\u4e2d,\u672a\u9009\u4e2d\u5219\u63d0\u793a\u8bf7\u52fe\u9009<\/h3>\n<\/p>\n<\/p><\/noscript>\nexport default {\nmounted() {\n const pleaseFit=document.getElementById('pleaseFit');\n $(".el-checkbox input").change(() => {\n if ($(".el-checkbox input[type='checkbox']").is(':checked') == true) {\n pleaseFit.style.display='none'\n } else {\n pleaseFit.style.display='block'\n }\n })\n }\n }<\/code><\/pre>\nel-input \u5728 style \u5168\u5c40\u6837\u5f0f,\u4f1a\u5f71\u54cd\u5230\u5176\u4ed6\u4e0d\u7b26\u5408\u8be5\u6837\u5f0f\u7684\u4f4d\u7f6e<\/h3>\n\n\u53ef\u4ee5\u5728 style scoped> \u5199,\u52a0\u4e0a\/deep\/<\/li>\n<\/ul>\n<\/p>\n<\/p><\/noscript>\n\/deep\/ .el-input__wrapper {\n box-shadow: 0 0 0 0 inset;\n background-color: rgb(255, 242, 0);\n}<\/code><\/pre>\nel-carousel \u8d70\u9a6c\u706f\u4fee\u6539 Carousel \u5de6\u53f3\u4e24\u4fa7\u7bad\u5934\u5b57\u4f53\u5927\u5c0f<\/h3>\n\/deep\/.el-carousel__arrow i {\n font-size: 29px !important;\n }<\/code><\/pre>\n\u9875\u9762\u5411\u4e0b\u6ed1\u52a8\u5bfc\u822a\u680f\u56fa\u5b9a<\/h3>\n<\/p>\n<\/p><\/noscript>\n.main_nav_fixed {\n position: sticky;\n top: 0;\n z-index: 999;\n}<\/code><\/pre>\n\u56fa\u5b9a\u5728\u53f3\u65b9\u7684,\u60ac\u6302\u51fa\u73b0\u4e8c\u7ef4\u7801<\/h3>\n<\/p>\n<\/p><\/noscript>\n<div class="share_box">\n <img src="..\/..\/assets\/images\/share_qr.png" alt=""\/>\n <\/div><\/code><\/pre>\n.share_box{\n width: 70px;\n height: 131px;\n top: 300px;\n right: 10px;\n cursor: pointer;\n position: fixed;\n z-index: 999;\n background: url("..\/..\/assets\/images\/share_wx.jpg") no-repeat;\n background-size: 100% 100%;\n}\n.share_box img{\n width: 100px;\n height: 100px;\n display: none;\n}\n.share_box:hover img {\n position: absolute;\n top: 50%;\n margin-top: -50px;\n right: 82px;\n display: block !important;\n}<\/code><\/pre>\nnth-child(n)\u6307\u7684\u662f\u5728\u7236\u5143\u7d20\u4e2d\u6240\u6709\u7684\u5143\u7d20\u7684\u987a\u5e8f<\/h3>\n\n\u5199\u4ee3\u7801\u8981\u6839\u636e\u76d2\u5b50\u4ee5\u53ca\u5185\u5bb9\u5199<\/li>\nbottom\uff1a0\uff1b\u8981\u76f8\u5bf9\u4e8e\u7236\u5143\u7d20\u7684 height \u5b9e\u73b0\uff0c\u5982\u679c\u7236\u7236\u5143\u7d20\u7684 height \u5927\u4e8e\u7236\u5143\u7d20\u7684 height\uff0c\uff0c\u5219\u4f1a\u6309\u7167\u7236\u7236\u5143\u7d20\u7684 height \u6765\u5b9e\u73b0 bottom\uff1a0\uff1b\u6765\u5b9e\u73b0\u3002\u3010\u9002\u5f53\u5220\u9664\u7236\u7236\u5143\u7d20\u7684 height\uff0c\u4e00\u677f\u5757\u901a\u5e38\u4e0d\u7528\u8bbe\u7f6e\u603b height\u3011<\/li>\n<\/ul>\n\u60ac\u6302\u56fe\u7247\u7f13\u7f13\u653e\u5927\u7684\u52a8\u753b\u6548\u679c<\/h3>\n<\/p>\n<\/p><\/noscript>\n.gc_project .item_img > img {\n width: 100%;\n height: 100%;\n transition: all 0.3s;\n}\n.gc_project .item_img > img:hover {\n transform: scale(1.05);\n box-shadow: rgb(0 0 0 \/ 23%) 0 4px 14px 0;\n}<\/code><\/pre>\n\u6eda\u52a8\u6761\u4fee\u6539<\/h3>\n<\/p>\n<\/p><\/noscript>\n.mleft::-webkit-scrollbar{\n width: 6px;\n background-color: #f8f8f8;\n\n}\n.mleft::-webkit-scrollbar-thumb{\n width: 6px;\n background-color: #adacac;\n border-radius: 4px;\n}<\/code><\/pre>\nhead \u533a '\u53d1\u73b0' \u5b9e\u73b0\u4ea4\u4e92\u6548\u679c [\u8be5\u9996\u9875\u6700\u607c\u706b\u7684]<\/h2>\n<\/p>\n<\/p><\/noscript>\ntodo head \u533a'\u53d1\u73b0'\u4ea4\u4e92\u5b9e\u73b0\u601d\u8def:<\/h3>\n\n\u2460\u89c2\u5bdf\u8be5\u533a\u7ed3\u6784,\u4e00\u4e2a\u5927\u6a21\u5757,\u5176\u4e2d\u5206\u4e3a\u5de6\u4e2d\u53f3\u4e09\u4e2a\u6a21\u5757,\u5e76\u4f9d\u6b21\u5199\u51fa\u4e09\u4e2a\u6a21\u5757\u7684\u4ee3\u7801,<\/li>\n\u2461\u5de6\u4fa7\u533a\u57df: \u8981\u5c55\u793a\u7684\u6548\u679c\u6709: \u9f20\u6807\u4e0a\u4e0b\u79fb\u52a8,\u6240\u7ecf\u7684 menuItem \u4f1a\u5c55\u73b0\u9ec4\u8272\u80cc\u666f, \u5219\u5f15\u7528 vue \u7684 ref \u5c5e\u6027\u5bf9 DOM \u5143\u7d20\u8fdb\u884c\u52a8\u6001\u7ed1\u5b9a.\n\n\u6ce8\u610f:ref \u9700\u8981\u5728 dom \u6e32\u67d3\u5b8c\u6210\u540e\u624d\u4f1a\u6709,\u5728\u4f7f\u7528\u7684\u65f6\u5019\u786e\u4fdd dom \u5df2\u7ecf\u6e32\u67d3\u5b8c\u6210, \u6bd4\u5982\u5728\u751f\u547d\u5468\u671f mounted(){}\u94a9\u5b50\u4e2d\u8c03\u7528. this.$refs.xxx:\u51cf\u5c11\u83b7\u53d6 dom \u8282\u70b9\u7684\u6d88\u8017<\/li>\n<\/ul>\n<\/li>\n\u2462\u5de6\u4fa7\u533a\u57df\u8fc7\u6ee4\u5230\u53f3\u4fa7\u533a\u57df,\u5c55\u793a\u5bf9\u5e94\u7684\u8be6\u60c5\u9875: mleftIn(item,index)\u51fd\u6570\u901a\u8fc7\u4f20\u8f93 v-for \u5faa\u73af\u4e2d\u6570\u7ec4 menuList \u7684 item \u6bcf\u4e00\u9879\u4e3a\u5a92\u4ecb, \u800c\u6570\u636e\u4e2d menuList \u4e2d\u5305\u542b\u5de6\u4fa7\u6570\u636e menuItem \u4e0e\u53f3\u4fa7\u6bcf\u4e00\u9875\u7684\u6807\u9898 menu \u76f8\u540c, \u4ece\u800c\u5c06\u5de6\u4fa7\u548c\u53f3\u4fa7\u6570\u636e\u7ed1\u5b9a, \u6545\u800c\u5f62\u6210\u4ece\u5de6\u4fa7\u8fc7\u6ee4\u5230\u53f3\u4fa7\u533a\u57df\u662f\u56fa\u5b9a\u7684\u8be6\u60c5\u9875\u5185\u5bb9.<\/li>\n\u2463\u9875\u9762\u7b2c\u4e8c\u6b21\u672a\u5237\u65b0\u4e4b\u524d(\u9996\u6b21\u8fdb\u5165\u9875\u9762\u6e32\u67d3), \u9f20\u6807\u60ac\u6302'\u53d1\u73b0',\u8981\u51fa\u73b0\u7b2c\u4e00\u4e2a'\u7cbe\u9009'\u8be6\u60c5\u9875\u53ca'\u7cbe\u9009'item \u80cc\u666f\u53d8\u9ec4: \u9f20\u6807\u79fb\u51fa\u8be5\u5143\u7d20[\u4e8c\u7ea7\u76ee\u5f55\u6574\u4e2a\u5927\u6a21\u5757]\u4e4b\u5916,\u5219\u89e6\u53d1 mouseleave \u4e8b\u4ef6,\u521d\u59cb\u5316\u6570\u636e.<\/li>\n\u2464\u7b2c\u4e8c\u6b21\u9875\u9762\u5237\u65b0\u4e4b\u540e,\u521d\u59cb\u5316\u6570\u636e: \u91c7\u7528 mounted \u751f\u547d\u5468\u671f[\u6e32\u67d3\u6210 html \u540e\u8c03\u7528]: \u4f7f\u9f20\u6807\u60ac\u6302'\u53d1\u73b0',\u7b2c\u4e00\u4e2a menu-item \u663e\u793a\u9ec4\u8272<\/li>\n<\/ul>\n <li class="find">\n <a href="#">\u53d1\u73b0<\/a>\n <div class="h_menu" @mouseleave="mleftLeave()">\n <div class="menu_box mleft">\n <!-- <a href="">\u7cbe\u9009<\/a>-->\n <a v-for="(item,index) in menuList" :key="index" :ref="'test'+index" href="javascript:;"\n @mouseover="mleftIn(item,index)">{{ item.menu }}<\/a>\n <!-- <el-cascader-panel :options="findOptions" :props="props" \/>-->\n <\/div>\n <div class="mright">\n <div class="cate-box">\n <a class="cate-title" href="">\n <img :src="data.url" alt="">\n <span>{{ data.menu }}<\/span>\n <\/a>\n <div class="subCate">\n <a v-for="(itemOne) in data.items" :key="itemOne">{{ itemOne.text }}<\/a>\n <\/div>\n <\/div>\n <\/div>\n <div class="right_bar">\n <div class="icons">\n <a>\n <span class="icon-box">\n <span class="tangle-1"><\/span>\n <span class="tangle-2"><\/span>\n <i class="ani-star"><\/i>\n <span class="tangle-3"><\/span>\n <\/span>\n <span class="icon-text">\u6536\u85cf\u5939<\/span>\n <\/a>\n <a>\n <img alt="" src="..\/assets\/images\/icon-header-discover-designer.png">\n <span>\u8bbe\u8ba1\u5e08<\/span>\n <\/a>\n <a>\n <img alt="" src="..\/assets\/images\/icon-header-discover-focus.png">\n <span>\u699c\u5355<\/span>\n <!-- <sup class="subNavDot"><\/sup>-->\n <\/a>\n <\/div>\n <div class="ad_box">\n\n <\/div>\n <\/div>\n <\/div>\n <\/li><\/code><\/pre>\n data: {},\n menuList: [\n {\n menu: '\u7cbe\u9009',\n url: require('..\/assets\/images\/zuanshi.png'),\n items: [\n { text: '\u8fd0\u8425\u8bbe\u8ba1' },\n { text: '\u5305\u88c5' },\n { text: '\u52a8\u753b\/\u5f71\u89c6' },\n { text: '\u4eba\u50cf\u6444\u5f71' },\n { text: '\u5546\u4e1a\u63d2\u753b' },\n { text: '\u7535\u5546' },\n { text: 'APP \u754c\u9762' },\n { text: '\u827a\u672f\u63d2\u753b' },\n { text: '\u5bb6\u88c5\u8bbe\u8ba1' },\n { text: '\u6d77\u62a5' },\n { text: '\u6587\u7ae0' }\n ]\n },\n { menu: '\u5e73\u9762' },\n { menu: 'UI' },\n { menu: '\u7f51\u9875' },\n { menu: '\u63d2\u753b' },\n { menu: '\u52a8\u6f2b' },\n { menu: '\u6444\u5f71' },\n { menu: '\u7a7a\u95f4' },\n { menu: '\u5de5\u4e1a\/\u4ea7\u54c1' },\n { menu: '\u4e09\u7ef4' },\n { menu: '\u5f71\u89c6' },\n { menu: '\u624b\u5de5\u827a' },\n { menu: '\u7eaf\u827a\u672f' },\n { menu: '\u670d\u88c5' },\n { menu: '\u5176\u4ed6' }\n ],<\/code><\/pre>\n \/\/\u6e32\u67d3\u6210 html \u4e4b\u524d\u8c03\u7528,\u521d\u59cb\u5316\u4e00\u4e9b\u5c5e\u6027\u503c [\u9f20\u6807\u60ac\u6302'\u53d1\u73b0',\u5c31\u51fa\u73b0\u7b2c\u4e00\u4e2a\u7cbe\u9009\u9875\u9762]\n created () {\n this.data = this.menuList[0]\n },\n \/\/\u6e32\u67d3\u6210 html \u540e\u8c03\u7528 [\u9f20\u6807\u60ac\u6302'\u53d1\u73b0',\u7b2c\u4e00\u4e2a menu-item \u663e\u793a\u9ec4\u8272](\u9875\u9762\u5237\u65b0\u4e86\u4e4b\u540e\u7684)\n mounted () {\n this.$refs['test' + 0][0].style.backgroundColor = 'rgb(255, 242, 0)'\n },\n methods: {\n \/\/\u9f20\u6807\u8fdb\u5165\u51fd\u6570\n mleftIn (item, index) {\n \/\/\u83b7\u53d6 menuList \u4e2d\u6bcf\u4e2a menuItem \u5b57\u7b26\u4e32\u7684\u957f\u5ea6\n let menuSize = this.menuList.length\n for (let i = 0; i < menuSize; i++) {\n \/\/for \u5faa\u73af,i \u5982\u679c\u5c0f\u4e8e menuSize,\u5219\u7f6e\u4e8e menuItem \u989c\u8272\u4e3a\u7070\u8272,\u5b9e\u73b0\u5207\u6362\u6548\u679c\n this.$refs['test' + i][0].style.backgroundColor = '#f8f8f8'\n }\n \/\/\u8df3\u51fa for \u5faa\u73af,\u7531\u5de6\u4fa7\u79fb\u5411\u53f3\u4fa7\u8be6\u60c5\u9875\u65f6,\u5176 menuItem \u7684\u989c\u8272\u4e3a\u9ec4\u8272\n this.$refs['test' + index][0].style.backgroundColor = 'rgb(255, 242, 0)'\n \/\/\u5c06\u53f3\u4fa7\u6570\u636e\u8bbe\u7f6e\u4e3a item,\u663e\u793a\u6570\u636e\n this.data = item\n },\n \/\/\u9f20\u6807\u8fdb\u5165\u51fd\u6570\n \/\/\u6ce8\u610f: mouseleave:\u662f\u9f20\u6807\u79fb\u51fa\u8be5\u5143\u7d20\u4e4b\u5916,\u5219\u89e6\u53d1 mouseleave \u4e8b\u4ef6\n \/\/ mouseout : \u662f\u5f53\u6307\u9488\u79bb\u5f00\u8be5\u5143\u7d20\u53ca\u5176\u6240\u6709\u540e\u4ee3\u65f6\uff0c\u4f1a\u89e6\u53d1 mouseleave\n \/\/ \u800c\u5f53\u6307\u9488\u79bb\u5f00\u5143\u7d20\u6216\u79bb\u5f00\u5143\u7d20\u7684\u540e\u4ee3\uff08\u5373\u4f7f\u6307\u9488\u4ecd\u5728\u5143\u7d20\u5185\uff09\u65f6\uff0c\u4e5f\u4f1a\u89e6\u53d1 mouseout \u4e8b\u4ef6\n mleftLeave () {\n \/\/\u83b7\u53d6 menuList \u4e2d\u6bcf\u4e2a menuItem \u5b57\u7b26\u4e32\u7684\u957f\u5ea6\n let menuSize = this.menuList.length\n for (let i = 0; i < menuSize; i++) {\n this.$refs['test' + i][0].style.backgroundColor = '#f8f8f8'\n }\n \/\/ \u8df3\u51fa\u5faa\u73af,\u6d4f\u89c8\u5b8c'\u53d1\u73b0',\u9f20\u6807\u79fb\u51fa,\u7f6e\u4e8e\u53f3\u4fa7\u6570\u636e\u4e3a\u7b2c\u4e00\u4e2a\u7cbe\u9009\u6570\u636e\n this.data = this.menuList[0]\n \/\/\u9f20\u6807\u79fb\u51fa\u4e8b\u4ef6,\u7f6e\u4e8e\u7b2c\u4e00\u4e2a menuitem \u4e3a\u9ec4\u8272[\u672a\u5237\u65b0\u65f6\u7684\u8bbe\u7f6e]\n this.$refs['test' + 0][0].style.backgroundColor = 'rgb(255, 242, 0)'\n\n \/\/ this.data = {}\n \/\/ this.$refs['test'+index][0].style.backgroundColor = '#f8f8f8'\n \/\/ console.log('\u6eda\u51fa\u53bb')\n },\n}<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"\u4e0b\u8f7d\u4f9d\u8d56\u901f\u5ea6\u5feb npm install –registry=https:\/\/registry.npm.tao […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[],"class_list":["post-3462","post","type-post","status-publish","format-standard","hentry","category-web"],"_links":{"self":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/3462","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3462"}],"version-history":[{"count":38,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/3462\/revisions"}],"predecessor-version":[{"id":3558,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/3462\/revisions\/3558"}],"wp:attachment":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3462"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=3462"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=3462"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
<\/p>\n<\/p><\/noscript>\nexport default {\nmounted() {\n const pleaseFit=document.getElementById('pleaseFit');\n $(".el-checkbox input").change(() => {\n if ($(".el-checkbox input[type='checkbox']").is(':checked') == true) {\n pleaseFit.style.display='none'\n } else {\n pleaseFit.style.display='block'\n }\n })\n }\n }<\/code><\/pre>\nel-input \u5728 style \u5168\u5c40\u6837\u5f0f,\u4f1a\u5f71\u54cd\u5230\u5176\u4ed6\u4e0d\u7b26\u5408\u8be5\u6837\u5f0f\u7684\u4f4d\u7f6e<\/h3>\n\n\u53ef\u4ee5\u5728 style scoped> \u5199,\u52a0\u4e0a\/deep\/<\/li>\n<\/ul>\n<\/p>\n<\/p><\/noscript>\n\/deep\/ .el-input__wrapper {\n box-shadow: 0 0 0 0 inset;\n background-color: rgb(255, 242, 0);\n}<\/code><\/pre>\nel-carousel \u8d70\u9a6c\u706f\u4fee\u6539 Carousel \u5de6\u53f3\u4e24\u4fa7\u7bad\u5934\u5b57\u4f53\u5927\u5c0f<\/h3>\n\/deep\/.el-carousel__arrow i {\n font-size: 29px !important;\n }<\/code><\/pre>\n\u9875\u9762\u5411\u4e0b\u6ed1\u52a8\u5bfc\u822a\u680f\u56fa\u5b9a<\/h3>\n<\/p>\n<\/p><\/noscript>\n.main_nav_fixed {\n position: sticky;\n top: 0;\n z-index: 999;\n}<\/code><\/pre>\n\u56fa\u5b9a\u5728\u53f3\u65b9\u7684,\u60ac\u6302\u51fa\u73b0\u4e8c\u7ef4\u7801<\/h3>\n<\/p>\n<\/p><\/noscript>\n<div class="share_box">\n <img src="..\/..\/assets\/images\/share_qr.png" alt=""\/>\n <\/div><\/code><\/pre>\n.share_box{\n width: 70px;\n height: 131px;\n top: 300px;\n right: 10px;\n cursor: pointer;\n position: fixed;\n z-index: 999;\n background: url("..\/..\/assets\/images\/share_wx.jpg") no-repeat;\n background-size: 100% 100%;\n}\n.share_box img{\n width: 100px;\n height: 100px;\n display: none;\n}\n.share_box:hover img {\n position: absolute;\n top: 50%;\n margin-top: -50px;\n right: 82px;\n display: block !important;\n}<\/code><\/pre>\nnth-child(n)\u6307\u7684\u662f\u5728\u7236\u5143\u7d20\u4e2d\u6240\u6709\u7684\u5143\u7d20\u7684\u987a\u5e8f<\/h3>\n\n\u5199\u4ee3\u7801\u8981\u6839\u636e\u76d2\u5b50\u4ee5\u53ca\u5185\u5bb9\u5199<\/li>\nbottom\uff1a0\uff1b\u8981\u76f8\u5bf9\u4e8e\u7236\u5143\u7d20\u7684 height \u5b9e\u73b0\uff0c\u5982\u679c\u7236\u7236\u5143\u7d20\u7684 height \u5927\u4e8e\u7236\u5143\u7d20\u7684 height\uff0c\uff0c\u5219\u4f1a\u6309\u7167\u7236\u7236\u5143\u7d20\u7684 height \u6765\u5b9e\u73b0 bottom\uff1a0\uff1b\u6765\u5b9e\u73b0\u3002\u3010\u9002\u5f53\u5220\u9664\u7236\u7236\u5143\u7d20\u7684 height\uff0c\u4e00\u677f\u5757\u901a\u5e38\u4e0d\u7528\u8bbe\u7f6e\u603b height\u3011<\/li>\n<\/ul>\n\u60ac\u6302\u56fe\u7247\u7f13\u7f13\u653e\u5927\u7684\u52a8\u753b\u6548\u679c<\/h3>\n<\/p>\n<\/p><\/noscript>\n.gc_project .item_img > img {\n width: 100%;\n height: 100%;\n transition: all 0.3s;\n}\n.gc_project .item_img > img:hover {\n transform: scale(1.05);\n box-shadow: rgb(0 0 0 \/ 23%) 0 4px 14px 0;\n}<\/code><\/pre>\n\u6eda\u52a8\u6761\u4fee\u6539<\/h3>\n<\/p>\n<\/p><\/noscript>\n.mleft::-webkit-scrollbar{\n width: 6px;\n background-color: #f8f8f8;\n\n}\n.mleft::-webkit-scrollbar-thumb{\n width: 6px;\n background-color: #adacac;\n border-radius: 4px;\n}<\/code><\/pre>\nhead \u533a '\u53d1\u73b0' \u5b9e\u73b0\u4ea4\u4e92\u6548\u679c [\u8be5\u9996\u9875\u6700\u607c\u706b\u7684]<\/h2>\n<\/p>\n<\/p><\/noscript>\ntodo head \u533a'\u53d1\u73b0'\u4ea4\u4e92\u5b9e\u73b0\u601d\u8def:<\/h3>\n\n\u2460\u89c2\u5bdf\u8be5\u533a\u7ed3\u6784,\u4e00\u4e2a\u5927\u6a21\u5757,\u5176\u4e2d\u5206\u4e3a\u5de6\u4e2d\u53f3\u4e09\u4e2a\u6a21\u5757,\u5e76\u4f9d\u6b21\u5199\u51fa\u4e09\u4e2a\u6a21\u5757\u7684\u4ee3\u7801,<\/li>\n\u2461\u5de6\u4fa7\u533a\u57df: \u8981\u5c55\u793a\u7684\u6548\u679c\u6709: \u9f20\u6807\u4e0a\u4e0b\u79fb\u52a8,\u6240\u7ecf\u7684 menuItem \u4f1a\u5c55\u73b0\u9ec4\u8272\u80cc\u666f, \u5219\u5f15\u7528 vue \u7684 ref \u5c5e\u6027\u5bf9 DOM \u5143\u7d20\u8fdb\u884c\u52a8\u6001\u7ed1\u5b9a.\n\n\u6ce8\u610f:ref \u9700\u8981\u5728 dom \u6e32\u67d3\u5b8c\u6210\u540e\u624d\u4f1a\u6709,\u5728\u4f7f\u7528\u7684\u65f6\u5019\u786e\u4fdd dom \u5df2\u7ecf\u6e32\u67d3\u5b8c\u6210, \u6bd4\u5982\u5728\u751f\u547d\u5468\u671f mounted(){}\u94a9\u5b50\u4e2d\u8c03\u7528. this.$refs.xxx:\u51cf\u5c11\u83b7\u53d6 dom \u8282\u70b9\u7684\u6d88\u8017<\/li>\n<\/ul>\n<\/li>\n\u2462\u5de6\u4fa7\u533a\u57df\u8fc7\u6ee4\u5230\u53f3\u4fa7\u533a\u57df,\u5c55\u793a\u5bf9\u5e94\u7684\u8be6\u60c5\u9875: mleftIn(item,index)\u51fd\u6570\u901a\u8fc7\u4f20\u8f93 v-for \u5faa\u73af\u4e2d\u6570\u7ec4 menuList \u7684 item \u6bcf\u4e00\u9879\u4e3a\u5a92\u4ecb, \u800c\u6570\u636e\u4e2d menuList \u4e2d\u5305\u542b\u5de6\u4fa7\u6570\u636e menuItem \u4e0e\u53f3\u4fa7\u6bcf\u4e00\u9875\u7684\u6807\u9898 menu \u76f8\u540c, \u4ece\u800c\u5c06\u5de6\u4fa7\u548c\u53f3\u4fa7\u6570\u636e\u7ed1\u5b9a, \u6545\u800c\u5f62\u6210\u4ece\u5de6\u4fa7\u8fc7\u6ee4\u5230\u53f3\u4fa7\u533a\u57df\u662f\u56fa\u5b9a\u7684\u8be6\u60c5\u9875\u5185\u5bb9.<\/li>\n\u2463\u9875\u9762\u7b2c\u4e8c\u6b21\u672a\u5237\u65b0\u4e4b\u524d(\u9996\u6b21\u8fdb\u5165\u9875\u9762\u6e32\u67d3), \u9f20\u6807\u60ac\u6302'\u53d1\u73b0',\u8981\u51fa\u73b0\u7b2c\u4e00\u4e2a'\u7cbe\u9009'\u8be6\u60c5\u9875\u53ca'\u7cbe\u9009'item \u80cc\u666f\u53d8\u9ec4: \u9f20\u6807\u79fb\u51fa\u8be5\u5143\u7d20[\u4e8c\u7ea7\u76ee\u5f55\u6574\u4e2a\u5927\u6a21\u5757]\u4e4b\u5916,\u5219\u89e6\u53d1 mouseleave \u4e8b\u4ef6,\u521d\u59cb\u5316\u6570\u636e.<\/li>\n\u2464\u7b2c\u4e8c\u6b21\u9875\u9762\u5237\u65b0\u4e4b\u540e,\u521d\u59cb\u5316\u6570\u636e: \u91c7\u7528 mounted \u751f\u547d\u5468\u671f[\u6e32\u67d3\u6210 html \u540e\u8c03\u7528]: \u4f7f\u9f20\u6807\u60ac\u6302'\u53d1\u73b0',\u7b2c\u4e00\u4e2a menu-item \u663e\u793a\u9ec4\u8272<\/li>\n<\/ul>\n <li class="find">\n <a href="#">\u53d1\u73b0<\/a>\n <div class="h_menu" @mouseleave="mleftLeave()">\n <div class="menu_box mleft">\n <!-- <a href="">\u7cbe\u9009<\/a>-->\n <a v-for="(item,index) in menuList" :key="index" :ref="'test'+index" href="javascript:;"\n @mouseover="mleftIn(item,index)">{{ item.menu }}<\/a>\n <!-- <el-cascader-panel :options="findOptions" :props="props" \/>-->\n <\/div>\n <div class="mright">\n <div class="cate-box">\n <a class="cate-title" href="">\n <img :src="data.url" alt="">\n <span>{{ data.menu }}<\/span>\n <\/a>\n <div class="subCate">\n <a v-for="(itemOne) in data.items" :key="itemOne">{{ itemOne.text }}<\/a>\n <\/div>\n <\/div>\n <\/div>\n <div class="right_bar">\n <div class="icons">\n <a>\n <span class="icon-box">\n <span class="tangle-1"><\/span>\n <span class="tangle-2"><\/span>\n <i class="ani-star"><\/i>\n <span class="tangle-3"><\/span>\n <\/span>\n <span class="icon-text">\u6536\u85cf\u5939<\/span>\n <\/a>\n <a>\n <img alt="" src="..\/assets\/images\/icon-header-discover-designer.png">\n <span>\u8bbe\u8ba1\u5e08<\/span>\n <\/a>\n <a>\n <img alt="" src="..\/assets\/images\/icon-header-discover-focus.png">\n <span>\u699c\u5355<\/span>\n <!-- <sup class="subNavDot"><\/sup>-->\n <\/a>\n <\/div>\n <div class="ad_box">\n\n <\/div>\n <\/div>\n <\/div>\n <\/li><\/code><\/pre>\n data: {},\n menuList: [\n {\n menu: '\u7cbe\u9009',\n url: require('..\/assets\/images\/zuanshi.png'),\n items: [\n { text: '\u8fd0\u8425\u8bbe\u8ba1' },\n { text: '\u5305\u88c5' },\n { text: '\u52a8\u753b\/\u5f71\u89c6' },\n { text: '\u4eba\u50cf\u6444\u5f71' },\n { text: '\u5546\u4e1a\u63d2\u753b' },\n { text: '\u7535\u5546' },\n { text: 'APP \u754c\u9762' },\n { text: '\u827a\u672f\u63d2\u753b' },\n { text: '\u5bb6\u88c5\u8bbe\u8ba1' },\n { text: '\u6d77\u62a5' },\n { text: '\u6587\u7ae0' }\n ]\n },\n { menu: '\u5e73\u9762' },\n { menu: 'UI' },\n { menu: '\u7f51\u9875' },\n { menu: '\u63d2\u753b' },\n { menu: '\u52a8\u6f2b' },\n { menu: '\u6444\u5f71' },\n { menu: '\u7a7a\u95f4' },\n { menu: '\u5de5\u4e1a\/\u4ea7\u54c1' },\n { menu: '\u4e09\u7ef4' },\n { menu: '\u5f71\u89c6' },\n { menu: '\u624b\u5de5\u827a' },\n { menu: '\u7eaf\u827a\u672f' },\n { menu: '\u670d\u88c5' },\n { menu: '\u5176\u4ed6' }\n ],<\/code><\/pre>\n \/\/\u6e32\u67d3\u6210 html \u4e4b\u524d\u8c03\u7528,\u521d\u59cb\u5316\u4e00\u4e9b\u5c5e\u6027\u503c [\u9f20\u6807\u60ac\u6302'\u53d1\u73b0',\u5c31\u51fa\u73b0\u7b2c\u4e00\u4e2a\u7cbe\u9009\u9875\u9762]\n created () {\n this.data = this.menuList[0]\n },\n \/\/\u6e32\u67d3\u6210 html \u540e\u8c03\u7528 [\u9f20\u6807\u60ac\u6302'\u53d1\u73b0',\u7b2c\u4e00\u4e2a menu-item \u663e\u793a\u9ec4\u8272](\u9875\u9762\u5237\u65b0\u4e86\u4e4b\u540e\u7684)\n mounted () {\n this.$refs['test' + 0][0].style.backgroundColor = 'rgb(255, 242, 0)'\n },\n methods: {\n \/\/\u9f20\u6807\u8fdb\u5165\u51fd\u6570\n mleftIn (item, index) {\n \/\/\u83b7\u53d6 menuList \u4e2d\u6bcf\u4e2a menuItem \u5b57\u7b26\u4e32\u7684\u957f\u5ea6\n let menuSize = this.menuList.length\n for (let i = 0; i < menuSize; i++) {\n \/\/for \u5faa\u73af,i \u5982\u679c\u5c0f\u4e8e menuSize,\u5219\u7f6e\u4e8e menuItem \u989c\u8272\u4e3a\u7070\u8272,\u5b9e\u73b0\u5207\u6362\u6548\u679c\n this.$refs['test' + i][0].style.backgroundColor = '#f8f8f8'\n }\n \/\/\u8df3\u51fa for \u5faa\u73af,\u7531\u5de6\u4fa7\u79fb\u5411\u53f3\u4fa7\u8be6\u60c5\u9875\u65f6,\u5176 menuItem \u7684\u989c\u8272\u4e3a\u9ec4\u8272\n this.$refs['test' + index][0].style.backgroundColor = 'rgb(255, 242, 0)'\n \/\/\u5c06\u53f3\u4fa7\u6570\u636e\u8bbe\u7f6e\u4e3a item,\u663e\u793a\u6570\u636e\n this.data = item\n },\n \/\/\u9f20\u6807\u8fdb\u5165\u51fd\u6570\n \/\/\u6ce8\u610f: mouseleave:\u662f\u9f20\u6807\u79fb\u51fa\u8be5\u5143\u7d20\u4e4b\u5916,\u5219\u89e6\u53d1 mouseleave \u4e8b\u4ef6\n \/\/ mouseout : \u662f\u5f53\u6307\u9488\u79bb\u5f00\u8be5\u5143\u7d20\u53ca\u5176\u6240\u6709\u540e\u4ee3\u65f6\uff0c\u4f1a\u89e6\u53d1 mouseleave\n \/\/ \u800c\u5f53\u6307\u9488\u79bb\u5f00\u5143\u7d20\u6216\u79bb\u5f00\u5143\u7d20\u7684\u540e\u4ee3\uff08\u5373\u4f7f\u6307\u9488\u4ecd\u5728\u5143\u7d20\u5185\uff09\u65f6\uff0c\u4e5f\u4f1a\u89e6\u53d1 mouseout \u4e8b\u4ef6\n mleftLeave () {\n \/\/\u83b7\u53d6 menuList \u4e2d\u6bcf\u4e2a menuItem \u5b57\u7b26\u4e32\u7684\u957f\u5ea6\n let menuSize = this.menuList.length\n for (let i = 0; i < menuSize; i++) {\n this.$refs['test' + i][0].style.backgroundColor = '#f8f8f8'\n }\n \/\/ \u8df3\u51fa\u5faa\u73af,\u6d4f\u89c8\u5b8c'\u53d1\u73b0',\u9f20\u6807\u79fb\u51fa,\u7f6e\u4e8e\u53f3\u4fa7\u6570\u636e\u4e3a\u7b2c\u4e00\u4e2a\u7cbe\u9009\u6570\u636e\n this.data = this.menuList[0]\n \/\/\u9f20\u6807\u79fb\u51fa\u4e8b\u4ef6,\u7f6e\u4e8e\u7b2c\u4e00\u4e2a menuitem \u4e3a\u9ec4\u8272[\u672a\u5237\u65b0\u65f6\u7684\u8bbe\u7f6e]\n this.$refs['test' + 0][0].style.backgroundColor = 'rgb(255, 242, 0)'\n\n \/\/ this.data = {}\n \/\/ this.$refs['test'+index][0].style.backgroundColor = '#f8f8f8'\n \/\/ console.log('\u6eda\u51fa\u53bb')\n },\n}<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"\u4e0b\u8f7d\u4f9d\u8d56\u901f\u5ea6\u5feb npm install –registry=https:\/\/registry.npm.tao […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[],"class_list":["post-3462","post","type-post","status-publish","format-standard","hentry","category-web"],"_links":{"self":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/3462","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3462"}],"version-history":[{"count":38,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/3462\/revisions"}],"predecessor-version":[{"id":3558,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/3462\/revisions\/3558"}],"wp:attachment":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3462"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=3462"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=3462"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
export default {\nmounted() {\n const pleaseFit=document.getElementById('pleaseFit');\n $(".el-checkbox input").change(() => {\n if ($(".el-checkbox input[type='checkbox']").is(':checked') == true) {\n pleaseFit.style.display='none'\n } else {\n pleaseFit.style.display='block'\n }\n })\n }\n }<\/code><\/pre>\nel-input \u5728 style \u5168\u5c40\u6837\u5f0f,\u4f1a\u5f71\u54cd\u5230\u5176\u4ed6\u4e0d\u7b26\u5408\u8be5\u6837\u5f0f\u7684\u4f4d\u7f6e<\/h3>\n\n\u53ef\u4ee5\u5728 style scoped> \u5199,\u52a0\u4e0a\/deep\/<\/li>\n<\/ul>\n<\/p>\n<\/p><\/noscript>\n\/deep\/ .el-input__wrapper {\n box-shadow: 0 0 0 0 inset;\n background-color: rgb(255, 242, 0);\n}<\/code><\/pre>\nel-carousel \u8d70\u9a6c\u706f\u4fee\u6539 Carousel \u5de6\u53f3\u4e24\u4fa7\u7bad\u5934\u5b57\u4f53\u5927\u5c0f<\/h3>\n\/deep\/.el-carousel__arrow i {\n font-size: 29px !important;\n }<\/code><\/pre>\n\u9875\u9762\u5411\u4e0b\u6ed1\u52a8\u5bfc\u822a\u680f\u56fa\u5b9a<\/h3>\n<\/p>\n<\/p><\/noscript>\n.main_nav_fixed {\n position: sticky;\n top: 0;\n z-index: 999;\n}<\/code><\/pre>\n\u56fa\u5b9a\u5728\u53f3\u65b9\u7684,\u60ac\u6302\u51fa\u73b0\u4e8c\u7ef4\u7801<\/h3>\n<\/p>\n<\/p><\/noscript>\n<div class="share_box">\n <img src="..\/..\/assets\/images\/share_qr.png" alt=""\/>\n <\/div><\/code><\/pre>\n.share_box{\n width: 70px;\n height: 131px;\n top: 300px;\n right: 10px;\n cursor: pointer;\n position: fixed;\n z-index: 999;\n background: url("..\/..\/assets\/images\/share_wx.jpg") no-repeat;\n background-size: 100% 100%;\n}\n.share_box img{\n width: 100px;\n height: 100px;\n display: none;\n}\n.share_box:hover img {\n position: absolute;\n top: 50%;\n margin-top: -50px;\n right: 82px;\n display: block !important;\n}<\/code><\/pre>\nnth-child(n)\u6307\u7684\u662f\u5728\u7236\u5143\u7d20\u4e2d\u6240\u6709\u7684\u5143\u7d20\u7684\u987a\u5e8f<\/h3>\n\n\u5199\u4ee3\u7801\u8981\u6839\u636e\u76d2\u5b50\u4ee5\u53ca\u5185\u5bb9\u5199<\/li>\nbottom\uff1a0\uff1b\u8981\u76f8\u5bf9\u4e8e\u7236\u5143\u7d20\u7684 height \u5b9e\u73b0\uff0c\u5982\u679c\u7236\u7236\u5143\u7d20\u7684 height \u5927\u4e8e\u7236\u5143\u7d20\u7684 height\uff0c\uff0c\u5219\u4f1a\u6309\u7167\u7236\u7236\u5143\u7d20\u7684 height \u6765\u5b9e\u73b0 bottom\uff1a0\uff1b\u6765\u5b9e\u73b0\u3002\u3010\u9002\u5f53\u5220\u9664\u7236\u7236\u5143\u7d20\u7684 height\uff0c\u4e00\u677f\u5757\u901a\u5e38\u4e0d\u7528\u8bbe\u7f6e\u603b height\u3011<\/li>\n<\/ul>\n\u60ac\u6302\u56fe\u7247\u7f13\u7f13\u653e\u5927\u7684\u52a8\u753b\u6548\u679c<\/h3>\n<\/p>\n<\/p><\/noscript>\n.gc_project .item_img > img {\n width: 100%;\n height: 100%;\n transition: all 0.3s;\n}\n.gc_project .item_img > img:hover {\n transform: scale(1.05);\n box-shadow: rgb(0 0 0 \/ 23%) 0 4px 14px 0;\n}<\/code><\/pre>\n\u6eda\u52a8\u6761\u4fee\u6539<\/h3>\n<\/p>\n<\/p><\/noscript>\n.mleft::-webkit-scrollbar{\n width: 6px;\n background-color: #f8f8f8;\n\n}\n.mleft::-webkit-scrollbar-thumb{\n width: 6px;\n background-color: #adacac;\n border-radius: 4px;\n}<\/code><\/pre>\nhead \u533a '\u53d1\u73b0' \u5b9e\u73b0\u4ea4\u4e92\u6548\u679c [\u8be5\u9996\u9875\u6700\u607c\u706b\u7684]<\/h2>\n<\/p>\n<\/p><\/noscript>\ntodo head \u533a'\u53d1\u73b0'\u4ea4\u4e92\u5b9e\u73b0\u601d\u8def:<\/h3>\n\n\u2460\u89c2\u5bdf\u8be5\u533a\u7ed3\u6784,\u4e00\u4e2a\u5927\u6a21\u5757,\u5176\u4e2d\u5206\u4e3a\u5de6\u4e2d\u53f3\u4e09\u4e2a\u6a21\u5757,\u5e76\u4f9d\u6b21\u5199\u51fa\u4e09\u4e2a\u6a21\u5757\u7684\u4ee3\u7801,<\/li>\n\u2461\u5de6\u4fa7\u533a\u57df: \u8981\u5c55\u793a\u7684\u6548\u679c\u6709: \u9f20\u6807\u4e0a\u4e0b\u79fb\u52a8,\u6240\u7ecf\u7684 menuItem \u4f1a\u5c55\u73b0\u9ec4\u8272\u80cc\u666f, \u5219\u5f15\u7528 vue \u7684 ref \u5c5e\u6027\u5bf9 DOM \u5143\u7d20\u8fdb\u884c\u52a8\u6001\u7ed1\u5b9a.\n\n\u6ce8\u610f:ref \u9700\u8981\u5728 dom \u6e32\u67d3\u5b8c\u6210\u540e\u624d\u4f1a\u6709,\u5728\u4f7f\u7528\u7684\u65f6\u5019\u786e\u4fdd dom \u5df2\u7ecf\u6e32\u67d3\u5b8c\u6210, \u6bd4\u5982\u5728\u751f\u547d\u5468\u671f mounted(){}\u94a9\u5b50\u4e2d\u8c03\u7528. this.$refs.xxx:\u51cf\u5c11\u83b7\u53d6 dom \u8282\u70b9\u7684\u6d88\u8017<\/li>\n<\/ul>\n<\/li>\n\u2462\u5de6\u4fa7\u533a\u57df\u8fc7\u6ee4\u5230\u53f3\u4fa7\u533a\u57df,\u5c55\u793a\u5bf9\u5e94\u7684\u8be6\u60c5\u9875: mleftIn(item,index)\u51fd\u6570\u901a\u8fc7\u4f20\u8f93 v-for \u5faa\u73af\u4e2d\u6570\u7ec4 menuList \u7684 item \u6bcf\u4e00\u9879\u4e3a\u5a92\u4ecb, \u800c\u6570\u636e\u4e2d menuList \u4e2d\u5305\u542b\u5de6\u4fa7\u6570\u636e menuItem \u4e0e\u53f3\u4fa7\u6bcf\u4e00\u9875\u7684\u6807\u9898 menu \u76f8\u540c, \u4ece\u800c\u5c06\u5de6\u4fa7\u548c\u53f3\u4fa7\u6570\u636e\u7ed1\u5b9a, \u6545\u800c\u5f62\u6210\u4ece\u5de6\u4fa7\u8fc7\u6ee4\u5230\u53f3\u4fa7\u533a\u57df\u662f\u56fa\u5b9a\u7684\u8be6\u60c5\u9875\u5185\u5bb9.<\/li>\n\u2463\u9875\u9762\u7b2c\u4e8c\u6b21\u672a\u5237\u65b0\u4e4b\u524d(\u9996\u6b21\u8fdb\u5165\u9875\u9762\u6e32\u67d3), \u9f20\u6807\u60ac\u6302'\u53d1\u73b0',\u8981\u51fa\u73b0\u7b2c\u4e00\u4e2a'\u7cbe\u9009'\u8be6\u60c5\u9875\u53ca'\u7cbe\u9009'item \u80cc\u666f\u53d8\u9ec4: \u9f20\u6807\u79fb\u51fa\u8be5\u5143\u7d20[\u4e8c\u7ea7\u76ee\u5f55\u6574\u4e2a\u5927\u6a21\u5757]\u4e4b\u5916,\u5219\u89e6\u53d1 mouseleave \u4e8b\u4ef6,\u521d\u59cb\u5316\u6570\u636e.<\/li>\n\u2464\u7b2c\u4e8c\u6b21\u9875\u9762\u5237\u65b0\u4e4b\u540e,\u521d\u59cb\u5316\u6570\u636e: \u91c7\u7528 mounted \u751f\u547d\u5468\u671f[\u6e32\u67d3\u6210 html \u540e\u8c03\u7528]: \u4f7f\u9f20\u6807\u60ac\u6302'\u53d1\u73b0',\u7b2c\u4e00\u4e2a menu-item \u663e\u793a\u9ec4\u8272<\/li>\n<\/ul>\n <li class="find">\n <a href="#">\u53d1\u73b0<\/a>\n <div class="h_menu" @mouseleave="mleftLeave()">\n <div class="menu_box mleft">\n <!-- <a href="">\u7cbe\u9009<\/a>-->\n <a v-for="(item,index) in menuList" :key="index" :ref="'test'+index" href="javascript:;"\n @mouseover="mleftIn(item,index)">{{ item.menu }}<\/a>\n <!-- <el-cascader-panel :options="findOptions" :props="props" \/>-->\n <\/div>\n <div class="mright">\n <div class="cate-box">\n <a class="cate-title" href="">\n <img :src="data.url" alt="">\n <span>{{ data.menu }}<\/span>\n <\/a>\n <div class="subCate">\n <a v-for="(itemOne) in data.items" :key="itemOne">{{ itemOne.text }}<\/a>\n <\/div>\n <\/div>\n <\/div>\n <div class="right_bar">\n <div class="icons">\n <a>\n <span class="icon-box">\n <span class="tangle-1"><\/span>\n <span class="tangle-2"><\/span>\n <i class="ani-star"><\/i>\n <span class="tangle-3"><\/span>\n <\/span>\n <span class="icon-text">\u6536\u85cf\u5939<\/span>\n <\/a>\n <a>\n <img alt="" src="..\/assets\/images\/icon-header-discover-designer.png">\n <span>\u8bbe\u8ba1\u5e08<\/span>\n <\/a>\n <a>\n <img alt="" src="..\/assets\/images\/icon-header-discover-focus.png">\n <span>\u699c\u5355<\/span>\n <!-- <sup class="subNavDot"><\/sup>-->\n <\/a>\n <\/div>\n <div class="ad_box">\n\n <\/div>\n <\/div>\n <\/div>\n <\/li><\/code><\/pre>\n data: {},\n menuList: [\n {\n menu: '\u7cbe\u9009',\n url: require('..\/assets\/images\/zuanshi.png'),\n items: [\n { text: '\u8fd0\u8425\u8bbe\u8ba1' },\n { text: '\u5305\u88c5' },\n { text: '\u52a8\u753b\/\u5f71\u89c6' },\n { text: '\u4eba\u50cf\u6444\u5f71' },\n { text: '\u5546\u4e1a\u63d2\u753b' },\n { text: '\u7535\u5546' },\n { text: 'APP \u754c\u9762' },\n { text: '\u827a\u672f\u63d2\u753b' },\n { text: '\u5bb6\u88c5\u8bbe\u8ba1' },\n { text: '\u6d77\u62a5' },\n { text: '\u6587\u7ae0' }\n ]\n },\n { menu: '\u5e73\u9762' },\n { menu: 'UI' },\n { menu: '\u7f51\u9875' },\n { menu: '\u63d2\u753b' },\n { menu: '\u52a8\u6f2b' },\n { menu: '\u6444\u5f71' },\n { menu: '\u7a7a\u95f4' },\n { menu: '\u5de5\u4e1a\/\u4ea7\u54c1' },\n { menu: '\u4e09\u7ef4' },\n { menu: '\u5f71\u89c6' },\n { menu: '\u624b\u5de5\u827a' },\n { menu: '\u7eaf\u827a\u672f' },\n { menu: '\u670d\u88c5' },\n { menu: '\u5176\u4ed6' }\n ],<\/code><\/pre>\n \/\/\u6e32\u67d3\u6210 html \u4e4b\u524d\u8c03\u7528,\u521d\u59cb\u5316\u4e00\u4e9b\u5c5e\u6027\u503c [\u9f20\u6807\u60ac\u6302'\u53d1\u73b0',\u5c31\u51fa\u73b0\u7b2c\u4e00\u4e2a\u7cbe\u9009\u9875\u9762]\n created () {\n this.data = this.menuList[0]\n },\n \/\/\u6e32\u67d3\u6210 html \u540e\u8c03\u7528 [\u9f20\u6807\u60ac\u6302'\u53d1\u73b0',\u7b2c\u4e00\u4e2a menu-item \u663e\u793a\u9ec4\u8272](\u9875\u9762\u5237\u65b0\u4e86\u4e4b\u540e\u7684)\n mounted () {\n this.$refs['test' + 0][0].style.backgroundColor = 'rgb(255, 242, 0)'\n },\n methods: {\n \/\/\u9f20\u6807\u8fdb\u5165\u51fd\u6570\n mleftIn (item, index) {\n \/\/\u83b7\u53d6 menuList \u4e2d\u6bcf\u4e2a menuItem \u5b57\u7b26\u4e32\u7684\u957f\u5ea6\n let menuSize = this.menuList.length\n for (let i = 0; i < menuSize; i++) {\n \/\/for \u5faa\u73af,i \u5982\u679c\u5c0f\u4e8e menuSize,\u5219\u7f6e\u4e8e menuItem \u989c\u8272\u4e3a\u7070\u8272,\u5b9e\u73b0\u5207\u6362\u6548\u679c\n this.$refs['test' + i][0].style.backgroundColor = '#f8f8f8'\n }\n \/\/\u8df3\u51fa for \u5faa\u73af,\u7531\u5de6\u4fa7\u79fb\u5411\u53f3\u4fa7\u8be6\u60c5\u9875\u65f6,\u5176 menuItem \u7684\u989c\u8272\u4e3a\u9ec4\u8272\n this.$refs['test' + index][0].style.backgroundColor = 'rgb(255, 242, 0)'\n \/\/\u5c06\u53f3\u4fa7\u6570\u636e\u8bbe\u7f6e\u4e3a item,\u663e\u793a\u6570\u636e\n this.data = item\n },\n \/\/\u9f20\u6807\u8fdb\u5165\u51fd\u6570\n \/\/\u6ce8\u610f: mouseleave:\u662f\u9f20\u6807\u79fb\u51fa\u8be5\u5143\u7d20\u4e4b\u5916,\u5219\u89e6\u53d1 mouseleave \u4e8b\u4ef6\n \/\/ mouseout : \u662f\u5f53\u6307\u9488\u79bb\u5f00\u8be5\u5143\u7d20\u53ca\u5176\u6240\u6709\u540e\u4ee3\u65f6\uff0c\u4f1a\u89e6\u53d1 mouseleave\n \/\/ \u800c\u5f53\u6307\u9488\u79bb\u5f00\u5143\u7d20\u6216\u79bb\u5f00\u5143\u7d20\u7684\u540e\u4ee3\uff08\u5373\u4f7f\u6307\u9488\u4ecd\u5728\u5143\u7d20\u5185\uff09\u65f6\uff0c\u4e5f\u4f1a\u89e6\u53d1 mouseout \u4e8b\u4ef6\n mleftLeave () {\n \/\/\u83b7\u53d6 menuList \u4e2d\u6bcf\u4e2a menuItem \u5b57\u7b26\u4e32\u7684\u957f\u5ea6\n let menuSize = this.menuList.length\n for (let i = 0; i < menuSize; i++) {\n this.$refs['test' + i][0].style.backgroundColor = '#f8f8f8'\n }\n \/\/ \u8df3\u51fa\u5faa\u73af,\u6d4f\u89c8\u5b8c'\u53d1\u73b0',\u9f20\u6807\u79fb\u51fa,\u7f6e\u4e8e\u53f3\u4fa7\u6570\u636e\u4e3a\u7b2c\u4e00\u4e2a\u7cbe\u9009\u6570\u636e\n this.data = this.menuList[0]\n \/\/\u9f20\u6807\u79fb\u51fa\u4e8b\u4ef6,\u7f6e\u4e8e\u7b2c\u4e00\u4e2a menuitem \u4e3a\u9ec4\u8272[\u672a\u5237\u65b0\u65f6\u7684\u8bbe\u7f6e]\n this.$refs['test' + 0][0].style.backgroundColor = 'rgb(255, 242, 0)'\n\n \/\/ this.data = {}\n \/\/ this.$refs['test'+index][0].style.backgroundColor = '#f8f8f8'\n \/\/ console.log('\u6eda\u51fa\u53bb')\n },\n}<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"\u4e0b\u8f7d\u4f9d\u8d56\u901f\u5ea6\u5feb npm install –registry=https:\/\/registry.npm.tao […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[],"class_list":["post-3462","post","type-post","status-publish","format-standard","hentry","category-web"],"_links":{"self":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/3462","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3462"}],"version-history":[{"count":38,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/3462\/revisions"}],"predecessor-version":[{"id":3558,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/3462\/revisions\/3558"}],"wp:attachment":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3462"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=3462"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=3462"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
<\/p>\n<\/p><\/noscript>\n\/deep\/ .el-input__wrapper {\n box-shadow: 0 0 0 0 inset;\n background-color: rgb(255, 242, 0);\n}<\/code><\/pre>\nel-carousel \u8d70\u9a6c\u706f\u4fee\u6539 Carousel \u5de6\u53f3\u4e24\u4fa7\u7bad\u5934\u5b57\u4f53\u5927\u5c0f<\/h3>\n\/deep\/.el-carousel__arrow i {\n font-size: 29px !important;\n }<\/code><\/pre>\n\u9875\u9762\u5411\u4e0b\u6ed1\u52a8\u5bfc\u822a\u680f\u56fa\u5b9a<\/h3>\n<\/p>\n<\/p><\/noscript>\n.main_nav_fixed {\n position: sticky;\n top: 0;\n z-index: 999;\n}<\/code><\/pre>\n\u56fa\u5b9a\u5728\u53f3\u65b9\u7684,\u60ac\u6302\u51fa\u73b0\u4e8c\u7ef4\u7801<\/h3>\n<\/p>\n<\/p><\/noscript>\n<div class="share_box">\n <img src="..\/..\/assets\/images\/share_qr.png" alt=""\/>\n <\/div><\/code><\/pre>\n.share_box{\n width: 70px;\n height: 131px;\n top: 300px;\n right: 10px;\n cursor: pointer;\n position: fixed;\n z-index: 999;\n background: url("..\/..\/assets\/images\/share_wx.jpg") no-repeat;\n background-size: 100% 100%;\n}\n.share_box img{\n width: 100px;\n height: 100px;\n display: none;\n}\n.share_box:hover img {\n position: absolute;\n top: 50%;\n margin-top: -50px;\n right: 82px;\n display: block !important;\n}<\/code><\/pre>\nnth-child(n)\u6307\u7684\u662f\u5728\u7236\u5143\u7d20\u4e2d\u6240\u6709\u7684\u5143\u7d20\u7684\u987a\u5e8f<\/h3>\n\n\u5199\u4ee3\u7801\u8981\u6839\u636e\u76d2\u5b50\u4ee5\u53ca\u5185\u5bb9\u5199<\/li>\nbottom\uff1a0\uff1b\u8981\u76f8\u5bf9\u4e8e\u7236\u5143\u7d20\u7684 height \u5b9e\u73b0\uff0c\u5982\u679c\u7236\u7236\u5143\u7d20\u7684 height \u5927\u4e8e\u7236\u5143\u7d20\u7684 height\uff0c\uff0c\u5219\u4f1a\u6309\u7167\u7236\u7236\u5143\u7d20\u7684 height \u6765\u5b9e\u73b0 bottom\uff1a0\uff1b\u6765\u5b9e\u73b0\u3002\u3010\u9002\u5f53\u5220\u9664\u7236\u7236\u5143\u7d20\u7684 height\uff0c\u4e00\u677f\u5757\u901a\u5e38\u4e0d\u7528\u8bbe\u7f6e\u603b height\u3011<\/li>\n<\/ul>\n\u60ac\u6302\u56fe\u7247\u7f13\u7f13\u653e\u5927\u7684\u52a8\u753b\u6548\u679c<\/h3>\n<\/p>\n<\/p><\/noscript>\n.gc_project .item_img > img {\n width: 100%;\n height: 100%;\n transition: all 0.3s;\n}\n.gc_project .item_img > img:hover {\n transform: scale(1.05);\n box-shadow: rgb(0 0 0 \/ 23%) 0 4px 14px 0;\n}<\/code><\/pre>\n\u6eda\u52a8\u6761\u4fee\u6539<\/h3>\n<\/p>\n<\/p><\/noscript>\n.mleft::-webkit-scrollbar{\n width: 6px;\n background-color: #f8f8f8;\n\n}\n.mleft::-webkit-scrollbar-thumb{\n width: 6px;\n background-color: #adacac;\n border-radius: 4px;\n}<\/code><\/pre>\nhead \u533a '\u53d1\u73b0' \u5b9e\u73b0\u4ea4\u4e92\u6548\u679c [\u8be5\u9996\u9875\u6700\u607c\u706b\u7684]<\/h2>\n<\/p>\n<\/p><\/noscript>\ntodo head \u533a'\u53d1\u73b0'\u4ea4\u4e92\u5b9e\u73b0\u601d\u8def:<\/h3>\n\n\u2460\u89c2\u5bdf\u8be5\u533a\u7ed3\u6784,\u4e00\u4e2a\u5927\u6a21\u5757,\u5176\u4e2d\u5206\u4e3a\u5de6\u4e2d\u53f3\u4e09\u4e2a\u6a21\u5757,\u5e76\u4f9d\u6b21\u5199\u51fa\u4e09\u4e2a\u6a21\u5757\u7684\u4ee3\u7801,<\/li>\n\u2461\u5de6\u4fa7\u533a\u57df: \u8981\u5c55\u793a\u7684\u6548\u679c\u6709: \u9f20\u6807\u4e0a\u4e0b\u79fb\u52a8,\u6240\u7ecf\u7684 menuItem \u4f1a\u5c55\u73b0\u9ec4\u8272\u80cc\u666f, \u5219\u5f15\u7528 vue \u7684 ref \u5c5e\u6027\u5bf9 DOM \u5143\u7d20\u8fdb\u884c\u52a8\u6001\u7ed1\u5b9a.\n\n\u6ce8\u610f:ref \u9700\u8981\u5728 dom \u6e32\u67d3\u5b8c\u6210\u540e\u624d\u4f1a\u6709,\u5728\u4f7f\u7528\u7684\u65f6\u5019\u786e\u4fdd dom \u5df2\u7ecf\u6e32\u67d3\u5b8c\u6210, \u6bd4\u5982\u5728\u751f\u547d\u5468\u671f mounted(){}\u94a9\u5b50\u4e2d\u8c03\u7528. this.$refs.xxx:\u51cf\u5c11\u83b7\u53d6 dom \u8282\u70b9\u7684\u6d88\u8017<\/li>\n<\/ul>\n<\/li>\n\u2462\u5de6\u4fa7\u533a\u57df\u8fc7\u6ee4\u5230\u53f3\u4fa7\u533a\u57df,\u5c55\u793a\u5bf9\u5e94\u7684\u8be6\u60c5\u9875: mleftIn(item,index)\u51fd\u6570\u901a\u8fc7\u4f20\u8f93 v-for \u5faa\u73af\u4e2d\u6570\u7ec4 menuList \u7684 item \u6bcf\u4e00\u9879\u4e3a\u5a92\u4ecb, \u800c\u6570\u636e\u4e2d menuList \u4e2d\u5305\u542b\u5de6\u4fa7\u6570\u636e menuItem \u4e0e\u53f3\u4fa7\u6bcf\u4e00\u9875\u7684\u6807\u9898 menu \u76f8\u540c, \u4ece\u800c\u5c06\u5de6\u4fa7\u548c\u53f3\u4fa7\u6570\u636e\u7ed1\u5b9a, \u6545\u800c\u5f62\u6210\u4ece\u5de6\u4fa7\u8fc7\u6ee4\u5230\u53f3\u4fa7\u533a\u57df\u662f\u56fa\u5b9a\u7684\u8be6\u60c5\u9875\u5185\u5bb9.<\/li>\n\u2463\u9875\u9762\u7b2c\u4e8c\u6b21\u672a\u5237\u65b0\u4e4b\u524d(\u9996\u6b21\u8fdb\u5165\u9875\u9762\u6e32\u67d3), \u9f20\u6807\u60ac\u6302'\u53d1\u73b0',\u8981\u51fa\u73b0\u7b2c\u4e00\u4e2a'\u7cbe\u9009'\u8be6\u60c5\u9875\u53ca'\u7cbe\u9009'item \u80cc\u666f\u53d8\u9ec4: \u9f20\u6807\u79fb\u51fa\u8be5\u5143\u7d20[\u4e8c\u7ea7\u76ee\u5f55\u6574\u4e2a\u5927\u6a21\u5757]\u4e4b\u5916,\u5219\u89e6\u53d1 mouseleave \u4e8b\u4ef6,\u521d\u59cb\u5316\u6570\u636e.<\/li>\n\u2464\u7b2c\u4e8c\u6b21\u9875\u9762\u5237\u65b0\u4e4b\u540e,\u521d\u59cb\u5316\u6570\u636e: \u91c7\u7528 mounted \u751f\u547d\u5468\u671f[\u6e32\u67d3\u6210 html \u540e\u8c03\u7528]: \u4f7f\u9f20\u6807\u60ac\u6302'\u53d1\u73b0',\u7b2c\u4e00\u4e2a menu-item \u663e\u793a\u9ec4\u8272<\/li>\n<\/ul>\n <li class="find">\n <a href="#">\u53d1\u73b0<\/a>\n <div class="h_menu" @mouseleave="mleftLeave()">\n <div class="menu_box mleft">\n <!-- <a href="">\u7cbe\u9009<\/a>-->\n <a v-for="(item,index) in menuList" :key="index" :ref="'test'+index" href="javascript:;"\n @mouseover="mleftIn(item,index)">{{ item.menu }}<\/a>\n <!-- <el-cascader-panel :options="findOptions" :props="props" \/>-->\n <\/div>\n <div class="mright">\n <div class="cate-box">\n <a class="cate-title" href="">\n <img :src="data.url" alt="">\n <span>{{ data.menu }}<\/span>\n <\/a>\n <div class="subCate">\n <a v-for="(itemOne) in data.items" :key="itemOne">{{ itemOne.text }}<\/a>\n <\/div>\n <\/div>\n <\/div>\n <div class="right_bar">\n <div class="icons">\n <a>\n <span class="icon-box">\n <span class="tangle-1"><\/span>\n <span class="tangle-2"><\/span>\n <i class="ani-star"><\/i>\n <span class="tangle-3"><\/span>\n <\/span>\n <span class="icon-text">\u6536\u85cf\u5939<\/span>\n <\/a>\n <a>\n <img alt="" src="..\/assets\/images\/icon-header-discover-designer.png">\n <span>\u8bbe\u8ba1\u5e08<\/span>\n <\/a>\n <a>\n <img alt="" src="..\/assets\/images\/icon-header-discover-focus.png">\n <span>\u699c\u5355<\/span>\n <!-- <sup class="subNavDot"><\/sup>-->\n <\/a>\n <\/div>\n <div class="ad_box">\n\n <\/div>\n <\/div>\n <\/div>\n <\/li><\/code><\/pre>\n data: {},\n menuList: [\n {\n menu: '\u7cbe\u9009',\n url: require('..\/assets\/images\/zuanshi.png'),\n items: [\n { text: '\u8fd0\u8425\u8bbe\u8ba1' },\n { text: '\u5305\u88c5' },\n { text: '\u52a8\u753b\/\u5f71\u89c6' },\n { text: '\u4eba\u50cf\u6444\u5f71' },\n { text: '\u5546\u4e1a\u63d2\u753b' },\n { text: '\u7535\u5546' },\n { text: 'APP \u754c\u9762' },\n { text: '\u827a\u672f\u63d2\u753b' },\n { text: '\u5bb6\u88c5\u8bbe\u8ba1' },\n { text: '\u6d77\u62a5' },\n { text: '\u6587\u7ae0' }\n ]\n },\n { menu: '\u5e73\u9762' },\n { menu: 'UI' },\n { menu: '\u7f51\u9875' },\n { menu: '\u63d2\u753b' },\n { menu: '\u52a8\u6f2b' },\n { menu: '\u6444\u5f71' },\n { menu: '\u7a7a\u95f4' },\n { menu: '\u5de5\u4e1a\/\u4ea7\u54c1' },\n { menu: '\u4e09\u7ef4' },\n { menu: '\u5f71\u89c6' },\n { menu: '\u624b\u5de5\u827a' },\n { menu: '\u7eaf\u827a\u672f' },\n { menu: '\u670d\u88c5' },\n { menu: '\u5176\u4ed6' }\n ],<\/code><\/pre>\n \/\/\u6e32\u67d3\u6210 html \u4e4b\u524d\u8c03\u7528,\u521d\u59cb\u5316\u4e00\u4e9b\u5c5e\u6027\u503c [\u9f20\u6807\u60ac\u6302'\u53d1\u73b0',\u5c31\u51fa\u73b0\u7b2c\u4e00\u4e2a\u7cbe\u9009\u9875\u9762]\n created () {\n this.data = this.menuList[0]\n },\n \/\/\u6e32\u67d3\u6210 html \u540e\u8c03\u7528 [\u9f20\u6807\u60ac\u6302'\u53d1\u73b0',\u7b2c\u4e00\u4e2a menu-item \u663e\u793a\u9ec4\u8272](\u9875\u9762\u5237\u65b0\u4e86\u4e4b\u540e\u7684)\n mounted () {\n this.$refs['test' + 0][0].style.backgroundColor = 'rgb(255, 242, 0)'\n },\n methods: {\n \/\/\u9f20\u6807\u8fdb\u5165\u51fd\u6570\n mleftIn (item, index) {\n \/\/\u83b7\u53d6 menuList \u4e2d\u6bcf\u4e2a menuItem \u5b57\u7b26\u4e32\u7684\u957f\u5ea6\n let menuSize = this.menuList.length\n for (let i = 0; i < menuSize; i++) {\n \/\/for \u5faa\u73af,i \u5982\u679c\u5c0f\u4e8e menuSize,\u5219\u7f6e\u4e8e menuItem \u989c\u8272\u4e3a\u7070\u8272,\u5b9e\u73b0\u5207\u6362\u6548\u679c\n this.$refs['test' + i][0].style.backgroundColor = '#f8f8f8'\n }\n \/\/\u8df3\u51fa for \u5faa\u73af,\u7531\u5de6\u4fa7\u79fb\u5411\u53f3\u4fa7\u8be6\u60c5\u9875\u65f6,\u5176 menuItem \u7684\u989c\u8272\u4e3a\u9ec4\u8272\n this.$refs['test' + index][0].style.backgroundColor = 'rgb(255, 242, 0)'\n \/\/\u5c06\u53f3\u4fa7\u6570\u636e\u8bbe\u7f6e\u4e3a item,\u663e\u793a\u6570\u636e\n this.data = item\n },\n \/\/\u9f20\u6807\u8fdb\u5165\u51fd\u6570\n \/\/\u6ce8\u610f: mouseleave:\u662f\u9f20\u6807\u79fb\u51fa\u8be5\u5143\u7d20\u4e4b\u5916,\u5219\u89e6\u53d1 mouseleave \u4e8b\u4ef6\n \/\/ mouseout : \u662f\u5f53\u6307\u9488\u79bb\u5f00\u8be5\u5143\u7d20\u53ca\u5176\u6240\u6709\u540e\u4ee3\u65f6\uff0c\u4f1a\u89e6\u53d1 mouseleave\n \/\/ \u800c\u5f53\u6307\u9488\u79bb\u5f00\u5143\u7d20\u6216\u79bb\u5f00\u5143\u7d20\u7684\u540e\u4ee3\uff08\u5373\u4f7f\u6307\u9488\u4ecd\u5728\u5143\u7d20\u5185\uff09\u65f6\uff0c\u4e5f\u4f1a\u89e6\u53d1 mouseout \u4e8b\u4ef6\n mleftLeave () {\n \/\/\u83b7\u53d6 menuList \u4e2d\u6bcf\u4e2a menuItem \u5b57\u7b26\u4e32\u7684\u957f\u5ea6\n let menuSize = this.menuList.length\n for (let i = 0; i < menuSize; i++) {\n this.$refs['test' + i][0].style.backgroundColor = '#f8f8f8'\n }\n \/\/ \u8df3\u51fa\u5faa\u73af,\u6d4f\u89c8\u5b8c'\u53d1\u73b0',\u9f20\u6807\u79fb\u51fa,\u7f6e\u4e8e\u53f3\u4fa7\u6570\u636e\u4e3a\u7b2c\u4e00\u4e2a\u7cbe\u9009\u6570\u636e\n this.data = this.menuList[0]\n \/\/\u9f20\u6807\u79fb\u51fa\u4e8b\u4ef6,\u7f6e\u4e8e\u7b2c\u4e00\u4e2a menuitem \u4e3a\u9ec4\u8272[\u672a\u5237\u65b0\u65f6\u7684\u8bbe\u7f6e]\n this.$refs['test' + 0][0].style.backgroundColor = 'rgb(255, 242, 0)'\n\n \/\/ this.data = {}\n \/\/ this.$refs['test'+index][0].style.backgroundColor = '#f8f8f8'\n \/\/ console.log('\u6eda\u51fa\u53bb')\n },\n}<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"\u4e0b\u8f7d\u4f9d\u8d56\u901f\u5ea6\u5feb npm install –registry=https:\/\/registry.npm.tao […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[],"class_list":["post-3462","post","type-post","status-publish","format-standard","hentry","category-web"],"_links":{"self":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/3462","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3462"}],"version-history":[{"count":38,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/3462\/revisions"}],"predecessor-version":[{"id":3558,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/3462\/revisions\/3558"}],"wp:attachment":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3462"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=3462"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=3462"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
\/deep\/ .el-input__wrapper {\n box-shadow: 0 0 0 0 inset;\n background-color: rgb(255, 242, 0);\n}<\/code><\/pre>\nel-carousel \u8d70\u9a6c\u706f\u4fee\u6539 Carousel \u5de6\u53f3\u4e24\u4fa7\u7bad\u5934\u5b57\u4f53\u5927\u5c0f<\/h3>\n\/deep\/.el-carousel__arrow i {\n font-size: 29px !important;\n }<\/code><\/pre>\n\u9875\u9762\u5411\u4e0b\u6ed1\u52a8\u5bfc\u822a\u680f\u56fa\u5b9a<\/h3>\n<\/p>\n<\/p><\/noscript>\n.main_nav_fixed {\n position: sticky;\n top: 0;\n z-index: 999;\n}<\/code><\/pre>\n\u56fa\u5b9a\u5728\u53f3\u65b9\u7684,\u60ac\u6302\u51fa\u73b0\u4e8c\u7ef4\u7801<\/h3>\n<\/p>\n<\/p><\/noscript>\n<div class="share_box">\n <img src="..\/..\/assets\/images\/share_qr.png" alt=""\/>\n <\/div><\/code><\/pre>\n.share_box{\n width: 70px;\n height: 131px;\n top: 300px;\n right: 10px;\n cursor: pointer;\n position: fixed;\n z-index: 999;\n background: url("..\/..\/assets\/images\/share_wx.jpg") no-repeat;\n background-size: 100% 100%;\n}\n.share_box img{\n width: 100px;\n height: 100px;\n display: none;\n}\n.share_box:hover img {\n position: absolute;\n top: 50%;\n margin-top: -50px;\n right: 82px;\n display: block !important;\n}<\/code><\/pre>\nnth-child(n)\u6307\u7684\u662f\u5728\u7236\u5143\u7d20\u4e2d\u6240\u6709\u7684\u5143\u7d20\u7684\u987a\u5e8f<\/h3>\n\n\u5199\u4ee3\u7801\u8981\u6839\u636e\u76d2\u5b50\u4ee5\u53ca\u5185\u5bb9\u5199<\/li>\nbottom\uff1a0\uff1b\u8981\u76f8\u5bf9\u4e8e\u7236\u5143\u7d20\u7684 height \u5b9e\u73b0\uff0c\u5982\u679c\u7236\u7236\u5143\u7d20\u7684 height \u5927\u4e8e\u7236\u5143\u7d20\u7684 height\uff0c\uff0c\u5219\u4f1a\u6309\u7167\u7236\u7236\u5143\u7d20\u7684 height \u6765\u5b9e\u73b0 bottom\uff1a0\uff1b\u6765\u5b9e\u73b0\u3002\u3010\u9002\u5f53\u5220\u9664\u7236\u7236\u5143\u7d20\u7684 height\uff0c\u4e00\u677f\u5757\u901a\u5e38\u4e0d\u7528\u8bbe\u7f6e\u603b height\u3011<\/li>\n<\/ul>\n\u60ac\u6302\u56fe\u7247\u7f13\u7f13\u653e\u5927\u7684\u52a8\u753b\u6548\u679c<\/h3>\n<\/p>\n<\/p><\/noscript>\n.gc_project .item_img > img {\n width: 100%;\n height: 100%;\n transition: all 0.3s;\n}\n.gc_project .item_img > img:hover {\n transform: scale(1.05);\n box-shadow: rgb(0 0 0 \/ 23%) 0 4px 14px 0;\n}<\/code><\/pre>\n\u6eda\u52a8\u6761\u4fee\u6539<\/h3>\n<\/p>\n<\/p><\/noscript>\n.mleft::-webkit-scrollbar{\n width: 6px;\n background-color: #f8f8f8;\n\n}\n.mleft::-webkit-scrollbar-thumb{\n width: 6px;\n background-color: #adacac;\n border-radius: 4px;\n}<\/code><\/pre>\nhead \u533a '\u53d1\u73b0' \u5b9e\u73b0\u4ea4\u4e92\u6548\u679c [\u8be5\u9996\u9875\u6700\u607c\u706b\u7684]<\/h2>\n<\/p>\n<\/p><\/noscript>\ntodo head \u533a'\u53d1\u73b0'\u4ea4\u4e92\u5b9e\u73b0\u601d\u8def:<\/h3>\n\n\u2460\u89c2\u5bdf\u8be5\u533a\u7ed3\u6784,\u4e00\u4e2a\u5927\u6a21\u5757,\u5176\u4e2d\u5206\u4e3a\u5de6\u4e2d\u53f3\u4e09\u4e2a\u6a21\u5757,\u5e76\u4f9d\u6b21\u5199\u51fa\u4e09\u4e2a\u6a21\u5757\u7684\u4ee3\u7801,<\/li>\n\u2461\u5de6\u4fa7\u533a\u57df: \u8981\u5c55\u793a\u7684\u6548\u679c\u6709: \u9f20\u6807\u4e0a\u4e0b\u79fb\u52a8,\u6240\u7ecf\u7684 menuItem \u4f1a\u5c55\u73b0\u9ec4\u8272\u80cc\u666f, \u5219\u5f15\u7528 vue \u7684 ref \u5c5e\u6027\u5bf9 DOM \u5143\u7d20\u8fdb\u884c\u52a8\u6001\u7ed1\u5b9a.\n\n\u6ce8\u610f:ref \u9700\u8981\u5728 dom \u6e32\u67d3\u5b8c\u6210\u540e\u624d\u4f1a\u6709,\u5728\u4f7f\u7528\u7684\u65f6\u5019\u786e\u4fdd dom \u5df2\u7ecf\u6e32\u67d3\u5b8c\u6210, \u6bd4\u5982\u5728\u751f\u547d\u5468\u671f mounted(){}\u94a9\u5b50\u4e2d\u8c03\u7528. this.$refs.xxx:\u51cf\u5c11\u83b7\u53d6 dom \u8282\u70b9\u7684\u6d88\u8017<\/li>\n<\/ul>\n<\/li>\n\u2462\u5de6\u4fa7\u533a\u57df\u8fc7\u6ee4\u5230\u53f3\u4fa7\u533a\u57df,\u5c55\u793a\u5bf9\u5e94\u7684\u8be6\u60c5\u9875: mleftIn(item,index)\u51fd\u6570\u901a\u8fc7\u4f20\u8f93 v-for \u5faa\u73af\u4e2d\u6570\u7ec4 menuList \u7684 item \u6bcf\u4e00\u9879\u4e3a\u5a92\u4ecb, \u800c\u6570\u636e\u4e2d menuList \u4e2d\u5305\u542b\u5de6\u4fa7\u6570\u636e menuItem \u4e0e\u53f3\u4fa7\u6bcf\u4e00\u9875\u7684\u6807\u9898 menu \u76f8\u540c, \u4ece\u800c\u5c06\u5de6\u4fa7\u548c\u53f3\u4fa7\u6570\u636e\u7ed1\u5b9a, \u6545\u800c\u5f62\u6210\u4ece\u5de6\u4fa7\u8fc7\u6ee4\u5230\u53f3\u4fa7\u533a\u57df\u662f\u56fa\u5b9a\u7684\u8be6\u60c5\u9875\u5185\u5bb9.<\/li>\n\u2463\u9875\u9762\u7b2c\u4e8c\u6b21\u672a\u5237\u65b0\u4e4b\u524d(\u9996\u6b21\u8fdb\u5165\u9875\u9762\u6e32\u67d3), \u9f20\u6807\u60ac\u6302'\u53d1\u73b0',\u8981\u51fa\u73b0\u7b2c\u4e00\u4e2a'\u7cbe\u9009'\u8be6\u60c5\u9875\u53ca'\u7cbe\u9009'item \u80cc\u666f\u53d8\u9ec4: \u9f20\u6807\u79fb\u51fa\u8be5\u5143\u7d20[\u4e8c\u7ea7\u76ee\u5f55\u6574\u4e2a\u5927\u6a21\u5757]\u4e4b\u5916,\u5219\u89e6\u53d1 mouseleave \u4e8b\u4ef6,\u521d\u59cb\u5316\u6570\u636e.<\/li>\n\u2464\u7b2c\u4e8c\u6b21\u9875\u9762\u5237\u65b0\u4e4b\u540e,\u521d\u59cb\u5316\u6570\u636e: \u91c7\u7528 mounted \u751f\u547d\u5468\u671f[\u6e32\u67d3\u6210 html \u540e\u8c03\u7528]: \u4f7f\u9f20\u6807\u60ac\u6302'\u53d1\u73b0',\u7b2c\u4e00\u4e2a menu-item \u663e\u793a\u9ec4\u8272<\/li>\n<\/ul>\n <li class="find">\n <a href="#">\u53d1\u73b0<\/a>\n <div class="h_menu" @mouseleave="mleftLeave()">\n <div class="menu_box mleft">\n <!-- <a href="">\u7cbe\u9009<\/a>-->\n <a v-for="(item,index) in menuList" :key="index" :ref="'test'+index" href="javascript:;"\n @mouseover="mleftIn(item,index)">{{ item.menu }}<\/a>\n <!-- <el-cascader-panel :options="findOptions" :props="props" \/>-->\n <\/div>\n <div class="mright">\n <div class="cate-box">\n <a class="cate-title" href="">\n <img :src="data.url" alt="">\n <span>{{ data.menu }}<\/span>\n <\/a>\n <div class="subCate">\n <a v-for="(itemOne) in data.items" :key="itemOne">{{ itemOne.text }}<\/a>\n <\/div>\n <\/div>\n <\/div>\n <div class="right_bar">\n <div class="icons">\n <a>\n <span class="icon-box">\n <span class="tangle-1"><\/span>\n <span class="tangle-2"><\/span>\n <i class="ani-star"><\/i>\n <span class="tangle-3"><\/span>\n <\/span>\n <span class="icon-text">\u6536\u85cf\u5939<\/span>\n <\/a>\n <a>\n <img alt="" src="..\/assets\/images\/icon-header-discover-designer.png">\n <span>\u8bbe\u8ba1\u5e08<\/span>\n <\/a>\n <a>\n <img alt="" src="..\/assets\/images\/icon-header-discover-focus.png">\n <span>\u699c\u5355<\/span>\n <!-- <sup class="subNavDot"><\/sup>-->\n <\/a>\n <\/div>\n <div class="ad_box">\n\n <\/div>\n <\/div>\n <\/div>\n <\/li><\/code><\/pre>\n data: {},\n menuList: [\n {\n menu: '\u7cbe\u9009',\n url: require('..\/assets\/images\/zuanshi.png'),\n items: [\n { text: '\u8fd0\u8425\u8bbe\u8ba1' },\n { text: '\u5305\u88c5' },\n { text: '\u52a8\u753b\/\u5f71\u89c6' },\n { text: '\u4eba\u50cf\u6444\u5f71' },\n { text: '\u5546\u4e1a\u63d2\u753b' },\n { text: '\u7535\u5546' },\n { text: 'APP \u754c\u9762' },\n { text: '\u827a\u672f\u63d2\u753b' },\n { text: '\u5bb6\u88c5\u8bbe\u8ba1' },\n { text: '\u6d77\u62a5' },\n { text: '\u6587\u7ae0' }\n ]\n },\n { menu: '\u5e73\u9762' },\n { menu: 'UI' },\n { menu: '\u7f51\u9875' },\n { menu: '\u63d2\u753b' },\n { menu: '\u52a8\u6f2b' },\n { menu: '\u6444\u5f71' },\n { menu: '\u7a7a\u95f4' },\n { menu: '\u5de5\u4e1a\/\u4ea7\u54c1' },\n { menu: '\u4e09\u7ef4' },\n { menu: '\u5f71\u89c6' },\n { menu: '\u624b\u5de5\u827a' },\n { menu: '\u7eaf\u827a\u672f' },\n { menu: '\u670d\u88c5' },\n { menu: '\u5176\u4ed6' }\n ],<\/code><\/pre>\n \/\/\u6e32\u67d3\u6210 html \u4e4b\u524d\u8c03\u7528,\u521d\u59cb\u5316\u4e00\u4e9b\u5c5e\u6027\u503c [\u9f20\u6807\u60ac\u6302'\u53d1\u73b0',\u5c31\u51fa\u73b0\u7b2c\u4e00\u4e2a\u7cbe\u9009\u9875\u9762]\n created () {\n this.data = this.menuList[0]\n },\n \/\/\u6e32\u67d3\u6210 html \u540e\u8c03\u7528 [\u9f20\u6807\u60ac\u6302'\u53d1\u73b0',\u7b2c\u4e00\u4e2a menu-item \u663e\u793a\u9ec4\u8272](\u9875\u9762\u5237\u65b0\u4e86\u4e4b\u540e\u7684)\n mounted () {\n this.$refs['test' + 0][0].style.backgroundColor = 'rgb(255, 242, 0)'\n },\n methods: {\n \/\/\u9f20\u6807\u8fdb\u5165\u51fd\u6570\n mleftIn (item, index) {\n \/\/\u83b7\u53d6 menuList \u4e2d\u6bcf\u4e2a menuItem \u5b57\u7b26\u4e32\u7684\u957f\u5ea6\n let menuSize = this.menuList.length\n for (let i = 0; i < menuSize; i++) {\n \/\/for \u5faa\u73af,i \u5982\u679c\u5c0f\u4e8e menuSize,\u5219\u7f6e\u4e8e menuItem \u989c\u8272\u4e3a\u7070\u8272,\u5b9e\u73b0\u5207\u6362\u6548\u679c\n this.$refs['test' + i][0].style.backgroundColor = '#f8f8f8'\n }\n \/\/\u8df3\u51fa for \u5faa\u73af,\u7531\u5de6\u4fa7\u79fb\u5411\u53f3\u4fa7\u8be6\u60c5\u9875\u65f6,\u5176 menuItem \u7684\u989c\u8272\u4e3a\u9ec4\u8272\n this.$refs['test' + index][0].style.backgroundColor = 'rgb(255, 242, 0)'\n \/\/\u5c06\u53f3\u4fa7\u6570\u636e\u8bbe\u7f6e\u4e3a item,\u663e\u793a\u6570\u636e\n this.data = item\n },\n \/\/\u9f20\u6807\u8fdb\u5165\u51fd\u6570\n \/\/\u6ce8\u610f: mouseleave:\u662f\u9f20\u6807\u79fb\u51fa\u8be5\u5143\u7d20\u4e4b\u5916,\u5219\u89e6\u53d1 mouseleave \u4e8b\u4ef6\n \/\/ mouseout : \u662f\u5f53\u6307\u9488\u79bb\u5f00\u8be5\u5143\u7d20\u53ca\u5176\u6240\u6709\u540e\u4ee3\u65f6\uff0c\u4f1a\u89e6\u53d1 mouseleave\n \/\/ \u800c\u5f53\u6307\u9488\u79bb\u5f00\u5143\u7d20\u6216\u79bb\u5f00\u5143\u7d20\u7684\u540e\u4ee3\uff08\u5373\u4f7f\u6307\u9488\u4ecd\u5728\u5143\u7d20\u5185\uff09\u65f6\uff0c\u4e5f\u4f1a\u89e6\u53d1 mouseout \u4e8b\u4ef6\n mleftLeave () {\n \/\/\u83b7\u53d6 menuList \u4e2d\u6bcf\u4e2a menuItem \u5b57\u7b26\u4e32\u7684\u957f\u5ea6\n let menuSize = this.menuList.length\n for (let i = 0; i < menuSize; i++) {\n this.$refs['test' + i][0].style.backgroundColor = '#f8f8f8'\n }\n \/\/ \u8df3\u51fa\u5faa\u73af,\u6d4f\u89c8\u5b8c'\u53d1\u73b0',\u9f20\u6807\u79fb\u51fa,\u7f6e\u4e8e\u53f3\u4fa7\u6570\u636e\u4e3a\u7b2c\u4e00\u4e2a\u7cbe\u9009\u6570\u636e\n this.data = this.menuList[0]\n \/\/\u9f20\u6807\u79fb\u51fa\u4e8b\u4ef6,\u7f6e\u4e8e\u7b2c\u4e00\u4e2a menuitem \u4e3a\u9ec4\u8272[\u672a\u5237\u65b0\u65f6\u7684\u8bbe\u7f6e]\n this.$refs['test' + 0][0].style.backgroundColor = 'rgb(255, 242, 0)'\n\n \/\/ this.data = {}\n \/\/ this.$refs['test'+index][0].style.backgroundColor = '#f8f8f8'\n \/\/ console.log('\u6eda\u51fa\u53bb')\n },\n}<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"\u4e0b\u8f7d\u4f9d\u8d56\u901f\u5ea6\u5feb npm install –registry=https:\/\/registry.npm.tao […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[],"class_list":["post-3462","post","type-post","status-publish","format-standard","hentry","category-web"],"_links":{"self":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/3462","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3462"}],"version-history":[{"count":38,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/3462\/revisions"}],"predecessor-version":[{"id":3558,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/3462\/revisions\/3558"}],"wp:attachment":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3462"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=3462"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=3462"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
\/deep\/.el-carousel__arrow i {\n font-size: 29px !important;\n }<\/code><\/pre>\n\u9875\u9762\u5411\u4e0b\u6ed1\u52a8\u5bfc\u822a\u680f\u56fa\u5b9a<\/h3>\n<\/p>\n<\/p><\/noscript>\n.main_nav_fixed {\n position: sticky;\n top: 0;\n z-index: 999;\n}<\/code><\/pre>\n\u56fa\u5b9a\u5728\u53f3\u65b9\u7684,\u60ac\u6302\u51fa\u73b0\u4e8c\u7ef4\u7801<\/h3>\n<\/p>\n<\/p><\/noscript>\n<div class="share_box">\n <img src="..\/..\/assets\/images\/share_qr.png" alt=""\/>\n <\/div><\/code><\/pre>\n.share_box{\n width: 70px;\n height: 131px;\n top: 300px;\n right: 10px;\n cursor: pointer;\n position: fixed;\n z-index: 999;\n background: url("..\/..\/assets\/images\/share_wx.jpg") no-repeat;\n background-size: 100% 100%;\n}\n.share_box img{\n width: 100px;\n height: 100px;\n display: none;\n}\n.share_box:hover img {\n position: absolute;\n top: 50%;\n margin-top: -50px;\n right: 82px;\n display: block !important;\n}<\/code><\/pre>\nnth-child(n)\u6307\u7684\u662f\u5728\u7236\u5143\u7d20\u4e2d\u6240\u6709\u7684\u5143\u7d20\u7684\u987a\u5e8f<\/h3>\n\n\u5199\u4ee3\u7801\u8981\u6839\u636e\u76d2\u5b50\u4ee5\u53ca\u5185\u5bb9\u5199<\/li>\nbottom\uff1a0\uff1b\u8981\u76f8\u5bf9\u4e8e\u7236\u5143\u7d20\u7684 height \u5b9e\u73b0\uff0c\u5982\u679c\u7236\u7236\u5143\u7d20\u7684 height \u5927\u4e8e\u7236\u5143\u7d20\u7684 height\uff0c\uff0c\u5219\u4f1a\u6309\u7167\u7236\u7236\u5143\u7d20\u7684 height \u6765\u5b9e\u73b0 bottom\uff1a0\uff1b\u6765\u5b9e\u73b0\u3002\u3010\u9002\u5f53\u5220\u9664\u7236\u7236\u5143\u7d20\u7684 height\uff0c\u4e00\u677f\u5757\u901a\u5e38\u4e0d\u7528\u8bbe\u7f6e\u603b height\u3011<\/li>\n<\/ul>\n\u60ac\u6302\u56fe\u7247\u7f13\u7f13\u653e\u5927\u7684\u52a8\u753b\u6548\u679c<\/h3>\n<\/p>\n<\/p><\/noscript>\n.gc_project .item_img > img {\n width: 100%;\n height: 100%;\n transition: all 0.3s;\n}\n.gc_project .item_img > img:hover {\n transform: scale(1.05);\n box-shadow: rgb(0 0 0 \/ 23%) 0 4px 14px 0;\n}<\/code><\/pre>\n\u6eda\u52a8\u6761\u4fee\u6539<\/h3>\n<\/p>\n<\/p><\/noscript>\n.mleft::-webkit-scrollbar{\n width: 6px;\n background-color: #f8f8f8;\n\n}\n.mleft::-webkit-scrollbar-thumb{\n width: 6px;\n background-color: #adacac;\n border-radius: 4px;\n}<\/code><\/pre>\nhead \u533a '\u53d1\u73b0' \u5b9e\u73b0\u4ea4\u4e92\u6548\u679c [\u8be5\u9996\u9875\u6700\u607c\u706b\u7684]<\/h2>\n<\/p>\n<\/p><\/noscript>\ntodo head \u533a'\u53d1\u73b0'\u4ea4\u4e92\u5b9e\u73b0\u601d\u8def:<\/h3>\n\n\u2460\u89c2\u5bdf\u8be5\u533a\u7ed3\u6784,\u4e00\u4e2a\u5927\u6a21\u5757,\u5176\u4e2d\u5206\u4e3a\u5de6\u4e2d\u53f3\u4e09\u4e2a\u6a21\u5757,\u5e76\u4f9d\u6b21\u5199\u51fa\u4e09\u4e2a\u6a21\u5757\u7684\u4ee3\u7801,<\/li>\n\u2461\u5de6\u4fa7\u533a\u57df: \u8981\u5c55\u793a\u7684\u6548\u679c\u6709: \u9f20\u6807\u4e0a\u4e0b\u79fb\u52a8,\u6240\u7ecf\u7684 menuItem \u4f1a\u5c55\u73b0\u9ec4\u8272\u80cc\u666f, \u5219\u5f15\u7528 vue \u7684 ref \u5c5e\u6027\u5bf9 DOM \u5143\u7d20\u8fdb\u884c\u52a8\u6001\u7ed1\u5b9a.\n\n\u6ce8\u610f:ref \u9700\u8981\u5728 dom \u6e32\u67d3\u5b8c\u6210\u540e\u624d\u4f1a\u6709,\u5728\u4f7f\u7528\u7684\u65f6\u5019\u786e\u4fdd dom \u5df2\u7ecf\u6e32\u67d3\u5b8c\u6210, \u6bd4\u5982\u5728\u751f\u547d\u5468\u671f mounted(){}\u94a9\u5b50\u4e2d\u8c03\u7528. this.$refs.xxx:\u51cf\u5c11\u83b7\u53d6 dom \u8282\u70b9\u7684\u6d88\u8017<\/li>\n<\/ul>\n<\/li>\n\u2462\u5de6\u4fa7\u533a\u57df\u8fc7\u6ee4\u5230\u53f3\u4fa7\u533a\u57df,\u5c55\u793a\u5bf9\u5e94\u7684\u8be6\u60c5\u9875: mleftIn(item,index)\u51fd\u6570\u901a\u8fc7\u4f20\u8f93 v-for \u5faa\u73af\u4e2d\u6570\u7ec4 menuList \u7684 item \u6bcf\u4e00\u9879\u4e3a\u5a92\u4ecb, \u800c\u6570\u636e\u4e2d menuList \u4e2d\u5305\u542b\u5de6\u4fa7\u6570\u636e menuItem \u4e0e\u53f3\u4fa7\u6bcf\u4e00\u9875\u7684\u6807\u9898 menu \u76f8\u540c, \u4ece\u800c\u5c06\u5de6\u4fa7\u548c\u53f3\u4fa7\u6570\u636e\u7ed1\u5b9a, \u6545\u800c\u5f62\u6210\u4ece\u5de6\u4fa7\u8fc7\u6ee4\u5230\u53f3\u4fa7\u533a\u57df\u662f\u56fa\u5b9a\u7684\u8be6\u60c5\u9875\u5185\u5bb9.<\/li>\n\u2463\u9875\u9762\u7b2c\u4e8c\u6b21\u672a\u5237\u65b0\u4e4b\u524d(\u9996\u6b21\u8fdb\u5165\u9875\u9762\u6e32\u67d3), \u9f20\u6807\u60ac\u6302'\u53d1\u73b0',\u8981\u51fa\u73b0\u7b2c\u4e00\u4e2a'\u7cbe\u9009'\u8be6\u60c5\u9875\u53ca'\u7cbe\u9009'item \u80cc\u666f\u53d8\u9ec4: \u9f20\u6807\u79fb\u51fa\u8be5\u5143\u7d20[\u4e8c\u7ea7\u76ee\u5f55\u6574\u4e2a\u5927\u6a21\u5757]\u4e4b\u5916,\u5219\u89e6\u53d1 mouseleave \u4e8b\u4ef6,\u521d\u59cb\u5316\u6570\u636e.<\/li>\n\u2464\u7b2c\u4e8c\u6b21\u9875\u9762\u5237\u65b0\u4e4b\u540e,\u521d\u59cb\u5316\u6570\u636e: \u91c7\u7528 mounted \u751f\u547d\u5468\u671f[\u6e32\u67d3\u6210 html \u540e\u8c03\u7528]: \u4f7f\u9f20\u6807\u60ac\u6302'\u53d1\u73b0',\u7b2c\u4e00\u4e2a menu-item \u663e\u793a\u9ec4\u8272<\/li>\n<\/ul>\n <li class="find">\n <a href="#">\u53d1\u73b0<\/a>\n <div class="h_menu" @mouseleave="mleftLeave()">\n <div class="menu_box mleft">\n <!-- <a href="">\u7cbe\u9009<\/a>-->\n <a v-for="(item,index) in menuList" :key="index" :ref="'test'+index" href="javascript:;"\n @mouseover="mleftIn(item,index)">{{ item.menu }}<\/a>\n <!-- <el-cascader-panel :options="findOptions" :props="props" \/>-->\n <\/div>\n <div class="mright">\n <div class="cate-box">\n <a class="cate-title" href="">\n <img :src="data.url" alt="">\n <span>{{ data.menu }}<\/span>\n <\/a>\n <div class="subCate">\n <a v-for="(itemOne) in data.items" :key="itemOne">{{ itemOne.text }}<\/a>\n <\/div>\n <\/div>\n <\/div>\n <div class="right_bar">\n <div class="icons">\n <a>\n <span class="icon-box">\n <span class="tangle-1"><\/span>\n <span class="tangle-2"><\/span>\n <i class="ani-star"><\/i>\n <span class="tangle-3"><\/span>\n <\/span>\n <span class="icon-text">\u6536\u85cf\u5939<\/span>\n <\/a>\n <a>\n <img alt="" src="..\/assets\/images\/icon-header-discover-designer.png">\n <span>\u8bbe\u8ba1\u5e08<\/span>\n <\/a>\n <a>\n <img alt="" src="..\/assets\/images\/icon-header-discover-focus.png">\n <span>\u699c\u5355<\/span>\n <!-- <sup class="subNavDot"><\/sup>-->\n <\/a>\n <\/div>\n <div class="ad_box">\n\n <\/div>\n <\/div>\n <\/div>\n <\/li><\/code><\/pre>\n data: {},\n menuList: [\n {\n menu: '\u7cbe\u9009',\n url: require('..\/assets\/images\/zuanshi.png'),\n items: [\n { text: '\u8fd0\u8425\u8bbe\u8ba1' },\n { text: '\u5305\u88c5' },\n { text: '\u52a8\u753b\/\u5f71\u89c6' },\n { text: '\u4eba\u50cf\u6444\u5f71' },\n { text: '\u5546\u4e1a\u63d2\u753b' },\n { text: '\u7535\u5546' },\n { text: 'APP \u754c\u9762' },\n { text: '\u827a\u672f\u63d2\u753b' },\n { text: '\u5bb6\u88c5\u8bbe\u8ba1' },\n { text: '\u6d77\u62a5' },\n { text: '\u6587\u7ae0' }\n ]\n },\n { menu: '\u5e73\u9762' },\n { menu: 'UI' },\n { menu: '\u7f51\u9875' },\n { menu: '\u63d2\u753b' },\n { menu: '\u52a8\u6f2b' },\n { menu: '\u6444\u5f71' },\n { menu: '\u7a7a\u95f4' },\n { menu: '\u5de5\u4e1a\/\u4ea7\u54c1' },\n { menu: '\u4e09\u7ef4' },\n { menu: '\u5f71\u89c6' },\n { menu: '\u624b\u5de5\u827a' },\n { menu: '\u7eaf\u827a\u672f' },\n { menu: '\u670d\u88c5' },\n { menu: '\u5176\u4ed6' }\n ],<\/code><\/pre>\n \/\/\u6e32\u67d3\u6210 html \u4e4b\u524d\u8c03\u7528,\u521d\u59cb\u5316\u4e00\u4e9b\u5c5e\u6027\u503c [\u9f20\u6807\u60ac\u6302'\u53d1\u73b0',\u5c31\u51fa\u73b0\u7b2c\u4e00\u4e2a\u7cbe\u9009\u9875\u9762]\n created () {\n this.data = this.menuList[0]\n },\n \/\/\u6e32\u67d3\u6210 html \u540e\u8c03\u7528 [\u9f20\u6807\u60ac\u6302'\u53d1\u73b0',\u7b2c\u4e00\u4e2a menu-item \u663e\u793a\u9ec4\u8272](\u9875\u9762\u5237\u65b0\u4e86\u4e4b\u540e\u7684)\n mounted () {\n this.$refs['test' + 0][0].style.backgroundColor = 'rgb(255, 242, 0)'\n },\n methods: {\n \/\/\u9f20\u6807\u8fdb\u5165\u51fd\u6570\n mleftIn (item, index) {\n \/\/\u83b7\u53d6 menuList \u4e2d\u6bcf\u4e2a menuItem \u5b57\u7b26\u4e32\u7684\u957f\u5ea6\n let menuSize = this.menuList.length\n for (let i = 0; i < menuSize; i++) {\n \/\/for \u5faa\u73af,i \u5982\u679c\u5c0f\u4e8e menuSize,\u5219\u7f6e\u4e8e menuItem \u989c\u8272\u4e3a\u7070\u8272,\u5b9e\u73b0\u5207\u6362\u6548\u679c\n this.$refs['test' + i][0].style.backgroundColor = '#f8f8f8'\n }\n \/\/\u8df3\u51fa for \u5faa\u73af,\u7531\u5de6\u4fa7\u79fb\u5411\u53f3\u4fa7\u8be6\u60c5\u9875\u65f6,\u5176 menuItem \u7684\u989c\u8272\u4e3a\u9ec4\u8272\n this.$refs['test' + index][0].style.backgroundColor = 'rgb(255, 242, 0)'\n \/\/\u5c06\u53f3\u4fa7\u6570\u636e\u8bbe\u7f6e\u4e3a item,\u663e\u793a\u6570\u636e\n this.data = item\n },\n \/\/\u9f20\u6807\u8fdb\u5165\u51fd\u6570\n \/\/\u6ce8\u610f: mouseleave:\u662f\u9f20\u6807\u79fb\u51fa\u8be5\u5143\u7d20\u4e4b\u5916,\u5219\u89e6\u53d1 mouseleave \u4e8b\u4ef6\n \/\/ mouseout : \u662f\u5f53\u6307\u9488\u79bb\u5f00\u8be5\u5143\u7d20\u53ca\u5176\u6240\u6709\u540e\u4ee3\u65f6\uff0c\u4f1a\u89e6\u53d1 mouseleave\n \/\/ \u800c\u5f53\u6307\u9488\u79bb\u5f00\u5143\u7d20\u6216\u79bb\u5f00\u5143\u7d20\u7684\u540e\u4ee3\uff08\u5373\u4f7f\u6307\u9488\u4ecd\u5728\u5143\u7d20\u5185\uff09\u65f6\uff0c\u4e5f\u4f1a\u89e6\u53d1 mouseout \u4e8b\u4ef6\n mleftLeave () {\n \/\/\u83b7\u53d6 menuList \u4e2d\u6bcf\u4e2a menuItem \u5b57\u7b26\u4e32\u7684\u957f\u5ea6\n let menuSize = this.menuList.length\n for (let i = 0; i < menuSize; i++) {\n this.$refs['test' + i][0].style.backgroundColor = '#f8f8f8'\n }\n \/\/ \u8df3\u51fa\u5faa\u73af,\u6d4f\u89c8\u5b8c'\u53d1\u73b0',\u9f20\u6807\u79fb\u51fa,\u7f6e\u4e8e\u53f3\u4fa7\u6570\u636e\u4e3a\u7b2c\u4e00\u4e2a\u7cbe\u9009\u6570\u636e\n this.data = this.menuList[0]\n \/\/\u9f20\u6807\u79fb\u51fa\u4e8b\u4ef6,\u7f6e\u4e8e\u7b2c\u4e00\u4e2a menuitem \u4e3a\u9ec4\u8272[\u672a\u5237\u65b0\u65f6\u7684\u8bbe\u7f6e]\n this.$refs['test' + 0][0].style.backgroundColor = 'rgb(255, 242, 0)'\n\n \/\/ this.data = {}\n \/\/ this.$refs['test'+index][0].style.backgroundColor = '#f8f8f8'\n \/\/ console.log('\u6eda\u51fa\u53bb')\n },\n}<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"\u4e0b\u8f7d\u4f9d\u8d56\u901f\u5ea6\u5feb npm install –registry=https:\/\/registry.npm.tao […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[],"class_list":["post-3462","post","type-post","status-publish","format-standard","hentry","category-web"],"_links":{"self":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/3462","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3462"}],"version-history":[{"count":38,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/3462\/revisions"}],"predecessor-version":[{"id":3558,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/3462\/revisions\/3558"}],"wp:attachment":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3462"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=3462"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=3462"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
<\/p>\n<\/p><\/noscript>\n.main_nav_fixed {\n position: sticky;\n top: 0;\n z-index: 999;\n}<\/code><\/pre>\n\u56fa\u5b9a\u5728\u53f3\u65b9\u7684,\u60ac\u6302\u51fa\u73b0\u4e8c\u7ef4\u7801<\/h3>\n<\/p>\n<\/p><\/noscript>\n<div class="share_box">\n <img src="..\/..\/assets\/images\/share_qr.png" alt=""\/>\n <\/div><\/code><\/pre>\n.share_box{\n width: 70px;\n height: 131px;\n top: 300px;\n right: 10px;\n cursor: pointer;\n position: fixed;\n z-index: 999;\n background: url("..\/..\/assets\/images\/share_wx.jpg") no-repeat;\n background-size: 100% 100%;\n}\n.share_box img{\n width: 100px;\n height: 100px;\n display: none;\n}\n.share_box:hover img {\n position: absolute;\n top: 50%;\n margin-top: -50px;\n right: 82px;\n display: block !important;\n}<\/code><\/pre>\nnth-child(n)\u6307\u7684\u662f\u5728\u7236\u5143\u7d20\u4e2d\u6240\u6709\u7684\u5143\u7d20\u7684\u987a\u5e8f<\/h3>\n\n\u5199\u4ee3\u7801\u8981\u6839\u636e\u76d2\u5b50\u4ee5\u53ca\u5185\u5bb9\u5199<\/li>\nbottom\uff1a0\uff1b\u8981\u76f8\u5bf9\u4e8e\u7236\u5143\u7d20\u7684 height \u5b9e\u73b0\uff0c\u5982\u679c\u7236\u7236\u5143\u7d20\u7684 height \u5927\u4e8e\u7236\u5143\u7d20\u7684 height\uff0c\uff0c\u5219\u4f1a\u6309\u7167\u7236\u7236\u5143\u7d20\u7684 height \u6765\u5b9e\u73b0 bottom\uff1a0\uff1b\u6765\u5b9e\u73b0\u3002\u3010\u9002\u5f53\u5220\u9664\u7236\u7236\u5143\u7d20\u7684 height\uff0c\u4e00\u677f\u5757\u901a\u5e38\u4e0d\u7528\u8bbe\u7f6e\u603b height\u3011<\/li>\n<\/ul>\n\u60ac\u6302\u56fe\u7247\u7f13\u7f13\u653e\u5927\u7684\u52a8\u753b\u6548\u679c<\/h3>\n<\/p>\n<\/p><\/noscript>\n.gc_project .item_img > img {\n width: 100%;\n height: 100%;\n transition: all 0.3s;\n}\n.gc_project .item_img > img:hover {\n transform: scale(1.05);\n box-shadow: rgb(0 0 0 \/ 23%) 0 4px 14px 0;\n}<\/code><\/pre>\n\u6eda\u52a8\u6761\u4fee\u6539<\/h3>\n<\/p>\n<\/p><\/noscript>\n.mleft::-webkit-scrollbar{\n width: 6px;\n background-color: #f8f8f8;\n\n}\n.mleft::-webkit-scrollbar-thumb{\n width: 6px;\n background-color: #adacac;\n border-radius: 4px;\n}<\/code><\/pre>\nhead \u533a '\u53d1\u73b0' \u5b9e\u73b0\u4ea4\u4e92\u6548\u679c [\u8be5\u9996\u9875\u6700\u607c\u706b\u7684]<\/h2>\n<\/p>\n<\/p><\/noscript>\ntodo head \u533a'\u53d1\u73b0'\u4ea4\u4e92\u5b9e\u73b0\u601d\u8def:<\/h3>\n\n\u2460\u89c2\u5bdf\u8be5\u533a\u7ed3\u6784,\u4e00\u4e2a\u5927\u6a21\u5757,\u5176\u4e2d\u5206\u4e3a\u5de6\u4e2d\u53f3\u4e09\u4e2a\u6a21\u5757,\u5e76\u4f9d\u6b21\u5199\u51fa\u4e09\u4e2a\u6a21\u5757\u7684\u4ee3\u7801,<\/li>\n\u2461\u5de6\u4fa7\u533a\u57df: \u8981\u5c55\u793a\u7684\u6548\u679c\u6709: \u9f20\u6807\u4e0a\u4e0b\u79fb\u52a8,\u6240\u7ecf\u7684 menuItem \u4f1a\u5c55\u73b0\u9ec4\u8272\u80cc\u666f, \u5219\u5f15\u7528 vue \u7684 ref \u5c5e\u6027\u5bf9 DOM \u5143\u7d20\u8fdb\u884c\u52a8\u6001\u7ed1\u5b9a.\n\n\u6ce8\u610f:ref \u9700\u8981\u5728 dom \u6e32\u67d3\u5b8c\u6210\u540e\u624d\u4f1a\u6709,\u5728\u4f7f\u7528\u7684\u65f6\u5019\u786e\u4fdd dom \u5df2\u7ecf\u6e32\u67d3\u5b8c\u6210, \u6bd4\u5982\u5728\u751f\u547d\u5468\u671f mounted(){}\u94a9\u5b50\u4e2d\u8c03\u7528. this.$refs.xxx:\u51cf\u5c11\u83b7\u53d6 dom \u8282\u70b9\u7684\u6d88\u8017<\/li>\n<\/ul>\n<\/li>\n\u2462\u5de6\u4fa7\u533a\u57df\u8fc7\u6ee4\u5230\u53f3\u4fa7\u533a\u57df,\u5c55\u793a\u5bf9\u5e94\u7684\u8be6\u60c5\u9875: mleftIn(item,index)\u51fd\u6570\u901a\u8fc7\u4f20\u8f93 v-for \u5faa\u73af\u4e2d\u6570\u7ec4 menuList \u7684 item \u6bcf\u4e00\u9879\u4e3a\u5a92\u4ecb, \u800c\u6570\u636e\u4e2d menuList \u4e2d\u5305\u542b\u5de6\u4fa7\u6570\u636e menuItem \u4e0e\u53f3\u4fa7\u6bcf\u4e00\u9875\u7684\u6807\u9898 menu \u76f8\u540c, \u4ece\u800c\u5c06\u5de6\u4fa7\u548c\u53f3\u4fa7\u6570\u636e\u7ed1\u5b9a, \u6545\u800c\u5f62\u6210\u4ece\u5de6\u4fa7\u8fc7\u6ee4\u5230\u53f3\u4fa7\u533a\u57df\u662f\u56fa\u5b9a\u7684\u8be6\u60c5\u9875\u5185\u5bb9.<\/li>\n\u2463\u9875\u9762\u7b2c\u4e8c\u6b21\u672a\u5237\u65b0\u4e4b\u524d(\u9996\u6b21\u8fdb\u5165\u9875\u9762\u6e32\u67d3), \u9f20\u6807\u60ac\u6302'\u53d1\u73b0',\u8981\u51fa\u73b0\u7b2c\u4e00\u4e2a'\u7cbe\u9009'\u8be6\u60c5\u9875\u53ca'\u7cbe\u9009'item \u80cc\u666f\u53d8\u9ec4: \u9f20\u6807\u79fb\u51fa\u8be5\u5143\u7d20[\u4e8c\u7ea7\u76ee\u5f55\u6574\u4e2a\u5927\u6a21\u5757]\u4e4b\u5916,\u5219\u89e6\u53d1 mouseleave \u4e8b\u4ef6,\u521d\u59cb\u5316\u6570\u636e.<\/li>\n\u2464\u7b2c\u4e8c\u6b21\u9875\u9762\u5237\u65b0\u4e4b\u540e,\u521d\u59cb\u5316\u6570\u636e: \u91c7\u7528 mounted \u751f\u547d\u5468\u671f[\u6e32\u67d3\u6210 html \u540e\u8c03\u7528]: \u4f7f\u9f20\u6807\u60ac\u6302'\u53d1\u73b0',\u7b2c\u4e00\u4e2a menu-item \u663e\u793a\u9ec4\u8272<\/li>\n<\/ul>\n <li class="find">\n <a href="#">\u53d1\u73b0<\/a>\n <div class="h_menu" @mouseleave="mleftLeave()">\n <div class="menu_box mleft">\n <!-- <a href="">\u7cbe\u9009<\/a>-->\n <a v-for="(item,index) in menuList" :key="index" :ref="'test'+index" href="javascript:;"\n @mouseover="mleftIn(item,index)">{{ item.menu }}<\/a>\n <!-- <el-cascader-panel :options="findOptions" :props="props" \/>-->\n <\/div>\n <div class="mright">\n <div class="cate-box">\n <a class="cate-title" href="">\n <img :src="data.url" alt="">\n <span>{{ data.menu }}<\/span>\n <\/a>\n <div class="subCate">\n <a v-for="(itemOne) in data.items" :key="itemOne">{{ itemOne.text }}<\/a>\n <\/div>\n <\/div>\n <\/div>\n <div class="right_bar">\n <div class="icons">\n <a>\n <span class="icon-box">\n <span class="tangle-1"><\/span>\n <span class="tangle-2"><\/span>\n <i class="ani-star"><\/i>\n <span class="tangle-3"><\/span>\n <\/span>\n <span class="icon-text">\u6536\u85cf\u5939<\/span>\n <\/a>\n <a>\n <img alt="" src="..\/assets\/images\/icon-header-discover-designer.png">\n <span>\u8bbe\u8ba1\u5e08<\/span>\n <\/a>\n <a>\n <img alt="" src="..\/assets\/images\/icon-header-discover-focus.png">\n <span>\u699c\u5355<\/span>\n <!-- <sup class="subNavDot"><\/sup>-->\n <\/a>\n <\/div>\n <div class="ad_box">\n\n <\/div>\n <\/div>\n <\/div>\n <\/li><\/code><\/pre>\n data: {},\n menuList: [\n {\n menu: '\u7cbe\u9009',\n url: require('..\/assets\/images\/zuanshi.png'),\n items: [\n { text: '\u8fd0\u8425\u8bbe\u8ba1' },\n { text: '\u5305\u88c5' },\n { text: '\u52a8\u753b\/\u5f71\u89c6' },\n { text: '\u4eba\u50cf\u6444\u5f71' },\n { text: '\u5546\u4e1a\u63d2\u753b' },\n { text: '\u7535\u5546' },\n { text: 'APP \u754c\u9762' },\n { text: '\u827a\u672f\u63d2\u753b' },\n { text: '\u5bb6\u88c5\u8bbe\u8ba1' },\n { text: '\u6d77\u62a5' },\n { text: '\u6587\u7ae0' }\n ]\n },\n { menu: '\u5e73\u9762' },\n { menu: 'UI' },\n { menu: '\u7f51\u9875' },\n { menu: '\u63d2\u753b' },\n { menu: '\u52a8\u6f2b' },\n { menu: '\u6444\u5f71' },\n { menu: '\u7a7a\u95f4' },\n { menu: '\u5de5\u4e1a\/\u4ea7\u54c1' },\n { menu: '\u4e09\u7ef4' },\n { menu: '\u5f71\u89c6' },\n { menu: '\u624b\u5de5\u827a' },\n { menu: '\u7eaf\u827a\u672f' },\n { menu: '\u670d\u88c5' },\n { menu: '\u5176\u4ed6' }\n ],<\/code><\/pre>\n \/\/\u6e32\u67d3\u6210 html \u4e4b\u524d\u8c03\u7528,\u521d\u59cb\u5316\u4e00\u4e9b\u5c5e\u6027\u503c [\u9f20\u6807\u60ac\u6302'\u53d1\u73b0',\u5c31\u51fa\u73b0\u7b2c\u4e00\u4e2a\u7cbe\u9009\u9875\u9762]\n created () {\n this.data = this.menuList[0]\n },\n \/\/\u6e32\u67d3\u6210 html \u540e\u8c03\u7528 [\u9f20\u6807\u60ac\u6302'\u53d1\u73b0',\u7b2c\u4e00\u4e2a menu-item \u663e\u793a\u9ec4\u8272](\u9875\u9762\u5237\u65b0\u4e86\u4e4b\u540e\u7684)\n mounted () {\n this.$refs['test' + 0][0].style.backgroundColor = 'rgb(255, 242, 0)'\n },\n methods: {\n \/\/\u9f20\u6807\u8fdb\u5165\u51fd\u6570\n mleftIn (item, index) {\n \/\/\u83b7\u53d6 menuList \u4e2d\u6bcf\u4e2a menuItem \u5b57\u7b26\u4e32\u7684\u957f\u5ea6\n let menuSize = this.menuList.length\n for (let i = 0; i < menuSize; i++) {\n \/\/for \u5faa\u73af,i \u5982\u679c\u5c0f\u4e8e menuSize,\u5219\u7f6e\u4e8e menuItem \u989c\u8272\u4e3a\u7070\u8272,\u5b9e\u73b0\u5207\u6362\u6548\u679c\n this.$refs['test' + i][0].style.backgroundColor = '#f8f8f8'\n }\n \/\/\u8df3\u51fa for \u5faa\u73af,\u7531\u5de6\u4fa7\u79fb\u5411\u53f3\u4fa7\u8be6\u60c5\u9875\u65f6,\u5176 menuItem \u7684\u989c\u8272\u4e3a\u9ec4\u8272\n this.$refs['test' + index][0].style.backgroundColor = 'rgb(255, 242, 0)'\n \/\/\u5c06\u53f3\u4fa7\u6570\u636e\u8bbe\u7f6e\u4e3a item,\u663e\u793a\u6570\u636e\n this.data = item\n },\n \/\/\u9f20\u6807\u8fdb\u5165\u51fd\u6570\n \/\/\u6ce8\u610f: mouseleave:\u662f\u9f20\u6807\u79fb\u51fa\u8be5\u5143\u7d20\u4e4b\u5916,\u5219\u89e6\u53d1 mouseleave \u4e8b\u4ef6\n \/\/ mouseout : \u662f\u5f53\u6307\u9488\u79bb\u5f00\u8be5\u5143\u7d20\u53ca\u5176\u6240\u6709\u540e\u4ee3\u65f6\uff0c\u4f1a\u89e6\u53d1 mouseleave\n \/\/ \u800c\u5f53\u6307\u9488\u79bb\u5f00\u5143\u7d20\u6216\u79bb\u5f00\u5143\u7d20\u7684\u540e\u4ee3\uff08\u5373\u4f7f\u6307\u9488\u4ecd\u5728\u5143\u7d20\u5185\uff09\u65f6\uff0c\u4e5f\u4f1a\u89e6\u53d1 mouseout \u4e8b\u4ef6\n mleftLeave () {\n \/\/\u83b7\u53d6 menuList \u4e2d\u6bcf\u4e2a menuItem \u5b57\u7b26\u4e32\u7684\u957f\u5ea6\n let menuSize = this.menuList.length\n for (let i = 0; i < menuSize; i++) {\n this.$refs['test' + i][0].style.backgroundColor = '#f8f8f8'\n }\n \/\/ \u8df3\u51fa\u5faa\u73af,\u6d4f\u89c8\u5b8c'\u53d1\u73b0',\u9f20\u6807\u79fb\u51fa,\u7f6e\u4e8e\u53f3\u4fa7\u6570\u636e\u4e3a\u7b2c\u4e00\u4e2a\u7cbe\u9009\u6570\u636e\n this.data = this.menuList[0]\n \/\/\u9f20\u6807\u79fb\u51fa\u4e8b\u4ef6,\u7f6e\u4e8e\u7b2c\u4e00\u4e2a menuitem \u4e3a\u9ec4\u8272[\u672a\u5237\u65b0\u65f6\u7684\u8bbe\u7f6e]\n this.$refs['test' + 0][0].style.backgroundColor = 'rgb(255, 242, 0)'\n\n \/\/ this.data = {}\n \/\/ this.$refs['test'+index][0].style.backgroundColor = '#f8f8f8'\n \/\/ console.log('\u6eda\u51fa\u53bb')\n },\n}<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"\u4e0b\u8f7d\u4f9d\u8d56\u901f\u5ea6\u5feb npm install –registry=https:\/\/registry.npm.tao […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[],"class_list":["post-3462","post","type-post","status-publish","format-standard","hentry","category-web"],"_links":{"self":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/3462","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3462"}],"version-history":[{"count":38,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/3462\/revisions"}],"predecessor-version":[{"id":3558,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/3462\/revisions\/3558"}],"wp:attachment":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3462"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=3462"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=3462"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
.main_nav_fixed {\n position: sticky;\n top: 0;\n z-index: 999;\n}<\/code><\/pre>\n\u56fa\u5b9a\u5728\u53f3\u65b9\u7684,\u60ac\u6302\u51fa\u73b0\u4e8c\u7ef4\u7801<\/h3>\n<\/p>\n<\/p><\/noscript>\n<div class="share_box">\n <img src="..\/..\/assets\/images\/share_qr.png" alt=""\/>\n <\/div><\/code><\/pre>\n.share_box{\n width: 70px;\n height: 131px;\n top: 300px;\n right: 10px;\n cursor: pointer;\n position: fixed;\n z-index: 999;\n background: url("..\/..\/assets\/images\/share_wx.jpg") no-repeat;\n background-size: 100% 100%;\n}\n.share_box img{\n width: 100px;\n height: 100px;\n display: none;\n}\n.share_box:hover img {\n position: absolute;\n top: 50%;\n margin-top: -50px;\n right: 82px;\n display: block !important;\n}<\/code><\/pre>\nnth-child(n)\u6307\u7684\u662f\u5728\u7236\u5143\u7d20\u4e2d\u6240\u6709\u7684\u5143\u7d20\u7684\u987a\u5e8f<\/h3>\n\n\u5199\u4ee3\u7801\u8981\u6839\u636e\u76d2\u5b50\u4ee5\u53ca\u5185\u5bb9\u5199<\/li>\nbottom\uff1a0\uff1b\u8981\u76f8\u5bf9\u4e8e\u7236\u5143\u7d20\u7684 height \u5b9e\u73b0\uff0c\u5982\u679c\u7236\u7236\u5143\u7d20\u7684 height \u5927\u4e8e\u7236\u5143\u7d20\u7684 height\uff0c\uff0c\u5219\u4f1a\u6309\u7167\u7236\u7236\u5143\u7d20\u7684 height \u6765\u5b9e\u73b0 bottom\uff1a0\uff1b\u6765\u5b9e\u73b0\u3002\u3010\u9002\u5f53\u5220\u9664\u7236\u7236\u5143\u7d20\u7684 height\uff0c\u4e00\u677f\u5757\u901a\u5e38\u4e0d\u7528\u8bbe\u7f6e\u603b height\u3011<\/li>\n<\/ul>\n\u60ac\u6302\u56fe\u7247\u7f13\u7f13\u653e\u5927\u7684\u52a8\u753b\u6548\u679c<\/h3>\n<\/p>\n<\/p><\/noscript>\n.gc_project .item_img > img {\n width: 100%;\n height: 100%;\n transition: all 0.3s;\n}\n.gc_project .item_img > img:hover {\n transform: scale(1.05);\n box-shadow: rgb(0 0 0 \/ 23%) 0 4px 14px 0;\n}<\/code><\/pre>\n\u6eda\u52a8\u6761\u4fee\u6539<\/h3>\n<\/p>\n<\/p><\/noscript>\n.mleft::-webkit-scrollbar{\n width: 6px;\n background-color: #f8f8f8;\n\n}\n.mleft::-webkit-scrollbar-thumb{\n width: 6px;\n background-color: #adacac;\n border-radius: 4px;\n}<\/code><\/pre>\nhead \u533a '\u53d1\u73b0' \u5b9e\u73b0\u4ea4\u4e92\u6548\u679c [\u8be5\u9996\u9875\u6700\u607c\u706b\u7684]<\/h2>\n<\/p>\n<\/p><\/noscript>\ntodo head \u533a'\u53d1\u73b0'\u4ea4\u4e92\u5b9e\u73b0\u601d\u8def:<\/h3>\n\n\u2460\u89c2\u5bdf\u8be5\u533a\u7ed3\u6784,\u4e00\u4e2a\u5927\u6a21\u5757,\u5176\u4e2d\u5206\u4e3a\u5de6\u4e2d\u53f3\u4e09\u4e2a\u6a21\u5757,\u5e76\u4f9d\u6b21\u5199\u51fa\u4e09\u4e2a\u6a21\u5757\u7684\u4ee3\u7801,<\/li>\n\u2461\u5de6\u4fa7\u533a\u57df: \u8981\u5c55\u793a\u7684\u6548\u679c\u6709: \u9f20\u6807\u4e0a\u4e0b\u79fb\u52a8,\u6240\u7ecf\u7684 menuItem \u4f1a\u5c55\u73b0\u9ec4\u8272\u80cc\u666f, \u5219\u5f15\u7528 vue \u7684 ref \u5c5e\u6027\u5bf9 DOM \u5143\u7d20\u8fdb\u884c\u52a8\u6001\u7ed1\u5b9a.\n\n\u6ce8\u610f:ref \u9700\u8981\u5728 dom \u6e32\u67d3\u5b8c\u6210\u540e\u624d\u4f1a\u6709,\u5728\u4f7f\u7528\u7684\u65f6\u5019\u786e\u4fdd dom \u5df2\u7ecf\u6e32\u67d3\u5b8c\u6210, \u6bd4\u5982\u5728\u751f\u547d\u5468\u671f mounted(){}\u94a9\u5b50\u4e2d\u8c03\u7528. this.$refs.xxx:\u51cf\u5c11\u83b7\u53d6 dom \u8282\u70b9\u7684\u6d88\u8017<\/li>\n<\/ul>\n<\/li>\n\u2462\u5de6\u4fa7\u533a\u57df\u8fc7\u6ee4\u5230\u53f3\u4fa7\u533a\u57df,\u5c55\u793a\u5bf9\u5e94\u7684\u8be6\u60c5\u9875: mleftIn(item,index)\u51fd\u6570\u901a\u8fc7\u4f20\u8f93 v-for \u5faa\u73af\u4e2d\u6570\u7ec4 menuList \u7684 item \u6bcf\u4e00\u9879\u4e3a\u5a92\u4ecb, \u800c\u6570\u636e\u4e2d menuList \u4e2d\u5305\u542b\u5de6\u4fa7\u6570\u636e menuItem \u4e0e\u53f3\u4fa7\u6bcf\u4e00\u9875\u7684\u6807\u9898 menu \u76f8\u540c, \u4ece\u800c\u5c06\u5de6\u4fa7\u548c\u53f3\u4fa7\u6570\u636e\u7ed1\u5b9a, \u6545\u800c\u5f62\u6210\u4ece\u5de6\u4fa7\u8fc7\u6ee4\u5230\u53f3\u4fa7\u533a\u57df\u662f\u56fa\u5b9a\u7684\u8be6\u60c5\u9875\u5185\u5bb9.<\/li>\n\u2463\u9875\u9762\u7b2c\u4e8c\u6b21\u672a\u5237\u65b0\u4e4b\u524d(\u9996\u6b21\u8fdb\u5165\u9875\u9762\u6e32\u67d3), \u9f20\u6807\u60ac\u6302'\u53d1\u73b0',\u8981\u51fa\u73b0\u7b2c\u4e00\u4e2a'\u7cbe\u9009'\u8be6\u60c5\u9875\u53ca'\u7cbe\u9009'item \u80cc\u666f\u53d8\u9ec4: \u9f20\u6807\u79fb\u51fa\u8be5\u5143\u7d20[\u4e8c\u7ea7\u76ee\u5f55\u6574\u4e2a\u5927\u6a21\u5757]\u4e4b\u5916,\u5219\u89e6\u53d1 mouseleave \u4e8b\u4ef6,\u521d\u59cb\u5316\u6570\u636e.<\/li>\n\u2464\u7b2c\u4e8c\u6b21\u9875\u9762\u5237\u65b0\u4e4b\u540e,\u521d\u59cb\u5316\u6570\u636e: \u91c7\u7528 mounted \u751f\u547d\u5468\u671f[\u6e32\u67d3\u6210 html \u540e\u8c03\u7528]: \u4f7f\u9f20\u6807\u60ac\u6302'\u53d1\u73b0',\u7b2c\u4e00\u4e2a menu-item \u663e\u793a\u9ec4\u8272<\/li>\n<\/ul>\n <li class="find">\n <a href="#">\u53d1\u73b0<\/a>\n <div class="h_menu" @mouseleave="mleftLeave()">\n <div class="menu_box mleft">\n <!-- <a href="">\u7cbe\u9009<\/a>-->\n <a v-for="(item,index) in menuList" :key="index" :ref="'test'+index" href="javascript:;"\n @mouseover="mleftIn(item,index)">{{ item.menu }}<\/a>\n <!-- <el-cascader-panel :options="findOptions" :props="props" \/>-->\n <\/div>\n <div class="mright">\n <div class="cate-box">\n <a class="cate-title" href="">\n <img :src="data.url" alt="">\n <span>{{ data.menu }}<\/span>\n <\/a>\n <div class="subCate">\n <a v-for="(itemOne) in data.items" :key="itemOne">{{ itemOne.text }}<\/a>\n <\/div>\n <\/div>\n <\/div>\n <div class="right_bar">\n <div class="icons">\n <a>\n <span class="icon-box">\n <span class="tangle-1"><\/span>\n <span class="tangle-2"><\/span>\n <i class="ani-star"><\/i>\n <span class="tangle-3"><\/span>\n <\/span>\n <span class="icon-text">\u6536\u85cf\u5939<\/span>\n <\/a>\n <a>\n <img alt="" src="..\/assets\/images\/icon-header-discover-designer.png">\n <span>\u8bbe\u8ba1\u5e08<\/span>\n <\/a>\n <a>\n <img alt="" src="..\/assets\/images\/icon-header-discover-focus.png">\n <span>\u699c\u5355<\/span>\n <!-- <sup class="subNavDot"><\/sup>-->\n <\/a>\n <\/div>\n <div class="ad_box">\n\n <\/div>\n <\/div>\n <\/div>\n <\/li><\/code><\/pre>\n data: {},\n menuList: [\n {\n menu: '\u7cbe\u9009',\n url: require('..\/assets\/images\/zuanshi.png'),\n items: [\n { text: '\u8fd0\u8425\u8bbe\u8ba1' },\n { text: '\u5305\u88c5' },\n { text: '\u52a8\u753b\/\u5f71\u89c6' },\n { text: '\u4eba\u50cf\u6444\u5f71' },\n { text: '\u5546\u4e1a\u63d2\u753b' },\n { text: '\u7535\u5546' },\n { text: 'APP \u754c\u9762' },\n { text: '\u827a\u672f\u63d2\u753b' },\n { text: '\u5bb6\u88c5\u8bbe\u8ba1' },\n { text: '\u6d77\u62a5' },\n { text: '\u6587\u7ae0' }\n ]\n },\n { menu: '\u5e73\u9762' },\n { menu: 'UI' },\n { menu: '\u7f51\u9875' },\n { menu: '\u63d2\u753b' },\n { menu: '\u52a8\u6f2b' },\n { menu: '\u6444\u5f71' },\n { menu: '\u7a7a\u95f4' },\n { menu: '\u5de5\u4e1a\/\u4ea7\u54c1' },\n { menu: '\u4e09\u7ef4' },\n { menu: '\u5f71\u89c6' },\n { menu: '\u624b\u5de5\u827a' },\n { menu: '\u7eaf\u827a\u672f' },\n { menu: '\u670d\u88c5' },\n { menu: '\u5176\u4ed6' }\n ],<\/code><\/pre>\n \/\/\u6e32\u67d3\u6210 html \u4e4b\u524d\u8c03\u7528,\u521d\u59cb\u5316\u4e00\u4e9b\u5c5e\u6027\u503c [\u9f20\u6807\u60ac\u6302'\u53d1\u73b0',\u5c31\u51fa\u73b0\u7b2c\u4e00\u4e2a\u7cbe\u9009\u9875\u9762]\n created () {\n this.data = this.menuList[0]\n },\n \/\/\u6e32\u67d3\u6210 html \u540e\u8c03\u7528 [\u9f20\u6807\u60ac\u6302'\u53d1\u73b0',\u7b2c\u4e00\u4e2a menu-item \u663e\u793a\u9ec4\u8272](\u9875\u9762\u5237\u65b0\u4e86\u4e4b\u540e\u7684)\n mounted () {\n this.$refs['test' + 0][0].style.backgroundColor = 'rgb(255, 242, 0)'\n },\n methods: {\n \/\/\u9f20\u6807\u8fdb\u5165\u51fd\u6570\n mleftIn (item, index) {\n \/\/\u83b7\u53d6 menuList \u4e2d\u6bcf\u4e2a menuItem \u5b57\u7b26\u4e32\u7684\u957f\u5ea6\n let menuSize = this.menuList.length\n for (let i = 0; i < menuSize; i++) {\n \/\/for \u5faa\u73af,i \u5982\u679c\u5c0f\u4e8e menuSize,\u5219\u7f6e\u4e8e menuItem \u989c\u8272\u4e3a\u7070\u8272,\u5b9e\u73b0\u5207\u6362\u6548\u679c\n this.$refs['test' + i][0].style.backgroundColor = '#f8f8f8'\n }\n \/\/\u8df3\u51fa for \u5faa\u73af,\u7531\u5de6\u4fa7\u79fb\u5411\u53f3\u4fa7\u8be6\u60c5\u9875\u65f6,\u5176 menuItem \u7684\u989c\u8272\u4e3a\u9ec4\u8272\n this.$refs['test' + index][0].style.backgroundColor = 'rgb(255, 242, 0)'\n \/\/\u5c06\u53f3\u4fa7\u6570\u636e\u8bbe\u7f6e\u4e3a item,\u663e\u793a\u6570\u636e\n this.data = item\n },\n \/\/\u9f20\u6807\u8fdb\u5165\u51fd\u6570\n \/\/\u6ce8\u610f: mouseleave:\u662f\u9f20\u6807\u79fb\u51fa\u8be5\u5143\u7d20\u4e4b\u5916,\u5219\u89e6\u53d1 mouseleave \u4e8b\u4ef6\n \/\/ mouseout : \u662f\u5f53\u6307\u9488\u79bb\u5f00\u8be5\u5143\u7d20\u53ca\u5176\u6240\u6709\u540e\u4ee3\u65f6\uff0c\u4f1a\u89e6\u53d1 mouseleave\n \/\/ \u800c\u5f53\u6307\u9488\u79bb\u5f00\u5143\u7d20\u6216\u79bb\u5f00\u5143\u7d20\u7684\u540e\u4ee3\uff08\u5373\u4f7f\u6307\u9488\u4ecd\u5728\u5143\u7d20\u5185\uff09\u65f6\uff0c\u4e5f\u4f1a\u89e6\u53d1 mouseout \u4e8b\u4ef6\n mleftLeave () {\n \/\/\u83b7\u53d6 menuList \u4e2d\u6bcf\u4e2a menuItem \u5b57\u7b26\u4e32\u7684\u957f\u5ea6\n let menuSize = this.menuList.length\n for (let i = 0; i < menuSize; i++) {\n this.$refs['test' + i][0].style.backgroundColor = '#f8f8f8'\n }\n \/\/ \u8df3\u51fa\u5faa\u73af,\u6d4f\u89c8\u5b8c'\u53d1\u73b0',\u9f20\u6807\u79fb\u51fa,\u7f6e\u4e8e\u53f3\u4fa7\u6570\u636e\u4e3a\u7b2c\u4e00\u4e2a\u7cbe\u9009\u6570\u636e\n this.data = this.menuList[0]\n \/\/\u9f20\u6807\u79fb\u51fa\u4e8b\u4ef6,\u7f6e\u4e8e\u7b2c\u4e00\u4e2a menuitem \u4e3a\u9ec4\u8272[\u672a\u5237\u65b0\u65f6\u7684\u8bbe\u7f6e]\n this.$refs['test' + 0][0].style.backgroundColor = 'rgb(255, 242, 0)'\n\n \/\/ this.data = {}\n \/\/ this.$refs['test'+index][0].style.backgroundColor = '#f8f8f8'\n \/\/ console.log('\u6eda\u51fa\u53bb')\n },\n}<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"\u4e0b\u8f7d\u4f9d\u8d56\u901f\u5ea6\u5feb npm install –registry=https:\/\/registry.npm.tao […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[],"class_list":["post-3462","post","type-post","status-publish","format-standard","hentry","category-web"],"_links":{"self":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/3462","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3462"}],"version-history":[{"count":38,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/3462\/revisions"}],"predecessor-version":[{"id":3558,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/3462\/revisions\/3558"}],"wp:attachment":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3462"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=3462"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=3462"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
<\/p>\n<\/p><\/noscript>\n<div class="share_box">\n <img src="..\/..\/assets\/images\/share_qr.png" alt=""\/>\n <\/div><\/code><\/pre>\n.share_box{\n width: 70px;\n height: 131px;\n top: 300px;\n right: 10px;\n cursor: pointer;\n position: fixed;\n z-index: 999;\n background: url("..\/..\/assets\/images\/share_wx.jpg") no-repeat;\n background-size: 100% 100%;\n}\n.share_box img{\n width: 100px;\n height: 100px;\n display: none;\n}\n.share_box:hover img {\n position: absolute;\n top: 50%;\n margin-top: -50px;\n right: 82px;\n display: block !important;\n}<\/code><\/pre>\nnth-child(n)\u6307\u7684\u662f\u5728\u7236\u5143\u7d20\u4e2d\u6240\u6709\u7684\u5143\u7d20\u7684\u987a\u5e8f<\/h3>\n\n\u5199\u4ee3\u7801\u8981\u6839\u636e\u76d2\u5b50\u4ee5\u53ca\u5185\u5bb9\u5199<\/li>\nbottom\uff1a0\uff1b\u8981\u76f8\u5bf9\u4e8e\u7236\u5143\u7d20\u7684 height \u5b9e\u73b0\uff0c\u5982\u679c\u7236\u7236\u5143\u7d20\u7684 height \u5927\u4e8e\u7236\u5143\u7d20\u7684 height\uff0c\uff0c\u5219\u4f1a\u6309\u7167\u7236\u7236\u5143\u7d20\u7684 height \u6765\u5b9e\u73b0 bottom\uff1a0\uff1b\u6765\u5b9e\u73b0\u3002\u3010\u9002\u5f53\u5220\u9664\u7236\u7236\u5143\u7d20\u7684 height\uff0c\u4e00\u677f\u5757\u901a\u5e38\u4e0d\u7528\u8bbe\u7f6e\u603b height\u3011<\/li>\n<\/ul>\n\u60ac\u6302\u56fe\u7247\u7f13\u7f13\u653e\u5927\u7684\u52a8\u753b\u6548\u679c<\/h3>\n<\/p>\n<\/p><\/noscript>\n.gc_project .item_img > img {\n width: 100%;\n height: 100%;\n transition: all 0.3s;\n}\n.gc_project .item_img > img:hover {\n transform: scale(1.05);\n box-shadow: rgb(0 0 0 \/ 23%) 0 4px 14px 0;\n}<\/code><\/pre>\n\u6eda\u52a8\u6761\u4fee\u6539<\/h3>\n<\/p>\n<\/p><\/noscript>\n.mleft::-webkit-scrollbar{\n width: 6px;\n background-color: #f8f8f8;\n\n}\n.mleft::-webkit-scrollbar-thumb{\n width: 6px;\n background-color: #adacac;\n border-radius: 4px;\n}<\/code><\/pre>\nhead \u533a '\u53d1\u73b0' \u5b9e\u73b0\u4ea4\u4e92\u6548\u679c [\u8be5\u9996\u9875\u6700\u607c\u706b\u7684]<\/h2>\n<\/p>\n<\/p><\/noscript>\ntodo head \u533a'\u53d1\u73b0'\u4ea4\u4e92\u5b9e\u73b0\u601d\u8def:<\/h3>\n\n\u2460\u89c2\u5bdf\u8be5\u533a\u7ed3\u6784,\u4e00\u4e2a\u5927\u6a21\u5757,\u5176\u4e2d\u5206\u4e3a\u5de6\u4e2d\u53f3\u4e09\u4e2a\u6a21\u5757,\u5e76\u4f9d\u6b21\u5199\u51fa\u4e09\u4e2a\u6a21\u5757\u7684\u4ee3\u7801,<\/li>\n\u2461\u5de6\u4fa7\u533a\u57df: \u8981\u5c55\u793a\u7684\u6548\u679c\u6709: \u9f20\u6807\u4e0a\u4e0b\u79fb\u52a8,\u6240\u7ecf\u7684 menuItem \u4f1a\u5c55\u73b0\u9ec4\u8272\u80cc\u666f, \u5219\u5f15\u7528 vue \u7684 ref \u5c5e\u6027\u5bf9 DOM \u5143\u7d20\u8fdb\u884c\u52a8\u6001\u7ed1\u5b9a.\n\n\u6ce8\u610f:ref \u9700\u8981\u5728 dom \u6e32\u67d3\u5b8c\u6210\u540e\u624d\u4f1a\u6709,\u5728\u4f7f\u7528\u7684\u65f6\u5019\u786e\u4fdd dom \u5df2\u7ecf\u6e32\u67d3\u5b8c\u6210, \u6bd4\u5982\u5728\u751f\u547d\u5468\u671f mounted(){}\u94a9\u5b50\u4e2d\u8c03\u7528. this.$refs.xxx:\u51cf\u5c11\u83b7\u53d6 dom \u8282\u70b9\u7684\u6d88\u8017<\/li>\n<\/ul>\n<\/li>\n\u2462\u5de6\u4fa7\u533a\u57df\u8fc7\u6ee4\u5230\u53f3\u4fa7\u533a\u57df,\u5c55\u793a\u5bf9\u5e94\u7684\u8be6\u60c5\u9875: mleftIn(item,index)\u51fd\u6570\u901a\u8fc7\u4f20\u8f93 v-for \u5faa\u73af\u4e2d\u6570\u7ec4 menuList \u7684 item \u6bcf\u4e00\u9879\u4e3a\u5a92\u4ecb, \u800c\u6570\u636e\u4e2d menuList \u4e2d\u5305\u542b\u5de6\u4fa7\u6570\u636e menuItem \u4e0e\u53f3\u4fa7\u6bcf\u4e00\u9875\u7684\u6807\u9898 menu \u76f8\u540c, \u4ece\u800c\u5c06\u5de6\u4fa7\u548c\u53f3\u4fa7\u6570\u636e\u7ed1\u5b9a, \u6545\u800c\u5f62\u6210\u4ece\u5de6\u4fa7\u8fc7\u6ee4\u5230\u53f3\u4fa7\u533a\u57df\u662f\u56fa\u5b9a\u7684\u8be6\u60c5\u9875\u5185\u5bb9.<\/li>\n\u2463\u9875\u9762\u7b2c\u4e8c\u6b21\u672a\u5237\u65b0\u4e4b\u524d(\u9996\u6b21\u8fdb\u5165\u9875\u9762\u6e32\u67d3), \u9f20\u6807\u60ac\u6302'\u53d1\u73b0',\u8981\u51fa\u73b0\u7b2c\u4e00\u4e2a'\u7cbe\u9009'\u8be6\u60c5\u9875\u53ca'\u7cbe\u9009'item \u80cc\u666f\u53d8\u9ec4: \u9f20\u6807\u79fb\u51fa\u8be5\u5143\u7d20[\u4e8c\u7ea7\u76ee\u5f55\u6574\u4e2a\u5927\u6a21\u5757]\u4e4b\u5916,\u5219\u89e6\u53d1 mouseleave \u4e8b\u4ef6,\u521d\u59cb\u5316\u6570\u636e.<\/li>\n\u2464\u7b2c\u4e8c\u6b21\u9875\u9762\u5237\u65b0\u4e4b\u540e,\u521d\u59cb\u5316\u6570\u636e: \u91c7\u7528 mounted \u751f\u547d\u5468\u671f[\u6e32\u67d3\u6210 html \u540e\u8c03\u7528]: \u4f7f\u9f20\u6807\u60ac\u6302'\u53d1\u73b0',\u7b2c\u4e00\u4e2a menu-item \u663e\u793a\u9ec4\u8272<\/li>\n<\/ul>\n <li class="find">\n <a href="#">\u53d1\u73b0<\/a>\n <div class="h_menu" @mouseleave="mleftLeave()">\n <div class="menu_box mleft">\n <!-- <a href="">\u7cbe\u9009<\/a>-->\n <a v-for="(item,index) in menuList" :key="index" :ref="'test'+index" href="javascript:;"\n @mouseover="mleftIn(item,index)">{{ item.menu }}<\/a>\n <!-- <el-cascader-panel :options="findOptions" :props="props" \/>-->\n <\/div>\n <div class="mright">\n <div class="cate-box">\n <a class="cate-title" href="">\n <img :src="data.url" alt="">\n <span>{{ data.menu }}<\/span>\n <\/a>\n <div class="subCate">\n <a v-for="(itemOne) in data.items" :key="itemOne">{{ itemOne.text }}<\/a>\n <\/div>\n <\/div>\n <\/div>\n <div class="right_bar">\n <div class="icons">\n <a>\n <span class="icon-box">\n <span class="tangle-1"><\/span>\n <span class="tangle-2"><\/span>\n <i class="ani-star"><\/i>\n <span class="tangle-3"><\/span>\n <\/span>\n <span class="icon-text">\u6536\u85cf\u5939<\/span>\n <\/a>\n <a>\n <img alt="" src="..\/assets\/images\/icon-header-discover-designer.png">\n <span>\u8bbe\u8ba1\u5e08<\/span>\n <\/a>\n <a>\n <img alt="" src="..\/assets\/images\/icon-header-discover-focus.png">\n <span>\u699c\u5355<\/span>\n <!-- <sup class="subNavDot"><\/sup>-->\n <\/a>\n <\/div>\n <div class="ad_box">\n\n <\/div>\n <\/div>\n <\/div>\n <\/li><\/code><\/pre>\n data: {},\n menuList: [\n {\n menu: '\u7cbe\u9009',\n url: require('..\/assets\/images\/zuanshi.png'),\n items: [\n { text: '\u8fd0\u8425\u8bbe\u8ba1' },\n { text: '\u5305\u88c5' },\n { text: '\u52a8\u753b\/\u5f71\u89c6' },\n { text: '\u4eba\u50cf\u6444\u5f71' },\n { text: '\u5546\u4e1a\u63d2\u753b' },\n { text: '\u7535\u5546' },\n { text: 'APP \u754c\u9762' },\n { text: '\u827a\u672f\u63d2\u753b' },\n { text: '\u5bb6\u88c5\u8bbe\u8ba1' },\n { text: '\u6d77\u62a5' },\n { text: '\u6587\u7ae0' }\n ]\n },\n { menu: '\u5e73\u9762' },\n { menu: 'UI' },\n { menu: '\u7f51\u9875' },\n { menu: '\u63d2\u753b' },\n { menu: '\u52a8\u6f2b' },\n { menu: '\u6444\u5f71' },\n { menu: '\u7a7a\u95f4' },\n { menu: '\u5de5\u4e1a\/\u4ea7\u54c1' },\n { menu: '\u4e09\u7ef4' },\n { menu: '\u5f71\u89c6' },\n { menu: '\u624b\u5de5\u827a' },\n { menu: '\u7eaf\u827a\u672f' },\n { menu: '\u670d\u88c5' },\n { menu: '\u5176\u4ed6' }\n ],<\/code><\/pre>\n \/\/\u6e32\u67d3\u6210 html \u4e4b\u524d\u8c03\u7528,\u521d\u59cb\u5316\u4e00\u4e9b\u5c5e\u6027\u503c [\u9f20\u6807\u60ac\u6302'\u53d1\u73b0',\u5c31\u51fa\u73b0\u7b2c\u4e00\u4e2a\u7cbe\u9009\u9875\u9762]\n created () {\n this.data = this.menuList[0]\n },\n \/\/\u6e32\u67d3\u6210 html \u540e\u8c03\u7528 [\u9f20\u6807\u60ac\u6302'\u53d1\u73b0',\u7b2c\u4e00\u4e2a menu-item \u663e\u793a\u9ec4\u8272](\u9875\u9762\u5237\u65b0\u4e86\u4e4b\u540e\u7684)\n mounted () {\n this.$refs['test' + 0][0].style.backgroundColor = 'rgb(255, 242, 0)'\n },\n methods: {\n \/\/\u9f20\u6807\u8fdb\u5165\u51fd\u6570\n mleftIn (item, index) {\n \/\/\u83b7\u53d6 menuList \u4e2d\u6bcf\u4e2a menuItem \u5b57\u7b26\u4e32\u7684\u957f\u5ea6\n let menuSize = this.menuList.length\n for (let i = 0; i < menuSize; i++) {\n \/\/for \u5faa\u73af,i \u5982\u679c\u5c0f\u4e8e menuSize,\u5219\u7f6e\u4e8e menuItem \u989c\u8272\u4e3a\u7070\u8272,\u5b9e\u73b0\u5207\u6362\u6548\u679c\n this.$refs['test' + i][0].style.backgroundColor = '#f8f8f8'\n }\n \/\/\u8df3\u51fa for \u5faa\u73af,\u7531\u5de6\u4fa7\u79fb\u5411\u53f3\u4fa7\u8be6\u60c5\u9875\u65f6,\u5176 menuItem \u7684\u989c\u8272\u4e3a\u9ec4\u8272\n this.$refs['test' + index][0].style.backgroundColor = 'rgb(255, 242, 0)'\n \/\/\u5c06\u53f3\u4fa7\u6570\u636e\u8bbe\u7f6e\u4e3a item,\u663e\u793a\u6570\u636e\n this.data = item\n },\n \/\/\u9f20\u6807\u8fdb\u5165\u51fd\u6570\n \/\/\u6ce8\u610f: mouseleave:\u662f\u9f20\u6807\u79fb\u51fa\u8be5\u5143\u7d20\u4e4b\u5916,\u5219\u89e6\u53d1 mouseleave \u4e8b\u4ef6\n \/\/ mouseout : \u662f\u5f53\u6307\u9488\u79bb\u5f00\u8be5\u5143\u7d20\u53ca\u5176\u6240\u6709\u540e\u4ee3\u65f6\uff0c\u4f1a\u89e6\u53d1 mouseleave\n \/\/ \u800c\u5f53\u6307\u9488\u79bb\u5f00\u5143\u7d20\u6216\u79bb\u5f00\u5143\u7d20\u7684\u540e\u4ee3\uff08\u5373\u4f7f\u6307\u9488\u4ecd\u5728\u5143\u7d20\u5185\uff09\u65f6\uff0c\u4e5f\u4f1a\u89e6\u53d1 mouseout \u4e8b\u4ef6\n mleftLeave () {\n \/\/\u83b7\u53d6 menuList \u4e2d\u6bcf\u4e2a menuItem \u5b57\u7b26\u4e32\u7684\u957f\u5ea6\n let menuSize = this.menuList.length\n for (let i = 0; i < menuSize; i++) {\n this.$refs['test' + i][0].style.backgroundColor = '#f8f8f8'\n }\n \/\/ \u8df3\u51fa\u5faa\u73af,\u6d4f\u89c8\u5b8c'\u53d1\u73b0',\u9f20\u6807\u79fb\u51fa,\u7f6e\u4e8e\u53f3\u4fa7\u6570\u636e\u4e3a\u7b2c\u4e00\u4e2a\u7cbe\u9009\u6570\u636e\n this.data = this.menuList[0]\n \/\/\u9f20\u6807\u79fb\u51fa\u4e8b\u4ef6,\u7f6e\u4e8e\u7b2c\u4e00\u4e2a menuitem \u4e3a\u9ec4\u8272[\u672a\u5237\u65b0\u65f6\u7684\u8bbe\u7f6e]\n this.$refs['test' + 0][0].style.backgroundColor = 'rgb(255, 242, 0)'\n\n \/\/ this.data = {}\n \/\/ this.$refs['test'+index][0].style.backgroundColor = '#f8f8f8'\n \/\/ console.log('\u6eda\u51fa\u53bb')\n },\n}<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"\u4e0b\u8f7d\u4f9d\u8d56\u901f\u5ea6\u5feb npm install –registry=https:\/\/registry.npm.tao […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[],"class_list":["post-3462","post","type-post","status-publish","format-standard","hentry","category-web"],"_links":{"self":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/3462","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3462"}],"version-history":[{"count":38,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/3462\/revisions"}],"predecessor-version":[{"id":3558,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/3462\/revisions\/3558"}],"wp:attachment":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3462"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=3462"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=3462"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
<div class="share_box">\n <img src="..\/..\/assets\/images\/share_qr.png" alt=""\/>\n <\/div><\/code><\/pre>\n.share_box{\n width: 70px;\n height: 131px;\n top: 300px;\n right: 10px;\n cursor: pointer;\n position: fixed;\n z-index: 999;\n background: url("..\/..\/assets\/images\/share_wx.jpg") no-repeat;\n background-size: 100% 100%;\n}\n.share_box img{\n width: 100px;\n height: 100px;\n display: none;\n}\n.share_box:hover img {\n position: absolute;\n top: 50%;\n margin-top: -50px;\n right: 82px;\n display: block !important;\n}<\/code><\/pre>\nnth-child(n)\u6307\u7684\u662f\u5728\u7236\u5143\u7d20\u4e2d\u6240\u6709\u7684\u5143\u7d20\u7684\u987a\u5e8f<\/h3>\n\n\u5199\u4ee3\u7801\u8981\u6839\u636e\u76d2\u5b50\u4ee5\u53ca\u5185\u5bb9\u5199<\/li>\nbottom\uff1a0\uff1b\u8981\u76f8\u5bf9\u4e8e\u7236\u5143\u7d20\u7684 height \u5b9e\u73b0\uff0c\u5982\u679c\u7236\u7236\u5143\u7d20\u7684 height \u5927\u4e8e\u7236\u5143\u7d20\u7684 height\uff0c\uff0c\u5219\u4f1a\u6309\u7167\u7236\u7236\u5143\u7d20\u7684 height \u6765\u5b9e\u73b0 bottom\uff1a0\uff1b\u6765\u5b9e\u73b0\u3002\u3010\u9002\u5f53\u5220\u9664\u7236\u7236\u5143\u7d20\u7684 height\uff0c\u4e00\u677f\u5757\u901a\u5e38\u4e0d\u7528\u8bbe\u7f6e\u603b height\u3011<\/li>\n<\/ul>\n\u60ac\u6302\u56fe\u7247\u7f13\u7f13\u653e\u5927\u7684\u52a8\u753b\u6548\u679c<\/h3>\n<\/p>\n<\/p><\/noscript>\n.gc_project .item_img > img {\n width: 100%;\n height: 100%;\n transition: all 0.3s;\n}\n.gc_project .item_img > img:hover {\n transform: scale(1.05);\n box-shadow: rgb(0 0 0 \/ 23%) 0 4px 14px 0;\n}<\/code><\/pre>\n\u6eda\u52a8\u6761\u4fee\u6539<\/h3>\n<\/p>\n<\/p><\/noscript>\n.mleft::-webkit-scrollbar{\n width: 6px;\n background-color: #f8f8f8;\n\n}\n.mleft::-webkit-scrollbar-thumb{\n width: 6px;\n background-color: #adacac;\n border-radius: 4px;\n}<\/code><\/pre>\nhead \u533a '\u53d1\u73b0' \u5b9e\u73b0\u4ea4\u4e92\u6548\u679c [\u8be5\u9996\u9875\u6700\u607c\u706b\u7684]<\/h2>\n<\/p>\n<\/p><\/noscript>\ntodo head \u533a'\u53d1\u73b0'\u4ea4\u4e92\u5b9e\u73b0\u601d\u8def:<\/h3>\n\n\u2460\u89c2\u5bdf\u8be5\u533a\u7ed3\u6784,\u4e00\u4e2a\u5927\u6a21\u5757,\u5176\u4e2d\u5206\u4e3a\u5de6\u4e2d\u53f3\u4e09\u4e2a\u6a21\u5757,\u5e76\u4f9d\u6b21\u5199\u51fa\u4e09\u4e2a\u6a21\u5757\u7684\u4ee3\u7801,<\/li>\n\u2461\u5de6\u4fa7\u533a\u57df: \u8981\u5c55\u793a\u7684\u6548\u679c\u6709: \u9f20\u6807\u4e0a\u4e0b\u79fb\u52a8,\u6240\u7ecf\u7684 menuItem \u4f1a\u5c55\u73b0\u9ec4\u8272\u80cc\u666f, \u5219\u5f15\u7528 vue \u7684 ref \u5c5e\u6027\u5bf9 DOM \u5143\u7d20\u8fdb\u884c\u52a8\u6001\u7ed1\u5b9a.\n\n\u6ce8\u610f:ref \u9700\u8981\u5728 dom \u6e32\u67d3\u5b8c\u6210\u540e\u624d\u4f1a\u6709,\u5728\u4f7f\u7528\u7684\u65f6\u5019\u786e\u4fdd dom \u5df2\u7ecf\u6e32\u67d3\u5b8c\u6210, \u6bd4\u5982\u5728\u751f\u547d\u5468\u671f mounted(){}\u94a9\u5b50\u4e2d\u8c03\u7528. this.$refs.xxx:\u51cf\u5c11\u83b7\u53d6 dom \u8282\u70b9\u7684\u6d88\u8017<\/li>\n<\/ul>\n<\/li>\n\u2462\u5de6\u4fa7\u533a\u57df\u8fc7\u6ee4\u5230\u53f3\u4fa7\u533a\u57df,\u5c55\u793a\u5bf9\u5e94\u7684\u8be6\u60c5\u9875: mleftIn(item,index)\u51fd\u6570\u901a\u8fc7\u4f20\u8f93 v-for \u5faa\u73af\u4e2d\u6570\u7ec4 menuList \u7684 item \u6bcf\u4e00\u9879\u4e3a\u5a92\u4ecb, \u800c\u6570\u636e\u4e2d menuList \u4e2d\u5305\u542b\u5de6\u4fa7\u6570\u636e menuItem \u4e0e\u53f3\u4fa7\u6bcf\u4e00\u9875\u7684\u6807\u9898 menu \u76f8\u540c, \u4ece\u800c\u5c06\u5de6\u4fa7\u548c\u53f3\u4fa7\u6570\u636e\u7ed1\u5b9a, \u6545\u800c\u5f62\u6210\u4ece\u5de6\u4fa7\u8fc7\u6ee4\u5230\u53f3\u4fa7\u533a\u57df\u662f\u56fa\u5b9a\u7684\u8be6\u60c5\u9875\u5185\u5bb9.<\/li>\n\u2463\u9875\u9762\u7b2c\u4e8c\u6b21\u672a\u5237\u65b0\u4e4b\u524d(\u9996\u6b21\u8fdb\u5165\u9875\u9762\u6e32\u67d3), \u9f20\u6807\u60ac\u6302'\u53d1\u73b0',\u8981\u51fa\u73b0\u7b2c\u4e00\u4e2a'\u7cbe\u9009'\u8be6\u60c5\u9875\u53ca'\u7cbe\u9009'item \u80cc\u666f\u53d8\u9ec4: \u9f20\u6807\u79fb\u51fa\u8be5\u5143\u7d20[\u4e8c\u7ea7\u76ee\u5f55\u6574\u4e2a\u5927\u6a21\u5757]\u4e4b\u5916,\u5219\u89e6\u53d1 mouseleave \u4e8b\u4ef6,\u521d\u59cb\u5316\u6570\u636e.<\/li>\n\u2464\u7b2c\u4e8c\u6b21\u9875\u9762\u5237\u65b0\u4e4b\u540e,\u521d\u59cb\u5316\u6570\u636e: \u91c7\u7528 mounted \u751f\u547d\u5468\u671f[\u6e32\u67d3\u6210 html \u540e\u8c03\u7528]: \u4f7f\u9f20\u6807\u60ac\u6302'\u53d1\u73b0',\u7b2c\u4e00\u4e2a menu-item \u663e\u793a\u9ec4\u8272<\/li>\n<\/ul>\n <li class="find">\n <a href="#">\u53d1\u73b0<\/a>\n <div class="h_menu" @mouseleave="mleftLeave()">\n <div class="menu_box mleft">\n <!-- <a href="">\u7cbe\u9009<\/a>-->\n <a v-for="(item,index) in menuList" :key="index" :ref="'test'+index" href="javascript:;"\n @mouseover="mleftIn(item,index)">{{ item.menu }}<\/a>\n <!-- <el-cascader-panel :options="findOptions" :props="props" \/>-->\n <\/div>\n <div class="mright">\n <div class="cate-box">\n <a class="cate-title" href="">\n <img :src="data.url" alt="">\n <span>{{ data.menu }}<\/span>\n <\/a>\n <div class="subCate">\n <a v-for="(itemOne) in data.items" :key="itemOne">{{ itemOne.text }}<\/a>\n <\/div>\n <\/div>\n <\/div>\n <div class="right_bar">\n <div class="icons">\n <a>\n <span class="icon-box">\n <span class="tangle-1"><\/span>\n <span class="tangle-2"><\/span>\n <i class="ani-star"><\/i>\n <span class="tangle-3"><\/span>\n <\/span>\n <span class="icon-text">\u6536\u85cf\u5939<\/span>\n <\/a>\n <a>\n <img alt="" src="..\/assets\/images\/icon-header-discover-designer.png">\n <span>\u8bbe\u8ba1\u5e08<\/span>\n <\/a>\n <a>\n <img alt="" src="..\/assets\/images\/icon-header-discover-focus.png">\n <span>\u699c\u5355<\/span>\n <!-- <sup class="subNavDot"><\/sup>-->\n <\/a>\n <\/div>\n <div class="ad_box">\n\n <\/div>\n <\/div>\n <\/div>\n <\/li><\/code><\/pre>\n data: {},\n menuList: [\n {\n menu: '\u7cbe\u9009',\n url: require('..\/assets\/images\/zuanshi.png'),\n items: [\n { text: '\u8fd0\u8425\u8bbe\u8ba1' },\n { text: '\u5305\u88c5' },\n { text: '\u52a8\u753b\/\u5f71\u89c6' },\n { text: '\u4eba\u50cf\u6444\u5f71' },\n { text: '\u5546\u4e1a\u63d2\u753b' },\n { text: '\u7535\u5546' },\n { text: 'APP \u754c\u9762' },\n { text: '\u827a\u672f\u63d2\u753b' },\n { text: '\u5bb6\u88c5\u8bbe\u8ba1' },\n { text: '\u6d77\u62a5' },\n { text: '\u6587\u7ae0' }\n ]\n },\n { menu: '\u5e73\u9762' },\n { menu: 'UI' },\n { menu: '\u7f51\u9875' },\n { menu: '\u63d2\u753b' },\n { menu: '\u52a8\u6f2b' },\n { menu: '\u6444\u5f71' },\n { menu: '\u7a7a\u95f4' },\n { menu: '\u5de5\u4e1a\/\u4ea7\u54c1' },\n { menu: '\u4e09\u7ef4' },\n { menu: '\u5f71\u89c6' },\n { menu: '\u624b\u5de5\u827a' },\n { menu: '\u7eaf\u827a\u672f' },\n { menu: '\u670d\u88c5' },\n { menu: '\u5176\u4ed6' }\n ],<\/code><\/pre>\n \/\/\u6e32\u67d3\u6210 html \u4e4b\u524d\u8c03\u7528,\u521d\u59cb\u5316\u4e00\u4e9b\u5c5e\u6027\u503c [\u9f20\u6807\u60ac\u6302'\u53d1\u73b0',\u5c31\u51fa\u73b0\u7b2c\u4e00\u4e2a\u7cbe\u9009\u9875\u9762]\n created () {\n this.data = this.menuList[0]\n },\n \/\/\u6e32\u67d3\u6210 html \u540e\u8c03\u7528 [\u9f20\u6807\u60ac\u6302'\u53d1\u73b0',\u7b2c\u4e00\u4e2a menu-item \u663e\u793a\u9ec4\u8272](\u9875\u9762\u5237\u65b0\u4e86\u4e4b\u540e\u7684)\n mounted () {\n this.$refs['test' + 0][0].style.backgroundColor = 'rgb(255, 242, 0)'\n },\n methods: {\n \/\/\u9f20\u6807\u8fdb\u5165\u51fd\u6570\n mleftIn (item, index) {\n \/\/\u83b7\u53d6 menuList \u4e2d\u6bcf\u4e2a menuItem \u5b57\u7b26\u4e32\u7684\u957f\u5ea6\n let menuSize = this.menuList.length\n for (let i = 0; i < menuSize; i++) {\n \/\/for \u5faa\u73af,i \u5982\u679c\u5c0f\u4e8e menuSize,\u5219\u7f6e\u4e8e menuItem \u989c\u8272\u4e3a\u7070\u8272,\u5b9e\u73b0\u5207\u6362\u6548\u679c\n this.$refs['test' + i][0].style.backgroundColor = '#f8f8f8'\n }\n \/\/\u8df3\u51fa for \u5faa\u73af,\u7531\u5de6\u4fa7\u79fb\u5411\u53f3\u4fa7\u8be6\u60c5\u9875\u65f6,\u5176 menuItem \u7684\u989c\u8272\u4e3a\u9ec4\u8272\n this.$refs['test' + index][0].style.backgroundColor = 'rgb(255, 242, 0)'\n \/\/\u5c06\u53f3\u4fa7\u6570\u636e\u8bbe\u7f6e\u4e3a item,\u663e\u793a\u6570\u636e\n this.data = item\n },\n \/\/\u9f20\u6807\u8fdb\u5165\u51fd\u6570\n \/\/\u6ce8\u610f: mouseleave:\u662f\u9f20\u6807\u79fb\u51fa\u8be5\u5143\u7d20\u4e4b\u5916,\u5219\u89e6\u53d1 mouseleave \u4e8b\u4ef6\n \/\/ mouseout : \u662f\u5f53\u6307\u9488\u79bb\u5f00\u8be5\u5143\u7d20\u53ca\u5176\u6240\u6709\u540e\u4ee3\u65f6\uff0c\u4f1a\u89e6\u53d1 mouseleave\n \/\/ \u800c\u5f53\u6307\u9488\u79bb\u5f00\u5143\u7d20\u6216\u79bb\u5f00\u5143\u7d20\u7684\u540e\u4ee3\uff08\u5373\u4f7f\u6307\u9488\u4ecd\u5728\u5143\u7d20\u5185\uff09\u65f6\uff0c\u4e5f\u4f1a\u89e6\u53d1 mouseout \u4e8b\u4ef6\n mleftLeave () {\n \/\/\u83b7\u53d6 menuList \u4e2d\u6bcf\u4e2a menuItem \u5b57\u7b26\u4e32\u7684\u957f\u5ea6\n let menuSize = this.menuList.length\n for (let i = 0; i < menuSize; i++) {\n this.$refs['test' + i][0].style.backgroundColor = '#f8f8f8'\n }\n \/\/ \u8df3\u51fa\u5faa\u73af,\u6d4f\u89c8\u5b8c'\u53d1\u73b0',\u9f20\u6807\u79fb\u51fa,\u7f6e\u4e8e\u53f3\u4fa7\u6570\u636e\u4e3a\u7b2c\u4e00\u4e2a\u7cbe\u9009\u6570\u636e\n this.data = this.menuList[0]\n \/\/\u9f20\u6807\u79fb\u51fa\u4e8b\u4ef6,\u7f6e\u4e8e\u7b2c\u4e00\u4e2a menuitem \u4e3a\u9ec4\u8272[\u672a\u5237\u65b0\u65f6\u7684\u8bbe\u7f6e]\n this.$refs['test' + 0][0].style.backgroundColor = 'rgb(255, 242, 0)'\n\n \/\/ this.data = {}\n \/\/ this.$refs['test'+index][0].style.backgroundColor = '#f8f8f8'\n \/\/ console.log('\u6eda\u51fa\u53bb')\n },\n}<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"\u4e0b\u8f7d\u4f9d\u8d56\u901f\u5ea6\u5feb npm install –registry=https:\/\/registry.npm.tao […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[],"class_list":["post-3462","post","type-post","status-publish","format-standard","hentry","category-web"],"_links":{"self":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/3462","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3462"}],"version-history":[{"count":38,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/3462\/revisions"}],"predecessor-version":[{"id":3558,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/3462\/revisions\/3558"}],"wp:attachment":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3462"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=3462"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=3462"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
.share_box{\n width: 70px;\n height: 131px;\n top: 300px;\n right: 10px;\n cursor: pointer;\n position: fixed;\n z-index: 999;\n background: url("..\/..\/assets\/images\/share_wx.jpg") no-repeat;\n background-size: 100% 100%;\n}\n.share_box img{\n width: 100px;\n height: 100px;\n display: none;\n}\n.share_box:hover img {\n position: absolute;\n top: 50%;\n margin-top: -50px;\n right: 82px;\n display: block !important;\n}<\/code><\/pre>\nnth-child(n)\u6307\u7684\u662f\u5728\u7236\u5143\u7d20\u4e2d\u6240\u6709\u7684\u5143\u7d20\u7684\u987a\u5e8f<\/h3>\n\n\u5199\u4ee3\u7801\u8981\u6839\u636e\u76d2\u5b50\u4ee5\u53ca\u5185\u5bb9\u5199<\/li>\nbottom\uff1a0\uff1b\u8981\u76f8\u5bf9\u4e8e\u7236\u5143\u7d20\u7684 height \u5b9e\u73b0\uff0c\u5982\u679c\u7236\u7236\u5143\u7d20\u7684 height \u5927\u4e8e\u7236\u5143\u7d20\u7684 height\uff0c\uff0c\u5219\u4f1a\u6309\u7167\u7236\u7236\u5143\u7d20\u7684 height \u6765\u5b9e\u73b0 bottom\uff1a0\uff1b\u6765\u5b9e\u73b0\u3002\u3010\u9002\u5f53\u5220\u9664\u7236\u7236\u5143\u7d20\u7684 height\uff0c\u4e00\u677f\u5757\u901a\u5e38\u4e0d\u7528\u8bbe\u7f6e\u603b height\u3011<\/li>\n<\/ul>\n\u60ac\u6302\u56fe\u7247\u7f13\u7f13\u653e\u5927\u7684\u52a8\u753b\u6548\u679c<\/h3>\n<\/p>\n<\/p><\/noscript>\n.gc_project .item_img > img {\n width: 100%;\n height: 100%;\n transition: all 0.3s;\n}\n.gc_project .item_img > img:hover {\n transform: scale(1.05);\n box-shadow: rgb(0 0 0 \/ 23%) 0 4px 14px 0;\n}<\/code><\/pre>\n\u6eda\u52a8\u6761\u4fee\u6539<\/h3>\n<\/p>\n<\/p><\/noscript>\n.mleft::-webkit-scrollbar{\n width: 6px;\n background-color: #f8f8f8;\n\n}\n.mleft::-webkit-scrollbar-thumb{\n width: 6px;\n background-color: #adacac;\n border-radius: 4px;\n}<\/code><\/pre>\nhead \u533a '\u53d1\u73b0' \u5b9e\u73b0\u4ea4\u4e92\u6548\u679c [\u8be5\u9996\u9875\u6700\u607c\u706b\u7684]<\/h2>\n<\/p>\n<\/p><\/noscript>\ntodo head \u533a'\u53d1\u73b0'\u4ea4\u4e92\u5b9e\u73b0\u601d\u8def:<\/h3>\n\n\u2460\u89c2\u5bdf\u8be5\u533a\u7ed3\u6784,\u4e00\u4e2a\u5927\u6a21\u5757,\u5176\u4e2d\u5206\u4e3a\u5de6\u4e2d\u53f3\u4e09\u4e2a\u6a21\u5757,\u5e76\u4f9d\u6b21\u5199\u51fa\u4e09\u4e2a\u6a21\u5757\u7684\u4ee3\u7801,<\/li>\n\u2461\u5de6\u4fa7\u533a\u57df: \u8981\u5c55\u793a\u7684\u6548\u679c\u6709: \u9f20\u6807\u4e0a\u4e0b\u79fb\u52a8,\u6240\u7ecf\u7684 menuItem \u4f1a\u5c55\u73b0\u9ec4\u8272\u80cc\u666f, \u5219\u5f15\u7528 vue \u7684 ref \u5c5e\u6027\u5bf9 DOM \u5143\u7d20\u8fdb\u884c\u52a8\u6001\u7ed1\u5b9a.\n\n\u6ce8\u610f:ref \u9700\u8981\u5728 dom \u6e32\u67d3\u5b8c\u6210\u540e\u624d\u4f1a\u6709,\u5728\u4f7f\u7528\u7684\u65f6\u5019\u786e\u4fdd dom \u5df2\u7ecf\u6e32\u67d3\u5b8c\u6210, \u6bd4\u5982\u5728\u751f\u547d\u5468\u671f mounted(){}\u94a9\u5b50\u4e2d\u8c03\u7528. this.$refs.xxx:\u51cf\u5c11\u83b7\u53d6 dom \u8282\u70b9\u7684\u6d88\u8017<\/li>\n<\/ul>\n<\/li>\n\u2462\u5de6\u4fa7\u533a\u57df\u8fc7\u6ee4\u5230\u53f3\u4fa7\u533a\u57df,\u5c55\u793a\u5bf9\u5e94\u7684\u8be6\u60c5\u9875: mleftIn(item,index)\u51fd\u6570\u901a\u8fc7\u4f20\u8f93 v-for \u5faa\u73af\u4e2d\u6570\u7ec4 menuList \u7684 item \u6bcf\u4e00\u9879\u4e3a\u5a92\u4ecb, \u800c\u6570\u636e\u4e2d menuList \u4e2d\u5305\u542b\u5de6\u4fa7\u6570\u636e menuItem \u4e0e\u53f3\u4fa7\u6bcf\u4e00\u9875\u7684\u6807\u9898 menu \u76f8\u540c, \u4ece\u800c\u5c06\u5de6\u4fa7\u548c\u53f3\u4fa7\u6570\u636e\u7ed1\u5b9a, \u6545\u800c\u5f62\u6210\u4ece\u5de6\u4fa7\u8fc7\u6ee4\u5230\u53f3\u4fa7\u533a\u57df\u662f\u56fa\u5b9a\u7684\u8be6\u60c5\u9875\u5185\u5bb9.<\/li>\n\u2463\u9875\u9762\u7b2c\u4e8c\u6b21\u672a\u5237\u65b0\u4e4b\u524d(\u9996\u6b21\u8fdb\u5165\u9875\u9762\u6e32\u67d3), \u9f20\u6807\u60ac\u6302'\u53d1\u73b0',\u8981\u51fa\u73b0\u7b2c\u4e00\u4e2a'\u7cbe\u9009'\u8be6\u60c5\u9875\u53ca'\u7cbe\u9009'item \u80cc\u666f\u53d8\u9ec4: \u9f20\u6807\u79fb\u51fa\u8be5\u5143\u7d20[\u4e8c\u7ea7\u76ee\u5f55\u6574\u4e2a\u5927\u6a21\u5757]\u4e4b\u5916,\u5219\u89e6\u53d1 mouseleave \u4e8b\u4ef6,\u521d\u59cb\u5316\u6570\u636e.<\/li>\n\u2464\u7b2c\u4e8c\u6b21\u9875\u9762\u5237\u65b0\u4e4b\u540e,\u521d\u59cb\u5316\u6570\u636e: \u91c7\u7528 mounted \u751f\u547d\u5468\u671f[\u6e32\u67d3\u6210 html \u540e\u8c03\u7528]: \u4f7f\u9f20\u6807\u60ac\u6302'\u53d1\u73b0',\u7b2c\u4e00\u4e2a menu-item \u663e\u793a\u9ec4\u8272<\/li>\n<\/ul>\n <li class="find">\n <a href="#">\u53d1\u73b0<\/a>\n <div class="h_menu" @mouseleave="mleftLeave()">\n <div class="menu_box mleft">\n <!-- <a href="">\u7cbe\u9009<\/a>-->\n <a v-for="(item,index) in menuList" :key="index" :ref="'test'+index" href="javascript:;"\n @mouseover="mleftIn(item,index)">{{ item.menu }}<\/a>\n <!-- <el-cascader-panel :options="findOptions" :props="props" \/>-->\n <\/div>\n <div class="mright">\n <div class="cate-box">\n <a class="cate-title" href="">\n <img :src="data.url" alt="">\n <span>{{ data.menu }}<\/span>\n <\/a>\n <div class="subCate">\n <a v-for="(itemOne) in data.items" :key="itemOne">{{ itemOne.text }}<\/a>\n <\/div>\n <\/div>\n <\/div>\n <div class="right_bar">\n <div class="icons">\n <a>\n <span class="icon-box">\n <span class="tangle-1"><\/span>\n <span class="tangle-2"><\/span>\n <i class="ani-star"><\/i>\n <span class="tangle-3"><\/span>\n <\/span>\n <span class="icon-text">\u6536\u85cf\u5939<\/span>\n <\/a>\n <a>\n <img alt="" src="..\/assets\/images\/icon-header-discover-designer.png">\n <span>\u8bbe\u8ba1\u5e08<\/span>\n <\/a>\n <a>\n <img alt="" src="..\/assets\/images\/icon-header-discover-focus.png">\n <span>\u699c\u5355<\/span>\n <!-- <sup class="subNavDot"><\/sup>-->\n <\/a>\n <\/div>\n <div class="ad_box">\n\n <\/div>\n <\/div>\n <\/div>\n <\/li><\/code><\/pre>\n data: {},\n menuList: [\n {\n menu: '\u7cbe\u9009',\n url: require('..\/assets\/images\/zuanshi.png'),\n items: [\n { text: '\u8fd0\u8425\u8bbe\u8ba1' },\n { text: '\u5305\u88c5' },\n { text: '\u52a8\u753b\/\u5f71\u89c6' },\n { text: '\u4eba\u50cf\u6444\u5f71' },\n { text: '\u5546\u4e1a\u63d2\u753b' },\n { text: '\u7535\u5546' },\n { text: 'APP \u754c\u9762' },\n { text: '\u827a\u672f\u63d2\u753b' },\n { text: '\u5bb6\u88c5\u8bbe\u8ba1' },\n { text: '\u6d77\u62a5' },\n { text: '\u6587\u7ae0' }\n ]\n },\n { menu: '\u5e73\u9762' },\n { menu: 'UI' },\n { menu: '\u7f51\u9875' },\n { menu: '\u63d2\u753b' },\n { menu: '\u52a8\u6f2b' },\n { menu: '\u6444\u5f71' },\n { menu: '\u7a7a\u95f4' },\n { menu: '\u5de5\u4e1a\/\u4ea7\u54c1' },\n { menu: '\u4e09\u7ef4' },\n { menu: '\u5f71\u89c6' },\n { menu: '\u624b\u5de5\u827a' },\n { menu: '\u7eaf\u827a\u672f' },\n { menu: '\u670d\u88c5' },\n { menu: '\u5176\u4ed6' }\n ],<\/code><\/pre>\n \/\/\u6e32\u67d3\u6210 html \u4e4b\u524d\u8c03\u7528,\u521d\u59cb\u5316\u4e00\u4e9b\u5c5e\u6027\u503c [\u9f20\u6807\u60ac\u6302'\u53d1\u73b0',\u5c31\u51fa\u73b0\u7b2c\u4e00\u4e2a\u7cbe\u9009\u9875\u9762]\n created () {\n this.data = this.menuList[0]\n },\n \/\/\u6e32\u67d3\u6210 html \u540e\u8c03\u7528 [\u9f20\u6807\u60ac\u6302'\u53d1\u73b0',\u7b2c\u4e00\u4e2a menu-item \u663e\u793a\u9ec4\u8272](\u9875\u9762\u5237\u65b0\u4e86\u4e4b\u540e\u7684)\n mounted () {\n this.$refs['test' + 0][0].style.backgroundColor = 'rgb(255, 242, 0)'\n },\n methods: {\n \/\/\u9f20\u6807\u8fdb\u5165\u51fd\u6570\n mleftIn (item, index) {\n \/\/\u83b7\u53d6 menuList \u4e2d\u6bcf\u4e2a menuItem \u5b57\u7b26\u4e32\u7684\u957f\u5ea6\n let menuSize = this.menuList.length\n for (let i = 0; i < menuSize; i++) {\n \/\/for \u5faa\u73af,i \u5982\u679c\u5c0f\u4e8e menuSize,\u5219\u7f6e\u4e8e menuItem \u989c\u8272\u4e3a\u7070\u8272,\u5b9e\u73b0\u5207\u6362\u6548\u679c\n this.$refs['test' + i][0].style.backgroundColor = '#f8f8f8'\n }\n \/\/\u8df3\u51fa for \u5faa\u73af,\u7531\u5de6\u4fa7\u79fb\u5411\u53f3\u4fa7\u8be6\u60c5\u9875\u65f6,\u5176 menuItem \u7684\u989c\u8272\u4e3a\u9ec4\u8272\n this.$refs['test' + index][0].style.backgroundColor = 'rgb(255, 242, 0)'\n \/\/\u5c06\u53f3\u4fa7\u6570\u636e\u8bbe\u7f6e\u4e3a item,\u663e\u793a\u6570\u636e\n this.data = item\n },\n \/\/\u9f20\u6807\u8fdb\u5165\u51fd\u6570\n \/\/\u6ce8\u610f: mouseleave:\u662f\u9f20\u6807\u79fb\u51fa\u8be5\u5143\u7d20\u4e4b\u5916,\u5219\u89e6\u53d1 mouseleave \u4e8b\u4ef6\n \/\/ mouseout : \u662f\u5f53\u6307\u9488\u79bb\u5f00\u8be5\u5143\u7d20\u53ca\u5176\u6240\u6709\u540e\u4ee3\u65f6\uff0c\u4f1a\u89e6\u53d1 mouseleave\n \/\/ \u800c\u5f53\u6307\u9488\u79bb\u5f00\u5143\u7d20\u6216\u79bb\u5f00\u5143\u7d20\u7684\u540e\u4ee3\uff08\u5373\u4f7f\u6307\u9488\u4ecd\u5728\u5143\u7d20\u5185\uff09\u65f6\uff0c\u4e5f\u4f1a\u89e6\u53d1 mouseout \u4e8b\u4ef6\n mleftLeave () {\n \/\/\u83b7\u53d6 menuList \u4e2d\u6bcf\u4e2a menuItem \u5b57\u7b26\u4e32\u7684\u957f\u5ea6\n let menuSize = this.menuList.length\n for (let i = 0; i < menuSize; i++) {\n this.$refs['test' + i][0].style.backgroundColor = '#f8f8f8'\n }\n \/\/ \u8df3\u51fa\u5faa\u73af,\u6d4f\u89c8\u5b8c'\u53d1\u73b0',\u9f20\u6807\u79fb\u51fa,\u7f6e\u4e8e\u53f3\u4fa7\u6570\u636e\u4e3a\u7b2c\u4e00\u4e2a\u7cbe\u9009\u6570\u636e\n this.data = this.menuList[0]\n \/\/\u9f20\u6807\u79fb\u51fa\u4e8b\u4ef6,\u7f6e\u4e8e\u7b2c\u4e00\u4e2a menuitem \u4e3a\u9ec4\u8272[\u672a\u5237\u65b0\u65f6\u7684\u8bbe\u7f6e]\n this.$refs['test' + 0][0].style.backgroundColor = 'rgb(255, 242, 0)'\n\n \/\/ this.data = {}\n \/\/ this.$refs['test'+index][0].style.backgroundColor = '#f8f8f8'\n \/\/ console.log('\u6eda\u51fa\u53bb')\n },\n}<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"\u4e0b\u8f7d\u4f9d\u8d56\u901f\u5ea6\u5feb npm install –registry=https:\/\/registry.npm.tao […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[],"class_list":["post-3462","post","type-post","status-publish","format-standard","hentry","category-web"],"_links":{"self":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/3462","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3462"}],"version-history":[{"count":38,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/3462\/revisions"}],"predecessor-version":[{"id":3558,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/3462\/revisions\/3558"}],"wp:attachment":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3462"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=3462"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=3462"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
<\/p>\n<\/p><\/noscript>\n.gc_project .item_img > img {\n width: 100%;\n height: 100%;\n transition: all 0.3s;\n}\n.gc_project .item_img > img:hover {\n transform: scale(1.05);\n box-shadow: rgb(0 0 0 \/ 23%) 0 4px 14px 0;\n}<\/code><\/pre>\n\u6eda\u52a8\u6761\u4fee\u6539<\/h3>\n<\/p>\n<\/p><\/noscript>\n.mleft::-webkit-scrollbar{\n width: 6px;\n background-color: #f8f8f8;\n\n}\n.mleft::-webkit-scrollbar-thumb{\n width: 6px;\n background-color: #adacac;\n border-radius: 4px;\n}<\/code><\/pre>\nhead \u533a '\u53d1\u73b0' \u5b9e\u73b0\u4ea4\u4e92\u6548\u679c [\u8be5\u9996\u9875\u6700\u607c\u706b\u7684]<\/h2>\n<\/p>\n<\/p><\/noscript>\ntodo head \u533a'\u53d1\u73b0'\u4ea4\u4e92\u5b9e\u73b0\u601d\u8def:<\/h3>\n\n\u2460\u89c2\u5bdf\u8be5\u533a\u7ed3\u6784,\u4e00\u4e2a\u5927\u6a21\u5757,\u5176\u4e2d\u5206\u4e3a\u5de6\u4e2d\u53f3\u4e09\u4e2a\u6a21\u5757,\u5e76\u4f9d\u6b21\u5199\u51fa\u4e09\u4e2a\u6a21\u5757\u7684\u4ee3\u7801,<\/li>\n\u2461\u5de6\u4fa7\u533a\u57df: \u8981\u5c55\u793a\u7684\u6548\u679c\u6709: \u9f20\u6807\u4e0a\u4e0b\u79fb\u52a8,\u6240\u7ecf\u7684 menuItem \u4f1a\u5c55\u73b0\u9ec4\u8272\u80cc\u666f, \u5219\u5f15\u7528 vue \u7684 ref \u5c5e\u6027\u5bf9 DOM \u5143\u7d20\u8fdb\u884c\u52a8\u6001\u7ed1\u5b9a.\n\n\u6ce8\u610f:ref \u9700\u8981\u5728 dom \u6e32\u67d3\u5b8c\u6210\u540e\u624d\u4f1a\u6709,\u5728\u4f7f\u7528\u7684\u65f6\u5019\u786e\u4fdd dom \u5df2\u7ecf\u6e32\u67d3\u5b8c\u6210, \u6bd4\u5982\u5728\u751f\u547d\u5468\u671f mounted(){}\u94a9\u5b50\u4e2d\u8c03\u7528. this.$refs.xxx:\u51cf\u5c11\u83b7\u53d6 dom \u8282\u70b9\u7684\u6d88\u8017<\/li>\n<\/ul>\n<\/li>\n\u2462\u5de6\u4fa7\u533a\u57df\u8fc7\u6ee4\u5230\u53f3\u4fa7\u533a\u57df,\u5c55\u793a\u5bf9\u5e94\u7684\u8be6\u60c5\u9875: mleftIn(item,index)\u51fd\u6570\u901a\u8fc7\u4f20\u8f93 v-for \u5faa\u73af\u4e2d\u6570\u7ec4 menuList \u7684 item \u6bcf\u4e00\u9879\u4e3a\u5a92\u4ecb, \u800c\u6570\u636e\u4e2d menuList \u4e2d\u5305\u542b\u5de6\u4fa7\u6570\u636e menuItem \u4e0e\u53f3\u4fa7\u6bcf\u4e00\u9875\u7684\u6807\u9898 menu \u76f8\u540c, \u4ece\u800c\u5c06\u5de6\u4fa7\u548c\u53f3\u4fa7\u6570\u636e\u7ed1\u5b9a, \u6545\u800c\u5f62\u6210\u4ece\u5de6\u4fa7\u8fc7\u6ee4\u5230\u53f3\u4fa7\u533a\u57df\u662f\u56fa\u5b9a\u7684\u8be6\u60c5\u9875\u5185\u5bb9.<\/li>\n\u2463\u9875\u9762\u7b2c\u4e8c\u6b21\u672a\u5237\u65b0\u4e4b\u524d(\u9996\u6b21\u8fdb\u5165\u9875\u9762\u6e32\u67d3), \u9f20\u6807\u60ac\u6302'\u53d1\u73b0',\u8981\u51fa\u73b0\u7b2c\u4e00\u4e2a'\u7cbe\u9009'\u8be6\u60c5\u9875\u53ca'\u7cbe\u9009'item \u80cc\u666f\u53d8\u9ec4: \u9f20\u6807\u79fb\u51fa\u8be5\u5143\u7d20[\u4e8c\u7ea7\u76ee\u5f55\u6574\u4e2a\u5927\u6a21\u5757]\u4e4b\u5916,\u5219\u89e6\u53d1 mouseleave \u4e8b\u4ef6,\u521d\u59cb\u5316\u6570\u636e.<\/li>\n\u2464\u7b2c\u4e8c\u6b21\u9875\u9762\u5237\u65b0\u4e4b\u540e,\u521d\u59cb\u5316\u6570\u636e: \u91c7\u7528 mounted \u751f\u547d\u5468\u671f[\u6e32\u67d3\u6210 html \u540e\u8c03\u7528]: \u4f7f\u9f20\u6807\u60ac\u6302'\u53d1\u73b0',\u7b2c\u4e00\u4e2a menu-item \u663e\u793a\u9ec4\u8272<\/li>\n<\/ul>\n <li class="find">\n <a href="#">\u53d1\u73b0<\/a>\n <div class="h_menu" @mouseleave="mleftLeave()">\n <div class="menu_box mleft">\n <!-- <a href="">\u7cbe\u9009<\/a>-->\n <a v-for="(item,index) in menuList" :key="index" :ref="'test'+index" href="javascript:;"\n @mouseover="mleftIn(item,index)">{{ item.menu }}<\/a>\n <!-- <el-cascader-panel :options="findOptions" :props="props" \/>-->\n <\/div>\n <div class="mright">\n <div class="cate-box">\n <a class="cate-title" href="">\n <img :src="data.url" alt="">\n <span>{{ data.menu }}<\/span>\n <\/a>\n <div class="subCate">\n <a v-for="(itemOne) in data.items" :key="itemOne">{{ itemOne.text }}<\/a>\n <\/div>\n <\/div>\n <\/div>\n <div class="right_bar">\n <div class="icons">\n <a>\n <span class="icon-box">\n <span class="tangle-1"><\/span>\n <span class="tangle-2"><\/span>\n <i class="ani-star"><\/i>\n <span class="tangle-3"><\/span>\n <\/span>\n <span class="icon-text">\u6536\u85cf\u5939<\/span>\n <\/a>\n <a>\n <img alt="" src="..\/assets\/images\/icon-header-discover-designer.png">\n <span>\u8bbe\u8ba1\u5e08<\/span>\n <\/a>\n <a>\n <img alt="" src="..\/assets\/images\/icon-header-discover-focus.png">\n <span>\u699c\u5355<\/span>\n <!-- <sup class="subNavDot"><\/sup>-->\n <\/a>\n <\/div>\n <div class="ad_box">\n\n <\/div>\n <\/div>\n <\/div>\n <\/li><\/code><\/pre>\n data: {},\n menuList: [\n {\n menu: '\u7cbe\u9009',\n url: require('..\/assets\/images\/zuanshi.png'),\n items: [\n { text: '\u8fd0\u8425\u8bbe\u8ba1' },\n { text: '\u5305\u88c5' },\n { text: '\u52a8\u753b\/\u5f71\u89c6' },\n { text: '\u4eba\u50cf\u6444\u5f71' },\n { text: '\u5546\u4e1a\u63d2\u753b' },\n { text: '\u7535\u5546' },\n { text: 'APP \u754c\u9762' },\n { text: '\u827a\u672f\u63d2\u753b' },\n { text: '\u5bb6\u88c5\u8bbe\u8ba1' },\n { text: '\u6d77\u62a5' },\n { text: '\u6587\u7ae0' }\n ]\n },\n { menu: '\u5e73\u9762' },\n { menu: 'UI' },\n { menu: '\u7f51\u9875' },\n { menu: '\u63d2\u753b' },\n { menu: '\u52a8\u6f2b' },\n { menu: '\u6444\u5f71' },\n { menu: '\u7a7a\u95f4' },\n { menu: '\u5de5\u4e1a\/\u4ea7\u54c1' },\n { menu: '\u4e09\u7ef4' },\n { menu: '\u5f71\u89c6' },\n { menu: '\u624b\u5de5\u827a' },\n { menu: '\u7eaf\u827a\u672f' },\n { menu: '\u670d\u88c5' },\n { menu: '\u5176\u4ed6' }\n ],<\/code><\/pre>\n \/\/\u6e32\u67d3\u6210 html \u4e4b\u524d\u8c03\u7528,\u521d\u59cb\u5316\u4e00\u4e9b\u5c5e\u6027\u503c [\u9f20\u6807\u60ac\u6302'\u53d1\u73b0',\u5c31\u51fa\u73b0\u7b2c\u4e00\u4e2a\u7cbe\u9009\u9875\u9762]\n created () {\n this.data = this.menuList[0]\n },\n \/\/\u6e32\u67d3\u6210 html \u540e\u8c03\u7528 [\u9f20\u6807\u60ac\u6302'\u53d1\u73b0',\u7b2c\u4e00\u4e2a menu-item \u663e\u793a\u9ec4\u8272](\u9875\u9762\u5237\u65b0\u4e86\u4e4b\u540e\u7684)\n mounted () {\n this.$refs['test' + 0][0].style.backgroundColor = 'rgb(255, 242, 0)'\n },\n methods: {\n \/\/\u9f20\u6807\u8fdb\u5165\u51fd\u6570\n mleftIn (item, index) {\n \/\/\u83b7\u53d6 menuList \u4e2d\u6bcf\u4e2a menuItem \u5b57\u7b26\u4e32\u7684\u957f\u5ea6\n let menuSize = this.menuList.length\n for (let i = 0; i < menuSize; i++) {\n \/\/for \u5faa\u73af,i \u5982\u679c\u5c0f\u4e8e menuSize,\u5219\u7f6e\u4e8e menuItem \u989c\u8272\u4e3a\u7070\u8272,\u5b9e\u73b0\u5207\u6362\u6548\u679c\n this.$refs['test' + i][0].style.backgroundColor = '#f8f8f8'\n }\n \/\/\u8df3\u51fa for \u5faa\u73af,\u7531\u5de6\u4fa7\u79fb\u5411\u53f3\u4fa7\u8be6\u60c5\u9875\u65f6,\u5176 menuItem \u7684\u989c\u8272\u4e3a\u9ec4\u8272\n this.$refs['test' + index][0].style.backgroundColor = 'rgb(255, 242, 0)'\n \/\/\u5c06\u53f3\u4fa7\u6570\u636e\u8bbe\u7f6e\u4e3a item,\u663e\u793a\u6570\u636e\n this.data = item\n },\n \/\/\u9f20\u6807\u8fdb\u5165\u51fd\u6570\n \/\/\u6ce8\u610f: mouseleave:\u662f\u9f20\u6807\u79fb\u51fa\u8be5\u5143\u7d20\u4e4b\u5916,\u5219\u89e6\u53d1 mouseleave \u4e8b\u4ef6\n \/\/ mouseout : \u662f\u5f53\u6307\u9488\u79bb\u5f00\u8be5\u5143\u7d20\u53ca\u5176\u6240\u6709\u540e\u4ee3\u65f6\uff0c\u4f1a\u89e6\u53d1 mouseleave\n \/\/ \u800c\u5f53\u6307\u9488\u79bb\u5f00\u5143\u7d20\u6216\u79bb\u5f00\u5143\u7d20\u7684\u540e\u4ee3\uff08\u5373\u4f7f\u6307\u9488\u4ecd\u5728\u5143\u7d20\u5185\uff09\u65f6\uff0c\u4e5f\u4f1a\u89e6\u53d1 mouseout \u4e8b\u4ef6\n mleftLeave () {\n \/\/\u83b7\u53d6 menuList \u4e2d\u6bcf\u4e2a menuItem \u5b57\u7b26\u4e32\u7684\u957f\u5ea6\n let menuSize = this.menuList.length\n for (let i = 0; i < menuSize; i++) {\n this.$refs['test' + i][0].style.backgroundColor = '#f8f8f8'\n }\n \/\/ \u8df3\u51fa\u5faa\u73af,\u6d4f\u89c8\u5b8c'\u53d1\u73b0',\u9f20\u6807\u79fb\u51fa,\u7f6e\u4e8e\u53f3\u4fa7\u6570\u636e\u4e3a\u7b2c\u4e00\u4e2a\u7cbe\u9009\u6570\u636e\n this.data = this.menuList[0]\n \/\/\u9f20\u6807\u79fb\u51fa\u4e8b\u4ef6,\u7f6e\u4e8e\u7b2c\u4e00\u4e2a menuitem \u4e3a\u9ec4\u8272[\u672a\u5237\u65b0\u65f6\u7684\u8bbe\u7f6e]\n this.$refs['test' + 0][0].style.backgroundColor = 'rgb(255, 242, 0)'\n\n \/\/ this.data = {}\n \/\/ this.$refs['test'+index][0].style.backgroundColor = '#f8f8f8'\n \/\/ console.log('\u6eda\u51fa\u53bb')\n },\n}<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"\u4e0b\u8f7d\u4f9d\u8d56\u901f\u5ea6\u5feb npm install –registry=https:\/\/registry.npm.tao […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[],"class_list":["post-3462","post","type-post","status-publish","format-standard","hentry","category-web"],"_links":{"self":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/3462","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3462"}],"version-history":[{"count":38,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/3462\/revisions"}],"predecessor-version":[{"id":3558,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/3462\/revisions\/3558"}],"wp:attachment":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3462"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=3462"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=3462"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
.gc_project .item_img > img {\n width: 100%;\n height: 100%;\n transition: all 0.3s;\n}\n.gc_project .item_img > img:hover {\n transform: scale(1.05);\n box-shadow: rgb(0 0 0 \/ 23%) 0 4px 14px 0;\n}<\/code><\/pre>\n\u6eda\u52a8\u6761\u4fee\u6539<\/h3>\n<\/p>\n<\/p><\/noscript>\n.mleft::-webkit-scrollbar{\n width: 6px;\n background-color: #f8f8f8;\n\n}\n.mleft::-webkit-scrollbar-thumb{\n width: 6px;\n background-color: #adacac;\n border-radius: 4px;\n}<\/code><\/pre>\nhead \u533a '\u53d1\u73b0' \u5b9e\u73b0\u4ea4\u4e92\u6548\u679c [\u8be5\u9996\u9875\u6700\u607c\u706b\u7684]<\/h2>\n<\/p>\n<\/p><\/noscript>\ntodo head \u533a'\u53d1\u73b0'\u4ea4\u4e92\u5b9e\u73b0\u601d\u8def:<\/h3>\n\n\u2460\u89c2\u5bdf\u8be5\u533a\u7ed3\u6784,\u4e00\u4e2a\u5927\u6a21\u5757,\u5176\u4e2d\u5206\u4e3a\u5de6\u4e2d\u53f3\u4e09\u4e2a\u6a21\u5757,\u5e76\u4f9d\u6b21\u5199\u51fa\u4e09\u4e2a\u6a21\u5757\u7684\u4ee3\u7801,<\/li>\n\u2461\u5de6\u4fa7\u533a\u57df: \u8981\u5c55\u793a\u7684\u6548\u679c\u6709: \u9f20\u6807\u4e0a\u4e0b\u79fb\u52a8,\u6240\u7ecf\u7684 menuItem \u4f1a\u5c55\u73b0\u9ec4\u8272\u80cc\u666f, \u5219\u5f15\u7528 vue \u7684 ref \u5c5e\u6027\u5bf9 DOM \u5143\u7d20\u8fdb\u884c\u52a8\u6001\u7ed1\u5b9a.\n\n\u6ce8\u610f:ref \u9700\u8981\u5728 dom \u6e32\u67d3\u5b8c\u6210\u540e\u624d\u4f1a\u6709,\u5728\u4f7f\u7528\u7684\u65f6\u5019\u786e\u4fdd dom \u5df2\u7ecf\u6e32\u67d3\u5b8c\u6210, \u6bd4\u5982\u5728\u751f\u547d\u5468\u671f mounted(){}\u94a9\u5b50\u4e2d\u8c03\u7528. this.$refs.xxx:\u51cf\u5c11\u83b7\u53d6 dom \u8282\u70b9\u7684\u6d88\u8017<\/li>\n<\/ul>\n<\/li>\n\u2462\u5de6\u4fa7\u533a\u57df\u8fc7\u6ee4\u5230\u53f3\u4fa7\u533a\u57df,\u5c55\u793a\u5bf9\u5e94\u7684\u8be6\u60c5\u9875: mleftIn(item,index)\u51fd\u6570\u901a\u8fc7\u4f20\u8f93 v-for \u5faa\u73af\u4e2d\u6570\u7ec4 menuList \u7684 item \u6bcf\u4e00\u9879\u4e3a\u5a92\u4ecb, \u800c\u6570\u636e\u4e2d menuList \u4e2d\u5305\u542b\u5de6\u4fa7\u6570\u636e menuItem \u4e0e\u53f3\u4fa7\u6bcf\u4e00\u9875\u7684\u6807\u9898 menu \u76f8\u540c, \u4ece\u800c\u5c06\u5de6\u4fa7\u548c\u53f3\u4fa7\u6570\u636e\u7ed1\u5b9a, \u6545\u800c\u5f62\u6210\u4ece\u5de6\u4fa7\u8fc7\u6ee4\u5230\u53f3\u4fa7\u533a\u57df\u662f\u56fa\u5b9a\u7684\u8be6\u60c5\u9875\u5185\u5bb9.<\/li>\n\u2463\u9875\u9762\u7b2c\u4e8c\u6b21\u672a\u5237\u65b0\u4e4b\u524d(\u9996\u6b21\u8fdb\u5165\u9875\u9762\u6e32\u67d3), \u9f20\u6807\u60ac\u6302'\u53d1\u73b0',\u8981\u51fa\u73b0\u7b2c\u4e00\u4e2a'\u7cbe\u9009'\u8be6\u60c5\u9875\u53ca'\u7cbe\u9009'item \u80cc\u666f\u53d8\u9ec4: \u9f20\u6807\u79fb\u51fa\u8be5\u5143\u7d20[\u4e8c\u7ea7\u76ee\u5f55\u6574\u4e2a\u5927\u6a21\u5757]\u4e4b\u5916,\u5219\u89e6\u53d1 mouseleave \u4e8b\u4ef6,\u521d\u59cb\u5316\u6570\u636e.<\/li>\n\u2464\u7b2c\u4e8c\u6b21\u9875\u9762\u5237\u65b0\u4e4b\u540e,\u521d\u59cb\u5316\u6570\u636e: \u91c7\u7528 mounted \u751f\u547d\u5468\u671f[\u6e32\u67d3\u6210 html \u540e\u8c03\u7528]: \u4f7f\u9f20\u6807\u60ac\u6302'\u53d1\u73b0',\u7b2c\u4e00\u4e2a menu-item \u663e\u793a\u9ec4\u8272<\/li>\n<\/ul>\n <li class="find">\n <a href="#">\u53d1\u73b0<\/a>\n <div class="h_menu" @mouseleave="mleftLeave()">\n <div class="menu_box mleft">\n <!-- <a href="">\u7cbe\u9009<\/a>-->\n <a v-for="(item,index) in menuList" :key="index" :ref="'test'+index" href="javascript:;"\n @mouseover="mleftIn(item,index)">{{ item.menu }}<\/a>\n <!-- <el-cascader-panel :options="findOptions" :props="props" \/>-->\n <\/div>\n <div class="mright">\n <div class="cate-box">\n <a class="cate-title" href="">\n <img :src="data.url" alt="">\n <span>{{ data.menu }}<\/span>\n <\/a>\n <div class="subCate">\n <a v-for="(itemOne) in data.items" :key="itemOne">{{ itemOne.text }}<\/a>\n <\/div>\n <\/div>\n <\/div>\n <div class="right_bar">\n <div class="icons">\n <a>\n <span class="icon-box">\n <span class="tangle-1"><\/span>\n <span class="tangle-2"><\/span>\n <i class="ani-star"><\/i>\n <span class="tangle-3"><\/span>\n <\/span>\n <span class="icon-text">\u6536\u85cf\u5939<\/span>\n <\/a>\n <a>\n <img alt="" src="..\/assets\/images\/icon-header-discover-designer.png">\n <span>\u8bbe\u8ba1\u5e08<\/span>\n <\/a>\n <a>\n <img alt="" src="..\/assets\/images\/icon-header-discover-focus.png">\n <span>\u699c\u5355<\/span>\n <!-- <sup class="subNavDot"><\/sup>-->\n <\/a>\n <\/div>\n <div class="ad_box">\n\n <\/div>\n <\/div>\n <\/div>\n <\/li><\/code><\/pre>\n data: {},\n menuList: [\n {\n menu: '\u7cbe\u9009',\n url: require('..\/assets\/images\/zuanshi.png'),\n items: [\n { text: '\u8fd0\u8425\u8bbe\u8ba1' },\n { text: '\u5305\u88c5' },\n { text: '\u52a8\u753b\/\u5f71\u89c6' },\n { text: '\u4eba\u50cf\u6444\u5f71' },\n { text: '\u5546\u4e1a\u63d2\u753b' },\n { text: '\u7535\u5546' },\n { text: 'APP \u754c\u9762' },\n { text: '\u827a\u672f\u63d2\u753b' },\n { text: '\u5bb6\u88c5\u8bbe\u8ba1' },\n { text: '\u6d77\u62a5' },\n { text: '\u6587\u7ae0' }\n ]\n },\n { menu: '\u5e73\u9762' },\n { menu: 'UI' },\n { menu: '\u7f51\u9875' },\n { menu: '\u63d2\u753b' },\n { menu: '\u52a8\u6f2b' },\n { menu: '\u6444\u5f71' },\n { menu: '\u7a7a\u95f4' },\n { menu: '\u5de5\u4e1a\/\u4ea7\u54c1' },\n { menu: '\u4e09\u7ef4' },\n { menu: '\u5f71\u89c6' },\n { menu: '\u624b\u5de5\u827a' },\n { menu: '\u7eaf\u827a\u672f' },\n { menu: '\u670d\u88c5' },\n { menu: '\u5176\u4ed6' }\n ],<\/code><\/pre>\n \/\/\u6e32\u67d3\u6210 html \u4e4b\u524d\u8c03\u7528,\u521d\u59cb\u5316\u4e00\u4e9b\u5c5e\u6027\u503c [\u9f20\u6807\u60ac\u6302'\u53d1\u73b0',\u5c31\u51fa\u73b0\u7b2c\u4e00\u4e2a\u7cbe\u9009\u9875\u9762]\n created () {\n this.data = this.menuList[0]\n },\n \/\/\u6e32\u67d3\u6210 html \u540e\u8c03\u7528 [\u9f20\u6807\u60ac\u6302'\u53d1\u73b0',\u7b2c\u4e00\u4e2a menu-item \u663e\u793a\u9ec4\u8272](\u9875\u9762\u5237\u65b0\u4e86\u4e4b\u540e\u7684)\n mounted () {\n this.$refs['test' + 0][0].style.backgroundColor = 'rgb(255, 242, 0)'\n },\n methods: {\n \/\/\u9f20\u6807\u8fdb\u5165\u51fd\u6570\n mleftIn (item, index) {\n \/\/\u83b7\u53d6 menuList \u4e2d\u6bcf\u4e2a menuItem \u5b57\u7b26\u4e32\u7684\u957f\u5ea6\n let menuSize = this.menuList.length\n for (let i = 0; i < menuSize; i++) {\n \/\/for \u5faa\u73af,i \u5982\u679c\u5c0f\u4e8e menuSize,\u5219\u7f6e\u4e8e menuItem \u989c\u8272\u4e3a\u7070\u8272,\u5b9e\u73b0\u5207\u6362\u6548\u679c\n this.$refs['test' + i][0].style.backgroundColor = '#f8f8f8'\n }\n \/\/\u8df3\u51fa for \u5faa\u73af,\u7531\u5de6\u4fa7\u79fb\u5411\u53f3\u4fa7\u8be6\u60c5\u9875\u65f6,\u5176 menuItem \u7684\u989c\u8272\u4e3a\u9ec4\u8272\n this.$refs['test' + index][0].style.backgroundColor = 'rgb(255, 242, 0)'\n \/\/\u5c06\u53f3\u4fa7\u6570\u636e\u8bbe\u7f6e\u4e3a item,\u663e\u793a\u6570\u636e\n this.data = item\n },\n \/\/\u9f20\u6807\u8fdb\u5165\u51fd\u6570\n \/\/\u6ce8\u610f: mouseleave:\u662f\u9f20\u6807\u79fb\u51fa\u8be5\u5143\u7d20\u4e4b\u5916,\u5219\u89e6\u53d1 mouseleave \u4e8b\u4ef6\n \/\/ mouseout : \u662f\u5f53\u6307\u9488\u79bb\u5f00\u8be5\u5143\u7d20\u53ca\u5176\u6240\u6709\u540e\u4ee3\u65f6\uff0c\u4f1a\u89e6\u53d1 mouseleave\n \/\/ \u800c\u5f53\u6307\u9488\u79bb\u5f00\u5143\u7d20\u6216\u79bb\u5f00\u5143\u7d20\u7684\u540e\u4ee3\uff08\u5373\u4f7f\u6307\u9488\u4ecd\u5728\u5143\u7d20\u5185\uff09\u65f6\uff0c\u4e5f\u4f1a\u89e6\u53d1 mouseout \u4e8b\u4ef6\n mleftLeave () {\n \/\/\u83b7\u53d6 menuList \u4e2d\u6bcf\u4e2a menuItem \u5b57\u7b26\u4e32\u7684\u957f\u5ea6\n let menuSize = this.menuList.length\n for (let i = 0; i < menuSize; i++) {\n this.$refs['test' + i][0].style.backgroundColor = '#f8f8f8'\n }\n \/\/ \u8df3\u51fa\u5faa\u73af,\u6d4f\u89c8\u5b8c'\u53d1\u73b0',\u9f20\u6807\u79fb\u51fa,\u7f6e\u4e8e\u53f3\u4fa7\u6570\u636e\u4e3a\u7b2c\u4e00\u4e2a\u7cbe\u9009\u6570\u636e\n this.data = this.menuList[0]\n \/\/\u9f20\u6807\u79fb\u51fa\u4e8b\u4ef6,\u7f6e\u4e8e\u7b2c\u4e00\u4e2a menuitem \u4e3a\u9ec4\u8272[\u672a\u5237\u65b0\u65f6\u7684\u8bbe\u7f6e]\n this.$refs['test' + 0][0].style.backgroundColor = 'rgb(255, 242, 0)'\n\n \/\/ this.data = {}\n \/\/ this.$refs['test'+index][0].style.backgroundColor = '#f8f8f8'\n \/\/ console.log('\u6eda\u51fa\u53bb')\n },\n}<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"\u4e0b\u8f7d\u4f9d\u8d56\u901f\u5ea6\u5feb npm install –registry=https:\/\/registry.npm.tao […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[],"class_list":["post-3462","post","type-post","status-publish","format-standard","hentry","category-web"],"_links":{"self":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/3462","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3462"}],"version-history":[{"count":38,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/3462\/revisions"}],"predecessor-version":[{"id":3558,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/3462\/revisions\/3558"}],"wp:attachment":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3462"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=3462"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=3462"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
<\/p>\n<\/p><\/noscript>\n.mleft::-webkit-scrollbar{\n width: 6px;\n background-color: #f8f8f8;\n\n}\n.mleft::-webkit-scrollbar-thumb{\n width: 6px;\n background-color: #adacac;\n border-radius: 4px;\n}<\/code><\/pre>\nhead \u533a '\u53d1\u73b0' \u5b9e\u73b0\u4ea4\u4e92\u6548\u679c [\u8be5\u9996\u9875\u6700\u607c\u706b\u7684]<\/h2>\n<\/p>\n<\/p><\/noscript>\ntodo head \u533a'\u53d1\u73b0'\u4ea4\u4e92\u5b9e\u73b0\u601d\u8def:<\/h3>\n\n\u2460\u89c2\u5bdf\u8be5\u533a\u7ed3\u6784,\u4e00\u4e2a\u5927\u6a21\u5757,\u5176\u4e2d\u5206\u4e3a\u5de6\u4e2d\u53f3\u4e09\u4e2a\u6a21\u5757,\u5e76\u4f9d\u6b21\u5199\u51fa\u4e09\u4e2a\u6a21\u5757\u7684\u4ee3\u7801,<\/li>\n\u2461\u5de6\u4fa7\u533a\u57df: \u8981\u5c55\u793a\u7684\u6548\u679c\u6709: \u9f20\u6807\u4e0a\u4e0b\u79fb\u52a8,\u6240\u7ecf\u7684 menuItem \u4f1a\u5c55\u73b0\u9ec4\u8272\u80cc\u666f, \u5219\u5f15\u7528 vue \u7684 ref \u5c5e\u6027\u5bf9 DOM \u5143\u7d20\u8fdb\u884c\u52a8\u6001\u7ed1\u5b9a.\n\n\u6ce8\u610f:ref \u9700\u8981\u5728 dom \u6e32\u67d3\u5b8c\u6210\u540e\u624d\u4f1a\u6709,\u5728\u4f7f\u7528\u7684\u65f6\u5019\u786e\u4fdd dom \u5df2\u7ecf\u6e32\u67d3\u5b8c\u6210, \u6bd4\u5982\u5728\u751f\u547d\u5468\u671f mounted(){}\u94a9\u5b50\u4e2d\u8c03\u7528. this.$refs.xxx:\u51cf\u5c11\u83b7\u53d6 dom \u8282\u70b9\u7684\u6d88\u8017<\/li>\n<\/ul>\n<\/li>\n\u2462\u5de6\u4fa7\u533a\u57df\u8fc7\u6ee4\u5230\u53f3\u4fa7\u533a\u57df,\u5c55\u793a\u5bf9\u5e94\u7684\u8be6\u60c5\u9875: mleftIn(item,index)\u51fd\u6570\u901a\u8fc7\u4f20\u8f93 v-for \u5faa\u73af\u4e2d\u6570\u7ec4 menuList \u7684 item \u6bcf\u4e00\u9879\u4e3a\u5a92\u4ecb, \u800c\u6570\u636e\u4e2d menuList \u4e2d\u5305\u542b\u5de6\u4fa7\u6570\u636e menuItem \u4e0e\u53f3\u4fa7\u6bcf\u4e00\u9875\u7684\u6807\u9898 menu \u76f8\u540c, \u4ece\u800c\u5c06\u5de6\u4fa7\u548c\u53f3\u4fa7\u6570\u636e\u7ed1\u5b9a, \u6545\u800c\u5f62\u6210\u4ece\u5de6\u4fa7\u8fc7\u6ee4\u5230\u53f3\u4fa7\u533a\u57df\u662f\u56fa\u5b9a\u7684\u8be6\u60c5\u9875\u5185\u5bb9.<\/li>\n\u2463\u9875\u9762\u7b2c\u4e8c\u6b21\u672a\u5237\u65b0\u4e4b\u524d(\u9996\u6b21\u8fdb\u5165\u9875\u9762\u6e32\u67d3), \u9f20\u6807\u60ac\u6302'\u53d1\u73b0',\u8981\u51fa\u73b0\u7b2c\u4e00\u4e2a'\u7cbe\u9009'\u8be6\u60c5\u9875\u53ca'\u7cbe\u9009'item \u80cc\u666f\u53d8\u9ec4: \u9f20\u6807\u79fb\u51fa\u8be5\u5143\u7d20[\u4e8c\u7ea7\u76ee\u5f55\u6574\u4e2a\u5927\u6a21\u5757]\u4e4b\u5916,\u5219\u89e6\u53d1 mouseleave \u4e8b\u4ef6,\u521d\u59cb\u5316\u6570\u636e.<\/li>\n\u2464\u7b2c\u4e8c\u6b21\u9875\u9762\u5237\u65b0\u4e4b\u540e,\u521d\u59cb\u5316\u6570\u636e: \u91c7\u7528 mounted \u751f\u547d\u5468\u671f[\u6e32\u67d3\u6210 html \u540e\u8c03\u7528]: \u4f7f\u9f20\u6807\u60ac\u6302'\u53d1\u73b0',\u7b2c\u4e00\u4e2a menu-item \u663e\u793a\u9ec4\u8272<\/li>\n<\/ul>\n <li class="find">\n <a href="#">\u53d1\u73b0<\/a>\n <div class="h_menu" @mouseleave="mleftLeave()">\n <div class="menu_box mleft">\n <!-- <a href="">\u7cbe\u9009<\/a>-->\n <a v-for="(item,index) in menuList" :key="index" :ref="'test'+index" href="javascript:;"\n @mouseover="mleftIn(item,index)">{{ item.menu }}<\/a>\n <!-- <el-cascader-panel :options="findOptions" :props="props" \/>-->\n <\/div>\n <div class="mright">\n <div class="cate-box">\n <a class="cate-title" href="">\n <img :src="data.url" alt="">\n <span>{{ data.menu }}<\/span>\n <\/a>\n <div class="subCate">\n <a v-for="(itemOne) in data.items" :key="itemOne">{{ itemOne.text }}<\/a>\n <\/div>\n <\/div>\n <\/div>\n <div class="right_bar">\n <div class="icons">\n <a>\n <span class="icon-box">\n <span class="tangle-1"><\/span>\n <span class="tangle-2"><\/span>\n <i class="ani-star"><\/i>\n <span class="tangle-3"><\/span>\n <\/span>\n <span class="icon-text">\u6536\u85cf\u5939<\/span>\n <\/a>\n <a>\n <img alt="" src="..\/assets\/images\/icon-header-discover-designer.png">\n <span>\u8bbe\u8ba1\u5e08<\/span>\n <\/a>\n <a>\n <img alt="" src="..\/assets\/images\/icon-header-discover-focus.png">\n <span>\u699c\u5355<\/span>\n <!-- <sup class="subNavDot"><\/sup>-->\n <\/a>\n <\/div>\n <div class="ad_box">\n\n <\/div>\n <\/div>\n <\/div>\n <\/li><\/code><\/pre>\n data: {},\n menuList: [\n {\n menu: '\u7cbe\u9009',\n url: require('..\/assets\/images\/zuanshi.png'),\n items: [\n { text: '\u8fd0\u8425\u8bbe\u8ba1' },\n { text: '\u5305\u88c5' },\n { text: '\u52a8\u753b\/\u5f71\u89c6' },\n { text: '\u4eba\u50cf\u6444\u5f71' },\n { text: '\u5546\u4e1a\u63d2\u753b' },\n { text: '\u7535\u5546' },\n { text: 'APP \u754c\u9762' },\n { text: '\u827a\u672f\u63d2\u753b' },\n { text: '\u5bb6\u88c5\u8bbe\u8ba1' },\n { text: '\u6d77\u62a5' },\n { text: '\u6587\u7ae0' }\n ]\n },\n { menu: '\u5e73\u9762' },\n { menu: 'UI' },\n { menu: '\u7f51\u9875' },\n { menu: '\u63d2\u753b' },\n { menu: '\u52a8\u6f2b' },\n { menu: '\u6444\u5f71' },\n { menu: '\u7a7a\u95f4' },\n { menu: '\u5de5\u4e1a\/\u4ea7\u54c1' },\n { menu: '\u4e09\u7ef4' },\n { menu: '\u5f71\u89c6' },\n { menu: '\u624b\u5de5\u827a' },\n { menu: '\u7eaf\u827a\u672f' },\n { menu: '\u670d\u88c5' },\n { menu: '\u5176\u4ed6' }\n ],<\/code><\/pre>\n \/\/\u6e32\u67d3\u6210 html \u4e4b\u524d\u8c03\u7528,\u521d\u59cb\u5316\u4e00\u4e9b\u5c5e\u6027\u503c [\u9f20\u6807\u60ac\u6302'\u53d1\u73b0',\u5c31\u51fa\u73b0\u7b2c\u4e00\u4e2a\u7cbe\u9009\u9875\u9762]\n created () {\n this.data = this.menuList[0]\n },\n \/\/\u6e32\u67d3\u6210 html \u540e\u8c03\u7528 [\u9f20\u6807\u60ac\u6302'\u53d1\u73b0',\u7b2c\u4e00\u4e2a menu-item \u663e\u793a\u9ec4\u8272](\u9875\u9762\u5237\u65b0\u4e86\u4e4b\u540e\u7684)\n mounted () {\n this.$refs['test' + 0][0].style.backgroundColor = 'rgb(255, 242, 0)'\n },\n methods: {\n \/\/\u9f20\u6807\u8fdb\u5165\u51fd\u6570\n mleftIn (item, index) {\n \/\/\u83b7\u53d6 menuList \u4e2d\u6bcf\u4e2a menuItem \u5b57\u7b26\u4e32\u7684\u957f\u5ea6\n let menuSize = this.menuList.length\n for (let i = 0; i < menuSize; i++) {\n \/\/for \u5faa\u73af,i \u5982\u679c\u5c0f\u4e8e menuSize,\u5219\u7f6e\u4e8e menuItem \u989c\u8272\u4e3a\u7070\u8272,\u5b9e\u73b0\u5207\u6362\u6548\u679c\n this.$refs['test' + i][0].style.backgroundColor = '#f8f8f8'\n }\n \/\/\u8df3\u51fa for \u5faa\u73af,\u7531\u5de6\u4fa7\u79fb\u5411\u53f3\u4fa7\u8be6\u60c5\u9875\u65f6,\u5176 menuItem \u7684\u989c\u8272\u4e3a\u9ec4\u8272\n this.$refs['test' + index][0].style.backgroundColor = 'rgb(255, 242, 0)'\n \/\/\u5c06\u53f3\u4fa7\u6570\u636e\u8bbe\u7f6e\u4e3a item,\u663e\u793a\u6570\u636e\n this.data = item\n },\n \/\/\u9f20\u6807\u8fdb\u5165\u51fd\u6570\n \/\/\u6ce8\u610f: mouseleave:\u662f\u9f20\u6807\u79fb\u51fa\u8be5\u5143\u7d20\u4e4b\u5916,\u5219\u89e6\u53d1 mouseleave \u4e8b\u4ef6\n \/\/ mouseout : \u662f\u5f53\u6307\u9488\u79bb\u5f00\u8be5\u5143\u7d20\u53ca\u5176\u6240\u6709\u540e\u4ee3\u65f6\uff0c\u4f1a\u89e6\u53d1 mouseleave\n \/\/ \u800c\u5f53\u6307\u9488\u79bb\u5f00\u5143\u7d20\u6216\u79bb\u5f00\u5143\u7d20\u7684\u540e\u4ee3\uff08\u5373\u4f7f\u6307\u9488\u4ecd\u5728\u5143\u7d20\u5185\uff09\u65f6\uff0c\u4e5f\u4f1a\u89e6\u53d1 mouseout \u4e8b\u4ef6\n mleftLeave () {\n \/\/\u83b7\u53d6 menuList \u4e2d\u6bcf\u4e2a menuItem \u5b57\u7b26\u4e32\u7684\u957f\u5ea6\n let menuSize = this.menuList.length\n for (let i = 0; i < menuSize; i++) {\n this.$refs['test' + i][0].style.backgroundColor = '#f8f8f8'\n }\n \/\/ \u8df3\u51fa\u5faa\u73af,\u6d4f\u89c8\u5b8c'\u53d1\u73b0',\u9f20\u6807\u79fb\u51fa,\u7f6e\u4e8e\u53f3\u4fa7\u6570\u636e\u4e3a\u7b2c\u4e00\u4e2a\u7cbe\u9009\u6570\u636e\n this.data = this.menuList[0]\n \/\/\u9f20\u6807\u79fb\u51fa\u4e8b\u4ef6,\u7f6e\u4e8e\u7b2c\u4e00\u4e2a menuitem \u4e3a\u9ec4\u8272[\u672a\u5237\u65b0\u65f6\u7684\u8bbe\u7f6e]\n this.$refs['test' + 0][0].style.backgroundColor = 'rgb(255, 242, 0)'\n\n \/\/ this.data = {}\n \/\/ this.$refs['test'+index][0].style.backgroundColor = '#f8f8f8'\n \/\/ console.log('\u6eda\u51fa\u53bb')\n },\n}<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"\u4e0b\u8f7d\u4f9d\u8d56\u901f\u5ea6\u5feb npm install –registry=https:\/\/registry.npm.tao […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[],"class_list":["post-3462","post","type-post","status-publish","format-standard","hentry","category-web"],"_links":{"self":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/3462","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3462"}],"version-history":[{"count":38,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/3462\/revisions"}],"predecessor-version":[{"id":3558,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/3462\/revisions\/3558"}],"wp:attachment":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3462"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=3462"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=3462"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
.mleft::-webkit-scrollbar{\n width: 6px;\n background-color: #f8f8f8;\n\n}\n.mleft::-webkit-scrollbar-thumb{\n width: 6px;\n background-color: #adacac;\n border-radius: 4px;\n}<\/code><\/pre>\nhead \u533a '\u53d1\u73b0' \u5b9e\u73b0\u4ea4\u4e92\u6548\u679c [\u8be5\u9996\u9875\u6700\u607c\u706b\u7684]<\/h2>\n<\/p>\n<\/p><\/noscript>\ntodo head \u533a'\u53d1\u73b0'\u4ea4\u4e92\u5b9e\u73b0\u601d\u8def:<\/h3>\n\n\u2460\u89c2\u5bdf\u8be5\u533a\u7ed3\u6784,\u4e00\u4e2a\u5927\u6a21\u5757,\u5176\u4e2d\u5206\u4e3a\u5de6\u4e2d\u53f3\u4e09\u4e2a\u6a21\u5757,\u5e76\u4f9d\u6b21\u5199\u51fa\u4e09\u4e2a\u6a21\u5757\u7684\u4ee3\u7801,<\/li>\n\u2461\u5de6\u4fa7\u533a\u57df: \u8981\u5c55\u793a\u7684\u6548\u679c\u6709: \u9f20\u6807\u4e0a\u4e0b\u79fb\u52a8,\u6240\u7ecf\u7684 menuItem \u4f1a\u5c55\u73b0\u9ec4\u8272\u80cc\u666f, \u5219\u5f15\u7528 vue \u7684 ref \u5c5e\u6027\u5bf9 DOM \u5143\u7d20\u8fdb\u884c\u52a8\u6001\u7ed1\u5b9a.\n\n\u6ce8\u610f:ref \u9700\u8981\u5728 dom \u6e32\u67d3\u5b8c\u6210\u540e\u624d\u4f1a\u6709,\u5728\u4f7f\u7528\u7684\u65f6\u5019\u786e\u4fdd dom \u5df2\u7ecf\u6e32\u67d3\u5b8c\u6210, \u6bd4\u5982\u5728\u751f\u547d\u5468\u671f mounted(){}\u94a9\u5b50\u4e2d\u8c03\u7528. this.$refs.xxx:\u51cf\u5c11\u83b7\u53d6 dom \u8282\u70b9\u7684\u6d88\u8017<\/li>\n<\/ul>\n<\/li>\n\u2462\u5de6\u4fa7\u533a\u57df\u8fc7\u6ee4\u5230\u53f3\u4fa7\u533a\u57df,\u5c55\u793a\u5bf9\u5e94\u7684\u8be6\u60c5\u9875: mleftIn(item,index)\u51fd\u6570\u901a\u8fc7\u4f20\u8f93 v-for \u5faa\u73af\u4e2d\u6570\u7ec4 menuList \u7684 item \u6bcf\u4e00\u9879\u4e3a\u5a92\u4ecb, \u800c\u6570\u636e\u4e2d menuList \u4e2d\u5305\u542b\u5de6\u4fa7\u6570\u636e menuItem \u4e0e\u53f3\u4fa7\u6bcf\u4e00\u9875\u7684\u6807\u9898 menu \u76f8\u540c, \u4ece\u800c\u5c06\u5de6\u4fa7\u548c\u53f3\u4fa7\u6570\u636e\u7ed1\u5b9a, \u6545\u800c\u5f62\u6210\u4ece\u5de6\u4fa7\u8fc7\u6ee4\u5230\u53f3\u4fa7\u533a\u57df\u662f\u56fa\u5b9a\u7684\u8be6\u60c5\u9875\u5185\u5bb9.<\/li>\n\u2463\u9875\u9762\u7b2c\u4e8c\u6b21\u672a\u5237\u65b0\u4e4b\u524d(\u9996\u6b21\u8fdb\u5165\u9875\u9762\u6e32\u67d3), \u9f20\u6807\u60ac\u6302'\u53d1\u73b0',\u8981\u51fa\u73b0\u7b2c\u4e00\u4e2a'\u7cbe\u9009'\u8be6\u60c5\u9875\u53ca'\u7cbe\u9009'item \u80cc\u666f\u53d8\u9ec4: \u9f20\u6807\u79fb\u51fa\u8be5\u5143\u7d20[\u4e8c\u7ea7\u76ee\u5f55\u6574\u4e2a\u5927\u6a21\u5757]\u4e4b\u5916,\u5219\u89e6\u53d1 mouseleave \u4e8b\u4ef6,\u521d\u59cb\u5316\u6570\u636e.<\/li>\n\u2464\u7b2c\u4e8c\u6b21\u9875\u9762\u5237\u65b0\u4e4b\u540e,\u521d\u59cb\u5316\u6570\u636e: \u91c7\u7528 mounted \u751f\u547d\u5468\u671f[\u6e32\u67d3\u6210 html \u540e\u8c03\u7528]: \u4f7f\u9f20\u6807\u60ac\u6302'\u53d1\u73b0',\u7b2c\u4e00\u4e2a menu-item \u663e\u793a\u9ec4\u8272<\/li>\n<\/ul>\n <li class="find">\n <a href="#">\u53d1\u73b0<\/a>\n <div class="h_menu" @mouseleave="mleftLeave()">\n <div class="menu_box mleft">\n <!-- <a href="">\u7cbe\u9009<\/a>-->\n <a v-for="(item,index) in menuList" :key="index" :ref="'test'+index" href="javascript:;"\n @mouseover="mleftIn(item,index)">{{ item.menu }}<\/a>\n <!-- <el-cascader-panel :options="findOptions" :props="props" \/>-->\n <\/div>\n <div class="mright">\n <div class="cate-box">\n <a class="cate-title" href="">\n <img :src="data.url" alt="">\n <span>{{ data.menu }}<\/span>\n <\/a>\n <div class="subCate">\n <a v-for="(itemOne) in data.items" :key="itemOne">{{ itemOne.text }}<\/a>\n <\/div>\n <\/div>\n <\/div>\n <div class="right_bar">\n <div class="icons">\n <a>\n <span class="icon-box">\n <span class="tangle-1"><\/span>\n <span class="tangle-2"><\/span>\n <i class="ani-star"><\/i>\n <span class="tangle-3"><\/span>\n <\/span>\n <span class="icon-text">\u6536\u85cf\u5939<\/span>\n <\/a>\n <a>\n <img alt="" src="..\/assets\/images\/icon-header-discover-designer.png">\n <span>\u8bbe\u8ba1\u5e08<\/span>\n <\/a>\n <a>\n <img alt="" src="..\/assets\/images\/icon-header-discover-focus.png">\n <span>\u699c\u5355<\/span>\n <!-- <sup class="subNavDot"><\/sup>-->\n <\/a>\n <\/div>\n <div class="ad_box">\n\n <\/div>\n <\/div>\n <\/div>\n <\/li><\/code><\/pre>\n data: {},\n menuList: [\n {\n menu: '\u7cbe\u9009',\n url: require('..\/assets\/images\/zuanshi.png'),\n items: [\n { text: '\u8fd0\u8425\u8bbe\u8ba1' },\n { text: '\u5305\u88c5' },\n { text: '\u52a8\u753b\/\u5f71\u89c6' },\n { text: '\u4eba\u50cf\u6444\u5f71' },\n { text: '\u5546\u4e1a\u63d2\u753b' },\n { text: '\u7535\u5546' },\n { text: 'APP \u754c\u9762' },\n { text: '\u827a\u672f\u63d2\u753b' },\n { text: '\u5bb6\u88c5\u8bbe\u8ba1' },\n { text: '\u6d77\u62a5' },\n { text: '\u6587\u7ae0' }\n ]\n },\n { menu: '\u5e73\u9762' },\n { menu: 'UI' },\n { menu: '\u7f51\u9875' },\n { menu: '\u63d2\u753b' },\n { menu: '\u52a8\u6f2b' },\n { menu: '\u6444\u5f71' },\n { menu: '\u7a7a\u95f4' },\n { menu: '\u5de5\u4e1a\/\u4ea7\u54c1' },\n { menu: '\u4e09\u7ef4' },\n { menu: '\u5f71\u89c6' },\n { menu: '\u624b\u5de5\u827a' },\n { menu: '\u7eaf\u827a\u672f' },\n { menu: '\u670d\u88c5' },\n { menu: '\u5176\u4ed6' }\n ],<\/code><\/pre>\n \/\/\u6e32\u67d3\u6210 html \u4e4b\u524d\u8c03\u7528,\u521d\u59cb\u5316\u4e00\u4e9b\u5c5e\u6027\u503c [\u9f20\u6807\u60ac\u6302'\u53d1\u73b0',\u5c31\u51fa\u73b0\u7b2c\u4e00\u4e2a\u7cbe\u9009\u9875\u9762]\n created () {\n this.data = this.menuList[0]\n },\n \/\/\u6e32\u67d3\u6210 html \u540e\u8c03\u7528 [\u9f20\u6807\u60ac\u6302'\u53d1\u73b0',\u7b2c\u4e00\u4e2a menu-item \u663e\u793a\u9ec4\u8272](\u9875\u9762\u5237\u65b0\u4e86\u4e4b\u540e\u7684)\n mounted () {\n this.$refs['test' + 0][0].style.backgroundColor = 'rgb(255, 242, 0)'\n },\n methods: {\n \/\/\u9f20\u6807\u8fdb\u5165\u51fd\u6570\n mleftIn (item, index) {\n \/\/\u83b7\u53d6 menuList \u4e2d\u6bcf\u4e2a menuItem \u5b57\u7b26\u4e32\u7684\u957f\u5ea6\n let menuSize = this.menuList.length\n for (let i = 0; i < menuSize; i++) {\n \/\/for \u5faa\u73af,i \u5982\u679c\u5c0f\u4e8e menuSize,\u5219\u7f6e\u4e8e menuItem \u989c\u8272\u4e3a\u7070\u8272,\u5b9e\u73b0\u5207\u6362\u6548\u679c\n this.$refs['test' + i][0].style.backgroundColor = '#f8f8f8'\n }\n \/\/\u8df3\u51fa for \u5faa\u73af,\u7531\u5de6\u4fa7\u79fb\u5411\u53f3\u4fa7\u8be6\u60c5\u9875\u65f6,\u5176 menuItem \u7684\u989c\u8272\u4e3a\u9ec4\u8272\n this.$refs['test' + index][0].style.backgroundColor = 'rgb(255, 242, 0)'\n \/\/\u5c06\u53f3\u4fa7\u6570\u636e\u8bbe\u7f6e\u4e3a item,\u663e\u793a\u6570\u636e\n this.data = item\n },\n \/\/\u9f20\u6807\u8fdb\u5165\u51fd\u6570\n \/\/\u6ce8\u610f: mouseleave:\u662f\u9f20\u6807\u79fb\u51fa\u8be5\u5143\u7d20\u4e4b\u5916,\u5219\u89e6\u53d1 mouseleave \u4e8b\u4ef6\n \/\/ mouseout : \u662f\u5f53\u6307\u9488\u79bb\u5f00\u8be5\u5143\u7d20\u53ca\u5176\u6240\u6709\u540e\u4ee3\u65f6\uff0c\u4f1a\u89e6\u53d1 mouseleave\n \/\/ \u800c\u5f53\u6307\u9488\u79bb\u5f00\u5143\u7d20\u6216\u79bb\u5f00\u5143\u7d20\u7684\u540e\u4ee3\uff08\u5373\u4f7f\u6307\u9488\u4ecd\u5728\u5143\u7d20\u5185\uff09\u65f6\uff0c\u4e5f\u4f1a\u89e6\u53d1 mouseout \u4e8b\u4ef6\n mleftLeave () {\n \/\/\u83b7\u53d6 menuList \u4e2d\u6bcf\u4e2a menuItem \u5b57\u7b26\u4e32\u7684\u957f\u5ea6\n let menuSize = this.menuList.length\n for (let i = 0; i < menuSize; i++) {\n this.$refs['test' + i][0].style.backgroundColor = '#f8f8f8'\n }\n \/\/ \u8df3\u51fa\u5faa\u73af,\u6d4f\u89c8\u5b8c'\u53d1\u73b0',\u9f20\u6807\u79fb\u51fa,\u7f6e\u4e8e\u53f3\u4fa7\u6570\u636e\u4e3a\u7b2c\u4e00\u4e2a\u7cbe\u9009\u6570\u636e\n this.data = this.menuList[0]\n \/\/\u9f20\u6807\u79fb\u51fa\u4e8b\u4ef6,\u7f6e\u4e8e\u7b2c\u4e00\u4e2a menuitem \u4e3a\u9ec4\u8272[\u672a\u5237\u65b0\u65f6\u7684\u8bbe\u7f6e]\n this.$refs['test' + 0][0].style.backgroundColor = 'rgb(255, 242, 0)'\n\n \/\/ this.data = {}\n \/\/ this.$refs['test'+index][0].style.backgroundColor = '#f8f8f8'\n \/\/ console.log('\u6eda\u51fa\u53bb')\n },\n}<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"\u4e0b\u8f7d\u4f9d\u8d56\u901f\u5ea6\u5feb npm install –registry=https:\/\/registry.npm.tao […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[],"class_list":["post-3462","post","type-post","status-publish","format-standard","hentry","category-web"],"_links":{"self":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/3462","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3462"}],"version-history":[{"count":38,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/3462\/revisions"}],"predecessor-version":[{"id":3558,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/3462\/revisions\/3558"}],"wp:attachment":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3462"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=3462"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=3462"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
<\/p>\n<\/p><\/noscript>\ntodo head \u533a'\u53d1\u73b0'\u4ea4\u4e92\u5b9e\u73b0\u601d\u8def:<\/h3>\n\n\u2460\u89c2\u5bdf\u8be5\u533a\u7ed3\u6784,\u4e00\u4e2a\u5927\u6a21\u5757,\u5176\u4e2d\u5206\u4e3a\u5de6\u4e2d\u53f3\u4e09\u4e2a\u6a21\u5757,\u5e76\u4f9d\u6b21\u5199\u51fa\u4e09\u4e2a\u6a21\u5757\u7684\u4ee3\u7801,<\/li>\n\u2461\u5de6\u4fa7\u533a\u57df: \u8981\u5c55\u793a\u7684\u6548\u679c\u6709: \u9f20\u6807\u4e0a\u4e0b\u79fb\u52a8,\u6240\u7ecf\u7684 menuItem \u4f1a\u5c55\u73b0\u9ec4\u8272\u80cc\u666f, \u5219\u5f15\u7528 vue \u7684 ref \u5c5e\u6027\u5bf9 DOM \u5143\u7d20\u8fdb\u884c\u52a8\u6001\u7ed1\u5b9a.\n\n\u6ce8\u610f:ref \u9700\u8981\u5728 dom \u6e32\u67d3\u5b8c\u6210\u540e\u624d\u4f1a\u6709,\u5728\u4f7f\u7528\u7684\u65f6\u5019\u786e\u4fdd dom \u5df2\u7ecf\u6e32\u67d3\u5b8c\u6210, \u6bd4\u5982\u5728\u751f\u547d\u5468\u671f mounted(){}\u94a9\u5b50\u4e2d\u8c03\u7528. this.$refs.xxx:\u51cf\u5c11\u83b7\u53d6 dom \u8282\u70b9\u7684\u6d88\u8017<\/li>\n<\/ul>\n<\/li>\n\u2462\u5de6\u4fa7\u533a\u57df\u8fc7\u6ee4\u5230\u53f3\u4fa7\u533a\u57df,\u5c55\u793a\u5bf9\u5e94\u7684\u8be6\u60c5\u9875: mleftIn(item,index)\u51fd\u6570\u901a\u8fc7\u4f20\u8f93 v-for \u5faa\u73af\u4e2d\u6570\u7ec4 menuList \u7684 item \u6bcf\u4e00\u9879\u4e3a\u5a92\u4ecb, \u800c\u6570\u636e\u4e2d menuList \u4e2d\u5305\u542b\u5de6\u4fa7\u6570\u636e menuItem \u4e0e\u53f3\u4fa7\u6bcf\u4e00\u9875\u7684\u6807\u9898 menu \u76f8\u540c, \u4ece\u800c\u5c06\u5de6\u4fa7\u548c\u53f3\u4fa7\u6570\u636e\u7ed1\u5b9a, \u6545\u800c\u5f62\u6210\u4ece\u5de6\u4fa7\u8fc7\u6ee4\u5230\u53f3\u4fa7\u533a\u57df\u662f\u56fa\u5b9a\u7684\u8be6\u60c5\u9875\u5185\u5bb9.<\/li>\n\u2463\u9875\u9762\u7b2c\u4e8c\u6b21\u672a\u5237\u65b0\u4e4b\u524d(\u9996\u6b21\u8fdb\u5165\u9875\u9762\u6e32\u67d3), \u9f20\u6807\u60ac\u6302'\u53d1\u73b0',\u8981\u51fa\u73b0\u7b2c\u4e00\u4e2a'\u7cbe\u9009'\u8be6\u60c5\u9875\u53ca'\u7cbe\u9009'item \u80cc\u666f\u53d8\u9ec4: \u9f20\u6807\u79fb\u51fa\u8be5\u5143\u7d20[\u4e8c\u7ea7\u76ee\u5f55\u6574\u4e2a\u5927\u6a21\u5757]\u4e4b\u5916,\u5219\u89e6\u53d1 mouseleave \u4e8b\u4ef6,\u521d\u59cb\u5316\u6570\u636e.<\/li>\n\u2464\u7b2c\u4e8c\u6b21\u9875\u9762\u5237\u65b0\u4e4b\u540e,\u521d\u59cb\u5316\u6570\u636e: \u91c7\u7528 mounted \u751f\u547d\u5468\u671f[\u6e32\u67d3\u6210 html \u540e\u8c03\u7528]: \u4f7f\u9f20\u6807\u60ac\u6302'\u53d1\u73b0',\u7b2c\u4e00\u4e2a menu-item \u663e\u793a\u9ec4\u8272<\/li>\n<\/ul>\n <li class="find">\n <a href="#">\u53d1\u73b0<\/a>\n <div class="h_menu" @mouseleave="mleftLeave()">\n <div class="menu_box mleft">\n <!-- <a href="">\u7cbe\u9009<\/a>-->\n <a v-for="(item,index) in menuList" :key="index" :ref="'test'+index" href="javascript:;"\n @mouseover="mleftIn(item,index)">{{ item.menu }}<\/a>\n <!-- <el-cascader-panel :options="findOptions" :props="props" \/>-->\n <\/div>\n <div class="mright">\n <div class="cate-box">\n <a class="cate-title" href="">\n <img :src="data.url" alt="">\n <span>{{ data.menu }}<\/span>\n <\/a>\n <div class="subCate">\n <a v-for="(itemOne) in data.items" :key="itemOne">{{ itemOne.text }}<\/a>\n <\/div>\n <\/div>\n <\/div>\n <div class="right_bar">\n <div class="icons">\n <a>\n <span class="icon-box">\n <span class="tangle-1"><\/span>\n <span class="tangle-2"><\/span>\n <i class="ani-star"><\/i>\n <span class="tangle-3"><\/span>\n <\/span>\n <span class="icon-text">\u6536\u85cf\u5939<\/span>\n <\/a>\n <a>\n <img alt="" src="..\/assets\/images\/icon-header-discover-designer.png">\n <span>\u8bbe\u8ba1\u5e08<\/span>\n <\/a>\n <a>\n <img alt="" src="..\/assets\/images\/icon-header-discover-focus.png">\n <span>\u699c\u5355<\/span>\n <!-- <sup class="subNavDot"><\/sup>-->\n <\/a>\n <\/div>\n <div class="ad_box">\n\n <\/div>\n <\/div>\n <\/div>\n <\/li><\/code><\/pre>\n data: {},\n menuList: [\n {\n menu: '\u7cbe\u9009',\n url: require('..\/assets\/images\/zuanshi.png'),\n items: [\n { text: '\u8fd0\u8425\u8bbe\u8ba1' },\n { text: '\u5305\u88c5' },\n { text: '\u52a8\u753b\/\u5f71\u89c6' },\n { text: '\u4eba\u50cf\u6444\u5f71' },\n { text: '\u5546\u4e1a\u63d2\u753b' },\n { text: '\u7535\u5546' },\n { text: 'APP \u754c\u9762' },\n { text: '\u827a\u672f\u63d2\u753b' },\n { text: '\u5bb6\u88c5\u8bbe\u8ba1' },\n { text: '\u6d77\u62a5' },\n { text: '\u6587\u7ae0' }\n ]\n },\n { menu: '\u5e73\u9762' },\n { menu: 'UI' },\n { menu: '\u7f51\u9875' },\n { menu: '\u63d2\u753b' },\n { menu: '\u52a8\u6f2b' },\n { menu: '\u6444\u5f71' },\n { menu: '\u7a7a\u95f4' },\n { menu: '\u5de5\u4e1a\/\u4ea7\u54c1' },\n { menu: '\u4e09\u7ef4' },\n { menu: '\u5f71\u89c6' },\n { menu: '\u624b\u5de5\u827a' },\n { menu: '\u7eaf\u827a\u672f' },\n { menu: '\u670d\u88c5' },\n { menu: '\u5176\u4ed6' }\n ],<\/code><\/pre>\n \/\/\u6e32\u67d3\u6210 html \u4e4b\u524d\u8c03\u7528,\u521d\u59cb\u5316\u4e00\u4e9b\u5c5e\u6027\u503c [\u9f20\u6807\u60ac\u6302'\u53d1\u73b0',\u5c31\u51fa\u73b0\u7b2c\u4e00\u4e2a\u7cbe\u9009\u9875\u9762]\n created () {\n this.data = this.menuList[0]\n },\n \/\/\u6e32\u67d3\u6210 html \u540e\u8c03\u7528 [\u9f20\u6807\u60ac\u6302'\u53d1\u73b0',\u7b2c\u4e00\u4e2a menu-item \u663e\u793a\u9ec4\u8272](\u9875\u9762\u5237\u65b0\u4e86\u4e4b\u540e\u7684)\n mounted () {\n this.$refs['test' + 0][0].style.backgroundColor = 'rgb(255, 242, 0)'\n },\n methods: {\n \/\/\u9f20\u6807\u8fdb\u5165\u51fd\u6570\n mleftIn (item, index) {\n \/\/\u83b7\u53d6 menuList \u4e2d\u6bcf\u4e2a menuItem \u5b57\u7b26\u4e32\u7684\u957f\u5ea6\n let menuSize = this.menuList.length\n for (let i = 0; i < menuSize; i++) {\n \/\/for \u5faa\u73af,i \u5982\u679c\u5c0f\u4e8e menuSize,\u5219\u7f6e\u4e8e menuItem \u989c\u8272\u4e3a\u7070\u8272,\u5b9e\u73b0\u5207\u6362\u6548\u679c\n this.$refs['test' + i][0].style.backgroundColor = '#f8f8f8'\n }\n \/\/\u8df3\u51fa for \u5faa\u73af,\u7531\u5de6\u4fa7\u79fb\u5411\u53f3\u4fa7\u8be6\u60c5\u9875\u65f6,\u5176 menuItem \u7684\u989c\u8272\u4e3a\u9ec4\u8272\n this.$refs['test' + index][0].style.backgroundColor = 'rgb(255, 242, 0)'\n \/\/\u5c06\u53f3\u4fa7\u6570\u636e\u8bbe\u7f6e\u4e3a item,\u663e\u793a\u6570\u636e\n this.data = item\n },\n \/\/\u9f20\u6807\u8fdb\u5165\u51fd\u6570\n \/\/\u6ce8\u610f: mouseleave:\u662f\u9f20\u6807\u79fb\u51fa\u8be5\u5143\u7d20\u4e4b\u5916,\u5219\u89e6\u53d1 mouseleave \u4e8b\u4ef6\n \/\/ mouseout : \u662f\u5f53\u6307\u9488\u79bb\u5f00\u8be5\u5143\u7d20\u53ca\u5176\u6240\u6709\u540e\u4ee3\u65f6\uff0c\u4f1a\u89e6\u53d1 mouseleave\n \/\/ \u800c\u5f53\u6307\u9488\u79bb\u5f00\u5143\u7d20\u6216\u79bb\u5f00\u5143\u7d20\u7684\u540e\u4ee3\uff08\u5373\u4f7f\u6307\u9488\u4ecd\u5728\u5143\u7d20\u5185\uff09\u65f6\uff0c\u4e5f\u4f1a\u89e6\u53d1 mouseout \u4e8b\u4ef6\n mleftLeave () {\n \/\/\u83b7\u53d6 menuList \u4e2d\u6bcf\u4e2a menuItem \u5b57\u7b26\u4e32\u7684\u957f\u5ea6\n let menuSize = this.menuList.length\n for (let i = 0; i < menuSize; i++) {\n this.$refs['test' + i][0].style.backgroundColor = '#f8f8f8'\n }\n \/\/ \u8df3\u51fa\u5faa\u73af,\u6d4f\u89c8\u5b8c'\u53d1\u73b0',\u9f20\u6807\u79fb\u51fa,\u7f6e\u4e8e\u53f3\u4fa7\u6570\u636e\u4e3a\u7b2c\u4e00\u4e2a\u7cbe\u9009\u6570\u636e\n this.data = this.menuList[0]\n \/\/\u9f20\u6807\u79fb\u51fa\u4e8b\u4ef6,\u7f6e\u4e8e\u7b2c\u4e00\u4e2a menuitem \u4e3a\u9ec4\u8272[\u672a\u5237\u65b0\u65f6\u7684\u8bbe\u7f6e]\n this.$refs['test' + 0][0].style.backgroundColor = 'rgb(255, 242, 0)'\n\n \/\/ this.data = {}\n \/\/ this.$refs['test'+index][0].style.backgroundColor = '#f8f8f8'\n \/\/ console.log('\u6eda\u51fa\u53bb')\n },\n}<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"\u4e0b\u8f7d\u4f9d\u8d56\u901f\u5ea6\u5feb npm install –registry=https:\/\/registry.npm.tao […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[],"class_list":["post-3462","post","type-post","status-publish","format-standard","hentry","category-web"],"_links":{"self":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/3462","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3462"}],"version-history":[{"count":38,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/3462\/revisions"}],"predecessor-version":[{"id":3558,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/3462\/revisions\/3558"}],"wp:attachment":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3462"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=3462"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=3462"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
<li class="find">\n <a href="#">\u53d1\u73b0<\/a>\n <div class="h_menu" @mouseleave="mleftLeave()">\n <div class="menu_box mleft">\n <!-- <a href="">\u7cbe\u9009<\/a>-->\n <a v-for="(item,index) in menuList" :key="index" :ref="'test'+index" href="javascript:;"\n @mouseover="mleftIn(item,index)">{{ item.menu }}<\/a>\n <!-- <el-cascader-panel :options="findOptions" :props="props" \/>-->\n <\/div>\n <div class="mright">\n <div class="cate-box">\n <a class="cate-title" href="">\n <img :src="data.url" alt="">\n <span>{{ data.menu }}<\/span>\n <\/a>\n <div class="subCate">\n <a v-for="(itemOne) in data.items" :key="itemOne">{{ itemOne.text }}<\/a>\n <\/div>\n <\/div>\n <\/div>\n <div class="right_bar">\n <div class="icons">\n <a>\n <span class="icon-box">\n <span class="tangle-1"><\/span>\n <span class="tangle-2"><\/span>\n <i class="ani-star"><\/i>\n <span class="tangle-3"><\/span>\n <\/span>\n <span class="icon-text">\u6536\u85cf\u5939<\/span>\n <\/a>\n <a>\n <img alt="" src="..\/assets\/images\/icon-header-discover-designer.png">\n <span>\u8bbe\u8ba1\u5e08<\/span>\n <\/a>\n <a>\n <img alt="" src="..\/assets\/images\/icon-header-discover-focus.png">\n <span>\u699c\u5355<\/span>\n <!-- <sup class="subNavDot"><\/sup>-->\n <\/a>\n <\/div>\n <div class="ad_box">\n\n <\/div>\n <\/div>\n <\/div>\n <\/li><\/code><\/pre>\n data: {},\n menuList: [\n {\n menu: '\u7cbe\u9009',\n url: require('..\/assets\/images\/zuanshi.png'),\n items: [\n { text: '\u8fd0\u8425\u8bbe\u8ba1' },\n { text: '\u5305\u88c5' },\n { text: '\u52a8\u753b\/\u5f71\u89c6' },\n { text: '\u4eba\u50cf\u6444\u5f71' },\n { text: '\u5546\u4e1a\u63d2\u753b' },\n { text: '\u7535\u5546' },\n { text: 'APP \u754c\u9762' },\n { text: '\u827a\u672f\u63d2\u753b' },\n { text: '\u5bb6\u88c5\u8bbe\u8ba1' },\n { text: '\u6d77\u62a5' },\n { text: '\u6587\u7ae0' }\n ]\n },\n { menu: '\u5e73\u9762' },\n { menu: 'UI' },\n { menu: '\u7f51\u9875' },\n { menu: '\u63d2\u753b' },\n { menu: '\u52a8\u6f2b' },\n { menu: '\u6444\u5f71' },\n { menu: '\u7a7a\u95f4' },\n { menu: '\u5de5\u4e1a\/\u4ea7\u54c1' },\n { menu: '\u4e09\u7ef4' },\n { menu: '\u5f71\u89c6' },\n { menu: '\u624b\u5de5\u827a' },\n { menu: '\u7eaf\u827a\u672f' },\n { menu: '\u670d\u88c5' },\n { menu: '\u5176\u4ed6' }\n ],<\/code><\/pre>\n \/\/\u6e32\u67d3\u6210 html \u4e4b\u524d\u8c03\u7528,\u521d\u59cb\u5316\u4e00\u4e9b\u5c5e\u6027\u503c [\u9f20\u6807\u60ac\u6302'\u53d1\u73b0',\u5c31\u51fa\u73b0\u7b2c\u4e00\u4e2a\u7cbe\u9009\u9875\u9762]\n created () {\n this.data = this.menuList[0]\n },\n \/\/\u6e32\u67d3\u6210 html \u540e\u8c03\u7528 [\u9f20\u6807\u60ac\u6302'\u53d1\u73b0',\u7b2c\u4e00\u4e2a menu-item \u663e\u793a\u9ec4\u8272](\u9875\u9762\u5237\u65b0\u4e86\u4e4b\u540e\u7684)\n mounted () {\n this.$refs['test' + 0][0].style.backgroundColor = 'rgb(255, 242, 0)'\n },\n methods: {\n \/\/\u9f20\u6807\u8fdb\u5165\u51fd\u6570\n mleftIn (item, index) {\n \/\/\u83b7\u53d6 menuList \u4e2d\u6bcf\u4e2a menuItem \u5b57\u7b26\u4e32\u7684\u957f\u5ea6\n let menuSize = this.menuList.length\n for (let i = 0; i < menuSize; i++) {\n \/\/for \u5faa\u73af,i \u5982\u679c\u5c0f\u4e8e menuSize,\u5219\u7f6e\u4e8e menuItem \u989c\u8272\u4e3a\u7070\u8272,\u5b9e\u73b0\u5207\u6362\u6548\u679c\n this.$refs['test' + i][0].style.backgroundColor = '#f8f8f8'\n }\n \/\/\u8df3\u51fa for \u5faa\u73af,\u7531\u5de6\u4fa7\u79fb\u5411\u53f3\u4fa7\u8be6\u60c5\u9875\u65f6,\u5176 menuItem \u7684\u989c\u8272\u4e3a\u9ec4\u8272\n this.$refs['test' + index][0].style.backgroundColor = 'rgb(255, 242, 0)'\n \/\/\u5c06\u53f3\u4fa7\u6570\u636e\u8bbe\u7f6e\u4e3a item,\u663e\u793a\u6570\u636e\n this.data = item\n },\n \/\/\u9f20\u6807\u8fdb\u5165\u51fd\u6570\n \/\/\u6ce8\u610f: mouseleave:\u662f\u9f20\u6807\u79fb\u51fa\u8be5\u5143\u7d20\u4e4b\u5916,\u5219\u89e6\u53d1 mouseleave \u4e8b\u4ef6\n \/\/ mouseout : \u662f\u5f53\u6307\u9488\u79bb\u5f00\u8be5\u5143\u7d20\u53ca\u5176\u6240\u6709\u540e\u4ee3\u65f6\uff0c\u4f1a\u89e6\u53d1 mouseleave\n \/\/ \u800c\u5f53\u6307\u9488\u79bb\u5f00\u5143\u7d20\u6216\u79bb\u5f00\u5143\u7d20\u7684\u540e\u4ee3\uff08\u5373\u4f7f\u6307\u9488\u4ecd\u5728\u5143\u7d20\u5185\uff09\u65f6\uff0c\u4e5f\u4f1a\u89e6\u53d1 mouseout \u4e8b\u4ef6\n mleftLeave () {\n \/\/\u83b7\u53d6 menuList \u4e2d\u6bcf\u4e2a menuItem \u5b57\u7b26\u4e32\u7684\u957f\u5ea6\n let menuSize = this.menuList.length\n for (let i = 0; i < menuSize; i++) {\n this.$refs['test' + i][0].style.backgroundColor = '#f8f8f8'\n }\n \/\/ \u8df3\u51fa\u5faa\u73af,\u6d4f\u89c8\u5b8c'\u53d1\u73b0',\u9f20\u6807\u79fb\u51fa,\u7f6e\u4e8e\u53f3\u4fa7\u6570\u636e\u4e3a\u7b2c\u4e00\u4e2a\u7cbe\u9009\u6570\u636e\n this.data = this.menuList[0]\n \/\/\u9f20\u6807\u79fb\u51fa\u4e8b\u4ef6,\u7f6e\u4e8e\u7b2c\u4e00\u4e2a menuitem \u4e3a\u9ec4\u8272[\u672a\u5237\u65b0\u65f6\u7684\u8bbe\u7f6e]\n this.$refs['test' + 0][0].style.backgroundColor = 'rgb(255, 242, 0)'\n\n \/\/ this.data = {}\n \/\/ this.$refs['test'+index][0].style.backgroundColor = '#f8f8f8'\n \/\/ console.log('\u6eda\u51fa\u53bb')\n },\n}<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"\u4e0b\u8f7d\u4f9d\u8d56\u901f\u5ea6\u5feb npm install –registry=https:\/\/registry.npm.tao […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[],"class_list":["post-3462","post","type-post","status-publish","format-standard","hentry","category-web"],"_links":{"self":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/3462","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3462"}],"version-history":[{"count":38,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/3462\/revisions"}],"predecessor-version":[{"id":3558,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/3462\/revisions\/3558"}],"wp:attachment":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3462"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=3462"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=3462"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
data: {},\n menuList: [\n {\n menu: '\u7cbe\u9009',\n url: require('..\/assets\/images\/zuanshi.png'),\n items: [\n { text: '\u8fd0\u8425\u8bbe\u8ba1' },\n { text: '\u5305\u88c5' },\n { text: '\u52a8\u753b\/\u5f71\u89c6' },\n { text: '\u4eba\u50cf\u6444\u5f71' },\n { text: '\u5546\u4e1a\u63d2\u753b' },\n { text: '\u7535\u5546' },\n { text: 'APP \u754c\u9762' },\n { text: '\u827a\u672f\u63d2\u753b' },\n { text: '\u5bb6\u88c5\u8bbe\u8ba1' },\n { text: '\u6d77\u62a5' },\n { text: '\u6587\u7ae0' }\n ]\n },\n { menu: '\u5e73\u9762' },\n { menu: 'UI' },\n { menu: '\u7f51\u9875' },\n { menu: '\u63d2\u753b' },\n { menu: '\u52a8\u6f2b' },\n { menu: '\u6444\u5f71' },\n { menu: '\u7a7a\u95f4' },\n { menu: '\u5de5\u4e1a\/\u4ea7\u54c1' },\n { menu: '\u4e09\u7ef4' },\n { menu: '\u5f71\u89c6' },\n { menu: '\u624b\u5de5\u827a' },\n { menu: '\u7eaf\u827a\u672f' },\n { menu: '\u670d\u88c5' },\n { menu: '\u5176\u4ed6' }\n ],<\/code><\/pre>\n \/\/\u6e32\u67d3\u6210 html \u4e4b\u524d\u8c03\u7528,\u521d\u59cb\u5316\u4e00\u4e9b\u5c5e\u6027\u503c [\u9f20\u6807\u60ac\u6302'\u53d1\u73b0',\u5c31\u51fa\u73b0\u7b2c\u4e00\u4e2a\u7cbe\u9009\u9875\u9762]\n created () {\n this.data = this.menuList[0]\n },\n \/\/\u6e32\u67d3\u6210 html \u540e\u8c03\u7528 [\u9f20\u6807\u60ac\u6302'\u53d1\u73b0',\u7b2c\u4e00\u4e2a menu-item \u663e\u793a\u9ec4\u8272](\u9875\u9762\u5237\u65b0\u4e86\u4e4b\u540e\u7684)\n mounted () {\n this.$refs['test' + 0][0].style.backgroundColor = 'rgb(255, 242, 0)'\n },\n methods: {\n \/\/\u9f20\u6807\u8fdb\u5165\u51fd\u6570\n mleftIn (item, index) {\n \/\/\u83b7\u53d6 menuList \u4e2d\u6bcf\u4e2a menuItem \u5b57\u7b26\u4e32\u7684\u957f\u5ea6\n let menuSize = this.menuList.length\n for (let i = 0; i < menuSize; i++) {\n \/\/for \u5faa\u73af,i \u5982\u679c\u5c0f\u4e8e menuSize,\u5219\u7f6e\u4e8e menuItem \u989c\u8272\u4e3a\u7070\u8272,\u5b9e\u73b0\u5207\u6362\u6548\u679c\n this.$refs['test' + i][0].style.backgroundColor = '#f8f8f8'\n }\n \/\/\u8df3\u51fa for \u5faa\u73af,\u7531\u5de6\u4fa7\u79fb\u5411\u53f3\u4fa7\u8be6\u60c5\u9875\u65f6,\u5176 menuItem \u7684\u989c\u8272\u4e3a\u9ec4\u8272\n this.$refs['test' + index][0].style.backgroundColor = 'rgb(255, 242, 0)'\n \/\/\u5c06\u53f3\u4fa7\u6570\u636e\u8bbe\u7f6e\u4e3a item,\u663e\u793a\u6570\u636e\n this.data = item\n },\n \/\/\u9f20\u6807\u8fdb\u5165\u51fd\u6570\n \/\/\u6ce8\u610f: mouseleave:\u662f\u9f20\u6807\u79fb\u51fa\u8be5\u5143\u7d20\u4e4b\u5916,\u5219\u89e6\u53d1 mouseleave \u4e8b\u4ef6\n \/\/ mouseout : \u662f\u5f53\u6307\u9488\u79bb\u5f00\u8be5\u5143\u7d20\u53ca\u5176\u6240\u6709\u540e\u4ee3\u65f6\uff0c\u4f1a\u89e6\u53d1 mouseleave\n \/\/ \u800c\u5f53\u6307\u9488\u79bb\u5f00\u5143\u7d20\u6216\u79bb\u5f00\u5143\u7d20\u7684\u540e\u4ee3\uff08\u5373\u4f7f\u6307\u9488\u4ecd\u5728\u5143\u7d20\u5185\uff09\u65f6\uff0c\u4e5f\u4f1a\u89e6\u53d1 mouseout \u4e8b\u4ef6\n mleftLeave () {\n \/\/\u83b7\u53d6 menuList \u4e2d\u6bcf\u4e2a menuItem \u5b57\u7b26\u4e32\u7684\u957f\u5ea6\n let menuSize = this.menuList.length\n for (let i = 0; i < menuSize; i++) {\n this.$refs['test' + i][0].style.backgroundColor = '#f8f8f8'\n }\n \/\/ \u8df3\u51fa\u5faa\u73af,\u6d4f\u89c8\u5b8c'\u53d1\u73b0',\u9f20\u6807\u79fb\u51fa,\u7f6e\u4e8e\u53f3\u4fa7\u6570\u636e\u4e3a\u7b2c\u4e00\u4e2a\u7cbe\u9009\u6570\u636e\n this.data = this.menuList[0]\n \/\/\u9f20\u6807\u79fb\u51fa\u4e8b\u4ef6,\u7f6e\u4e8e\u7b2c\u4e00\u4e2a menuitem \u4e3a\u9ec4\u8272[\u672a\u5237\u65b0\u65f6\u7684\u8bbe\u7f6e]\n this.$refs['test' + 0][0].style.backgroundColor = 'rgb(255, 242, 0)'\n\n \/\/ this.data = {}\n \/\/ this.$refs['test'+index][0].style.backgroundColor = '#f8f8f8'\n \/\/ console.log('\u6eda\u51fa\u53bb')\n },\n}<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"\u4e0b\u8f7d\u4f9d\u8d56\u901f\u5ea6\u5feb npm install –registry=https:\/\/registry.npm.tao […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[],"class_list":["post-3462","post","type-post","status-publish","format-standard","hentry","category-web"],"_links":{"self":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/3462","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3462"}],"version-history":[{"count":38,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/3462\/revisions"}],"predecessor-version":[{"id":3558,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/3462\/revisions\/3558"}],"wp:attachment":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3462"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=3462"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=3462"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
\/\/\u6e32\u67d3\u6210 html \u4e4b\u524d\u8c03\u7528,\u521d\u59cb\u5316\u4e00\u4e9b\u5c5e\u6027\u503c [\u9f20\u6807\u60ac\u6302'\u53d1\u73b0',\u5c31\u51fa\u73b0\u7b2c\u4e00\u4e2a\u7cbe\u9009\u9875\u9762]\n created () {\n this.data = this.menuList[0]\n },\n \/\/\u6e32\u67d3\u6210 html \u540e\u8c03\u7528 [\u9f20\u6807\u60ac\u6302'\u53d1\u73b0',\u7b2c\u4e00\u4e2a menu-item \u663e\u793a\u9ec4\u8272](\u9875\u9762\u5237\u65b0\u4e86\u4e4b\u540e\u7684)\n mounted () {\n this.$refs['test' + 0][0].style.backgroundColor = 'rgb(255, 242, 0)'\n },\n methods: {\n \/\/\u9f20\u6807\u8fdb\u5165\u51fd\u6570\n mleftIn (item, index) {\n \/\/\u83b7\u53d6 menuList \u4e2d\u6bcf\u4e2a menuItem \u5b57\u7b26\u4e32\u7684\u957f\u5ea6\n let menuSize = this.menuList.length\n for (let i = 0; i < menuSize; i++) {\n \/\/for \u5faa\u73af,i \u5982\u679c\u5c0f\u4e8e menuSize,\u5219\u7f6e\u4e8e menuItem \u989c\u8272\u4e3a\u7070\u8272,\u5b9e\u73b0\u5207\u6362\u6548\u679c\n this.$refs['test' + i][0].style.backgroundColor = '#f8f8f8'\n }\n \/\/\u8df3\u51fa for \u5faa\u73af,\u7531\u5de6\u4fa7\u79fb\u5411\u53f3\u4fa7\u8be6\u60c5\u9875\u65f6,\u5176 menuItem \u7684\u989c\u8272\u4e3a\u9ec4\u8272\n this.$refs['test' + index][0].style.backgroundColor = 'rgb(255, 242, 0)'\n \/\/\u5c06\u53f3\u4fa7\u6570\u636e\u8bbe\u7f6e\u4e3a item,\u663e\u793a\u6570\u636e\n this.data = item\n },\n \/\/\u9f20\u6807\u8fdb\u5165\u51fd\u6570\n \/\/\u6ce8\u610f: mouseleave:\u662f\u9f20\u6807\u79fb\u51fa\u8be5\u5143\u7d20\u4e4b\u5916,\u5219\u89e6\u53d1 mouseleave \u4e8b\u4ef6\n \/\/ mouseout : \u662f\u5f53\u6307\u9488\u79bb\u5f00\u8be5\u5143\u7d20\u53ca\u5176\u6240\u6709\u540e\u4ee3\u65f6\uff0c\u4f1a\u89e6\u53d1 mouseleave\n \/\/ \u800c\u5f53\u6307\u9488\u79bb\u5f00\u5143\u7d20\u6216\u79bb\u5f00\u5143\u7d20\u7684\u540e\u4ee3\uff08\u5373\u4f7f\u6307\u9488\u4ecd\u5728\u5143\u7d20\u5185\uff09\u65f6\uff0c\u4e5f\u4f1a\u89e6\u53d1 mouseout \u4e8b\u4ef6\n mleftLeave () {\n \/\/\u83b7\u53d6 menuList \u4e2d\u6bcf\u4e2a menuItem \u5b57\u7b26\u4e32\u7684\u957f\u5ea6\n let menuSize = this.menuList.length\n for (let i = 0; i < menuSize; i++) {\n this.$refs['test' + i][0].style.backgroundColor = '#f8f8f8'\n }\n \/\/ \u8df3\u51fa\u5faa\u73af,\u6d4f\u89c8\u5b8c'\u53d1\u73b0',\u9f20\u6807\u79fb\u51fa,\u7f6e\u4e8e\u53f3\u4fa7\u6570\u636e\u4e3a\u7b2c\u4e00\u4e2a\u7cbe\u9009\u6570\u636e\n this.data = this.menuList[0]\n \/\/\u9f20\u6807\u79fb\u51fa\u4e8b\u4ef6,\u7f6e\u4e8e\u7b2c\u4e00\u4e2a menuitem \u4e3a\u9ec4\u8272[\u672a\u5237\u65b0\u65f6\u7684\u8bbe\u7f6e]\n this.$refs['test' + 0][0].style.backgroundColor = 'rgb(255, 242, 0)'\n\n \/\/ this.data = {}\n \/\/ this.$refs['test'+index][0].style.backgroundColor = '#f8f8f8'\n \/\/ console.log('\u6eda\u51fa\u53bb')\n },\n}<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"\u4e0b\u8f7d\u4f9d\u8d56\u901f\u5ea6\u5feb npm install –registry=https:\/\/registry.npm.tao […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[],"class_list":["post-3462","post","type-post","status-publish","format-standard","hentry","category-web"],"_links":{"self":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/3462","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3462"}],"version-history":[{"count":38,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/3462\/revisions"}],"predecessor-version":[{"id":3558,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/3462\/revisions\/3558"}],"wp:attachment":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3462"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=3462"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=3462"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
\u4e0b\u8f7d\u4f9d\u8d56\u901f\u5ea6\u5feb npm install –registry=https:\/\/registry.npm.tao […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[],"class_list":["post-3462","post","type-post","status-publish","format-standard","hentry","category-web"],"_links":{"self":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/3462","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3462"}],"version-history":[{"count":38,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/3462\/revisions"}],"predecessor-version":[{"id":3558,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/3462\/revisions\/3558"}],"wp:attachment":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3462"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=3462"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=3462"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
![\"\"](\"http:\/\/djblog.odjbinail.cn\/wp-content\/uploads\/2022\/03\/2022030313551145.png\")
![\"\"](\"http:\/\/djblog.odjbinail.cn\/wp-content\/uploads\/2022\/03\/2022030314191670.png\")
![\"\"](\"http:\/\/djblog.odjbinail.cn\/wp-content\/uploads\/2022\/03\/2022030313461890.png\")
![\"\"](\"http:\/\/djblog.odjbinail.cn\/wp-content\/uploads\/2022\/06\/2022072516145888.png\")
![\"\"](\"http:\/\/djblog.odjbinail.cn\/wp-content\/uploads\/2022\/06\/2022072620240210.png\")
![\"\"](\"http:\/\/djblog.odjbinail.cn\/wp-content\/uploads\/2022\/06\/2022072915480229.png\")
![\"\"](\"http:\/\/djblog.odjbinail.cn\/wp-content\/uploads\/2022\/06\/2022073121251315.png\")
![\"\"](\"http:\/\/djblog.odjbinail.cn\/wp-content\/uploads\/2022\/06\/202207291826429.png\")
![\"\"](\"http:\/\/djblog.odjbinail.cn\/wp-content\/uploads\/2022\/06\/2022072919355695.png\")
![\"\"](\"http:\/\/djblog.odjbinail.cn\/wp-content\/uploads\/2022\/06\/2022072923333522.png\")
![\"\"](\"http:\/\/djblog.odjbinail.cn\/wp-content\/uploads\/2022\/06\/2022073112145664.png\")
![\"\"](\"http:\/\/djblog.odjbinail.cn\/wp-content\/uploads\/2022\/06\/2022080117010862.png\")
![\"\"](\"http:\/\/djblog.odjbinail.cn\/wp-content\/uploads\/2022\/06\/2022080117275286.png\")
![\"\"](\"http:\/\/djblog.odjbinail.cn\/wp-content\/uploads\/2022\/06\/2022080123325093.png\")
![\"\"](\"http:\/\/djblog.odjbinail.cn\/wp-content\/uploads\/2022\/06\/2022080221273496.png\")
![\"\"](\"http:\/\/djblog.odjbinail.cn\/wp-content\/uploads\/2022\/06\/2022080300390040.png\")