feat: 留资包新增组件外统一渲染函数

plugins/leave-source/package.json

@@ -3,7 +3,6 @@
   "version": "0.0.1",
   "private": false,
   "description": "留资弹窗插件",
-  "exports": "./src/index.js",
   "main": "./dist/leave-source-vue.umd.js",
   "module": "./dist/leave-source-vue.mjs",
   "files": [

plugins/leave-source/src/entry.js

@@ -6,7 +6,8 @@ import PCContentCard from './lib/pc/components/content-card.vue'
 import PCLeaveDialog from './lib/pc/content-dialog.vue'
 import MobileLeavePopup from './lib/mobile/content-popup.vue'
 import registryToast from './components/toast/index'
-import PCContentStatic from './lib/pc/components/content-static.vue'
+import PCContentStatic from './lib/pc/content-static.vue'
+import { doLeave, renderComponent } from './utils/leave'
 
 function install(Vue) {
   // 注册全局组件
@@ -17,6 +18,8 @@ function install(Vue) {
 
 export default {
   install,
+  doLeave,
+  renderComponent,
   registryToast,
   PCContentCard,
   PCContentStatic,

plugins/leave-source/src/lib/mobile/components/change-phone-dialog.vue

@@ -10,6 +10,10 @@ defineProps({
     type: String,
     default: '',
   },
+  placeholder: {
+    type: String,
+    default: '请输入联系电话',
+  },
   title: {
     type: String,
     default: '修改联系电话',
@@ -58,7 +62,7 @@ export default {
         type="number"
         class="phone-input"
         oninput="if(value.length > 11) value = value.slice(0, 11)"
-        placeholder=""
+        :placeholder="placeholder"
         @input="onInput"
       >
     </div>

plugins/leave-source/src/lib/mobile/content-popup.vue

@@ -114,7 +114,7 @@ export default {
     <!-- 确认联系电话弹窗 -->
     <phoneConfirmDialog
       :visible.sync="confirmPhoneDialog.show"
-      :title="successCheckDialog.title"
+      :title="confirmPhoneDialog.title"
       :confirm-button-text="confirmPhoneDialog.confirmButtonText"
       :cancel-button-text="confirmPhoneDialog.cancelButtonText"
       :content-text="confirmPhoneDialog.contentText"

plugins/leave-source/src/utils/hooks.js

@@ -129,6 +129,7 @@ export function usePhoneCheck(options = {}) {
   })
   const confirmPhoneDialog = reactive({
     show: false,
+    title: '联系电话确认',
     confirmButtonText: '准确，我要提交',
     cancelButtonText: '有误，我要修改',
     contentText: confirmContentText,

plugins/leave-source/src/utils/leave.js

@@ -48,6 +48,16 @@ export function createInstance(platform, options = {}) {
   return instance
 }
 
+export function renderInstance(instance, el) {
+  // 将组件的 DOM 添加到页面
+  if (isDOMElement(el)) {
+    el.appendChild(instance.$el)
+  }
+  else {
+    document.querySelector(el).appendChild(instance.$el)
+  }
+}
+
 export async function doLeave(options = {}) {
   const {
     source, // 必传
@@ -80,11 +90,32 @@ export async function doLeave(options = {}) {
 
     instance.updateVisible(true)
     // 将组件的 DOM 添加到页面
-    if (isDOMElement(el)) {
-      el.appendChild(instance.$el)
-    }
-    else {
-      document.querySelector(el).appendChild(instance.$el)
+    renderInstance(instance, el)
+  }
+}
+
+export function renderComponent(el, componentId, options = {}) {
+  const { props } = options
+
+  if (!el) {
+    return console.error('目标dom选择器不能为空')
+  }
+  if (!componentId) {
+    return console.error('componentId不能为空')
+  }
+
+  const instance = createInstance(componentId)
+  if (instance) {
+    // props赋值
+    if (props) {
+      for (const key in props) {
+        if (props[key]) {
+          instance[key] = props[key]
+        }
+      }
     }
+
+    // 将组件的 DOM 添加到页面
+    renderInstance(instance, el)
   }
 }