@opentiny/vue-docs 3.24.6 → 3.26.0

package/demos/pc/app/locales/custom-service.spec.ts

@@ -8,7 +8,7 @@ test('locales-custom-service', async ({ page }) => {
   const reference = demo.locator('.reference-wrapper')
   const popper = page.locator('.tiny-locales__popper')
 
-  await expect(reference).toHaveText('zh_CN')
+  await expect(reference).toHaveText('中文')
   await expect(popper).toBeHidden()
   await reference.hover()
   await page.waitForTimeout(200)

package/demos/pc/app/locales/custom-service.vue

@@ -16,13 +16,13 @@ export default {
   methods: {
     getLocale() {
       // resolve 出来的必须是国际化的 key
-      return Promise.resolve(['zh_CN', 'en_US', 'zh_TW'])
+      return Promise.resolve(['zhCN', 'enUS', 'zhTW'])
     },
     getCurrentLocale() {
-      return Promise.resolve(['zh_CN'])
+      return Promise.resolve(['zhCN'])
     },
     getChangeLocaleUrl(targetLocale) {
-      if (targetLocale === 'en_US') {
+      if (targetLocale === 'enUS') {
         return Promise.resolve(`${window.location.origin}/#/webenglish/en-US/component/locales/custom-service`)
       } else {
         return Promise.resolve(`${window.location.origin}/#/zh-CN/component/custom-service`)

package/demos/pc/app/modal/basic-usage.spec.ts

@@ -19,7 +19,8 @@ test('基本用法', async ({ page }) => {
 
   // 消息提示
   await page.getByRole('button', { name: '消息提示' }).click()
-  await expect(content.nth(3)).toHaveText(/简单的消息/)
+  const info = page.locator('div')
+  await expect(info.filter({ hasText: '简单的消息' }).nth(1)).toHaveText(/简单的/)
 
   // 打开弹窗 1
   await page.getByRole('button', { name: '打开弹窗 1' }).click()

package/demos/pc/app/modal/message-close.spec.ts

@@ -3,7 +3,7 @@ import { test, expect } from '@playwright/test'
 test('消息的关闭和延时', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('modal#message-close')
-  const content = page.locator('.tiny-modal__text')
   await page.getByRole('button', { name: '消息可关闭' }).click()
-  await expect(content).toHaveText(/5s 后得自动关闭/)
+  const info = page.locator('div').filter({ hasText: '自定义消息的内容可关闭，5s 后得自动关闭' })
+  await expect(info.nth(1)).toHaveText(/5s 后得自动关闭/)
 })

package/demos/pc/app/modal/message-id.spec.ts

@@ -3,7 +3,7 @@ import { test, expect } from '@playwright/test'
 test('防止重复消息提示', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('modal#message-id')
-  const content = page.locator('.tiny-modal__text')
   await page.getByRole('button', { name: '重复点击不出现多个' }).click()
-  await expect(content).toHaveText(/唯一 id/)
+  const info = await page.locator('div').filter({ hasText: '自定义消息具有唯一 id，所以不会重复出现' })
+  await expect(info.nth(1)).toHaveText(/唯一 id/)
 })

package/demos/pc/app/modal/modal-fn-slots.spec.ts

@@ -3,13 +3,11 @@ import { test, expect } from '@playwright/test'
 test('弹窗的插槽', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('modal#modal-fn-slots')
-  const content = page.locator('.tiny-modal__content')
-  const inner = page.locator('.tiny-link__inner')
-  await page.getByRole('button', { name: '打开带插槽弹窗' }).first().click()
-  await expect(content.nth(1)).toHaveText(/使用默认插槽/)
+  const demoElement = page.locator('#modal-fn-slots')
+  await demoElement.getByRole('button', { name: '打开带插槽弹窗' }).first().click()
+  const content = page.locator('div').filter({ hasText: /^使用默认插槽$/ })
+  await expect(content.nth(3)).toHaveText(/使用默认插槽/)
+  const inner = page.locator('a').filter({ hasText: '记录最近事项' })
   await expect(inner.nth(1)).toHaveText(/记录最近事项/)
   await page.getByRole('button', { name: '取消' }).click()
-  await page.getByRole('button', { name: '打开带插槽弹窗' }).nth(1).click()
-  await expect(content.nth(1)).toHaveText(/使用默认插槽/)
-  await expect(inner).toHaveText(/记录最近事项/)
 })

package/demos/pc/app/modal/modal-header.spec.ts

@@ -3,10 +3,11 @@ import { test, expect } from '@playwright/test'
 test('自定义弹窗标题', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('modal#modal-header')
+  const demo = page.locator('#modal-header')
   const header = page.locator('.tiny-modal__title')
 
   // 自定义弹窗标题
-  await page.getByRole('button', { name: '自定义弹窗标题' }).first().click()
+  await demo.getByRole('button', { name: '自定义弹窗标题' }).first().click()
   await expect(header.first()).toHaveText(/自定义弹窗标题/)
   await page.getByRole('button', { name: '确定' }).click()
 })

package/demos/pc/app/numeric/input-event-composition-api.vue

@@ -0,0 +1,26 @@
+<template>
+  <div>
+    <tiny-numeric v-model="value" @input="onInput"></tiny-numeric>
+    <div>
+      input事件触发了:<span class="count">{{ inputCount }}</span> 次
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+import { TinyModal, TinyNumeric } from '@opentiny/vue'
+
+const value = ref(1)
+const inputCount = ref(0)
+
+const onInput = (event: InputEvent) => {
+  const currentValue = (event.target as HTMLInputElement).value
+  TinyModal.message({
+    message: `新值： ${currentValue}`,
+    status: 'info'
+  })
+  inputCount.value++
+}
+</script>

package/demos/pc/app/numeric/input-event.spec.ts

@@ -0,0 +1,15 @@
+import { expect, test } from '@playwright/test'
+
+test('输入事件', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('numeric#input-event')
+  let count
+
+  for (let i = 0; i < 5; i++) {
+    await page.locator('.tiny-numeric__input-inner').fill(String(Math.random()))
+
+    count = await page.locator('.count').textContent()
+
+    expect(Number(count)).toBe(i + 1)
+  }
+})

package/demos/pc/app/numeric/input-event.vue

@@ -0,0 +1,34 @@
+<template>
+  <div>
+    <tiny-numeric v-model="value" @input="onInput"></tiny-numeric>
+    <div>
+      input事件触发了:<span class="count">{{ inputCount }}</span> 次
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { TinyModal, TinyNumeric } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyNumeric
+  },
+  data() {
+    return {
+      value: 1,
+      inputCount: 0
+    }
+  },
+  methods: {
+    onInput(event: InputEvent) {
+      const currentValue = (event.target as HTMLInputElement).value
+      TinyModal.message({
+        message: `新值： ${currentValue}`,
+        status: 'info'
+      })
+      this.inputCount++
+    }
+  }
+}
+</script>

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

@@ -165,6 +165,18 @@ export default {
       },
       codeFiles: ['change-event.vue']
     },
+    {
+      demoId: 'input-event',
+      name: {
+        'zh-CN': '输入事件',
+        'en-US': 'Input Event'
+      },
+      desc: {
+        'zh-CN': '<p>输入时触发<code>input</code>事件。<p>',
+        'en-US': '<p>Trigger the <code>input</code> event upon input. </p>'
+      },
+      codeFiles: ['input-event.vue']
+    },
     {
       demoId: 'focus-event',
       name: {

package/demos/pc/app/pager/align-composition-api.vue

@@ -1,20 +1,17 @@
 <template>
   <div class="content">
-    <tiny-pager align="left" :total="100"></tiny-pager>
-    <tiny-pager align="center" :total="100"></tiny-pager>
-    <tiny-pager align="right" :total="100"></tiny-pager>
+    <TinyRadioGroup v-model="state.align" type="button" :options="state.options"></TinyRadioGroup>
+    <TinyPager :align="state.align" :total="100"></TinyPager>
   </div>
 </template>
 
 <script setup>
-import { TinyPager } from '@opentiny/vue'
-</script>
+import { reactive } from 'vue'
+
+import { TinyPager, TinyRadioGroup } from '@opentiny/vue'
 
-<style scoped>
-.content {
-  margin-bottom: 20px;
-}
-.tiny-radio-group {
-  margin-bottom: 10px;
-}
-</style>
+const state = reactive({
+  align: 'left',
+  options: ['left', 'center', 'right'].map((item) => ({ label: item, text: item }))
+})
+</script>

package/demos/pc/app/pager/align.spec.ts

@@ -7,7 +7,12 @@ test('对齐方式', async ({ page }) => {
   const demo = page.locator('#align')
   const pager = demo.locator('.tiny-pager')
 
-  await expect(pager.first()).toHaveCSS('text-align', 'left')
-  await expect(pager.nth(1)).toHaveCSS('text-align', 'center')
-  await expect(pager.nth(2)).toHaveCSS('text-align', 'right')
+  await expect(pager).toHaveCSS('text-align', 'left')
+
+  await page.click('text=center')
+  await expect(pager).toHaveCSS('text-align', 'center')
+  await page.click('text=right')
+  await expect(pager).toHaveCSS('text-align', 'right')
+  await page.click('text=left')
+  await expect(pager).toHaveCSS('text-align', 'left')
 })

package/demos/pc/app/pager/align.vue

@@ -1,17 +1,23 @@
 <template>
   <div class="content">
-    <tiny-pager align="left" :total="100"></tiny-pager>
-    <tiny-pager align="center" :total="100"></tiny-pager>
-    <tiny-pager align="right" :total="100"></tiny-pager>
+    <TinyRadioGroup v-model="align" type="button" :options="options"></TinyRadioGroup>
+    <tiny-pager :align="align" :total="100"></tiny-pager>
   </div>
 </template>
 
 <script>
-import { TinyPager } from '@opentiny/vue'
+import { TinyPager, TinyRadioGroup } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyPager
+    TinyPager,
+    TinyRadioGroup
+  },
+  data() {
+    return {
+      align: 'left',
+      options: ['left', 'center', 'right'].map((item) => ({ label: item, text: item }))
+    }
   }
 }
 </script>

package/demos/pc/app/pager/page-size-composition-api.vue

@@ -1,7 +1,7 @@
 <template>
-  <tiny-pager mode="number" :page-size="5" :page-sizes="[5, 7, 10, 20, 50]" :total="100"> </tiny-pager>
+  <tiny-pager mode="number" :page-size="20" :page-sizes="[10, 20, 50, 100]" :total="100"> </tiny-pager>
 </template>
 
 <script setup>
-import { TinyPager, TinyModal } from '@opentiny/vue'
+import { TinyPager } from '@opentiny/vue'
 </script>

package/demos/pc/app/pager/page-size.spec.ts

@@ -7,7 +7,7 @@ test('每页显示数量', async ({ page }) => {
   const preview = page.locator('#page-size')
   const pager = preview.locator('.tiny-pager')
   const total = 100
-  const initPageSize = 5
+  const initPageSize = 20
   const getPageCount = (pageSize: number) => String(Math.ceil(total / pageSize))
   const sizeChange = pager.locator('.tiny-pager__page-size')
   const sizeSelect = page.locator('.tiny-pager__selector')

package/demos/pc/app/pager/page-size.vue

@@ -1,9 +1,9 @@
 <template>
-  <tiny-pager mode="number" :page-size="5" :page-sizes="[5, 7, 10, 20, 50]" :total="100"> </tiny-pager>
+  <tiny-pager mode="number" :page-size="20" :page-sizes="[10, 20, 50, 100]" :total="100"> </tiny-pager>
 </template>
 
 <script>
-import { TinyPager, TinyModal } from '@opentiny/vue'
+import { TinyPager } from '@opentiny/vue'
 
 export default {
   components: {

package/demos/pc/app/pager/pager-in-grid-composition-api.vue

@@ -27,7 +27,6 @@
       :current-page="custPager.currentPage"
       :page-size="custPager.pageSize"
       :total="custPager.total"
-      :page-sizes="[5, 10, 20, 50]"
       @current-change="currentChange"
       @size-change="sizeChange"
       layout="total, sizes, prev, pager, next, jumper"

package/demos/pc/app/pager/pager-in-grid.vue

@@ -27,7 +27,6 @@
       :current-page="custPager.currentPage"
       :page-size="custPager.pageSize"
       :total="custPager.total"
-      :page-sizes="[5, 10, 20, 50]"
       @current-change="currentChange"
       @size-change="sizeChange"
       layout="total, sizes, prev, pager, next, jumper"

package/demos/pc/app/pager/popper-append-to-body-composition-api.vue

@@ -1,11 +1,5 @@
 <template>
-  <tiny-pager
-    :popper-append-to-body="false"
-    layout="sizes,prev, pager, next"
-    :page-size="5"
-    :page-sizes="[5, 10, 20, 30, 40, 50, 100]"
-    :total="50"
-  ></tiny-pager>
+  <tiny-pager :popper-append-to-body="false" layout="sizes,prev, pager, next" :total="50"></tiny-pager>
 </template>
 
 <script setup>

package/demos/pc/app/pager/popper-append-to-body.vue

@@ -1,11 +1,5 @@
 <template>
-  <tiny-pager
-    :popper-append-to-body="false"
-    layout="sizes,prev, pager, next"
-    :page-size="5"
-    :page-sizes="[5, 10, 20, 30, 40, 50, 100]"
-    :total="50"
-  ></tiny-pager>
+  <tiny-pager :popper-append-to-body="false" layout="sizes,prev, pager, next" :total="50"></tiny-pager>
 </template>
 
 <script>

package/demos/pc/app/pager/popper-class-composition-api.vue

@@ -1,11 +1,5 @@
 <template>
-  <tiny-pager
-    popper-class="custom-pager"
-    layout="sizes,prev, pager, next"
-    :page-size="5"
-    :page-sizes="[5, 10, 20, 30, 40, 50, 100]"
-    :total="50"
-  ></tiny-pager>
+  <tiny-pager popper-class="custom-pager" layout="sizes,prev, pager, next" :total="50"></tiny-pager>
 </template>
 
 <script setup>

package/demos/pc/app/pager/popper-class.vue

@@ -1,11 +1,5 @@
 <template>
-  <tiny-pager
-    popper-class="custom-pager"
-    layout="sizes,prev, pager, next"
-    :page-size="5"
-    :page-sizes="[5, 10, 20, 30, 40, 50, 100]"
-    :total="50"
-  ></tiny-pager>
+  <tiny-pager popper-class="custom-pager" layout="sizes,prev, pager, next" :total="50"></tiny-pager>
 </template>
 
 <script>

package/demos/pc/app/popeditor/conditions.spec.ts

@@ -21,5 +21,5 @@ test('PopEditor 自定义查询条件', async ({ page }) => {
   await company.fill('')
   await city.fill('福州')
   await searchBtn.press('Enter')
-  await expect(dialogBox.locator('.tiny-grid-body__row')).toHaveCount(1)
+  await expect(dialogBox.locator('.tiny-grid-body__row:visible')).toHaveCount(1)
 })

package/demos/pc/app/popeditor/suggest.spec.ts

@@ -10,5 +10,5 @@ test('PopEditor 联想查询', async ({ page }) => {
 
   await textBox.fill('科技')
   await page.waitForTimeout(500)
-  await expect(grid).toBeVisible()
+  await expect(grid.filter({ hasText: /GFD 科技 YX 公司/ })).toBeVisible()
 })

package/demos/pc/app/qr-code/icon-composition-api.vue

@@ -1,16 +1,30 @@
 <template>
+  <div class="qr-code-attr">
+    iconSize:
+    <tiny-numeric v-model="params.iconSize" :min="1" :max="params.size * 0.3" />
+    size: <tiny-numeric v-model="params.size" :min="1" :max="1e4" />
+  </div>
   <tiny-qr-code v-bind="params"></tiny-qr-code>
 </template>
 
 <script setup>
-import { TinyQrCode } from '@opentiny/vue'
+import { reactive } from 'vue'
+import { TinyNumeric, TinyQrCode } from '@opentiny/vue'
 
-const params = {
+const params = reactive({
   value: '测试二维码数据',
   icon: import.meta.env.VITE_APP_BUILD_BASE_URL
     ? `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/mountain.png`
     : 'https://res.hc-cdn.com/tinyui-design-common/1.0.5.20230707170109/assets/tinyvue.svg',
   iconSize: 60,
   size: 250
-}
+})
 </script>
+
+<style scoped>
+.qr-code-attr {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+}
+</style>

package/demos/pc/app/qr-code/icon.spec.ts

@@ -8,4 +8,23 @@ test('自定义 icon', async ({ page }) => {
   const canvasImg = page.locator('.tiny-qr-code .mask-icon img')
   await expect(canvas).toBeVisible()
   await expect(canvasImg).toBeVisible()
+
+  await page.getByLabel('示例', { exact: true }).getByRole('button').nth(1).click()
+  const iconSize = await canvasImg.evaluate((el) => {
+    return window.getComputedStyle(el)
+  })
+  const inputIconSizeWidth = await page.getByRole('spinbutton').first().inputValue()
+
+  expect(iconSize.width === `${inputIconSizeWidth}px`).toBe(true)
+  expect(iconSize.height === `${inputIconSizeWidth}px`).toBe(true)
+  await page.getByLabel('示例', { exact: true }).getByRole('button').nth(3).click()
+  const [qrWidth, qrHeight] = await page.locator('.tiny-qr-code').evaluate((el) => {
+    const style = window.getComputedStyle(el)
+    return [style.width, style.height]
+  })
+
+  const inputSizeWidth = await page.getByRole('spinbutton').nth(1).inputValue()
+
+  expect(qrWidth === `${inputSizeWidth}px`).toBe(true)
+  expect(qrHeight === `${inputSizeWidth}px`).toBe(true)
 })

package/demos/pc/app/qr-code/icon.vue

@@ -1,25 +1,46 @@
 <template>
+  <div class="qr-code-attr">
+    iconSize:
+    <tiny-numeric v-model="iconSize" :min="1" :max="size * 0.3" />
+    size: <tiny-numeric v-model="size" :min="1" :max="1e4" />
+  </div>
+
   <tiny-qr-code v-bind="params"></tiny-qr-code>
 </template>
 
 <script>
-import { TinyQrCode } from '@opentiny/vue'
+import { TinyNumeric, TinyQrCode } from '@opentiny/vue'
 
 export default {
   components: {
+    TinyNumeric,
     TinyQrCode
   },
   data() {
     return {
-      params: {
+      size: 250,
+      iconSize: 60
+    }
+  },
+  computed: {
+    params() {
+      return {
         value: '测试二维码数据',
         icon: import.meta.env.VITE_APP_BUILD_BASE_URL
           ? `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/mountain.png`
           : 'https://res.hc-cdn.com/tinyui-design-common/1.0.5.20230707170109/assets/tinyvue.svg',
-        iconSize: 60,
-        size: 250
+        iconSize: this.iconSize,
+        size: this.size
       }
     }
   }
 }
 </script>
+
+<style scoped>
+.qr-code-attr {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+}
+</style>

package/demos/pc/app/qr-code/style-composition-api.vue

@@ -1,15 +1,12 @@
 <template>
   <div class="qr-code-container">
-    <div>
-      <tiny-button @click="changeColor">改变颜色</tiny-button>
-    </div>
-    <br />
+    <tiny-color-picker v-model="params.color" />
     <tiny-qr-code v-bind="params"></tiny-qr-code>
   </div>
 </template>
 
 <script setup>
-import { TinyQrCode, TinyButton } from '@opentiny/vue'
+import { TinyQrCode, TinyColorPicker } from '@opentiny/vue'
 import { ref } from 'vue'
 
 const params = ref({
@@ -18,8 +15,4 @@ const params = ref({
   size: 250,
   style: { background: '#f5f5f5', padding: '24px' }
 })
-
-const changeColor = () => {
-  params.value.color = '#666'
-}
 </script>

package/demos/pc/app/qr-code/style.spec.ts

@@ -4,6 +4,23 @@ test('自定义样式', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('qr-code#style')
 
-  const canvas = page.locator('.tiny-qr-code canvas')
+  const demo = page.locator('#style')
+  const wrapper = demo.locator('.tiny-qr-code')
+  const canvas = demo.locator('.tiny-qr-code canvas')
   await expect(canvas).toBeVisible()
+
+  const backgroundColor0 = await canvas.evaluate(
+    (el: any, { x, y }) => {
+      const ctx = el.getContext('2d')
+      const pixel = ctx.getImageData(x, y, 1, 1).data
+      const toHex = (num: number) => num.toString(16).padStart(2, '0')
+      return `#${toHex(pixel[0])}${toHex(pixel[1])}${toHex(pixel[2])}`
+    },
+    { x: 1, y: 1 }
+  )
+
+  expect(backgroundColor0 === '#1677ff').toBeTruthy()
+
+  const box = await wrapper.boundingBox()
+  expect(box?.width).toEqual(250)
 })

package/demos/pc/app/qr-code/style.vue

@@ -1,26 +1,29 @@
 <template>
   <div class="qr-code-container">
-    <div>
-      <tiny-button @click="changeColor">改变颜色</tiny-button>
-    </div>
-    <br />
+    <div>改变颜色<tiny-color-picker v-model="color" /></div>
+
     <tiny-qr-code v-bind="params"></tiny-qr-code>
   </div>
 </template>
 
 <script>
-import { TinyQrCode, TinyButton } from '@opentiny/vue'
+import { TinyQrCode, TinyColorPicker } from '@opentiny/vue'
 
 export default {
   components: {
     TinyQrCode,
-    TinyButton
+    TinyColorPicker
   },
   data() {
     return {
-      params: {
+      color: '#1677ff'
+    }
+  },
+  computed: {
+    params() {
+      return {
         value: '测试二维码数据',
-        color: '#1677ff',
+        color: this.color,
         size: 250,
         style: { background: '#f5f5f5', padding: '24px' }
       }

package/demos/pc/app/query-builder/webdoc/query-builder.js

@@ -9,8 +9,10 @@ export default {
         'en-US': 'Basic Usage'
       },
       desc: {
-        'zh-CN':
-          "\n          <div class=\"tip custom-block\">\n           <p class=\"custom-block-title\"> config 属性说明 </p>\n       <code>autoSelectField</code>：范围域是否会默认选择，勾选则默认为第一个选项；反之则默认为-----  <br>\n       <code>autoSelectOperator</code>：运算符是否会默认选择，勾选则默认选择第一个选项，反之则默认为-----  <br>\n       <code>disabled</code>：禁用所有规则  <br>\n       <code>parsenumbers</code>：数字会被转化为 Number 类型，而非 String 类型  <br>\n       <code>showCloneButtons</code>：展示复制按钮，即整条规则可以被复制  <br>\n       <code>showCombinatorsBetweenRules</code>：组合子数组统一修改，且不再展示在连线上，以下拉选择形式出现  <br>\n       <code>showLockButtons</code>：展示锁定按钮，即整条规则可以被锁定  <br>\n       <code>showNotToggle</code>：展示 not 条件切换框  <br>\n       <code>displayOnlyField</code>：是否仅展示字段选择器  <br>\n       </div>  <br>\n       二、fields 数据配置  <br>\n      <pre> <code>\n       fields 中的数据（只用于说明各字段含义，无业务特定性）  <br>\n       {  <br>\n         name: 'isMusician', //name：格式化数据中的值（形参）  <br>\n         label: 'Is a musician', //label：范围域在规则生成器中对外展示名称  <br>\n         valueEditorType: 'checkbox', //placeholder：值域的默认缺省值  <br>\n         operators: [ //运算符自定义，name 为格式化数据中的值，label 为范围域对外展示的名称  <br>\n           {  <br>\n             name: '=',  <br>\n             label: '='  <br>\n           }  <br>\n         ],  <br>\n         bindProps: { // 通过 bindProps 参数可对某一类组件进行参数控制  <br>\n           input:{  <br>\n             clearable:true  <br>\n           },  <br>\n           select:{  <br>\n             filterable:true  <br>\n           }  <br>\n         },  <br>\n         defaultValue: false, //defaultOperator：运算符的默认缺省选择  <br>\n         validator: (r) => !!r.value //validator：校验规则（该功能点还在迭代开发中……）  <br>\n         inputType: 'number', //值域的数值类型  <br>\n         valueEditorType: 'radio' //值域编辑器的类型  <br>\n         defaultValue: false, //值域的默认值  <br>\n         values: [ //值域的可选域配置（下拉）  <br>\n           {  <br>\n              label: 'Percussion instruments',  <br>\n              options: [  <br>\n               {  <br>\n                    name: 'Clapstick',  <br>\n                    label: 'Clapstick'  <br>\n               }  <br>\n             ]  <br>\n           }  <br>\n         ],  <br>\n         values: [ //值域的可选域配置（单选）  <br>\n           {  <br>\n              name: 'M',  <br>\n              label: 'Male'  <br>\n           },  <br>\n           {  <br>\n              name: 'F',  <br>\n              label: 'Female'  <br>\n           },  <br>\n           {  <br>\n              name: 'O',  <br>\n              label: 'Other'  <br>\n           }  <br>\n         ],  <br>\n         valueSources: ['field', 'value'], //值域类型可选择  <br>\n         comparator: 'groupNumber', //分组时的比较器  <br>\n         groupNumber: 'group1', //分组的组别  <br>\n       },  <br>\n       // 组合子数组配置，label 为展示字符，name 为数据值  <br>\n       combinators: [  <br>\n         {  <br>\n           name: 'and',  <br>\n           label: '且'  <br>\n         },  <br>\n         {  <br>\n           name: 'or',  <br>\n           label: '或'  <br>\n         }  <br>\n       ]  <br>\n       </code></pre>  <br>\n       ",
+        'zh-CN': `
+        <div class="tip custom-block"> 
+          <p class=\"custom-block-title\"> config 属性说明 </p>
+          <code>autoSelectField</code>：范围域是否会默认选择，勾选则默认为第一个选项；反之则默认为-----  \n <code>autoSelectOperator</code>：运算符是否会默认选择，勾选则默认选择第一个选项，反之则默认为-----  \n       <code>disabled</code>：禁用所有规则  \n       <code>parsenumbers</code>：数字会被转化为 Number 类型，而非 String 类型  \n       <code>showCloneButtons</code>：展示复制按钮，即整条规则可以被复制  \n       <code>showCombinatorsBetweenRules</code>：组合子数组统一修改，且不再展示在连线上，以下拉选择形式出现  \n       <code>showLockButtons</code>：展示锁定按钮，即整条规则可以被锁定  \n       <code>showNotToggle</code>：展示 not 条件切换框  \n       <code>displayOnlyField</code>：是否仅展示字段选择器  \n       </div>  \n       二、fields 数据配置  \n      <pre> <code>\n       fields 中的数据（只用于说明各字段含义，无业务特定性）  \n       {  \n name: 'isMusician', //name：格式化数据中的值（形参）  \n label: 'Is a musician', //label：范围域在规则生成器中对外展示名称  \n valueEditorType: 'checkbox', //placeholder：值域的默认缺省值  \n operators: [ //运算符自定义，name 为格式化数据中的值，label 为范围域对外展示的名称  \n   {  \n     name: '=',  \n     label: '='  \n   }  \n ],  \n bindProps: { // 通过 bindProps 参数可对某一类组件进行参数控制  \n   input:{  \n     clearable:true  \n   },  \n   select:{  \n     filterable:true  \n   }  \n },  \n defaultValue: false, //defaultOperator：运算符的默认缺省选择  \n validator: (r) => !!r.value //validator：校验规则（该功能点还在迭代开发中……）  \n inputType: 'number', //值域的数值类型  \n valueEditorType: 'radio' //值域编辑器的类型  \n defaultValue: false, //值域的默认值  \n values: [ //值域的可选域配置（下拉）  \n   {  \n      label: 'Percussion instruments',  \n      options: [  \n       {  \n            name: 'Clapstick',  \n            label: 'Clapstick'  \n       }  \n     ]  \n   }  \n ],  \n values: [ //值域的可选域配置（单选）  \n   {  \n      name: 'M',  \n      label: 'Male'  \n   },  \n   {  \n      name: 'F',  \n      label: 'Female'  \n   },  \n   {  \n      name: 'O',  \n      label: 'Other'  \n   }  \n ],  \n valueSources: ['field', 'value'], //值域类型可选择  \n comparator: 'groupNumber', //分组时的比较器  \n groupNumber: 'group1', //分组的组别  \n       },  \n       // 组合子数组配置，label 为展示字符，name 为数据值  \n       combinators: [  \n {  \n   name: 'and',  \n   label: '且'  \n },  \n {  \n   name: 'or',  \n   label: '或'  \n }  \n       ]  \n       </code></pre>  <br>`,
         'en-US': ''
       },
       codeFiles: ['basic-usage.vue']
@@ -60,7 +62,7 @@ export default {
       },
       desc: {
         'zh-CN':
-          'config 配置添加 bindProps 属性可控制某一类组件的参数，中间操作符类组件暂不支持传参，具体配置见以下说明： <br>\n        <div class="tip custom-block">\n        <p class="custom-block-title">  bindProps 属性说明 </p>\n        leftSelect：左侧 Select 参数，统一控制左侧所有 Select <br>\n        select：右侧 Select 参数 <br>\n        input：输入框参数，包括 textarea <br>\n        numeric：计数器 <br>\n        date：日期选择器 <br>\n        time：时间选择器 <br>\n        radio：单选框 <br>\n        checkbox：多选框 <br>\n        </div> <br>\n        ',
+          'config 配置添加 bindProps 属性可控制某一类组件的参数，中间操作符类组件暂不支持传参，具体配置见以下说明： \n<div class="tip custom-block">\n<p class="custom-block-title">  bindProps 属性说明 </p>\nleftSelect：左侧 Select 参数，统一控制左侧所有 Select \nselect：右侧 Select 参数 \ninput：输入框参数，包括 textarea \nnumeric：计数器 \ndate：日期选择器 \ntime：时间选择器 \nradio：单选框 \ncheckbox：多选框 \n</div> \n',
         'en-US': ' '
       },
       codeFiles: ['sub-component-param.vue']