{"id":1034,"date":"2023-03-12T09:46:57","date_gmt":"2023-03-12T01:46:57","guid":{"rendered":"https:\/\/www.appblog.cn\/?p=1034"},"modified":"2023-04-29T13:11:07","modified_gmt":"2023-04-29T05:11:07","slug":"vue-js-mobile-ui-component-library-ydui","status":"publish","type":"post","link":"https:\/\/www.appblog.cn\/index.php\/2023\/03\/12\/vue-js-mobile-ui-component-library-ydui\/","title":{"rendered":"Vue.js \u79fb\u52a8\u7aef UI \u7ec4\u4ef6\u5e93 YDUI"},"content":{"rendered":"<p><a target=\"_blank\" rel=\"noopener\" href=\"http:\/\/vue.ydui.org\/\" title=\"Vue-ydui\">Vue-ydui<\/a> \u662f <a target=\"_blank\" rel=\"noopener\" href=\"http:\/\/www.ydui.org\/\" title=\"YDUI Touch\">YDUI Touch<\/a> \u7684\u4e00\u4e2a\u57fa\u4e8e Vue2.x \u7684\u79fb\u52a8\u7aef&amp;\u5fae\u4fe1UI\u5b9e\u73b0\u7248\u672c\uff0c\u4e13\u4e3a\u79fb\u52a8\u7aef\u6253\u9020\uff0c\u5728\u8ffd\u6c42\u5b8c\u7f8e\u89c6\u89c9\u4f53\u9a8c\u7684\u540c\u65f6\u4e5f\u4fdd\u8bc1\u4e86\u5176\u6027\u80fd\u9ad8\u6548\u3002<\/p>\n<p>\u5b98\u7f51\uff1a<a target=\"_blank\" rel=\"noopener\" href=\"http:\/\/www.ydui.org\/\">http:\/\/www.ydui.org\/<\/a><br \/>\nGitHub\uff1a<a target=\"_blank\" rel=\"noopener\" href=\"https:\/\/github.com\/ydcss\/vue-ydui\">https:\/\/github.com\/ydcss\/vue-ydui<\/a><\/p>\n<p><!-- more --><\/p>\n<h2>\u5b89\u88c5<\/h2>\n<p>\u63a8\u8350\u4f7f\u7528 npm \u6765\u5b89\u88c5\uff0c\u4eab\u53d7\u751f\u6001\u5708\u548c\u5de5\u5177\u5e26\u6765\u7684\u4fbf\u5229\uff0c\u66f4\u597d\u5730\u548c webpack \u914d\u5408\u4f7f\u7528\uff1a<\/p>\n<pre><code>npm install vue-ydui --save<\/code><\/pre>\n<h2>\u96c6\u6210<\/h2>\n<p>App.vue<\/p>\n<pre><code class=\"language-css\">@import &quot;..\/node_modules\/vue-ydui\/dist\/ydui.base.css&quot;;\n\/*@import &quot;..\/node_modules\/vue-ydui\/dist\/ydui.px.css&quot;;*\/\n@import &quot;..\/node_modules\/vue-ydui\/dist\/ydui.rem.css&quot;;<\/code><\/pre>\n<p>main.js<\/p>\n<pre><code class=\"language-javascript\">\/\/ import YDUI from &#039;vue-ydui\/dist\/ydui.px.js&#039;\nimport YDUI from &#039;vue-ydui\/dist\/ydui.rem.js&#039;\nimport { Confirm, Alert, Toast, Notify, Loading } from &#039;vue-ydui\/dist\/lib.px\/dialog&#039;\n\nVue.use(YDUI)\n\nVue.prototype.$dialog = {\n  confirm: Confirm,\n  alert: Alert,\n  toast: Toast,\n  notify: Notify,\n  loading: Loading\n}<\/code><\/pre>\n<p>index.vue<\/p>\n<pre><code class=\"language-javascript\">methods: {\n  pay () {\n    var _this = this\n    this.$dialog.confirm({\n      title: &#039;\u63d0\u793a&#039;,\n      mes: &#039;\u60a8\u5c1a\u672a\u767b\u5f55\uff0c\u662f\u5426\u524d\u5f80\u767b\u9646\uff1f&#039;,\n      cancel_mes: &#039;\u53d6\u6d88&#039;,\n      ok_mes: &#039;\u786e\u8ba4&#039;,\n      opts: () =&gt; {\n        _this.$router.push({path: &#039;\/login&#039;, query: {&#039;mobile&#039;: _this.mobile}})\n      }\n    })\n  }\n}<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Vue-ydui \u662f YDUI Touch \u7684\u4e00\u4e2a\u57fa\u4e8e Vue2.x \u7684\u79fb\u52a8\u7aef&amp;\u5fae\u4fe1UI\u5b9e\u73b0\u7248\u672c\uff0c\u4e13\u4e3a [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[35],"tags":[283],"class_list":["post-1034","post","type-post","status-publish","format-standard","hentry","category-vue","tag-ydui"],"_links":{"self":[{"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/posts\/1034","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/comments?post=1034"}],"version-history":[{"count":0,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/posts\/1034\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/media?parent=1034"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/categories?post=1034"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/tags?post=1034"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}