{"id":15853,"date":"2024-01-17T23:37:10","date_gmt":"2024-01-17T20:07:10","guid":{"rendered":"https:\/\/rasanegar.com\/blog\/%d8%b1%d9%88%d8%b4-%d8%a7%db%8c%d8%ac%d8%a7%d8%af-%db%8c%da%a9-%da%af%d9%81%d8%aa%da%af%d9%88%db%8c-%d8%aa%d8%a7%db%8c%db%8c%d8%af-%d8%af%d8%b1-vue-jsa-%da%af%d9%81%d8%aa%da%af%d9%88%db%8c-%d8%aa\/"},"modified":"2024-01-17T23:37:10","modified_gmt":"2024-01-17T20:07:10","slug":"%d8%b1%d9%88%d8%b4-%d8%a7%db%8c%d8%ac%d8%a7%d8%af-%db%8c%da%a9-%da%af%d9%81%d8%aa%da%af%d9%88%db%8c-%d8%aa%d8%a7%db%8c%db%8c%d8%af-%d8%af%d8%b1-vue-jsa-%da%af%d9%81%d8%aa%da%af%d9%88%db%8c-%d8%aa","status":"publish","type":"post","link":"https:\/\/rasanegaar.com\/blog\/%d8%b1%d9%88%d8%b4-%d8%a7%db%8c%d8%ac%d8%a7%d8%af-%db%8c%da%a9-%da%af%d9%81%d8%aa%da%af%d9%88%db%8c-%d8%aa%d8%a7%db%8c%db%8c%d8%af-%d8%af%d8%b1-vue-jsa-%da%af%d9%81%d8%aa%da%af%d9%88%db%8c-%d8%aa\/","title":{"rendered":"\u0631\u0648\u0634 \u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 \u06af\u0641\u062a\u06af\u0648\u06cc \u062a\u0627\u06cc\u06cc\u062f \u062f\u0631 Vue.jsA \u06af\u0641\u062a\u06af\u0648\u06cc \u062a\u0627\u06cc\u06cc\u062f \u06cc\u06a9 \u0627\u0644\u06af\u0648\u06cc \u0631\u0627\u0628\u0637 \u06a9\u0627\u0631\u0628\u0631\u06cc \u0627\u0633\u062a \u06a9\u0647 \u062f\u0631 \u0622\u0646 \u0628\u0647 \u06a9\u0627\u0631\u0628\u0631 \u0627\u06cc\u0646 \u0627\u0645\u06a9\u0627\u0646 \u062f\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f \u06a9\u0647 \u0628\u0647 \u0639\u0645\u0644 \u062e\u0648\u062f \u0627\u062f\u0627\u0645\u0647 \u062f\u0647\u062f \u06cc\u0627 \u0622\u0646 \u0631\u0627 \u0644\u063a\u0648 \u06a9\u0646\u062f.  \u0645\u0639\u0645\u0648\u0644\u0627\u064b \u0628\u0627 \u0627\u0642\u062f\u0627\u0645\u0627\u062a \u0645\u062e\u0631\u0628 \u06cc\u0627 \u063a\u06cc\u0631\u0642\u0627\u0628\u0644 \u0628\u0631\u06af\u0634\u062a \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f \u062a\u0627 \u0645\u0637\u0645\u0626\u0646 \u0634\u0648\u062f \u06a9\u0647 \u06a9\u0627\u0631\u0628\u0631 \u0648\u0627\u0642\u0639\u0627\u064b \u0645\u06cc \u062e\u0648\u0627\u0647\u062f \u0627\u062f\u0627\u0645\u0647 \u062f\u0647\u062f.  \u062f\u0631 \u0627\u06cc\u0646 \u0645\u0642\u0627\u0644\u0647 \u0628\u0647 \u067e\u06cc\u0627\u062f\u0647 \u0633\u0627\u0632\u06cc &#8230;"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_85 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\"><p class=\"ez-toc-title\" style=\"cursor:inherit\">\u0633\u0631\u0641\u0635\u0644\u0647\u0627\u06cc \u0645\u0637\u0644\u0628<\/p>\n<\/div><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/rasanegaar.com\/blog\/%d8%b1%d9%88%d8%b4-%d8%a7%db%8c%d8%ac%d8%a7%d8%af-%db%8c%da%a9-%da%af%d9%81%d8%aa%da%af%d9%88%db%8c-%d8%aa%d8%a7%db%8c%db%8c%d8%af-%d8%af%d8%b1-vue-jsa-%da%af%d9%81%d8%aa%da%af%d9%88%db%8c-%d8%aa\/#%d9%85%d8%b9%d8%b1%d9%81%db%8c\" >\u0645\u0639\u0631\u0641\u06cc<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/rasanegaar.com\/blog\/%d8%b1%d9%88%d8%b4-%d8%a7%db%8c%d8%ac%d8%a7%d8%af-%db%8c%da%a9-%da%af%d9%81%d8%aa%da%af%d9%88%db%8c-%d8%aa%d8%a7%db%8c%db%8c%d8%af-%d8%af%d8%b1-vue-jsa-%da%af%d9%81%d8%aa%da%af%d9%88%db%8c-%d8%aa\/#%d8%a7%db%8c%d8%ac%d8%a7%d8%af_%db%8c%da%a9_%da%a9%d8%a7%d9%85%d9%be%d9%88%d9%86%d9%86%d8%aa_%d9%be%d8%a7%d9%be_%d8%a2%d9%be_%d9%82%d8%a7%d8%a8%d9%84_%d8%a7%d8%b3%d8%aa%d9%81%d8%a7%d8%af%d9%87_%d9%85%d8%ac%d8%af%d8%af\" >\u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u067e\u0627\u067e \u0622\u067e \u0642\u0627\u0628\u0644 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u062c\u062f\u062f<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/rasanegaar.com\/blog\/%d8%b1%d9%88%d8%b4-%d8%a7%db%8c%d8%ac%d8%a7%d8%af-%db%8c%da%a9-%da%af%d9%81%d8%aa%da%af%d9%88%db%8c-%d8%aa%d8%a7%db%8c%db%8c%d8%af-%d8%af%d8%b1-vue-jsa-%da%af%d9%81%d8%aa%da%af%d9%88%db%8c-%d8%aa\/#%d8%a7%d9%86%db%8c%d9%85%db%8c%d8%b4%d9%86_%da%af%d9%81%d8%aa%da%af%d9%88%db%8c_%d8%aa%d8%a7%db%8c%db%8c%d8%af\" >\u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u06af\u0641\u062a\u06af\u0648\u06cc \u062a\u0627\u06cc\u06cc\u062f<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/rasanegaar.com\/blog\/%d8%b1%d9%88%d8%b4-%d8%a7%db%8c%d8%ac%d8%a7%d8%af-%db%8c%da%a9-%da%af%d9%81%d8%aa%da%af%d9%88%db%8c-%d8%aa%d8%a7%db%8c%db%8c%d8%af-%d8%af%d8%b1-vue-jsa-%da%af%d9%81%d8%aa%da%af%d9%88%db%8c-%d8%aa\/#%d8%a8%d9%87_%d8%a7%d8%b1%d8%ab_%d8%a8%d8%b1%d8%af%d9%86_%da%a9%d8%a7%d9%85%d9%be%d9%88%d9%86%d9%86%d8%aa_%d9%be%d8%a7%d9%be_%d8%a2%d9%be\" >\u0628\u0647 \u0627\u0631\u062b \u0628\u0631\u062f\u0646 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u067e\u0627\u067e \u0622\u067e<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/rasanegaar.com\/blog\/%d8%b1%d9%88%d8%b4-%d8%a7%db%8c%d8%ac%d8%a7%d8%af-%db%8c%da%a9-%da%af%d9%81%d8%aa%da%af%d9%88%db%8c-%d8%aa%d8%a7%db%8c%db%8c%d8%af-%d8%af%d8%b1-vue-jsa-%da%af%d9%81%d8%aa%da%af%d9%88%db%8c-%d8%aa\/#%d8%a8%d8%a7_%d8%a7%d8%b3%d8%aa%d9%81%d8%a7%d8%af%d9%87_%d8%a7%d8%b2_%da%af%d9%81%d8%aa%da%af%d9%88%db%8c_%d8%aa%d8%a7%db%8c%db%8c%d8%af\" >\u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u06af\u0641\u062a\u06af\u0648\u06cc \u062a\u0627\u06cc\u06cc\u062f<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/rasanegaar.com\/blog\/%d8%b1%d9%88%d8%b4-%d8%a7%db%8c%d8%ac%d8%a7%d8%af-%db%8c%da%a9-%da%af%d9%81%d8%aa%da%af%d9%88%db%8c-%d8%aa%d8%a7%db%8c%db%8c%d8%af-%d8%af%d8%b1-vue-jsa-%da%af%d9%81%d8%aa%da%af%d9%88%db%8c-%d8%aa\/#%d9%86%d8%aa%db%8c%d8%ac%d9%87\" >\u0646\u062a\u06cc\u062c\u0647<\/a><\/li><\/ul><\/nav><\/div>\n<span class=\"span-reading-time rt-reading-time\" style=\"display: block;\"><span class=\"rt-label rt-prefix\">\u0632\u0645\u0627\u0646 \u0644\u0627\u0632\u0645 \u0628\u0631\u0627\u06cc \u0645\u0637\u0627\u0644\u0639\u0647: <\/span> <span class=\"rt-time\"> 3<\/span> <span class=\"rt-label rt-postfix\">\u062f\u0642\u06cc\u0642\u0647<\/span><\/span><p> <br \/>\n<\/p>\n<div class=\"content\"><noscript><\/p>\n<style>.lazyload-placeholder { display: none;  }<\/style>\n<p><\/noscript><\/p>\n<h2 id=\"introduction\"><span class=\"ez-toc-section\" id=\"%d9%85%d8%b9%d8%b1%d9%81%db%8c\"><\/span>\u0645\u0639\u0631\u0641\u06cc<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u06af\u0641\u062a\u06af\u0648\u06cc \u062a\u0627\u06cc\u06cc\u062f \u06cc\u06a9 \u0627\u0644\u06af\u0648\u06cc \u0631\u0627\u0628\u0637 \u06a9\u0627\u0631\u0628\u0631\u06cc \u0627\u0633\u062a \u06a9\u0647 \u062f\u0631 \u0622\u0646 \u0628\u0647 \u06a9\u0627\u0631\u0628\u0631 \u0627\u06cc\u0646 \u0627\u0645\u06a9\u0627\u0646 \u062f\u0627\u062f\u0647 \u0645\u06cc\u200c\u0634\u0648\u062f \u06a9\u0647 \u0628\u0647 \u06a9\u0627\u0631 \u062e\u0648\u062f \u0627\u062f\u0627\u0645\u0647 \u062f\u0647\u062f \u06cc\u0627 \u0622\u0646 \u0631\u0627 \u0644\u063a\u0648 \u06a9\u0646\u062f.  \u0645\u0639\u0645\u0648\u0644\u0627\u064b \u0628\u0627 \u0627\u0642\u062f\u0627\u0645\u0627\u062a \u0645\u062e\u0631\u0628 \u06cc\u0627 \u063a\u06cc\u0631\u0642\u0627\u0628\u0644 \u0628\u0631\u06af\u0634\u062a \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f \u062a\u0627 \u0645\u0637\u0645\u0626\u0646 \u0634\u0648\u062f \u06a9\u0647 \u06a9\u0627\u0631\u0628\u0631 \u0648\u0627\u0642\u0639\u0627\u064b \u0645\u06cc \u062e\u0648\u0627\u0647\u062f \u0627\u062f\u0627\u0645\u0647 \u062f\u0647\u062f.<\/p>\n<p>\u062f\u0631 \u0627\u06cc\u0646 \u0645\u0642\u0627\u0644\u0647\u060c \u0645\u0627 \u06cc\u06a9 \u06af\u0641\u062a\u06af\u0648\u06cc \u062a\u0627\u06cc\u06cc\u062f \u0642\u0627\u0628\u0644 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u062c\u062f\u062f \u0648 \u0645\u062f\u0648\u0644\u0627\u0631 \u0631\u0627 \u062f\u0631 Vue.js \u067e\u06cc\u0627\u062f\u0647 \u0633\u0627\u0632\u06cc \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f.<\/p>\n<h2 id=\"creatingareusablepopupcomponent\"><span class=\"ez-toc-section\" id=\"%d8%a7%db%8c%d8%ac%d8%a7%d8%af_%db%8c%da%a9_%da%a9%d8%a7%d9%85%d9%be%d9%88%d9%86%d9%86%d8%aa_%d9%be%d8%a7%d9%be_%d8%a2%d9%be_%d9%82%d8%a7%d8%a8%d9%84_%d8%a7%d8%b3%d8%aa%d9%81%d8%a7%d8%af%d9%87_%d9%85%d8%ac%d8%af%d8%af\"><\/span>\u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u067e\u0627\u067e \u0622\u067e \u0642\u0627\u0628\u0644 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u062c\u062f\u062f<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0628\u06cc\u0627\u06cc\u06cc\u062f \u0628\u0627 \u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 \u062c\u0632\u0621 \u067e\u0627\u06cc\u0647 \u0642\u0627\u0628\u0644 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u062c\u062f\u062f \u0628\u0631\u0627\u06cc \u0647\u0631 \u0646\u0648\u0639 \u0645\u0648\u0644\u0641\u0647 \u0628\u0627\u0632\u0634\u0648 \u0634\u0631\u0648\u0639 \u06a9\u0646\u06cc\u0645.  \u0628\u0647 \u0627\u06cc\u0646 \u062a\u0631\u062a\u06cc\u0628 \u0645\u0627 \u0645\u062c\u0628\u0648\u0631 \u0646\u06cc\u0633\u062a\u06cc\u0645 \u0645\u06a9\u0627\u0646\u06cc\u06a9 \u067e\u0627\u067e \u0622\u067e \u0631\u0627 \u0686\u0646\u062f\u06cc\u0646 \u0628\u0627\u0631 \u062f\u0648\u0628\u0627\u0631\u0647 \u067e\u06cc\u0627\u062f\u0647 \u0633\u0627\u0632\u06cc \u06a9\u0646\u06cc\u0645.  \u0627\u06cc\u0646 \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u0628\u0639\u062f\u0627\u064b \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u0647\u0631 \u0686\u06cc\u0632\u06cc \u0627\u0632 \u06cc\u06a9 \u062c\u0639\u0628\u0647 \u0647\u0634\u062f\u0627\u0631 \u06af\u0631\u0641\u062a\u0647 \u062a\u0627 \u06cc\u06a9 \u067e\u0646\u062c\u0631\u0647 \u0628\u0627\u0632\u0634\u0648 \u062e\u0628\u0631\u0646\u0627\u0645\u0647 \u0645\u0648\u0631\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u062c\u062f\u062f \u0642\u0631\u0627\u0631 \u06af\u06cc\u0631\u062f.<\/p>\n<p>\u0628\u06cc\u0627\u06cc\u06cc\u062f \u0628\u0627 \u0627\u0644\u06af\u0648 \u0634\u0631\u0648\u0639 \u06a9\u0646\u06cc\u0645:<\/p>\n<pre><code class=\"hljs\"><span class=\"hljs-comment\">&lt;!-- components\/PopupModal.vue --&gt;<\/span>\n\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">template<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">transition<\/span> <span class=\"hljs-attr\">name<\/span>=<span class=\"hljs-string\">\"fade\"<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"popup-modal\"<\/span> <span class=\"hljs-attr\">v-if<\/span>=<span class=\"hljs-string\">\"isVisible\"<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"window\"<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">slot<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">slot<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">transition<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">template<\/span>&gt;<\/span>\n<\/code><\/pre>\n<p>\u062a\u0648\u062c\u0647 \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u062f \u06a9\u0647 \u06cc\u06a9 \u062e\u0627\u0644\u06cc \u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u06cc\u0645 <code>&lt;slot&gt;&lt;\/slot&gt;<\/code> \u0628\u0647 \u0642\u0627\u0644\u0628 \u062a\u06af \u06a9\u0646\u06cc\u062f  \u0627\u06cc\u0646 \u062a\u06af \u0628\u0647 \u0645\u0627 \u0627\u0645\u06a9\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f \u0647\u0631 \u0645\u062d\u062a\u0648\u0627\u06cc\u06cc \u0631\u0627 \u062f\u0631 \u0622\u0646 \u062f\u0631\u062c \u06a9\u0646\u06cc\u0645 <code>PopupModal<\/code> \u0639\u0646\u0635\u0631 \u062f\u0631 <code>&lt;slot&gt;&lt;\/slot&gt;<\/code> \u0628\u0631\u0686\u0633\u0628 \u0632\u062f\u0646  \u0628\u0631\u0627\u06cc \u0645\u0637\u0627\u0644\u0639\u0647 \u0628\u06cc\u0634\u062a\u0631 \u062f\u0631 \u0645\u0648\u0631\u062f \u0631\u0648\u0634 \u0639\u0645\u0644\u06a9\u0631\u062f \u0627\u0633\u0644\u0627\u062a \u0647\u0627\u060c \u0628\u0647 \u0627\u062f\u0627\u0645\u0647 \u0645\u0637\u0644\u0628 \u0645\u0631\u0627\u062c\u0639\u0647 \u06a9\u0646\u06cc\u062f <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/vuejs.org\/v2\/guide\/components-slots.html\">\u0631\u0627\u0647\u0646\u0645\u0627\u06cc Vue \u0631\u0648\u06cc \u0627\u0633\u0644\u0627\u062a \u0647\u0627<\/a>.<\/p>\n<p>\u0645\u0627 \u0647\u0645\u0686\u0646\u06cc\u0646 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u0647 \u0627\u06cc\u0645 <code>&lt;transition name=\"fade\"&gt;<\/code> \u0628\u0647 \u0642\u0627\u0644\u0628 \u062a\u06af \u06a9\u0646\u06cc\u062f  \u0645\u0627 \u0627\u0632 \u0627\u06cc\u0646 \u062f\u0631 \u0628\u062e\u0634 \u0628\u0639\u062f\u06cc \u0628\u0631\u0627\u06cc \u0645\u062a\u062d\u0631\u06a9 \u0633\u0627\u0632\u06cc \u06cc\u06a9 \u0627\u0641\u06a9\u062a \u0645\u062d\u0648 \u0634\u062f\u0646\/\u0645\u062d\u0648 \u0634\u062f\u0646 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f \u0631\u0648\u06cc \u062f\u06cc\u0627\u0644\u0648\u06af<\/p>\n<p>\u0633\u067e\u0633\u060c \u0645\u0627 \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u0645 <code>data()<\/code>\u060c <code>open()<\/code> \u0648 <code>close()<\/code> \u062a\u0648\u0627\u0628\u0639 \u0631\u0648\u06cc\u062f\u0627\u062f:<\/p>\n<pre><code class=\"hljs\"><span class=\"hljs-comment\">&lt;!-- components\/PopupModal.vue --&gt;<\/span>\n\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span>&gt;<\/span><span class=\"javascript\">\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> {\n    <span class=\"hljs-attr\">name<\/span>: <span class=\"hljs-string\">'PopupModal'<\/span>,\n\n    <span class=\"hljs-attr\">data<\/span>: <span class=\"hljs-function\">() =&gt;<\/span> ({\n        <span class=\"hljs-attr\">isVisible<\/span>: <span class=\"hljs-literal\">false<\/span>,\n    }),\n\n    <span class=\"hljs-attr\">methods<\/span>: {\n        <span class=\"hljs-function\"><span class=\"hljs-title\">open<\/span>(<span class=\"hljs-params\"><\/span>)<\/span> {\n            <span class=\"hljs-built_in\">this<\/span>.isVisible = <span class=\"hljs-literal\">true<\/span>\n        },\n\n        <span class=\"hljs-function\"><span class=\"hljs-title\">close<\/span>(<span class=\"hljs-params\"><\/span>)<\/span> {\n            <span class=\"hljs-built_in\">this<\/span>.isVisible = <span class=\"hljs-literal\">false<\/span>\n        },\n    },\n}\n<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span>\n<\/code><\/pre>\n<p>\u0648 \u062f\u0631 \u0646\u0647\u0627\u06cc\u062a\u060c \u0627\u062c\u0627\u0632\u0647 \u062f\u0647\u06cc\u062f \u06a9\u0645\u06cc \u0633\u0628\u06a9 \u0628\u0647 \u0622\u0646 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u0645:<\/p>\n<pre><code class=\"hljs\"><span class=\"hljs-comment\">&lt;!-- components\/PopupModal.vue --&gt;<\/span>\n\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">style<\/span> <span class=\"hljs-attr\">scoped<\/span>&gt;<\/span><span class=\"css\">\n<span class=\"hljs-comment\">\/* css class for the transition *\/<\/span>\n<span class=\"hljs-selector-class\">.fade-enter-active<\/span>,\n<span class=\"hljs-selector-class\">.fade-leave-active<\/span> {\n    <span class=\"hljs-attribute\">transition<\/span>: opacity <span class=\"hljs-number\">0.3s<\/span>;\n}\n<span class=\"hljs-selector-class\">.fade-enter<\/span>,\n<span class=\"hljs-selector-class\">.fade-leave-to<\/span> {\n    <span class=\"hljs-attribute\">opacity<\/span>: <span class=\"hljs-number\">0<\/span>;\n}\n\n<span class=\"hljs-selector-class\">.popup-modal<\/span> {\n    <span class=\"hljs-attribute\">background-color<\/span>: <span class=\"hljs-built_in\">rgba<\/span>(<span class=\"hljs-number\">0<\/span>, <span class=\"hljs-number\">0<\/span>, <span class=\"hljs-number\">0<\/span>, <span class=\"hljs-number\">0.5<\/span>);\n    <span class=\"hljs-attribute\">position<\/span>: fixed;\n    <span class=\"hljs-attribute\">top<\/span>: <span class=\"hljs-number\">0<\/span>;\n    <span class=\"hljs-attribute\">bottom<\/span>: <span class=\"hljs-number\">0<\/span>;\n    <span class=\"hljs-attribute\">left<\/span>: <span class=\"hljs-number\">0<\/span>;\n    <span class=\"hljs-attribute\">right<\/span>: <span class=\"hljs-number\">0<\/span>;\n    <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">0.5rem<\/span>;\n    <span class=\"hljs-attribute\">display<\/span>: flex;\n    <span class=\"hljs-attribute\">align-items<\/span>: center;\n    <span class=\"hljs-attribute\">z-index<\/span>: <span class=\"hljs-number\">1<\/span>;\n}\n\n<span class=\"hljs-selector-class\">.window<\/span> {\n    <span class=\"hljs-attribute\">background<\/span>: <span class=\"hljs-number\">#fff<\/span>;\n    <span class=\"hljs-attribute\">border-radius<\/span>: <span class=\"hljs-number\">5px<\/span>;\n    <span class=\"hljs-attribute\">box-shadow<\/span>: <span class=\"hljs-number\">2px<\/span> <span class=\"hljs-number\">4px<\/span> <span class=\"hljs-number\">8px<\/span> <span class=\"hljs-built_in\">rgba<\/span>(<span class=\"hljs-number\">0<\/span>, <span class=\"hljs-number\">0<\/span>, <span class=\"hljs-number\">0<\/span>, <span class=\"hljs-number\">0.2<\/span>);\n    <span class=\"hljs-attribute\">max-width<\/span>: <span class=\"hljs-number\">480px<\/span>;\n    <span class=\"hljs-attribute\">margin-left<\/span>: auto;\n    <span class=\"hljs-attribute\">margin-right<\/span>: auto;\n    <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">1rem<\/span>;\n}\n<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">style<\/span>&gt;<\/span>\n<\/code><\/pre>\n<h2 id=\"confirmationdialogueanimation\"><span class=\"ez-toc-section\" id=\"%d8%a7%d9%86%db%8c%d9%85%db%8c%d8%b4%d9%86_%da%af%d9%81%d8%aa%da%af%d9%88%db%8c_%d8%aa%d8%a7%db%8c%db%8c%d8%af\"><\/span>\u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u06af\u0641\u062a\u06af\u0648\u06cc \u062a\u0627\u06cc\u06cc\u062f<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u062f\u0631 \u062a\u06af template \u06cc\u06a9 \u062a\u06af \u0627\u0646\u062a\u0642\u0627\u0644 \u062e\u0648\u0627\u0647\u06cc\u062f \u062f\u06cc\u062f <code>&lt;transition name=\"fade\"&gt;<\/code>.  \u0627\u06cc\u0646 \u0628\u0631\u0627\u06cc \u0645\u062a\u062d\u0631\u06a9 \u0633\u0627\u0632\u06cc \u062d\u0627\u0644\u062a \u0647\u0627\u06cc \u0633\u0627\u062f\u0647 \u0648\u0631\u0648\u062f\/\u062e\u0631\u0648\u062c \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f.  \u0647\u0631 \u0686\u06cc\u0632\u06cc \u06a9\u0647 \u062f\u0631 \u062f\u0627\u062e\u0644 \u0627\u06cc\u0646 \u062a\u06af \u0628\u0627\u0634\u062f\u060c \u062f\u0631 \u0635\u0648\u0631\u062a \u0627\u0636\u0627\u0641\u0647 \u06cc\u0627 \u062d\u0630\u0641 \u0634\u062f\u0646 \u0627\u0632 \u0622\u0646\u060c \u0645\u062a\u062d\u0631\u06a9 \u062e\u0648\u0627\u0647\u062f \u0634\u062f.<\/p>\n<p>\u0645\u0627 \u0627\u0632 \u06cc\u06a9 \u0634\u0631\u0637\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u0645 <code>v-if=\"isVisible\"<\/code> \u0628\u0631\u0627\u06cc \u0645\u062e\u0641\u06cc \u06a9\u0631\u062f\u0646 \u0648 \u0646\u0645\u0627\u06cc\u0634 \u067e\u0646\u062c\u0631\u0647 \u0628\u0627\u0632\u0634\u0648.  \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u062f\u0631 \u0645\u0648\u0631\u062f \u0622\u0646 \u0628\u06cc\u0634\u062a\u0631 \u0628\u062e\u0648\u0627\u0646\u06cc\u062f <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/vuejs.org\/v2\/guide\/transitions.html\">\u0631\u0627\u0647\u0646\u0645\u0627\u06cc Vue \u0631\u0648\u06cc \u0627\u0646\u062a\u0642\u0627\u0644 \u0647\u0627<\/a>.<\/p>\n<p>\u0628\u0631\u0627\u06cc \u062a\u0639\u06cc\u06cc\u0646 \u0631\u0648\u0634 \u0627\u0646\u062a\u0642\u0627\u0644 \u0645\u062d\u062a\u0648\u0627\u060c \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u062e\u0648\u062f \u0631\u0627 \u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc \u06a9\u0631\u062f\u0647 \u0627\u06cc\u0645 <code>fade<\/code>.  \u0628\u0631\u0627\u06cc \u067e\u06cc\u0627\u062f\u0647 \u0633\u0627\u0632\u06cc \u0627\u06cc\u0646 \u0627\u0646\u062a\u0642\u0627\u0644 \u062f\u0631 CSS\u060c \u06a9\u0644\u0627\u0633 \u0647\u0627\u06cc\u06cc \u0628\u0627 \u067e\u06cc\u0634\u0648\u0646\u062f \u0646\u0627\u0645 \u0627\u0636\u0627\u0641\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u0645 <code>fade<\/code>\u060c \u0645\u0637\u0627\u0628\u0642 \u0628\u0627 \u0645\u0627 <code>name<\/code> \u0648\u06cc\u0698\u06af\u06cc \u0627\u0632 <code>&lt;transition&gt;<\/code> \u0628\u0631\u0686\u0633\u0628 \u0632\u062f\u0646<\/p>\n<p>\u062a\u0646\u0647\u0627 \u06a9\u0627\u0631\u06cc \u06a9\u0647 \u0627\u0646\u062c\u0627\u0645 \u0645\u06cc \u062f\u0647\u062f \u0627\u06cc\u0646 \u0627\u0633\u062a \u06a9\u0647 \u0647\u0646\u06af\u0627\u0645 \u0628\u0633\u062a\u0647 \u0634\u062f\u0646 \u0648 \u0628\u0627\u0632 \u0634\u062f\u0646 \u067e\u0646\u062c\u0631\u0647 \u0628\u0627\u0632\u0634\u0648\u060c \u06a9\u062f\u0648\u0631\u062a \u0631\u0627 \u0645\u062a\u062d\u0631\u06a9 \u0645\u06cc \u06a9\u0646\u062f:<\/p>\n<pre><code class=\"hljs\"><span class=\"hljs-selector-class\">.fade-enter-active<\/span>,\n<span class=\"hljs-selector-class\">.fade-leave-active<\/span> {\n    <span class=\"hljs-attribute\">transition<\/span>: opacity <span class=\"hljs-number\">0.3s<\/span>;\n}\n<span class=\"hljs-selector-class\">.fade-enter<\/span>,\n<span class=\"hljs-selector-class\">.fade-leave-to<\/span> {\n    <span class=\"hljs-attribute\">opacity<\/span>: <span class=\"hljs-number\">0<\/span>;\n}\n<\/code><\/pre>\n<h2 id=\"inheritingthepopupcomponent\"><span class=\"ez-toc-section\" id=\"%d8%a8%d9%87_%d8%a7%d8%b1%d8%ab_%d8%a8%d8%b1%d8%af%d9%86_%da%a9%d8%a7%d9%85%d9%be%d9%88%d9%86%d9%86%d8%aa_%d9%be%d8%a7%d9%be_%d8%a2%d9%be\"><\/span>\u0628\u0647 \u0627\u0631\u062b \u0628\u0631\u062f\u0646 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u067e\u0627\u067e \u0622\u067e<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u062f\u06cc\u0627\u0644\u0648\u06af \u062a\u0627\u06cc\u06cc\u062f \u0645\u0627\u060c \u0628\u0647 \u0627\u0631\u062b \u0645\u06cc \u0628\u0631\u06cc\u0645 <code>PopupModal<\/code> \u062a\u0648\u0633\u0637 \u062a\u0631\u06a9\u06cc\u0628\u060c \u0648 \u0633\u0641\u0627\u0631\u0634\u06cc \u06a9\u0631\u062f\u0646 \u067e\u0646\u062c\u0631\u0647 \u0645\u0639\u06cc\u0646 \u0642\u0627\u0628\u0644 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u062c\u062f\u062f \u0628\u0631\u0627\u06cc \u062a\u0628\u062f\u06cc\u0644 \u0634\u062f\u0646 \u0628\u0647 \u06cc\u06a9 \u06af\u0641\u062a\u06af\u0648\u06cc \u062a\u0627\u06cc\u06cc\u062f.<\/p>\n<p>\u0628\u06cc\u0627\u06cc\u06cc\u062f \u06cc\u06a9 \u0641\u0627\u06cc\u0644 \u062c\u062f\u06cc\u062f \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u0645\u060c <code>components\/ConfirmDialogue.vue<\/code> \u0648 \u062f\u0627\u062e\u0644 \u0622\u0646 \u06cc\u06a9 \u0642\u0627\u0644\u0628 \u062a\u0639\u0631\u06cc\u0641 \u06a9\u0646\u06cc\u062f:<\/p>\n<pre><code class=\"hljs\"><span class=\"hljs-comment\">&lt;!-- components\/ConfirmDialogue.vue --&gt;<\/span>\n\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">template<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">popup-modal<\/span> <span class=\"hljs-attr\">ref<\/span>=<span class=\"hljs-string\">\"popup\"<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h2<\/span> <span class=\"hljs-attr\">style<\/span>=<span class=\"hljs-string\">\"margin-top: 0\"<\/span>&gt;<\/span>{{ title }}<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h2<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span>&gt;<\/span>{{ message }}<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"btns\"<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"cancel-btn\"<\/span> @<span class=\"hljs-attr\">click<\/span>=<span class=\"hljs-string\">\"_cancel\"<\/span>&gt;<\/span>{{ cancelButton }}<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">span<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"ok-btn\"<\/span> @<span class=\"hljs-attr\">click<\/span>=<span class=\"hljs-string\">\"_confirm\"<\/span>&gt;<\/span>{{ okButton }}<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">span<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">popup-modal<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">template<\/span>&gt;<\/span>\n<\/code><\/pre>\n<p>\u0686\u0648\u0646 \u0645\u0627 \u062a\u0639\u0631\u06cc\u0641 \u06a9\u0631\u062f\u06cc\u0645 <code>&lt;slot&gt;&lt;\/slot&gt;<\/code> \u0628\u0631\u0686\u0633\u0628 \u062f\u0631 <code>popup-modal<\/code> \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u060c \u0647\u0631 \u0686\u06cc\u0632\u06cc \u06a9\u0647 \u0628\u06cc\u0646 \u062a\u06af \u0647\u0627\u06cc \u062c\u0632\u0621 \u0622\u0646 \u0642\u0631\u0627\u0631 \u0645\u06cc \u062f\u0647\u06cc\u0645 (<<code>popup-modal&gt;&lt;\/popup-modal&gt;<\/code>) \u0628\u06cc\u0646 \u0622\u0646 \u0627\u0631\u0627\u0626\u0647 \u062e\u0648\u0627\u0647\u062f \u0634\u062f <code>&lt;slot&gt;<\/code> \u0628\u0647 \u062c\u0627\u06cc \u0622\u0646 \u0628\u0631\u0686\u0633\u0628 \u0647\u0627<\/p>\n<p>\u0645\u0627 \u0647\u0645\u0686\u0646\u06cc\u0646 \u06cc\u06a9 \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u06cc\u0645 <code>ref=\"popup\"<\/code> \u0628\u0647 <code>popup-modal<\/code> \u0628\u0631\u0686\u0633\u0628 \u0632\u062f\u0646  \u0628\u0627 \u062a\u0646\u0638\u06cc\u0645 \u0622\u0646 \u0648\u06cc\u0698\u06af\u06cc\u060c \u0627\u06a9\u0646\u0648\u0646 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u0645 \u0628\u0647 \u0622\u0646 \u062f\u0633\u062a\u0631\u0633\u06cc \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u0645 <code>popup-modal<\/code> \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0645\u062b\u0627\u0644 \u0628\u0627 <code>this.$refs.popup<\/code>.  \u0645\u0627 \u0627\u0632 \u0622\u0646 \u0645\u0631\u062c\u0639 \u0628\u0631\u0627\u06cc \u062a\u0645\u0627\u0633 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f <code>open()<\/code> \u0648 <code>close()<\/code> \u0631\u0648\u06cc  \u0645\u062f\u0627\u0644 \u067e\u0627\u067e \u0622\u067e<\/p>\n<p>\u0633\u067e\u0633\u060c \u0628\u06cc\u0627\u06cc\u06cc\u062f \u0645\u062a\u062f\u0647\u0627\u06cc \u0645\u0648\u0644\u0641\u0647 \u0648\u0627\u0644\u062f \u0631\u0627 \u067e\u06cc\u0627\u062f\u0647 \u0633\u0627\u0632\u06cc \u06a9\u0646\u06cc\u0645:<\/p>\n<pre><code class=\"hljs\"><span class=\"hljs-comment\">&lt;!-- components\/ConfirmDialogue.vue --&gt;<\/span>\n\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span>&gt;<\/span><span class=\"javascript\">\n<span class=\"hljs-keyword\">import<\/span> PopupModal <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'.\/PopupModal.vue'<\/span>\n\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> {\n    <span class=\"hljs-attr\">name<\/span>: <span class=\"hljs-string\">'ConfirmDialogue'<\/span>,\n\n    <span class=\"hljs-attr\">components<\/span>: { PopupModal },\n\n    <span class=\"hljs-attr\">data<\/span>: <span class=\"hljs-function\">() =&gt;<\/span> ({\n        <span class=\"hljs-comment\">\/\/ Parameters that change depending \u0631\u0648\u06cc the type of dialogue<\/span>\n        <span class=\"hljs-attr\">title<\/span>: <span class=\"hljs-literal\">undefined<\/span>,\n        <span class=\"hljs-attr\">message<\/span>: <span class=\"hljs-literal\">undefined<\/span>, <span class=\"hljs-comment\">\/\/ Main text content<\/span>\n        <span class=\"hljs-attr\">okButton<\/span>: <span class=\"hljs-literal\">undefined<\/span>, <span class=\"hljs-comment\">\/\/ Text for confirm button; leave it empty because we don't know what we're using it for<\/span>\n        <span class=\"hljs-attr\">cancelButton<\/span>: <span class=\"hljs-string\">'Go Back'<\/span>, <span class=\"hljs-comment\">\/\/ text for cancel button<\/span>\n        \n        <span class=\"hljs-comment\">\/\/ Private variables<\/span>\n        <span class=\"hljs-attr\">resolvePromise<\/span>: <span class=\"hljs-literal\">undefined<\/span>,\n        <span class=\"hljs-attr\">rejectPromise<\/span>: <span class=\"hljs-literal\">undefined<\/span>,\n    }),\n\n    <span class=\"hljs-attr\">methods<\/span>: {\n        <span class=\"hljs-function\"><span class=\"hljs-title\">show<\/span>(<span class=\"hljs-params\">opts = {}<\/span>)<\/span> {\n            <span class=\"hljs-built_in\">this<\/span>.title = opts.title\n            <span class=\"hljs-built_in\">this<\/span>.message = opts.message\n            <span class=\"hljs-built_in\">this<\/span>.okButton = opts.okButton\n            <span class=\"hljs-keyword\">if<\/span> (opts.cancelButton) {\n                <span class=\"hljs-built_in\">this<\/span>.cancelButton = opts.cancelButton\n            }\n            <span class=\"hljs-comment\">\/\/ Once we set our config, we tell the popup modal to open<\/span>\n            <span class=\"hljs-built_in\">this<\/span>.$refs.popup.open()\n            <span class=\"hljs-comment\">\/\/ Return promise so the caller can get results<\/span>\n            <span class=\"hljs-keyword\">return<\/span> <span class=\"hljs-keyword\">new<\/span> <span class=\"hljs-built_in\">Promise<\/span>(<span class=\"hljs-function\">(<span class=\"hljs-params\">resolve, reject<\/span>) =&gt;<\/span> {\n                <span class=\"hljs-built_in\">this<\/span>.resolvePromise = resolve\n                <span class=\"hljs-built_in\">this<\/span>.rejectPromise = reject\n            })\n        },\n\n        <span class=\"hljs-function\"><span class=\"hljs-title\">_confirm<\/span>(<span class=\"hljs-params\"><\/span>)<\/span> {\n            <span class=\"hljs-built_in\">this<\/span>.$refs.popup.close()\n            <span class=\"hljs-built_in\">this<\/span>.resolvePromise(<span class=\"hljs-literal\">true<\/span>)\n        },\n\n        <span class=\"hljs-function\"><span class=\"hljs-title\">_cancel<\/span>(<span class=\"hljs-params\"><\/span>)<\/span> {\n            <span class=\"hljs-built_in\">this<\/span>.$refs.popup.close()\n            <span class=\"hljs-built_in\">this<\/span>.resolvePromise(<span class=\"hljs-literal\">false<\/span>)\n            <span class=\"hljs-comment\">\/\/ Or you can throw an error<\/span>\n            <span class=\"hljs-comment\">\/\/ this.rejectPromise(new Error('User canceled the dialogue'))<\/span>\n        },\n    },\n}\n<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span>\n<\/code><\/pre>\n<p>\u062f\u0631 \u0646\u0647\u0627\u06cc\u062a\u060c \u0627\u062c\u0627\u0632\u0647 \u062f\u0647\u06cc\u062f \u06a9\u0645\u06cc \u0633\u0628\u06a9 \u0628\u0647 \u0622\u0646 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u0645 \u062a\u0627 \u06a9\u0645\u06cc \u0632\u06cc\u0628\u0627\u062a\u0631 \u0628\u0647 \u0646\u0638\u0631 \u0628\u0631\u0633\u062f:<\/p>\n<pre><code class=\"hljs\"><span class=\"hljs-comment\">&lt;!-- components\/ConfirmDialogue.vue --&gt;<\/span>\n\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">style<\/span> <span class=\"hljs-attr\">scoped<\/span>&gt;<\/span><span class=\"css\">\n<span class=\"hljs-selector-class\">.btns<\/span> {\n    <span class=\"hljs-attribute\">display<\/span>: flex;\n    <span class=\"hljs-attribute\">flex-direction<\/span>: row;\n    <span class=\"hljs-attribute\">justify-content<\/span>: space-between;\n}\n\n<span class=\"hljs-selector-class\">.ok-btn<\/span> {\n    <span class=\"hljs-attribute\">color<\/span>: red;\n    <span class=\"hljs-attribute\">text-decoration<\/span>: underline;\n    <span class=\"hljs-attribute\">line-height<\/span>: <span class=\"hljs-number\">2.5rem<\/span>;\n    <span class=\"hljs-attribute\">cursor<\/span>: pointer;\n}\n\n<span class=\"hljs-selector-class\">.cancel-btn<\/span> {\n    <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">0.5em<\/span> <span class=\"hljs-number\">1em<\/span>;\n    <span class=\"hljs-attribute\">background-color<\/span>: <span class=\"hljs-number\">#d5eae7<\/span>;\n    <span class=\"hljs-attribute\">color<\/span>: <span class=\"hljs-number\">#35907f<\/span>;\n    <span class=\"hljs-attribute\">border<\/span>: <span class=\"hljs-number\">2px<\/span> solid <span class=\"hljs-number\">#0ec5a4<\/span>;\n    <span class=\"hljs-attribute\">border-radius<\/span>: <span class=\"hljs-number\">5px<\/span>;\n    <span class=\"hljs-attribute\">font-weight<\/span>: bold;\n    <span class=\"hljs-attribute\">font-size<\/span>: <span class=\"hljs-number\">16px<\/span>;\n    <span class=\"hljs-attribute\">text-transform<\/span>: uppercase;\n    <span class=\"hljs-attribute\">cursor<\/span>: pointer;\n}\n<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">style<\/span>&gt;<\/span>\n<\/code><\/pre>\n<h2 id=\"usingtheconfirmationdialogue\"><span class=\"ez-toc-section\" id=\"%d8%a8%d8%a7_%d8%a7%d8%b3%d8%aa%d9%81%d8%a7%d8%af%d9%87_%d8%a7%d8%b2_%da%af%d9%81%d8%aa%da%af%d9%88%db%8c_%d8%aa%d8%a7%db%8c%db%8c%d8%af\"><\/span>\u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u06af\u0641\u062a\u06af\u0648\u06cc \u062a\u0627\u06cc\u06cc\u062f<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0628\u0631\u0627\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u06af\u0641\u062a\u06af\u0648\u06cc \u062a\u0627\u06cc\u06cc\u062f\u060c \u0628\u0627\u06cc\u062f \u0641\u0642\u0637 \u0639\u0628\u0627\u0631\u062a \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f <code>components\/ConfirmDialogue.vue<\/code> \u062c\u0632\u0621.  \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0645\u062b\u0627\u0644\u060c \u06cc\u06a9 \u0631\u0627 \u0628\u0633\u0627\u0632\u06cc\u0645 page \u0628\u0627 \u06cc\u06a9 \u062f\u06a9\u0645\u0647 &#8220;\u062d\u0630\u0641&#8221; \u06a9\u0647 \u0645\u0637\u0645\u0626\u0646 \u0645\u06cc \u0634\u0648\u062f \u06a9\u0647 \u0622\u06cc\u0627 \u0634\u0645\u0627 <em>\u0648\u0627\u0642\u0639\u0627<\/em> \u0645\u06cc \u062e\u0648\u0627\u0647\u0645 \u062f\u06cc\u06af\u0631\u06cc \u0631\u0627 \u062d\u0630\u0641 \u06a9\u0646\u0645 page:<\/p>\n<pre><code class=\"hljs\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">template<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h1<\/span>&gt;<\/span>Delete Page<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h1<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"delete-btn\"<\/span> @<span class=\"hljs-attr\">click<\/span>=<span class=\"hljs-string\">\"doDelete\"<\/span>&gt;<\/span>Delete Page<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">confirm-dialogue<\/span> <span class=\"hljs-attr\">ref<\/span>=<span class=\"hljs-string\">\"confirmDialogue\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">confirm-dialogue<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">template<\/span>&gt;<\/span>\n\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span>&gt;<\/span><span class=\"javascript\">\n<span class=\"hljs-keyword\">import<\/span> ConfirmDialogue <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'..\/components\/ConfirmDialogue.vue'<\/span>\n\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> {\n    <span class=\"hljs-attr\">components<\/span>: { ConfirmDialogue },\n    <span class=\"hljs-attr\">methods<\/span>: {\n        <span class=\"hljs-keyword\">async<\/span> <span class=\"hljs-function\"><span class=\"hljs-title\">doDelete<\/span>(<span class=\"hljs-params\"><\/span>)<\/span> {\n            <span class=\"hljs-keyword\">const<\/span> ok = <span class=\"hljs-keyword\">await<\/span> <span class=\"hljs-built_in\">this<\/span>.$refs.confirmDialogue.show({\n                <span class=\"hljs-attr\">title<\/span>: <span class=\"hljs-string\">'Delete Page'<\/span>,\n                <span class=\"hljs-attr\">message<\/span>: <span class=\"hljs-string\">'Are you sure you want to delete this page? It cannot be undone.'<\/span>,\n                <span class=\"hljs-attr\">okButton<\/span>: <span class=\"hljs-string\">'Delete Forever'<\/span>,\n            })\n            <span class=\"hljs-comment\">\/\/ If you throw an error, the method will terminate here unless you surround it wil try\/catch<\/span>\n            <span class=\"hljs-keyword\">if<\/span> (ok) {\n                alert(<span class=\"hljs-string\">'You have successfully delete this page.'<\/span>)\n            } <span class=\"hljs-keyword\">else<\/span> {\n                alert(<span class=\"hljs-string\">'You chose not to delete this page. Doing nothing now.'<\/span>)\n            }\n        },\n    },\n}\n<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span>\n\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">style<\/span> <span class=\"hljs-attr\">scoped<\/span>&gt;<\/span><span class=\"css\">\n<span class=\"hljs-selector-class\">.delete-btn<\/span> {\n    <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">0.5em<\/span> <span class=\"hljs-number\">1em<\/span>;\n    <span class=\"hljs-attribute\">background-color<\/span>: <span class=\"hljs-number\">#eccfc9<\/span>;\n    <span class=\"hljs-attribute\">color<\/span>: <span class=\"hljs-number\">#c5391a<\/span>;\n    <span class=\"hljs-attribute\">border<\/span>: <span class=\"hljs-number\">2px<\/span> solid <span class=\"hljs-number\">#ea3f1b<\/span>;\n    <span class=\"hljs-attribute\">border-radius<\/span>: <span class=\"hljs-number\">5px<\/span>;\n    <span class=\"hljs-attribute\">font-weight<\/span>: bold;\n    <span class=\"hljs-attribute\">font-size<\/span>: <span class=\"hljs-number\">16px<\/span>;\n    <span class=\"hljs-attribute\">text-transform<\/span>: uppercase;\n    <span class=\"hljs-attribute\">cursor<\/span>: pointer;\n}\n<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">style<\/span>&gt;<\/span>\n<\/code><\/pre>\n<p>\u0627\u0632 \u0622\u0646\u062c\u0627\u06cc\u06cc \u06a9\u0647 \u0645\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u0645 <code>await<\/code> \u062f\u0631 \u0631\u0648\u0634 \u0645\u0627 \u0628\u0631\u0627\u06cc \u0628\u0647 \u062f\u0633\u062a \u0622\u0648\u0631\u062f\u0646 \u0646\u062a\u06cc\u062c\u0647 \u06af\u0641\u062a\u06af\u0648\u06cc \u062a\u0627\u06cc\u06cc\u062f\u060c \u0628\u0627\u06cc\u062f \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u0645 <code>async<\/code> \u0628\u0647 \u062a\u0639\u0631\u06cc\u0641 \u0631\u0648\u0634 \u0645\u0627<\/p>\n<p>\u0627\u0632 \u0637\u0631\u0641 \u062f\u06cc\u06af\u0631\u060c \u0645\u0645\u06a9\u0646 \u0627\u0633\u062a \u0631\u0648\u06cc\u06a9\u0631\u062f \u0633\u0628\u06a9 \u0648\u0639\u062f\u0647 \u0631\u0627 \u062a\u0631\u062c\u06cc\u062d \u062f\u0647\u06cc\u062f:<\/p>\n<pre><code class=\"hljs\"><span class=\"hljs-built_in\">this<\/span>.$refs.confirmDialogue.show({\n    <span class=\"hljs-attr\">title<\/span>: <span class=\"hljs-string\">'Delete Page'<\/span>,\n    <span class=\"hljs-attr\">message<\/span>: <span class=\"hljs-string\">'Are you sure you want to delete this page? It cannot be undone.'<\/span>,\n    <span class=\"hljs-attr\">okButton<\/span>: <span class=\"hljs-string\">'Delete Forever'<\/span>,\n}).then(<span class=\"hljs-function\">(<span class=\"hljs-params\">result<\/span>) =&gt;<\/span> {\n    <span class=\"hljs-keyword\">if<\/span> (ok) {\n        alert(<span class=\"hljs-string\">'You have successfully delete this page.'<\/span>)\n    } <span class=\"hljs-keyword\">else<\/span> {\n        alert(<span class=\"hljs-string\">'You chose not to delete this page. Doing nothing now.'<\/span>)\n    }\n})\n<\/code><\/pre>\n<p>\u0628\u0631\u0627\u06cc \u0627\u06cc\u0646\u06a9\u0647 \u0628\u0628\u06cc\u0646\u06cc\u062f \u0686\u0631\u0627 \u0627\u06af\u0631 \u06a9\u0627\u0631\u0628\u0631 \u06af\u0641\u062a\u06af\u0648\u06cc \u062a\u0623\u06cc\u06cc\u062f \u0631\u0627 \u0644\u063a\u0648 \u06a9\u0631\u062f\u060c \u067e\u06cc\u0634\u0646\u0647\u0627\u062f \u062f\u0627\u062f\u0647 \u0627\u06cc\u0645 \u06a9\u0647 \u062e\u0637\u0627 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u062f\u060c \u0628\u0628\u06cc\u0646\u06cc\u062f \u06a9\u062f \u0632\u06cc\u0631 \u0686\u0642\u062f\u0631 \u0631\u0648\u0627\u0646 \u0627\u0633\u062a:<\/p>\n<pre><code class=\"hljs\"><span class=\"hljs-keyword\">await<\/span> <span class=\"hljs-built_in\">this<\/span>.$refs.confirmDialogue.show({\n    <span class=\"hljs-attr\">title<\/span>: <span class=\"hljs-string\">'Delete Page'<\/span>,\n    <span class=\"hljs-attr\">message<\/span>: <span class=\"hljs-string\">'Are you sure you want to delete this page? It cannot be undone.'<\/span>,\n    <span class=\"hljs-attr\">okButton<\/span>: <span class=\"hljs-string\">'Delete Forever'<\/span>,\n})\nalert(<span class=\"hljs-string\">'Deleting this page.'<\/span>)\n<\/code><\/pre>\n<p>\u0627\u0632 \u0622\u0646\u062c\u0627\u06cc\u06cc \u06a9\u0647 \u0644\u063a\u0648 \u0628\u0647 \u0647\u06cc\u0686 \u0627\u0642\u062f\u0627\u0645\u06cc \u0646\u06cc\u0627\u0632 \u0646\u062f\u0627\u0631\u062f\u060c \u0628\u0647 \u0633\u0627\u062f\u06af\u06cc \u0646\u06cc\u0627\u0632\u06cc \u0628\u0647 \u0631\u0633\u06cc\u062f\u06af\u06cc \u0628\u0647 \u0622\u0646 \u062d\u0627\u0644\u062a \u0648\u062c\u0648\u062f \u0646\u062f\u0627\u0631\u062f.  \u0648 \u0627\u06af\u0631 \u062a\u0635\u0645\u06cc\u0645 \u0628\u0647 \u0631\u0633\u06cc\u062f\u06af\u06cc \u0628\u0647 \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0644\u063a\u0648 \u062f\u0627\u0631\u06cc\u062f\u060c \u0628\u0647 \u0633\u0627\u062f\u06af\u06cc \u0622\u0646 \u06a9\u062f \u0631\u0627 \u0628\u0627 \u06cc\u06a9 \u0628\u067e\u06cc\u0686\u06cc\u062f <code>try\/catch<\/code>.<\/p>\n<h2 id=\"conclusion\"><span class=\"ez-toc-section\" id=\"%d9%86%d8%aa%db%8c%d8%ac%d9%87\"><\/span>\u0646\u062a\u06cc\u062c\u0647<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u062f\u0631 \u0627\u06cc\u0646 \u0645\u0642\u0627\u0644\u0647\u060c \u06cc\u06a9 \u0645\u0648\u0644\u0641\u0647 \u0628\u0627\u0632\u0634\u0648\u06cc \u0645\u0639\u06cc\u0646 \u0642\u0627\u0628\u0644 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u062c\u062f\u062f \u0631\u0627 \u062f\u0631 Vue.js \u062a\u0639\u0631\u06cc\u0641 \u06a9\u0631\u062f\u0647\u200c\u0627\u06cc\u0645 \u0648 \u0622\u0646 \u0631\u0627 \u0628\u0631\u0627\u06cc \u067e\u06cc\u0627\u062f\u0647\u200c\u0633\u0627\u0632\u06cc \u06af\u0641\u062a\u06af\u0648\u06cc \u062a\u0623\u06cc\u06cc\u062f \u0628\u0647 \u0627\u0631\u062b \u0628\u0631\u062f\u0647\u200c\u0627\u06cc\u0645.  \u0633\u067e\u0633\u060c \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646\u200c\u0647\u0627\u06cc\u06cc \u0631\u0627 \u0628\u0631\u0627\u06cc \u0627\u0647\u062f\u0627\u0641 \u0632\u06cc\u0628\u0627\u06cc\u06cc\u200c\u0634\u0646\u0627\u062e\u062a\u06cc \u0628\u0647 \u0622\u0646 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u0647\u200c\u0627\u06cc\u0645 \u0648 \u0686\u0646\u062f \u0646\u0645\u0648\u0646\u0647 \u0627\u0632 \u0631\u0648\u0634 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0628\u0631\u0627\u06cc \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0648\u0631\u0648\u062f\u06cc \u0627\u0632 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0631\u0627 \u0627\u062c\u0631\u0627 \u06a9\u0631\u062f\u06cc\u0645.<\/p>\n<\/div>\n<p><br \/>\n<br \/>\u0645\u0646\u062a\u0634\u0631 \u0634\u062f\u0647 \u062f\u0631 1403-01-17 23:37:04<br \/>\n<\/p>\n\n\n<div class=\"kk-star-ratings kksr-auto kksr-align-center kksr-valign-bottom\"\n    data-payload='{&quot;align&quot;:&quot;center&quot;,&quot;id&quot;:&quot;15853&quot;,&quot;slug&quot;:&quot;default&quot;,&quot;valign&quot;:&quot;bottom&quot;,&quot;ignore&quot;:&quot;&quot;,&quot;reference&quot;:&quot;auto&quot;,&quot;class&quot;:&quot;&quot;,&quot;count&quot;:&quot;0&quot;,&quot;legendonly&quot;:&quot;&quot;,&quot;readonly&quot;:&quot;&quot;,&quot;score&quot;:&quot;0&quot;,&quot;starsonly&quot;:&quot;&quot;,&quot;best&quot;:&quot;5&quot;,&quot;gap&quot;:&quot;5&quot;,&quot;greet&quot;:&quot;\u0627\u0645\u062a\u06cc\u0627\u0632 \u0634\u0645\u0627 \u0628\u0647 \u0627\u06cc\u0646 \u0645\u0637\u0644\u0628&quot;,&quot;legend&quot;:&quot;0\\\/5 (0 \u0631\u0627\u06cc)&quot;,&quot;size&quot;:&quot;30&quot;,&quot;title&quot;:&quot;\u0631\u0648\u0634 \u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 \u06af\u0641\u062a\u06af\u0648\u06cc \u062a\u0627\u06cc\u06cc\u062f \u062f\u0631 Vue.jsA \u06af\u0641\u062a\u06af\u0648\u06cc \u062a\u0627\u06cc\u06cc\u062f \u06cc\u06a9 \u0627\u0644\u06af\u0648\u06cc \u0631\u0627\u0628\u0637 \u06a9\u0627\u0631\u0628\u0631\u06cc \u0627\u0633\u062a \u06a9\u0647 \u062f\u0631 \u0622\u0646 \u0628\u0647 \u06a9\u0627\u0631\u0628\u0631 \u0627\u06cc\u0646 \u0627\u0645\u06a9\u0627\u0646 \u062f\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f \u06a9\u0647 \u0628\u0647 \u0639\u0645\u0644 \u062e\u0648\u062f \u0627\u062f\u0627\u0645\u0647 \u062f\u0647\u062f \u06cc\u0627 \u0622\u0646 \u0631\u0627 \u0644\u063a\u0648 \u06a9\u0646\u062f.  \u0645\u0639\u0645\u0648\u0644\u0627\u064b \u0628\u0627 \u0627\u0642\u062f\u0627\u0645\u0627\u062a \u0645\u062e\u0631\u0628 \u06cc\u0627 \u063a\u06cc\u0631\u0642\u0627\u0628\u0644 \u0628\u0631\u06af\u0634\u062a \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f \u062a\u0627 \u0645\u0637\u0645\u0626\u0646 \u0634\u0648\u062f \u06a9\u0647 \u06a9\u0627\u0631\u0628\u0631 \u0648\u0627\u0642\u0639\u0627\u064b \u0645\u06cc \u062e\u0648\u0627\u0647\u062f \u0627\u062f\u0627\u0645\u0647 \u062f\u0647\u062f.  \u062f\u0631 \u0627\u06cc\u0646 \u0645\u0642\u0627\u0644\u0647 \u0628\u0647 \u067e\u06cc\u0627\u062f\u0647 \u0633\u0627\u0632\u06cc ...&quot;,&quot;width&quot;:&quot;0&quot;,&quot;_legend&quot;:&quot;{score}\\\/{best} ({count} \u0631\u0627\u06cc)&quot;,&quot;font_factor&quot;:&quot;1.25&quot;}'>\n            \n<div class=\"kksr-stars\">\n    \n<div class=\"kksr-stars-inactive\">\n            <div class=\"kksr-star\" data-star=\"1\" style=\"padding-left: 5px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 30px; height: 30px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"2\" style=\"padding-left: 5px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 30px; height: 30px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"3\" style=\"padding-left: 5px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 30px; height: 30px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"4\" style=\"padding-left: 5px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 30px; height: 30px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"5\" style=\"padding-left: 5px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 30px; height: 30px;\"><\/div>\n        <\/div>\n    <\/div>\n    \n<div class=\"kksr-stars-active\" style=\"width: 0px;\">\n            <div class=\"kksr-star\" style=\"padding-left: 5px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 30px; height: 30px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-left: 5px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 30px; height: 30px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-left: 5px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 30px; height: 30px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-left: 5px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 30px; height: 30px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-left: 5px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 30px; height: 30px;\"><\/div>\n        <\/div>\n    <\/div>\n<\/div>\n                \n\n<div class=\"kksr-legend\" style=\"font-size: 24px;\">\n            <span class=\"kksr-muted\">\u0627\u0645\u062a\u06cc\u0627\u0632 \u0634\u0645\u0627 \u0628\u0647 \u0627\u06cc\u0646 \u0645\u0637\u0644\u0628<\/span>\n    <\/div>\n    <\/div>\n","protected":false},"excerpt":{"rendered":"<p><span class=\"span-reading-time rt-reading-time\" style=\"display: block;\"><span class=\"rt-label rt-prefix\">\u0632\u0645\u0627\u0646 \u0644\u0627\u0632\u0645 \u0628\u0631\u0627\u06cc \u0645\u0637\u0627\u0644\u0639\u0647: <\/span> <span class=\"rt-time\"> 3<\/span> <span class=\"rt-label rt-postfix\">\u062f\u0642\u06cc\u0642\u0647<\/span><\/span>\u0645\u0639\u0631\u0641\u06cc \u06af\u0641\u062a\u06af\u0648\u06cc \u062a\u0627\u06cc\u06cc\u062f \u06cc\u06a9 \u0627\u0644\u06af\u0648\u06cc \u0631\u0627\u0628\u0637 \u06a9\u0627\u0631\u0628\u0631\u06cc \u0627\u0633\u062a \u06a9\u0647 \u062f\u0631 \u0622\u0646 \u0628\u0647 \u06a9\u0627\u0631\u0628\u0631 \u0627\u06cc\u0646 \u0627\u0645\u06a9\u0627\u0646 \u062f\u0627\u062f\u0647 \u0645\u06cc\u200c\u0634\u0648\u062f \u06a9\u0647 \u0628\u0647 \u06a9\u0627\u0631 \u062e\u0648\u062f \u0627\u062f\u0627\u0645\u0647 \u062f\u0647\u062f \u06cc\u0627 \u0622\u0646 \u0631\u0627 \u0644\u063a\u0648 \u06a9\u0646\u062f. \u0645\u0639\u0645\u0648\u0644\u0627\u064b \u0628\u0627 \u0627\u0642\u062f\u0627\u0645\u0627\u062a \u0645\u062e\u0631\u0628 \u06cc\u0627 \u063a\u06cc\u0631\u0642\u0627\u0628\u0644 \u0628\u0631\u06af\u0634\u062a \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f \u062a\u0627 \u0645\u0637\u0645\u0626\u0646 \u0634\u0648\u062f \u06a9\u0647 \u06a9\u0627\u0631\u0628\u0631 \u0648\u0627\u0642\u0639\u0627\u064b \u0645\u06cc \u062e\u0648\u0627\u0647\u062f \u0627\u062f\u0627\u0645\u0647 \u062f\u0647\u062f. \u062f\u0631 \u0627\u06cc\u0646 \u0645\u0642\u0627\u0644\u0647\u060c \u0645\u0627 \u06cc\u06a9 \u06af\u0641\u062a\u06af\u0648\u06cc \u062a\u0627\u06cc\u06cc\u062f [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":9056,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1772,620],"tags":[3292,4260,1840,1938,2341,1904,4262,1811,1786,4041,4261,2839,1936,1789,1779,4264,1807,3420,2428,4259,1103,2275,1802,1796,2750,2179,1803,2649,2123,1805,2264,3545,4263,2122,3654,2110,1795,4258,2084,3111,4147,2177,2799,1790,1966,2322,2323,4265,1831,1813],"class_list":["post-15853","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","category-programming","tag-vue","tag-vue-jsa","tag-1840","tag-1938","tag-2341","tag-1904","tag-4262","tag-1811","tag-1786","tag-4041","tag-4261","tag-2839","tag-1936","tag-1789","tag-1779","tag-4264","tag-1807","tag-3420","tag-2428","tag-4259","tag-1103","tag-2275","tag-1802","tag-1796","tag-2750","tag-2179","tag-1803","tag-2649","tag-2123","tag-1805","tag-2264","tag-3545","tag-4263","tag-2122","tag-3654","tag-2110","tag-1795","tag-4258","tag-2084","tag-3111","tag-4147","tag-2177","tag-2799","tag-1790","tag--javascrip","tag-2322","tag--node","tag-4265","tag-1831","tag-1813"],"acf":[],"_links":{"self":[{"href":"https:\/\/rasanegaar.com\/blog\/wp-json\/wp\/v2\/posts\/15853","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rasanegaar.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rasanegaar.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rasanegaar.com\/blog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/rasanegaar.com\/blog\/wp-json\/wp\/v2\/comments?post=15853"}],"version-history":[{"count":0,"href":"https:\/\/rasanegaar.com\/blog\/wp-json\/wp\/v2\/posts\/15853\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rasanegaar.com\/blog\/wp-json\/wp\/v2\/media\/9056"}],"wp:attachment":[{"href":"https:\/\/rasanegaar.com\/blog\/wp-json\/wp\/v2\/media?parent=15853"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rasanegaar.com\/blog\/wp-json\/wp\/v2\/categories?post=15853"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rasanegaar.com\/blog\/wp-json\/wp\/v2\/tags?post=15853"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}