{"id":6071,"date":"2020-09-24T13:49:19","date_gmt":"2020-09-24T04:49:19","guid":{"rendered":"https:\/\/nsme.red\/wp\/?p=6071"},"modified":"2020-09-24T13:55:03","modified_gmt":"2020-09-24T04:55:03","slug":"%e3%83%a2%e3%83%bc%e3%83%80%e3%83%ab","status":"publish","type":"post","link":"https:\/\/core.nsme.net\/notes\/vue-js\/tool\/6071\/","title":{"rendered":"\u30e2\u30fc\u30c0\u30eb"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">\u30e9\u30a4\u30d6\u30e9\u30ea\u3067\u306f\u306a\u304f\u3001\u81ea\u4f5c\u30e2\u30fc\u30c0\u30eb<\/p>\n\n\n\n<p class=\"has-background wp-block-paragraph\" style=\"background-color:#d5e3dd\">\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u3000html<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code> &lt;div id=\"overlay\" v-if=\"showContent\" v-on:click=\"closeModal\">\n\t&lt;div id=\"modal\" v-on:click=\"stopEvent\">\n\t\t&lt;h3 class=\"title center\" v-bind:class=\"list.class\">{{list.title}}&lt;\/h3>\t\t\n&lt;div class=\"right\">&lt;i class=\"material-icons\" v-on:click=\"closeModal\">close&lt;\/i>&lt;\/div>\n\t&lt;\/div>\n&lt;\/div><\/code><\/pre>\n\n\n\n<p class=\"has-background wp-block-paragraph\" style=\"background-color:#d5e3dd\">js<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>  methods:{\n    openModal: function(num, time, edit){\n      this.showContent = true;\n      var target = this.datalists;\n      this.list = target&#91;num];\n},\n    closeModal: function(){\n      this.showContent = false;\n},\n    stopEvent: function(){\n      event.stopPropagation()\n    },\n<\/code><\/pre>\n\n\n\n<p class=\"has-background wp-block-paragraph\" style=\"background-color:#d5e3dd\">CSS<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>#overlay{\n  z-index:1;\n  position:fixed;\n  top:0;\n  left:0;\n  width:100%;\n  height:100%;\n  background-color:rgba(0,0,0,0.5);\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n#modal{\n  z-index:2;\n  width:50%;\n  padding: 1em;\n  background:#fff;\n\tborder-radius: 5px;\n}\n#modal i{\n\tcursor: pointer;\n}<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>\u30e9\u30a4\u30d6\u30e9\u30ea\u3067\u306f\u306a\u304f\u3001\u81ea\u4f5c\u30e2\u30fc\u30c0\u30eb \u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u3000html js CSS<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[40],"tags":[],"class_list":["post-6071","post","type-post","status-publish","format-standard","hentry","category-tool"],"acf":[],"_links":{"self":[{"href":"https:\/\/core.nsme.net\/notes\/wp-json\/wp\/v2\/posts\/6071","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/core.nsme.net\/notes\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/core.nsme.net\/notes\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/core.nsme.net\/notes\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/core.nsme.net\/notes\/wp-json\/wp\/v2\/comments?post=6071"}],"version-history":[{"count":1,"href":"https:\/\/core.nsme.net\/notes\/wp-json\/wp\/v2\/posts\/6071\/revisions"}],"predecessor-version":[{"id":6072,"href":"https:\/\/core.nsme.net\/notes\/wp-json\/wp\/v2\/posts\/6071\/revisions\/6072"}],"wp:attachment":[{"href":"https:\/\/core.nsme.net\/notes\/wp-json\/wp\/v2\/media?parent=6071"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/core.nsme.net\/notes\/wp-json\/wp\/v2\/categories?post=6071"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/core.nsme.net\/notes\/wp-json\/wp\/v2\/tags?post=6071"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}