feat: 增加默认按钮显示

packages/select-transfer-modal/index.vue

@@ -2,14 +2,22 @@
  * @Author: zhaojinfeng 121016171@qq.com
  * @Date: 2023-08-14 11:07:15
  * @LastEditors: zhaojinfeng 121016171@qq.com
- * @LastEditTime: 2023-08-14 16:27:08
+ * @LastEditTime: 2023-08-14 17:26:33
  * @FilePath: \vue3\packages\select-transfer-modal\index.vue
  * @Description:
  *
 -->
 <template>
+  <span v-if="!hideButton" @click="open">
+    <slot>
+      <el-button type="primary" plain>点击选择</el-button>
+    </slot>
+  </span>
   <el-config-provider :locale="locale">
-    <el-dialog v-model="showDialog" class="select-transfer-modal" :title="title" :width="width" append-to-body :z-index="zIndex" @open="getList" @closed="closed">
+    <el-dialog
+      v-model="showDialog" class="select-transfer-modal" :title="title" :width="width" append-to-body
+      :z-index="zIndex" @open="getList" @closed="closed"
+    >
       <el-form ref="queryRef" :model="queryParams" inline>
         <el-form-item v-for="formItem in formItems" :key="formItem.prop" :label="formItem.label" :prop="formItem.prop">
           <el-select v-if="formItem.selectOptions" :placeholder="formItem.placeholder">
@@ -29,20 +37,11 @@
         </el-form-item>
       </el-form>
       <el-transfer
-        v-model="transferValue"
+        v-model="transferValue" v-loading="loading" inline-block text-left
-        v-loading="loading"
+        style="--el-transfer-panel-width:25vw" :titles="['待选项', '已选项']" :button-texts="['移除', '添加']" :format="{
-        inline-block
-        text-left
-        style="--el-transfer-panel-width:25vw"
-        :titles="['待选项', '已选项']"
-        :button-texts="['移除', '添加']"
-        :format="{
           noChecked: '${total}',
           hasChecked: '${checked}/${total}',
-        }"
+        }" :data="data" :filter-method="filterMethod" :props="props"
-        :data="data"
-        :filter-method="filterMethod"
-        :props="props"
       >
         <template #default="{ option }">
           <slot :option="option">
@@ -58,17 +57,9 @@
         </template>
         <template #left-footer>
           <el-pagination
-            v-if="!hidePagination && total > queryParams.pageSize"
+            v-if="!hidePagination && total > queryParams.pageSize" v-model:current-page="queryParams.pageNum"
-            v-model:current-page="queryParams.pageNum"
+            v-model:page-size="queryParams.pageSize" background small layout="total, sizes, prev, next, jumper" mt-9px
-            v-model:page-size="queryParams.pageSize"
+            :page-sizes="pageSizes" :pager-count="pagerCount" :total="total" @size-change="handleSizeChange"
-            background
-            small
-            layout="total, sizes, prev, next, jumper"
-            mt-9px
-            :page-sizes="pageSizes"
-            :pager-count="pagerCount"
-            :total="total"
-            @size-change="handleSizeChange"
             @current-change="getList"
           />
         </template>
@@ -94,7 +85,7 @@ import locale from 'element-plus/lib/locale/lang/zh-cn'
 const properties = withDefaults(
   defineProps<{
     value?: TransferKey[]
-    show: boolean
+    show?: boolean
     defaultData?: Record<string, any>[]
     defaultParams?: Record<string, any>
     formItems?: FormItem[]
@@ -122,9 +113,13 @@ const properties = withDefaults(
     zIndex: 2023,
   },
 )
+const emit = defineEmits<{
+  (event: 'update:show', show: boolean): void
+  (event: 'update:value', show: any): void
+  (event: 'confirm', row: any): void
+}>()
 
-const value = useVModel(properties, 'value')
+const showDialog = ref(false)
-const showDialog = useVModel(properties, 'show')
 
 const transferValue = $ref<TransferKey[]>([])
 
@@ -173,10 +168,20 @@ async function getList() {
     loading = false
   }
 }
+function open() {
+  if (properties.hideButton)
+    emit('update:show', true)
+  else
+    showDialog.value = true
+}
 
 function confirm() {
-  value.value = [...transferValue]
+  emit('confirm', [...transferValue])
-  showDialog.value = false
+  emit('update:value', [...transferValue])
+  if (properties.hideButton)
+    emit('update:show', false)
+  else
+    showDialog.value = false
 }
 
 function closed() {
@@ -206,11 +211,14 @@ watch(() => properties.defaultData, (data) => {
     temp[e[properties.props.key]] = e
   })
 })
+watch(() => properties.show, (show) => {
+  showDialog.value = show
+})
 </script>
 
 <style lang="scss">
-.select-transfer-modal{
+.select-transfer-modal {
-  .el-checkbox:last-of-type{
+  .el-checkbox:last-of-type {
     margin-right: 30px;
   }
 }