{"id":6203,"date":"2022-07-11T11:04:13","date_gmt":"2022-07-11T02:04:13","guid":{"rendered":"https:\/\/nsme.red\/wp\/?p=6203"},"modified":"2022-07-11T21:32:55","modified_gmt":"2022-07-11T12:32:55","slug":"%e5%8b%95%e7%9a%84%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\/6203\/","title":{"rendered":"\u52d5\u7684\u30e2\u30fc\u30c0\u30eb"},"content":{"rendered":"\n

v-on:click\u306e\u3068\u304d\u3001\u5024\u3092\u6e21\u3057\u52d5\u7684\u306b\u8868\u793a\u3059\u308b\u30e2\u30fc\u30c0\u30eb\u304c\u307b\u3057\u3044\u3002
\u30e2\u30fc\u30c0\u30eb\u306f\u3001\u753b\u50cf\u306e\u307f\u8868\u793a\u3059\u308b\u3082\u306e\u3002\u52d5\u753b\u306a\u3069\u3092iframe\u3067\u8868\u793a\u3059\u308b\u3082\u306e\u306e2\u7a2e\u985e\u3092\u7528\u610f\u3002

\u753b\u50cf\u7528<\/p>\n\n\n\n

<div><a href=\"#\" @click.stop.prevent=\"openModal(0)\">\u5168\u4f53\u62e1\u5927<\/a>\n\n<Modal :val=\"showImg\" v-if=\"showModal\" @close=\"showModal = false\"><\/Modal>\n\n<script type=\"text\/x-template\" id=\"modal-template\">\n <transition name=\"modal\">\n   <div class=\"modal-mask\" v-on:click.self=\"$emit('close')\">\n    <div class=\"modal-container\">\n      <img :src=\"val.src\" \/>\n    <\/div>\n   <div class=\"modal-footer\">\n   <slot name=\"footer\">\n     <i class=\"material-icons\" v-on:click=\"$emit('close')\">close<\/i>\n   <\/slot>\n  <\/div>\n <\/div>\n<\/div>\n<\/transition>\n<\/script>\n\n<script>\n Vue.component(\"Modal\", {\n   template: \"#modal-template\",\n   props:['val']\n });\n\nconst app = new Vue({\n  el: '#wrap',\n  data: {\n    showModal: false,\n    showImg :'',\n    modalImgs: [\n\t{ src: 'img\/shaze.png'},\n\t{ src: 'img\/shaze2.png'}\n\t],\n  },\n  methods:{\n   openModal(item){\n     this.showModal = true;\n     this.showImg = this.modalImgs[item];\n    },\n }\n})\n<\/script><\/code><\/pre>\n\n\n\n
methods\u3067\u8868\u793a\u30a8\u30ea\u30a2\u306b\u30c7\u30fc\u30bf\u3092\u6e21\u3059\u3002\n\u305d\u306e\u30c7\u30fc\u30bf\u306e\u53d7\u53d6\u306f\u3001:val=\"showImg\"<\/pre>\n\n\n\n
css\n\n\/*\u30e2\u30fc\u30c0\u30eb\u30a6\u30a3\u30f3\u30c9\u30a6*\/\n.modal-mask {\n  position: fixed;\n  z-index: 9998;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background-color: rgba(0, 0, 0, 0.5);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: opacity 0.3s ease;\n}\n\n\n.modal-container {\n  margin: 0px auto;\n  padding: 5px;\n  background-color: #fff;\n  border-radius: 2px;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);\n  transition: all 0.3s ease;\n  font-family: Helvetica, Arial, sans-serif;\n}\n\n.modal-header {\n\tbackground: #eee;\n\tpadding: 2px;\n}\n\n.modal-footer{\n\ttext-align: right;\n}\n.modal-footer i {\n\tcursor: pointer;\n}\n\n.modal-leave-active {\n  opacity: 0;\n}\n\n.modal-leave-active .modal-container {\n  -webkit-transform: scale(1.1);\n  transform: scale(1.1);\n}<\/code><\/pre>\n\n\n\n
ifame<\/h2>\n\n\n\n
<a href=\"#\" @click.stop.prevent=\"openModal\">\u4f1a\u793e\u7d39\u4ecb\u30d3\u30c7\u30aa<\/a>\n\n<Modal :val=\"showImg\" v-if=\"showModal\" @close=\"showModal = false\"><\/Modal>\n\n<script type=\"text\/x-template\" id=\"modal-iframe\">\n<transition name=\"modal\">\n <div class=\"modal-mask\" v-on:click.self=\"$emit('close')\">\n  <div class=\"modal-container\">\n   <header class=\"modal-header\">\n    {{ val.title }}\n   <\/header>\n  <iframe :src=\"val.src\" style=\"width:680px; height:380px;\" \/>\n <div class=\"modal-footer\">\n  <slot name=\"footer\">\n   <i class=\"material-icons\" v-on:click=\"$emit('close')\">close<\/i>\n  <\/slot>\n  <\/div>\n <\/div>\n <\/div>\n <\/transition>\n<\/script>\n\n<script>\nVue.component(\"Modal\", {\n  template: \"#modal-iframe\",\n  props:['val']\n});\n\nconst app = new Vue({\n  el: '#wrap',\n  data: {\n    showModal: false,\n    showImg : '',\n    modalFrame:{\n\ttitle:'\u4f1a\u793e\u7d39\u4ecb\u30d3\u30c7\u30aa',\n\tsrc: '..\/product\/youtube.php?file=company'\n\t}\n  },\n methods:{\n  openModal(){\n    this.showModal = true;\n    this.showImg = this.modalFrame;\n   },\n }\n})\n\t<\/script>\n<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
v-on:click\u306e\u3068\u304d\u3001\u5024\u3092\u6e21\u3057\u52d5\u7684\u306b\u8868\u793a\u3059\u308b\u30e2\u30fc\u30c0\u30eb\u304c\u307b\u3057\u3044\u3002\u30e2\u30fc\u30c0\u30eb\u306f\u3001\u753b\u50cf\u306e\u307f\u8868\u793a\u3059\u308b\u3082\u306e\u3002\u52d5\u753b\u306a\u3069\u3092iframe\u3067\u8868\u793a\u3059\u308b\u3082\u306e\u306e2\u7a2e\u985e\u3092\u7528\u610f\u3002 \u753b\u50cf\u7528 methods\u3067\u8868\u793a\u30a8\u30ea\u30a2\u306b\u30c7\u30fc\u30bf\u3092\u6e21\u3059\u3002 \u305d\u306e\u30c7\u30fc\u30bf\u306e […]<\/p>\n","protected":false},"author":2,"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-6203","post","type-post","status-publish","format-standard","hentry","category-tool"],"acf":[],"_links":{"self":[{"href":"https:\/\/core.nsme.net\/notes\/wp-json\/wp\/v2\/posts\/6203","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\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/core.nsme.net\/notes\/wp-json\/wp\/v2\/comments?post=6203"}],"version-history":[{"count":4,"href":"https:\/\/core.nsme.net\/notes\/wp-json\/wp\/v2\/posts\/6203\/revisions"}],"predecessor-version":[{"id":6207,"href":"https:\/\/core.nsme.net\/notes\/wp-json\/wp\/v2\/posts\/6203\/revisions\/6207"}],"wp:attachment":[{"href":"https:\/\/core.nsme.net\/notes\/wp-json\/wp\/v2\/media?parent=6203"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/core.nsme.net\/notes\/wp-json\/wp\/v2\/categories?post=6203"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/core.nsme.net\/notes\/wp-json\/wp\/v2\/tags?post=6203"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}