{"id":1523,"date":"2023-03-25T15:05:31","date_gmt":"2023-03-25T07:05:31","guid":{"rendered":"https:\/\/www.appblog.cn\/?p=1523"},"modified":"2023-04-27T21:45:09","modified_gmt":"2023-04-27T13:45:09","slug":"wechat-mini-program-custom-dialog-component","status":"publish","type":"post","link":"https:\/\/www.appblog.cn\/index.php\/2023\/03\/25\/wechat-mini-program-custom-dialog-component\/","title":{"rendered":"\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u81ea\u5b9a\u4e49\u5bf9\u8bdd\u6846\u7ec4\u4ef6"},"content":{"rendered":"

\u9700\u6c42<\/h3>\n

\u8981\u505a\u81ea\u5b9a\u4e49\u7ec4\u4ef6\uff0c\u6211\u4eec\u5148\u5b9a\u4e00\u4e2a\u5c0f\u76ee\u6807\uff0c\u6bd4\u5982\u8bf4\u6211\u4eec\u5728\u5c0f\u7a0b\u5e8f\u4e2d\u5b9e\u73b0\u4e00\u4e0b WEUI \u4e2d\u7684\u5f39\u7a97\u7ec4\u4ef6\uff0c\u57fa\u672c\u6548\u679c\u56fe\u5982\u4e0b\uff1a<\/p>\n

<\/p>\n

\"\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u81ea\u5b9a\u4e49\u5bf9\u8bdd\u6846\u7ec4\u4ef6\"<\/p>\n

\u81ea\u5b9a\u4e49\u5f39\u6846\u7ec4\u4ef6<\/h3>\n

\u521d\u59cb\u5316<\/h4>\n

\u521d\u59cb\u5316\u4e00\u4e2a\u5c0f\u7a0b\u5e8f\uff0c\u5220\u6389\u91cc\u9762\u7684\u793a\u4f8b\u4ee3\u7801\uff0c\u5e76\u65b0\u5efa\u4e00\u4e2a components \u6587\u4ef6\u5939\uff0c\u7528\u4e8e\u5b58\u653e\u6211\u4eec\u4ee5\u540e\u5f00\u53d1\u4e2d\u7684\u6240\u7528\u7ec4\u4ef6\uff0c\u6211\u4eec\u7684\u76ee\u7684\u662f\u5b9e\u73b0\u4e00\u4e2a\u5f39\u6846\u7ec4\u4ef6\uff0c\u56e0\u6b64\uff0c\u5728 components \u7ec4\u4ef6\u4e2d\u65b0\u5efa\u4e00\u4e2a Dialog \u6587\u4ef6\u5939\u6765\u5b58\u653e\u6211\u4eec\u7684\u5f39\u7a97\u7ec4\u4ef6\uff0c\u5728 Dialog \u4e0b\u53f3\u51fb\u65b0\u5efa Component \u5e76\u547d\u540d\u4e3a dialog \u540e\uff0c\u4f1a\u751f\u6210\u5bf9\u5e94\u7684 json wxml wxss js 4\u4e2a\u6587\u4ef6\uff0c\u4e5f\u5c31\u662f\u4e00\u4e2a\u81ea\u5b9a\u4e49\u7ec4\u4ef6\u7684\u7ec4\u6210\u90e8\u5206\u3002<\/p>\n

\u8bbe\u8ba1\u7ec4\u4ef6\u7ed3\u6784\u548c\u6837\u5f0f<\/h4>\n

\u7ec4\u4ef6\u521d\u59cb\u5316\u5de5\u4f5c\u51c6\u5907\u5b8c\u6210\uff0c\u63a5\u4e0b\u6765\u5c31\u662f\u7ec4\u4ef6\u7684\u76f8\u5173\u914d\u7f6e\uff0c\u9996\u5148\u6211\u4eec\u9700\u8981\u58f0\u660e\u81ea\u5b9a\u4e49\u7ec4\u4ef6\uff0c\u4e5f\u5c31\u662f\u5c06 dialog.json \u4e2d component \u5b57\u6bb5\u8bbe\u4e3a true\uff1a<\/p>\n

{\n  "component": true,        \/\/ \u81ea\u5b9a\u4e49\u7ec4\u4ef6\u58f0\u660e\n  "usingComponents": {}     \/\/ \u53ef\u9009\u9879\uff0c\u7528\u4e8e\u5f15\u7528\u522b\u7684\u7ec4\u4ef6\n}<\/code><\/pre>\n
\u5176\u6b21\uff0c\u6211\u4eec\u9700\u8981\u5728 dialog.wxml \u6587\u4ef6\u4e2d\u7f16\u5199\u5f39\u7a97\u7ec4\u4ef6\u6a21\u7248\uff0c\u5728 dialog.wxss \u6587\u4ef6\u4e2d\u52a0\u5165\u5f39\u7a97\u7ec4\u4ef6\u6837\u5f0f\uff0c\u5199\u6cd5\u4e0e\u9875\u9762\u7684\u5199\u6cd5\u7c7b\u4f3c\u3002<\/p>\n
dialog.wxml \u6587\u4ef6\u5982\u4e0b\uff1a<\/p>\n
<!--components\/Dialog\/dialog.wxml-->\n<view class='wx_dialog_container' hidden="{{!isShow}}">\n  <view class='wx-mask'><\/view>\n  <view class='wx-dialog'>\n    <view class='wx-dialog-title'>{{ title }}<\/view>\n    <view class='wx-dialog-content'>{{ content }}<\/view>\n    <view class='wx-dialog-footer'>\n      <view class='wx-dialog-btn' catchtap='_cancelEvent'>{{ cancelText }}<\/view>\n      <view class='wx-dialog-btn' catchtap='_confirmEvent'>{{ confirmText }}<\/view>\n    <\/view>\n  <\/view>\n<\/view><\/code><\/pre>\n
dialog.wxss \u6587\u4ef6\u5982\u4e0b\uff1a<\/p>\n
\/* components\/Dialog\/dialog.wxss *\/\n.wx-mask {\n  position: fixed;\n  z-index: 1000;\n  top: 0;\n  right: 0;\n  left: 0;\n  bottom: 0;\n  background: rgba(0, 0, 0, 0.3);\n}\n.wx-dialog {\n  position: fixed;\n  z-index: 5000;\n  width: 80%;\n  max-width: 600rpx;\n  top: 50%;\n  left: 50%;\n  -webkit-transform: translate(-50%, -50%);\n  transform: translate(-50%, -50%);\n  background-color: #FFFFFF;\n  text-align: center;\n  border-radius: 3px;\n  overflow: hidden;\n}\n.wx-dialog-title {\n  font-size: 18px;\n  padding: 15px 15px 5px;\n}\n.wx-dialog-content {\n  padding: 15px 15px 5px;\n  min-height: 40px;\n  font-size: 16px;\n  line-height: 1.3;\n  word-wrap: break-word;\n  word-break: break-all;\n  color: #999999;\n}\n.wx-dialog-footer {\n  display: flex;\n  align-items: center;\n  position: relative;\n  line-height: 45px;\n  font-size: 17px;\n}\n.wx-dialog-footer::before {\n  content: '';\n  position: absolute;\n  left: 0;\n  top: 0;\n  right: 0;\n  height: 1px;\n  border-top: 1px solid #D5D5D6;\n  color: #D5D5D6;\n  -webkit-transform-origin: 0 0;\n  transform-origin: 0 0;\n  -webkit-transform: scaleY(0.5);\n  transform: scaleY(0.5);\n}\n.wx-dialog-btn {\n  display: block;\n  -webkit-flex: 1;\n  flex: 1;\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n  position: relative;\n}\n.wx-dialog-footer .wx-dialog-btn:nth-of-type(1) {\n  color: #353535;\n}\n.wx-dialog-footer .wx-dialog-btn:nth-of-type(2) {\n  color: #3CC51F;\n}\n.wx-dialog-footer .wx-dialog-btn:nth-of-type(2):after {\n  content: " ";\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: 1px;\n  bottom: 0;\n  border-left: 1px solid #D5D5D6;\n  color: #D5D5D6;\n  -webkit-transform-origin: 0 0;\n  transform-origin: 0 0;\n  -webkit-transform: scaleX(0.5);\n  transform: scaleX(0.5);\n}<\/code><\/pre>\n
\u8bbe\u8ba1\u7ec4\u4ef6\u5c5e\u6027\u548c\u529f\u80fd<\/h4>\n
\u5728 dialog.wxml \u6587\u4ef6\u4e2d\u4f1a\u6709\u4e00\u4e9b\u6bd4\u5982 {{ isShow }}\u3001{{ title }} \u7684\u6a21\u7248\u53d8\u91cf\uff0c\u8fd8\u5b9a\u4e49\u4e86 _cancelEvent \u548c _confirmEvent \u4e24\u4e2a\u65b9\u6cd5\uff0c\u5176\u5177\u4f53\u5b9e\u73b0\u5c31\u662f\u5728 dialog.js \u4e2d\u3002<\/p>\n
dialog.js \u662f\u81ea\u5b9a\u4e49\u7ec4\u4ef6\u7684\u6784\u9020\u5668\uff0c\u662f\u4f7f\u7528\u5c0f\u7a0b\u5e8f\u4e2d Component \u6784\u9020\u5668\u751f\u6210\u7684\uff0c\u8c03\u7528 Component \u6784\u9020\u5668\u65f6\u53ef\u4ee5\u7528\u6765\u6307\u5b9a\u81ea\u5b9a\u4e49\u7ec4\u4ef6\u7684\u5c5e\u6027\u3001\u6570\u636e\u3001\u65b9\u6cd5\u7b49\u3002<\/p>\n
\/\/ components\/Dialog\/dialog.js\nComponent({\n\n  options: {\n    multipleSlots: true \/\/ \u5728\u7ec4\u4ef6\u5b9a\u4e49\u65f6\u7684\u9009\u9879\u4e2d\u542f\u7528\u591aslot\u652f\u6301\n  },\n\n  \/**\n   * \u7ec4\u4ef6\u7684\u5c5e\u6027\u5217\u8868\n   * \u7528\u4e8e\u7ec4\u4ef6\u81ea\u5b9a\u4e49\u8bbe\u7f6e\n   *\/\n  properties: {\n    \/\/ \u5f39\u7a97\u6807\u9898\n    title: {            \/\/ \u5c5e\u6027\u540d\n      type: String,     \/\/ \u7c7b\u578b\uff08\u5fc5\u586b\uff09\uff0c\u76ee\u524d\u63a5\u53d7\u7684\u7c7b\u578b\u5305\u62ec\uff1aString, Number, Boolean, Object, Array, null\uff08\u8868\u793a\u4efb\u610f\u7c7b\u578b\uff09\n      value: '\u6807\u9898'     \/\/ \u5c5e\u6027\u521d\u59cb\u503c\uff08\u53ef\u9009\uff09\uff0c\u5982\u679c\u672a\u6307\u5b9a\u5219\u4f1a\u6839\u636e\u7c7b\u578b\u9009\u62e9\u4e00\u4e2a\n    },\n    \/\/ \u5f39\u7a97\u5185\u5bb9\n    content: {\n      type: String,\n      value: '\u5f39\u7a97\u5185\u5bb9'\n    },\n    \/\/ \u5f39\u7a97\u53d6\u6d88\u6309\u94ae\u6587\u5b57\n    cancelText: {\n      type: String,\n      value: '\u53d6\u6d88'\n    },\n    \/\/ \u5f39\u7a97\u786e\u8ba4\u6309\u94ae\u6587\u5b57\n    confirmText: {\n      type: String,\n      value: '\u786e\u5b9a'\n    }\n  },\n\n  \/**\n   * \u79c1\u6709\u6570\u636e\uff0c\u7ec4\u4ef6\u7684\u521d\u59cb\u6570\u636e\n   * \u53ef\u7528\u4e8e\u6a21\u7248\u6e32\u67d3\n   *\/\n  data: {\n    \/\/ \u5f39\u7a97\u663e\u793a\u63a7\u5236\n    isShow: false\n  },\n\n  \/**\n   * \u7ec4\u4ef6\u7684\u65b9\u6cd5\u5217\u8868\n   * \u66f4\u65b0\u5c5e\u6027\u548c\u6570\u636e\u7684\u65b9\u6cd5\u4e0e\u66f4\u65b0\u9875\u9762\u6570\u636e\u7684\u65b9\u6cd5\u7c7b\u4f3c\n   *\/\n  methods: {\n    \/*\n     * \u516c\u6709\u65b9\u6cd5\n     *\/\n\n    \/\/\u9690\u85cf\u5f39\u6846\n    hideDialog() {\n      this.setData({\n        isShow: !this.data.isShow\n      })\n    },\n\n    \/\/\u5c55\u793a\u5f39\u6846\n    showDialog() {\n      this.setData({\n        isShow: !this.data.isShow\n      })\n    },\n\n    \/*\n    * \u5185\u90e8\u79c1\u6709\u65b9\u6cd5\u5efa\u8bae\u4ee5\u4e0b\u5212\u7ebf\u5f00\u5934\n    * triggerEvent \u7528\u4e8e\u89e6\u53d1\u4e8b\u4ef6\n    *\/\n    _cancelEvent() {\n      \/\/\u89e6\u53d1\u53d6\u6d88\u56de\u8c03\n      this.triggerEvent("cancelEvent")\n    },\n\n    _confirmEvent() {\n      \/\/\u89e6\u53d1\u6210\u529f\u56de\u8c03\n      this.triggerEvent("confirmEvent");\n    }\n  }\n\n})<\/code><\/pre>\n
\u5f15\u7528\u7ec4\u4ef6<\/h3>\n
\u58f0\u660e\u7ec4\u4ef6<\/h4>\n
\u9996\u5148\u9700\u8981\u5728 index.json \u4e2d\u5f15\u5165\u7ec4\u4ef6\uff1a<\/p>\n
{\n  "usingComponents": {\n    "dialog": "\/components\/Dialog\/dialog"\n  }\n}<\/code><\/pre>\n
\u5f15\u5165\u7ec4\u4ef6<\/h4>\n
\u5728 index.wxml \u4e2d\u5f15\u5165\u4f7f\u7528\u7ec4\u4ef6\uff0c\u5e76\u589e\u52a0\u6211\u4eec\u81ea\u5b9a\u4e49\u7684\u4e00\u4e9b\u503c\uff0c\u5982\u4e0b\uff1a<\/p>\n
<!--index.wxml-->\n<view class="container">\n  <dialog id='dialog' \n    title='\u6211\u662f\u6807\u9898' \n    content='\u606d\u559c\u4f60\uff0c\u5b66\u4f1a\u4e86\u81ea\u5b9a\u4e49\u5c0f\u7a0b\u5e8f\u7ec4\u4ef6' \n    cancelText='\u53d6\u6d88' \n    confirmText='\u786e\u5b9a'\n    bind:cancelEvent="_cancelEvent"  \n    bind:confirmEvent="_confirmEvent">\n  <\/dialog>\n\n  <button type="primary" bindtap="showDialog"> Click Me! <\/button>\n<\/view><\/code><\/pre>\n
\u8c03\u7528\u7ec4\u4ef6<\/h4>\n
\u5728 index.js \u4e2d\u914d\u7f6e\u5e76\u8c03\u7528\u7ec4\u4ef6\u65b9\u6cd5<\/p>\n
\/\/index.js\n\/\/\u83b7\u53d6\u5e94\u7528\u5b9e\u4f8b\nconst app = getApp()\n\nPage({\n  data: {\n\n  },\n\n  onLoad: function () {\n    \/\/\u83b7\u5f97dialog\u7ec4\u4ef6\n    this.dialog = this.selectComponent("#dialog");\n  },\n\n  showDialog() {\n    this.dialog.showDialog();\n  },\n\n  \/\/\u53d6\u6d88\u4e8b\u4ef6\n  _cancelEvent() {\n    console.log('\u4f60\u70b9\u51fb\u4e86\u53d6\u6d88');\n    this.dialog.hideDialog();\n  },\n\n  \/\/\u786e\u8ba4\u4e8b\u4ef6\n  _confirmEvent() {\n    console.log('\u4f60\u70b9\u51fb\u4e86\u786e\u5b9a');\n    this.dialog.hideDialog();\n  },\n\n})<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
\u9700\u6c42 \u8981\u505a\u81ea\u5b9a\u4e49\u7ec4\u4ef6\uff0c\u6211\u4eec\u5148\u5b9a\u4e00\u4e2a\u5c0f\u76ee\u6807\uff0c\u6bd4\u5982\u8bf4\u6211\u4eec\u5728\u5c0f\u7a0b\u5e8f\u4e2d\u5b9e\u73b0\u4e00\u4e0b WEUI \u4e2d\u7684\u5f39\u7a97\u7ec4\u4ef6\uff0c\u57fa\u672c\u6548\u679c\u56fe\u5982\u4e0b […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[46],"tags":[],"class_list":["post-1523","post","type-post","status-publish","format-standard","hentry","category-wechat-mini-program"],"_links":{"self":[{"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/posts\/1523","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=1523"}],"version-history":[{"count":0,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/posts\/1523\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/media?parent=1523"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/categories?post=1523"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/tags?post=1523"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}