releases 4.0.82

x-extends · Jul 22, 2024 · 3a6e698 · 3a6e698
1 parent 1e6430a
commit 3a6e698
Show file tree

Hide file tree

Showing 17 changed files with 391 additions and 61 deletions.
diff --git a/examples/views/image/ImageTest.vue b/examples/views/image/ImageTest.vue
@@ -3,8 +3,32 @@
     <p>
       <vxe-image src="https://vxeui.com/resource/img/fj577.jpg" :width="200"></vxe-image>
     </p>
+    <p>
+      <vxe-image :src="img1List" :width="200"></vxe-image>
+    </p>
+    <!-- <p>
+      <vxe-image :src="img2List" :width="200"></vxe-image>
+    </p> -->
+    <p>
+      <vxe-image-group :url-list="img1List" :image-style="{width: 200}"></vxe-image-group>
+    </p>
   </div>
 </template>
 
 <script lang="ts" setup>
+import { ref } from 'vue'
+
+const img1List = ref([
+  'https://vxeui.com/resource/img/fj577.jpg',
+  'https://vxeui.com/resource/img/fj581.jpeg',
+  'https://vxeui.com/resource/img/fj573.jpeg',
+  'https://vxeui.com/resource/img/fj562.png'
+])
+
+// const img2List = ref([
+//   { name: 'fj577.jpg', url: 'https://vxeui.com/resource/img/fj577.jpg' },
+//   { name: 'fj581.jpeg', url: 'https://vxeui.com/resource/img/fj581.jpeg' },
+//   { name: 'fj573.jpeg', url: 'https://vxeui.com/resource/img/fj573.jpeg' },
+//   { name: 'fj562.png', url: 'https://vxeui.com/resource/img/fj562.png' }
+// ])
 </script>
diff --git a/examples/views/pulldown/PulldownTest.vue b/examples/views/pulldown/PulldownTest.vue
@@ -243,12 +243,6 @@ const pageChangeEvent4: any = ({ currentPage, pageSize }: any) => {
   demo4.tablePage4.pageSize = pageSize
 }
 
-const demo5 = reactive({
-  visible: false,
-  value1: '',
-  list1: data1
-})
-
 const pullOptions = ref([
   { label: '选项1', value: '1' },
   { label: '选项2', value: '2' },

diff --git a/gulpfile.js b/gulpfile.js
@@ -56,6 +56,7 @@ const componentList = [
   'form-view',
   'icon',
   'image',
+  'image-group',
   'image-preview',
   'input',
   'layout-aside',

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vxe-pc-ui",
-  "version": "4.0.81",
+  "version": "4.0.82",
   "description": "A vue based PC component library",
   "scripts": {
     "update": "npm install --legacy-peer-deps",

diff --git a/packages/components.ts b/packages/components.ts
@@ -27,6 +27,7 @@ import VxeFormItem from './form-item'
 import VxeFormView from './form-view'
 import VxeIcon from './icon'
 import VxeImage from './image'
+import VxeImageGroup from './image-group'
 import VxeImagePreview from './image-preview'
 import VxeInput from './input'
 import VxeLayoutAside from './layout-aside'
@@ -94,6 +95,7 @@ const components = [
   VxeFormView,
   VxeIcon,
   VxeImage,
+  VxeImageGroup,
   VxeImagePreview,
   VxeInput,
   VxeLayoutAside,
@@ -181,6 +183,7 @@ export * from './form-item'
 export * from './form-view'
 export * from './icon'
 export * from './image'
+export * from './image-group'
 export * from './image-preview'
 export * from './input'
 export * from './layout-aside'

diff --git a/packages/form/render/index.ts b/packages/form/render/index.ts
@@ -126,22 +126,22 @@ function getComponentOns (renderOpts: any, params: any, modelFunc?: any, changeF
 }
 
 function getItemOns (renderOpts: any, params: any) {
-  const { $form, data, property } = params
+  const { $form, data, field } = params
   return getComponentOns(renderOpts, params, (value: any) => {
     // 处理 model 值双向绑定
-    XEUtils.set(data, property, value)
+    XEUtils.set(data, field, value)
   }, () => {
     // 处理 change 事件相关逻辑
     $form.updateStatus(params)
   })
 }
 
 function getNativeItemOns (renderOpts: any, params: any) {
-  const { $form, data, property } = params
+  const { $form, data, field } = params
   return getElementOns(renderOpts, params, (evnt: any) => {
     // 处理 model 值双向绑定
     const itemValue = evnt.target.value
-    XEUtils.set(data, property, itemValue)
+    XEUtils.set(data, field, itemValue)
   }, () => {
     // 处理 change 事件相关逻辑
     $form.updateStatus(params)
@@ -165,10 +165,10 @@ function renderNativeOptgroup (renderOpts: any, params: any, renderOptionsMethod
  * 用于渲染原生的标签
  */
 function nativeItemRender (renderOpts: any, params: any) {
-  const { data, property } = params
+  const { data, field } = params
   const { name } = renderOpts
   const attrs = getNativeAttrs(renderOpts)
-  const itemValue = XEUtils.get(data, property)
+  const itemValue = XEUtils.get(data, field)
   return [
     h(name, {
       class: `vxe-default-${name}`,
@@ -180,8 +180,8 @@ function nativeItemRender (renderOpts: any, params: any) {
 }
 
 function defaultItemRender (renderOpts: any, params: any) {
-  const { data, property } = params
-  const itemValue = XEUtils.get(data, property)
+  const { data, field } = params
+  const itemValue = XEUtils.get(data, field)
   return [
     h(getDefaultComponent(renderOpts), {
       ...getComponentFormItemProps(renderOpts, params, itemValue),
@@ -195,8 +195,8 @@ function defaultItemRender (renderOpts: any, params: any) {
  * @deprecated
  */
 function oldItemRender (renderOpts: any, params: any) {
-  const { data, property } = params
-  const itemValue = XEUtils.get(data, property)
+  const { data, field } = params
+  const itemValue = XEUtils.get(data, field)
   return [
     h(getOldComponent(renderOpts), {
       ...getComponentFormItemProps(renderOpts, params, itemValue),
@@ -230,12 +230,12 @@ function oldButtonsItemRender (renderOpts: any, params: any) {
  * 渲染原生的 select 标签
  */
 function renderNativeFormOptions (options: any, renderOpts: any, params: any) {
-  const { data, property } = params
+  const { data, field } = params
   const { optionProps = {} } = renderOpts
   const labelProp = optionProps.label || 'label'
   const valueProp = optionProps.value || 'value'
   const disabledProp = optionProps.disabled || 'disabled'
-  const cellValue = XEUtils.get(data, property)
+  const cellValue = XEUtils.get(data, field)
   return options.map((item: any, oIndex: any) => {
     return h('option', {
       key: oIndex,
@@ -251,8 +251,8 @@ function renderNativeFormOptions (options: any, renderOpts: any, params: any) {
  * 渲染表单-项
  */
 function defaultFormItemRender (renderOpts: any, params: any) {
-  const { data, property } = params
-  const itemValue = XEUtils.get(data, property)
+  const { data, field } = params
+  const itemValue = XEUtils.get(data, field)
   return [
     h(getDefaultComponent(renderOpts), {
       ...getComponentFormItemProps(renderOpts, params, itemValue),
@@ -263,8 +263,8 @@ function defaultFormItemRender (renderOpts: any, params: any) {
 
 function formItemRadioAndCheckboxRender (renderOpts: any, params: any) {
   const { options, optionProps } = renderOpts
-  const { data, property } = params
-  const itemValue = XEUtils.get(data, property)
+  const { data, field } = params
+  const itemValue = XEUtils.get(data, field)
   return [
     h(getDefaultComponent(renderOpts), {
       options,
@@ -281,11 +281,11 @@ function formItemRadioAndCheckboxRender (renderOpts: any, params: any) {
  */
 function oldFormItemRadioAndCheckboxRender (renderOpts: any, params: any) {
   const { name, options, optionProps = {} } = renderOpts
-  const { data, property } = params
+  const { data, field } = params
   const labelProp = optionProps.label || 'label'
   const valueProp = optionProps.value || 'value'
   const disabledProp = optionProps.disabled || 'disabled'
-  const itemValue = XEUtils.get(data, property)
+  const itemValue = XEUtils.get(data, field)
   const compName = getOldComponentName(name)
   // 如果是分组
   if (options) {
@@ -353,10 +353,10 @@ renderer.mixin({
     renderItemContent: defaultFormItemRender
   },
   VxeButtonGroup: {
-    renderItemContent (renderOpts: any, params: any) {
+    renderItemContent (renderOpts, params) {
       const { options } = renderOpts
-      const { data, property } = params
-      const itemValue = XEUtils.get(data, property)
+      const { data, field } = params
+      const itemValue = XEUtils.get(data, field)
       return [
         h(getDefaultComponent(renderOpts), {
           options,
@@ -367,10 +367,10 @@ renderer.mixin({
     }
   },
   VxeSelect: {
-    renderItemContent (renderOpts: any, params: any) {
-      const { data, property } = params
+    renderItemContent (renderOpts, params) {
+      const { data, field } = params
       const { options, optionProps, optionGroups, optionGroupProps } = renderOpts
-      const itemValue = XEUtils.get(data, property)
+      const itemValue = XEUtils.get(data, field)
       return [
         h(getDefaultComponent(renderOpts), {
           ...getComponentFormItemProps(renderOpts, params, itemValue, { options, optionProps, optionGroups, optionGroupProps }),
@@ -381,9 +381,9 @@ renderer.mixin({
   },
   VxeTreeSelect: {
     renderItemContent (renderOpts: any, params: any) {
-      const { data, property } = params
+      const { data, field } = params
       const { options, optionProps } = renderOpts
-      const itemValue = XEUtils.get(data, property)
+      const itemValue = XEUtils.get(data, field)
       return [
         h(getDefaultComponent(renderOpts), {
           ...getComponentFormItemProps(renderOpts, params, itemValue, { options, optionProps }),
@@ -407,6 +407,34 @@ renderer.mixin({
   VxeSwitch: {
     renderItemContent: defaultItemRender
   },
+  VxeImage: {
+    renderItemContent (renderOpts, params) {
+      const { data, field } = params
+      const { props } = renderOpts
+      const itemValue = XEUtils.get(data, field)
+      return [
+        h(getDefaultComponent(renderOpts), {
+          src: itemValue,
+          ...props,
+          ...getItemOns(renderOpts, params)
+        })
+      ]
+    }
+  },
+  VxeImageGroup: {
+    renderItemContent (renderOpts, params) {
+      const { data, field } = params
+      const { props } = renderOpts
+      const itemValue = XEUtils.get(data, field)
+      return [
+        h(getDefaultComponent(renderOpts), {
+          urlList: itemValue,
+          ...props,
+          ...getItemOns(renderOpts, params)
+        })
+      ]
+    }
+  },
   VxeUpload: {
     renderItemContent: defaultItemRender
   },
@@ -425,10 +453,10 @@ renderer.mixin({
     renderItemContent: oldButtonsItemRender
   },
   $select: {
-    renderItemContent (renderOpts: any, params: any) {
-      const { data, property } = params
+    renderItemContent (renderOpts, params) {
+      const { data, field } = params
       const { options, optionProps, optionGroups, optionGroupProps } = renderOpts
-      const itemValue = XEUtils.get(data, property)
+      const itemValue = XEUtils.get(data, field)
       return [
         h(getOldComponent(renderOpts), {
           ...getComponentFormItemProps(renderOpts, params, itemValue, { options, optionProps, optionGroups, optionGroupProps }),

diff --git a/packages/image-group/index.ts b/packages/image-group/index.ts
@@ -0,0 +1,16 @@
+import { App } from 'vue'
+import { VxeUI } from '@vxe-ui/core'
+import VxeImageGroupComponent from '../image/src/group'
+import { dynamicApp } from '../dynamics'
+
+export const VxeImageGroup = Object.assign({}, VxeImageGroupComponent, {
+  install (app: App) {
+    app.component(VxeImageGroupComponent.name as string, VxeImageGroupComponent)
+  }
+})
+
+dynamicApp.component(VxeImageGroupComponent.name as string, VxeImageGroupComponent)
+VxeUI.component(VxeImageGroupComponent)
+
+export const ImageGroup = VxeImageGroup
+export default VxeImageGroup