@opentiny/vue-docs 3.26.7 → 3.27.0

package/demos/mobile-first/app/space/webdoc/space.en.md

@@ -0,0 +1,9 @@
+---
+title: Space 间距
+---
+
+# Space 间距
+
+<div>
+It is mainly used to control the blank area between interface elements to help improve the clarity and aesthetics of the overall layout.
+</div>

package/demos/mobile-first/app/space/webdoc/space.js

@@ -0,0 +1,98 @@
+export default {
+  column: '2',
+  owner: '',
+  demos: [
+    {
+      demoId: 'basic-space',
+      name: {
+        'zh-CN': '基本用法',
+        'en-US': 'Basic Usage'
+      },
+      desc: {
+        'zh-CN': '<p>默认采用横向布局（row），自动为插槽内容添加间距。</p>',
+        'en-US': '<p>Uses horizontal layout (row) by default, automatically adding spacing between slot content.</p>'
+      },
+      codeFiles: ['basic-usage.vue']
+    },
+    {
+      demoId: 'space-size',
+      name: {
+        'zh-CN': '间距尺寸',
+        'en-US': 'Spacing Size'
+      },
+      desc: {
+        'zh-CN':
+          '<p>通过 <code>size</code> 属性设置间距大小，支持 small、medium、large 预定义值或自定义数值/数组。</p>',
+        'en-US':
+          '<p>Use the <code>size</code> prop to set spacing size. Supports predefined values (small, medium, large) or custom values/arrays.</p>'
+      },
+      codeFiles: ['space-size.vue']
+    },
+    {
+      demoId: 'space-direction',
+      name: {
+        'zh-CN': '排列方向',
+        'en-US': 'Layout Direction'
+      },
+      desc: {
+        'zh-CN': '<p>通过 <code>direction</code> 属性设置布局方向，支持 row（横向）或 column（纵向）。</p>',
+        'en-US':
+          '<p>Use the <code>direction</code> prop to set layout direction: row (horizontal) or column (vertical).</p>'
+      },
+      codeFiles: ['space-direction.vue']
+    },
+    {
+      demoId: 'space-wrap',
+      name: {
+        'zh-CN': '换行显示',
+        'en-US': 'Content Wrapping'
+      },
+      desc: {
+        'zh-CN': '<p>通过 <code>wrap</code> 属性控制子项内容是否换行显示。</p>',
+        'en-US': '<p>Use the <code>wrap</code> prop to control whether child items wrap to multiple lines.</p>'
+      },
+      codeFiles: ['space-wrap.vue']
+    },
+    {
+      demoId: 'space-align',
+      name: {
+        'zh-CN': '交叉轴对齐',
+        'en-US': 'Cross Axis Alignment'
+      },
+      desc: {
+        'zh-CN': '<p>通过 <code>align</code> 属性设置交叉轴对齐方式，支持 start、center、end、baseline 等值。</p>',
+        'en-US':
+          '<p>Use the <code>align</code> prop to define alignment on the cross axis, supporting values like start, center, end, and baseline.</p>'
+      },
+      codeFiles: ['space-align.vue']
+    },
+    {
+      demoId: 'space-justify',
+      name: {
+        'zh-CN': '主轴对齐',
+        'en-US': 'Main Axis Justification'
+      },
+      desc: {
+        'zh-CN':
+          '<p>通过 <code>justify</code> 属性设置主轴对齐方式，支持 start、center、end、space-between、space-around、space-evenly。</p>',
+        'en-US':
+          '<p>Use the <code>justify</code> prop to set main axis alignment, supporting start, center, end, space-between, space-around, and space-evenly.</p>'
+      },
+      codeFiles: ['space-justify.vue']
+    },
+    {
+      demoId: 'space-order',
+      name: {
+        'zh-CN': '自定义排序',
+        'en-US': 'Custom Ordering'
+      },
+      desc: {
+        'zh-CN':
+          '<p>通过 <code>order</code> 属性传入 key 数组来自定义子元素的渲染顺序，未设置 key 的子元素将自动排列在最后。</p>',
+        'en-US':
+          '<p>Use the <code>order</code> prop with an array of keys to customize the rendering order of child elements. Children without defined keys are automatically arranged at the end.</p>'
+      },
+      codeFiles: ['space-order.vue']
+    }
+  ]
+}

package/demos/mobile-first/menus.js

@@ -133,7 +133,9 @@ export const cmpMenus = [
       { name: 'Amount', nameCn: '金额', key: 'amount' },
       { name: 'currency', nameCn: '币种', key: 'currency' },
       { name: 'CalendarView', nameCn: '日历', key: 'calendar-view' },
-      { name: 'FloatingButton', nameCn: '悬浮按钮', key: 'floating-button' }
+      { name: 'FloatingButton', nameCn: '悬浮按钮', key: 'floating-button' },
+      { name: 'Divider', nameCn: '分割线', key: 'divider' },
+      { name: 'Space', nameCn: '间距', key: 'space' }
     ]
   }
 ]

package/demos/pc/app/calendar-view/basic-usage-composition-api.vue

@@ -1,5 +1,5 @@
 <template>
-  <tiny-calendar-view :events="eventslist" :year="2023" :month="5"></tiny-calendar-view>
+  <tiny-calendar-view :events="eventslist" :year="2023" :month="5" :day="15"></tiny-calendar-view>
 </template>
 
 <script setup lang="ts">

package/demos/pc/app/calendar-view/basic-usage.vue

@@ -1,5 +1,5 @@
 <template>
-  <tiny-calendar-view :events="eventslist" :year="2023" :month="5"> </tiny-calendar-view>
+  <tiny-calendar-view :events="eventslist" :year="2023" :month="5" :day="15"> </tiny-calendar-view>
 </template>
 
 <script>

package/demos/pc/app/carousel/webdoc/carousel.js

@@ -97,7 +97,8 @@ export default {
         'zh-CN': '<p>通过配置 <code>type</code> 属性为<code>vertical</code>即可实现纵向轮播。</p>\n',
         'en-US': '<p>Set <code>type</code> to vertical to implement <code>vertical</code> rotation. </p>\n'
       },
-      codeFiles: ['up-down-carousel.vue']
+      codeFiles: ['up-down-carousel.vue'],
+      hideSaas: true
     },
     {
       demoId: 'show-title',

package/demos/pc/app/color-picker/linear-gradient-composition-api.vue

@@ -0,0 +1,20 @@
+<template>
+  <div>
+    <tiny-color-picker v-model="color" color-mode="linear-gradient" @confirm="onConfirm" />
+  </div>
+</template>
+
+<script setup>
+import { TinyColorPicker, TinyNotify } from '@opentiny/vue'
+import { ref } from 'vue'
+
+const color = ref('linear-gradient(90deg, #66ADFF 21%,#00FEF1 100%)')
+const onConfirm = () => {
+  TinyNotify({
+    type: 'success',
+    position: 'top-right',
+    title: '用户点击了选择',
+    message: color.value
+  })
+}
+</script>

package/demos/pc/app/color-picker/linear-gradient.spec.ts

@@ -0,0 +1,10 @@
+import { test, expect } from '@playwright/test'
+
+test('渐变', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('color-picker#color-mode')
+  await page.locator('.tiny-color-picker > .tiny-color-picker__inner').click()
+  await page.getByRole('button', { name: '确定' }).click()
+  await expect(page.locator('body')).toContainText('linear-gradient(90deg, #66ADFF 21%,#00FEF1 100%)')
+  await page.locator('.tiny-notify__icon-close > .tiny-svg').click()
+})

package/demos/pc/app/color-picker/linear-gradient.vue

@@ -0,0 +1,28 @@
+<template>
+  <div>
+    <tiny-color-picker v-model="color" color-mode="linear-gradient" @confirm="onConfirm" />
+  </div>
+</template>
+
+<script>
+import { TinyColorPicker, TinyNotify } from '@opentiny/vue'
+import { ref } from 'vue'
+
+export default {
+  components: {
+    TinyColorPicker
+  },
+  setup() {
+    const color = ref('linear-gradient(90deg, #66ADFF 21%,#00FEF1 100%)')
+    const onConfirm = () => {
+      TinyNotify({
+        type: 'success',
+        position: 'top-right',
+        title: '用户点击了选择',
+        message: color.value
+      })
+    }
+    return { onConfirm, color }
+  }
+}
+</script>

package/demos/pc/app/color-picker/webdoc/color-picker.js

@@ -121,6 +121,20 @@ export default {
         'en-US': ''
       },
       codeFiles: ['format.vue']
+    },
+    {
+      demoId: 'color-mode',
+      name: {
+        'zh-CN': '颜色模式',
+        'en-US': 'color mode'
+      },
+      desc: {
+        'zh-CN':
+          '通过设置 <code>color-mode</code> 属性切换颜色模式。支持 <code>monochrome</code>(单色) 和 <code>linear-gradient</code>(线性渐变) 两种模式。',
+        'en-US':
+          'Set the <code>color-mode</code> attribute to switch color modes. Supports <code>monochrome</code> and <code>linear-gradient</code> modes.'
+      },
+      codeFiles: ['linear-gradient.vue']
     }
   ],
   features: [
@@ -214,6 +228,19 @@ export default {
       },
       apis: ['change'],
       demos: ['events']
+    },
+    {
+      id: 'color-mode',
+      name: '颜色模式',
+      support: {
+        value: true
+      },
+      description: '通过 color-mode 属性来定义是否启用线性渐变',
+      cloud: {
+        value: false
+      },
+      apis: ['color-mode'],
+      demos: ['color-mode']
     }
   ]
 }

package/demos/pc/app/color-select-panel/linear-gradient-composition-api.vue

@@ -0,0 +1,38 @@
+<script lang="ts" setup>
+import { TinyColorSelectPanel, TinyButton } from '@opentiny/vue'
+import { ref } from 'vue'
+
+const color = ref('linear-gradient(120deg, hsla(334, 80%, 40%, 0.32) 0%,#F48FA2FF 96%)')
+const visible = ref(false)
+const history = ref(['linear-gradient(120deg, hsla(201, 80%, 40%, 0.32) 0%,#8FF2F4FF 96%)'])
+const predefineColor = ref(['#66ccff'])
+const changeVisible = () => {
+  visible.value = !visible.value
+}
+const onConfirm = () => {
+  hidden()
+}
+const hidden = () => {
+  visible.value = false
+}
+</script>
+
+<template>
+  <div>
+    <tiny-button @click="changeVisible">Show Color select panel</tiny-button>
+    <div style="position: relative">
+      <tiny-color-select-panel
+        alpha
+        color-mode="linear-gradient"
+        v-model="color"
+        :visible="visible"
+        @confirm="onConfirm"
+        @cancel="hidden"
+        enable-predefine-color
+        :predefine="predefineColor"
+        enable-history
+        :history="history"
+      />
+    </div>
+  </div>
+</template>

package/demos/pc/app/color-select-panel/linear-gradient.spec.ts

@@ -0,0 +1,71 @@
+import { expect, test } from '@playwright/test'
+
+test('线性渐变', async ({ page }) => {
+  await page.goto('color-select-panel#linear-gradient')
+  await page.locator('#linear-gradient').getByRole('button', { name: 'Show Color select panel' }).click()
+  expect(await page.locator('.tiny-color-select-panel__linear-gradient__thumb').count()).toBe(2)
+  await page.locator('.tiny-color-select-panel__linear-gradient__thumb').first().click()
+  await page.locator('.tiny-color-select-panel__linear-gradient').click()
+  await page.locator('.tiny-color-select-panel__linear-gradient > div:nth-child(2)').click()
+})
+
+test('线性渐变 (历史记录)', async ({ page }) => {
+  await page.goto('color-select-panel#linear-gradient')
+  await page.locator('#linear-gradient').getByRole('button', { name: 'Show Color select panel' }).click()
+  await expect(page.locator('.tiny-color-select-panel__history__color-block')).toBeVisible()
+  await expect(page.getByLabel('示例', { exact: true }).getByRole('textbox')).toHaveValue(
+    'linear-gradient(120deg, hsla(334, 80%, 40%, 0.32) 0%,#F48FA2FF 96%)'
+  )
+  await page.locator('.tiny-color-select-panel__history__color-block').click()
+  await expect(page.getByLabel('示例', { exact: true }).getByRole('textbox')).toHaveValue(
+    'linear-gradient(120deg, hsla(201, 80%, 40%, 0.32) 0%,#8FF2F4FF 96%)'
+  )
+  await page.getByRole('button', { name: '取消' }).click()
+  await page.locator('#linear-gradient').getByRole('button', { name: 'Show Color select panel' }).click()
+  await expect(page.getByLabel('示例', { exact: true }).getByRole('textbox')).toHaveValue(
+    'linear-gradient(120deg, hsla(334, 80%, 40%, 0.32) 0%,#F48FA2FF 96%)'
+  )
+  await page.locator('.tiny-color-select-panel__inner__hue-select').click()
+  await page.getByRole('button', { name: '确定' }).click()
+  await page.locator('#linear-gradient').getByRole('button', { name: 'Show Color select panel' }).click()
+  await page.locator('.tiny-color-select-panel__history__color-block').first().click()
+  await expect(page.getByLabel('示例', { exact: true }).getByRole('textbox')).toHaveValue(
+    'linear-gradient(120deg, hsla(201, 80%, 40%, 0.32) 0%,#8FF2F4FF 96%)'
+  )
+  await page.getByRole('button', { name: '确定' }).click()
+  await page.locator('#linear-gradient').getByRole('button', { name: 'Show Color select panel' }).click()
+  await expect(page.getByLabel('示例', { exact: true }).getByRole('textbox')).toHaveValue(
+    'linear-gradient(120deg, hsla(201, 80%, 40%, 0.32) 0%,#8FF2F4FF 96%)'
+  )
+  await page.getByRole('button', { name: '确定' }).click()
+})
+
+test('线性渐变 (预定义颜色)', async ({ page }) => {
+  await page.goto('color-select-panel#linear-gradient')
+
+  await page.locator('#linear-gradient').getByRole('button', { name: 'Show Color select panel' }).click()
+  await expect(page.getByLabel('示例', { exact: true }).getByRole('textbox')).toHaveValue(
+    'linear-gradient(120deg, hsla(334, 80%, 40%, 0.32) 0%,#F48FA2FF 96%)'
+  )
+  await page.locator('.tiny-color-select-panel__predefine__color-block').click()
+  await expect(page.getByLabel('示例', { exact: true }).getByRole('textbox')).toHaveValue(
+    'linear-gradient(180deg, #FFFFFFFF 0%,#66CCFFFF 100%)'
+  )
+  await page.getByRole('button', { name: '确定' }).click()
+  await page.locator('#linear-gradient').getByRole('button', { name: 'Show Color select panel' }).click()
+  await page.locator('.tiny-color-select-panel__history__color-block').first().click()
+  await expect(page.getByLabel('示例', { exact: true }).getByRole('textbox')).toHaveValue(
+    'linear-gradient(120deg, hsla(201, 80%, 40%, 0.32) 0%,#8FF2F4FF 96%)'
+  )
+  await page.locator('.tiny-color-select-panel__history > div:nth-child(2)').click()
+  await expect(page.getByLabel('示例', { exact: true }).getByRole('textbox')).toHaveValue(
+    'linear-gradient(180deg, #FFFFFFFF 0%,#66CCFFFF 100%)'
+  )
+  await page.locator('.tiny-color-select-panel__history__color-block').first().click()
+  await page.getByRole('button', { name: '确定' }).click()
+  await page.locator('#linear-gradient').getByRole('button', { name: 'Show Color select panel' }).click()
+  await expect(page.getByLabel('示例', { exact: true }).getByRole('textbox')).toHaveValue(
+    'linear-gradient(120deg, hsla(201, 80%, 40%, 0.32) 0%,#8FF2F4FF 96%)'
+  )
+  await page.getByRole('button', { name: '确定' }).click()
+})

package/demos/pc/app/color-select-panel/linear-gradient.vue

@@ -0,0 +1,45 @@
+<script lang="ts">
+import { defineComponent } from 'vue'
+import { ref } from 'vue'
+import { TinyButton, TinyColorSelectPanel } from '@opentiny/vue'
+
+export default defineComponent({
+  components: { TinyButton, TinyColorSelectPanel },
+  setup() {
+    const color = ref('linear-gradient(120deg, hsla(334, 80%, 40%, 0.32) 0%,#F48FA2FF 96%)')
+    const visible = ref(false)
+    const history = ref(['linear-gradient(120deg, hsla(201, 80%, 40%, 0.32) 0%,#8FF2F4FF 96%)'])
+    const predefineColor = ref(['#66ccff'])
+    const changeVisible = () => {
+      visible.value = !visible.value
+    }
+    const onConfirm = () => {
+      hidden()
+    }
+    const hidden = () => {
+      visible.value = false
+    }
+    return { color, visible, history, predefineColor, changeVisible, onConfirm, hidden }
+  }
+})
+</script>
+
+<template>
+  <div>
+    <tiny-button @click="changeVisible">Show Color select panel</tiny-button>
+    <div style="position: relative">
+      <tiny-color-select-panel
+        alpha
+        color-mode="linear-gradient"
+        v-model="color"
+        :visible="visible"
+        @confirm="onConfirm"
+        @cancel="hidden"
+        enable-predefine-color
+        :predefine="predefineColor"
+        enable-history
+        :history="history"
+      />
+    </div>
+  </div>
+</template>

package/demos/pc/app/color-select-panel/webdoc/color-select-panel.js

@@ -16,6 +16,18 @@ export default {
       },
       codeFiles: ['base.vue']
     },
+    {
+      demoId: 'linear-gradient',
+      name: {
+        'zh-CN': '线性渐变',
+        'en-US': 'Linear Gradient'
+      },
+      desc: {
+        'zh-CN': '通过<code>color-mode</code>设置显示色彩选择的色彩模式。',
+        'en-US': 'Set the color mode for display color selection through<code>color mode</code>.'
+      },
+      codeFiles: ['linear-gradient.vue']
+    },
     {
       demoId: 'alpha',
       name: {

package/demos/pc/app/config-provider/webdoc/config-provider.js

@@ -54,7 +54,8 @@ export default {
         'zh-CN': '可通过<code>theme</code>属性设置自定义主题色常量。',
         'en-US': 'You can use the <code>theme</code> property to set a custom theme color constant.'
       },
-      codeFiles: ['theme.vue']
+      codeFiles: ['theme.vue'],
+      hideSaas: true // 当环境变量为tiny-vue-saas时隐藏该属性
     }
   ],
   features: [

package/demos/pc/app/date-panel/basic-usage.vue

@@ -15,16 +15,27 @@
   </div>
 </template>
 
-<script setup>
-import { ref } from 'vue'
+<script>
 import { TinyDatePanel, TinyDateRange, TinyMonthRange, TinyYearRange } from '@opentiny/vue'
 
-const value = ref('2025-01-15')
-const month = ref('2025-01')
-const year = ref('2025')
-const value1 = ref(['2025-01-15', '2025-02-15'])
-const value2 = ref(['2024-03', '2025-02'])
-const value3 = ref(['2024', '2028'])
+export default {
+  components: {
+    TinyDatePanel,
+    TinyDateRange,
+    TinyMonthRange,
+    TinyYearRange
+  },
+  data() {
+    return {
+      value: '2025-01-15',
+      month: '2025-01',
+      year: '2025',
+      value1: ['2025-01-15', '2025-02-15'],
+      value2: ['2024-03', '2025-02'],
+      value3: ['2024', '2028']
+    }
+  }
+}
 </script>
 
 <style scoped lang="less">

package/demos/pc/app/date-panel/custom-weeks.vue

@@ -18,17 +18,27 @@
   </div>
 </template>
 
-<script setup>
-import { ref } from 'vue'
+<script>
 import { TinyDatePanel, TinyDateRange } from '@opentiny/vue'
 
-const value = ref('2025-01-15')
-const value1 = ref(['2025-01-15', '2025-02-15'])
-const eachWeekFirstDay = ref([])
-
-const formatWeeks = (customWeeks, weekFirstDays) => {
-  eachWeekFirstDay.value = weekFirstDays
-  return customWeeks + 'w'
+export default {
+  components: {
+    TinyDatePanel,
+    TinyDateRange
+  },
+  data() {
+    return {
+      value: '2025-01-15',
+      value1: ['2025-01-15', '2025-02-15'],
+      eachWeekFirstDay: []
+    }
+  },
+  methods: {
+    formatWeeks(customWeeks, weekFirstDays) {
+      this.eachWeekFirstDay = weekFirstDays
+      return customWeeks + 'w'
+    }
+  }
 }
 </script>
 

package/demos/pc/app/date-panel/disabled-date.vue

@@ -15,27 +15,37 @@
   </div>
 </template>
 
-<script setup>
-import { ref } from 'vue'
+<script>
 import { TinyDatePanel, TinyDateRange, TinyMonthRange, TinyYearRange } from '@opentiny/vue'
 
-const value = ref('2025-01-15')
-const month = ref('2025-06')
-const year = ref('2025')
-const value1 = ref(['2025-01-15', '2025-02-15'])
-const value2 = ref(['2024-03', '2025-02'])
-const value3 = ref(['2024', '2028'])
-
-const disabledDate = (val) => {
-  return val.getFullYear() < 2025
-}
-
-const disabledDate1 = (val) => {
-  return (val.getFullYear() < 2025 && val.getMonth() < 1) || val.getFullYear() < 2024
-}
-
-const disabledDate2 = (val) => {
-  return val.getFullYear() < 2024
+export default {
+  components: {
+    TinyDatePanel,
+    TinyDateRange,
+    TinyMonthRange,
+    TinyYearRange
+  },
+  data() {
+    return {
+      value: '2025-01-15',
+      month: '2025-06',
+      year: '2025',
+      value1: ['2025-01-15', '2025-02-15'],
+      value2: ['2024-03', '2025-02'],
+      value3: ['2024', '2028']
+    }
+  },
+  methods: {
+    disabledDate(val) {
+      return val.getFullYear() < 2025
+    },
+    disabledDate1(val) {
+      return (val.getFullYear() < 2025 && val.getMonth() < 1) || val.getFullYear() < 2024
+    },
+    disabledDate2(val) {
+      return val.getFullYear() < 2024
+    }
+  }
 }
 </script>
 

package/demos/pc/app/date-panel/event.vue

@@ -15,39 +15,46 @@
   </div>
 </template>
 
-<script setup>
-import { ref } from 'vue'
+<script>
 import { TinyDatePanel, TinyDateRange, TinyMonthRange, TinyYearRange, TinyModal } from '@opentiny/vue'
 
-const value = ref('2025-01-15')
-const month = ref('2025-01')
-const year = ref('2025')
-const value1 = ref(['2025-01-15', '2025-02-15'])
-const value2 = ref(['2024-03', '2025-02'])
-const value3 = ref(['2024', '2028'])
-
-const handleSelectChange = (value) => {
-  TinyModal.message({ message: '触发 面板选中 事件，组件绑定值为：' + value, status: 'info' })
-}
-
-const handleSelectChangeMonth = (value) => {
-  TinyModal.message({ message: '触发 月份面板选中 事件，组件绑定值为：' + value, status: 'info' })
-}
-
-const handleSelectChangeYear = (value) => {
-  TinyModal.message({ message: '触发 年份面板选中 事件，组件绑定值为：' + value, status: 'info' })
-}
-
-const handleSelectChange1 = (value) => {
-  TinyModal.message({ message: '触发 区间面板选中 事件，组件绑定值为：' + value, status: 'info' })
-}
-
-const handleSelectChange2 = (value) => {
-  TinyModal.message({ message: '触发 月份区间面板选中 事件，组件绑定值为：' + value, status: 'info' })
-}
-
-const handleSelectChange3 = (value) => {
-  TinyModal.message({ message: '触发 年份区间面板选中 事件，组件绑定值为：' + value, status: 'info' })
+export default {
+  components: {
+    TinyDatePanel,
+    TinyDateRange,
+    TinyMonthRange,
+    TinyYearRange
+  },
+  data() {
+    return {
+      value: '2025-01-15',
+      month: '2025-01',
+      year: '2025',
+      value1: ['2025-01-15', '2025-02-15'],
+      value2: ['2024-03', '2025-02'],
+      value3: ['2024', '2028']
+    }
+  },
+  methods: {
+    handleSelectChange(value) {
+      TinyModal.message({ message: '触发 面板选中 事件，组件绑定值为：' + value, status: 'info' })
+    },
+    handleSelectChangeMonth(value) {
+      TinyModal.message({ message: '触发 月份面板选中 事件，组件绑定值为：' + value, status: 'info' })
+    },
+    handleSelectChangeYear(value) {
+      TinyModal.message({ message: '触发 年份面板选中 事件，组件绑定值为：' + value, status: 'info' })
+    },
+    handleSelectChange1(value) {
+      TinyModal.message({ message: '触发 区间面板选中 事件，组件绑定值为：' + value, status: 'info' })
+    },
+    handleSelectChange2(value) {
+      TinyModal.message({ message: '触发 月份区间面板选中 事件，组件绑定值为：' + value, status: 'info' })
+    },
+    handleSelectChange3(value) {
+      TinyModal.message({ message: '触发 年份区间面板选中 事件，组件绑定值为：' + value, status: 'info' })
+    }
+  }
 }
 </script>