diff --git a/examples/docs/newsrc/utils/componentsDoc.js b/examples/docs/newsrc/utils/componentsDoc.js
index 10afff8790..e22b525cb9 100644
--- a/examples/docs/newsrc/utils/componentsDoc.js
+++ b/examples/docs/newsrc/utils/componentsDoc.js
@@ -1,12 +1,15 @@
export const apis = import.meta.glob('../../../sites/demos/apis/*.js', { eager: false })
export const getPath = (path) => {
- if (path.startsWith('grid-')) {
+ if (path === 'grid-select') {
+ return 'grid-select'
+ } else if (path.startsWith('grid-')) {
return 'grid'
} else if (path.startsWith('chart-')) {
return 'chart'
+ } else {
+ return path
}
- return path
}
export const getApisConfig = async (component, mode) => {
diff --git a/examples/sites/demos/apis/grid-select.js b/examples/sites/demos/apis/grid-select.js
index 0a4dddb43e..7636a3c53f 100644
--- a/examples/sites/demos/apis/grid-select.js
+++ b/examples/sites/demos/apis/grid-select.js
@@ -1,5 +1,5 @@
export default {
- mode: ['pc'],
+ mode: ['pc', 'mobile-first'],
apis: [
{
name: 'grid-select',
@@ -13,7 +13,7 @@ export default {
'zh-CN': '是否启用一键清除的功能',
'en-US': 'Whether to display the one click clear button, only applicable to radio selection'
},
- mode: ['pc'],
+ mode: ['pc', 'mobile-first'],
pcDemo: 'basic-usage'
},
{
@@ -24,7 +24,7 @@ export default {
'zh-CN': '是否可搜索',
'en-US': 'Is it searchable'
},
- mode: ['pc'],
+ mode: ['pc', 'mobile-first'],
pcDemo: 'remote'
},
{
@@ -35,7 +35,7 @@ export default {
'zh-CN': '自定义过滤方法',
'en-US': 'Custom filtering method'
},
- mode: ['pc'],
+ mode: ['pc', 'mobile-first'],
pcDemo: 'remote'
},
{
@@ -47,7 +47,7 @@ export default {
'zh-CN': '下拉表格时，内置表格组件的配置，用法同 Grid 组件。',
'en-US': ''
},
- mode: ['pc'],
+ mode: ['pc', 'mobile-first'],
pcDemo: 'basic-usage'
},
{
@@ -69,7 +69,7 @@ export default {
'zh-CN': '是否允许选择多个选项',
'en-US': 'Allow multiple options to be selected'
},
- mode: ['pc'],
+ mode: ['pc', 'mobile-first'],
pcDemo: 'remote'
},
{
@@ -81,7 +81,7 @@ export default {
'zh-CN': '单选配置项',
'en-US': 'Radio config'
},
- mode: ['pc'],
+ mode: ['pc', 'mobile-first'],
pcDemo: 'config'
},
{
@@ -92,7 +92,7 @@ export default {
'zh-CN': '是否为远程搜索',
'en-US': 'Is it a remote search'
},
- mode: ['pc'],
+ mode: ['pc', 'mobile-first'],
pcDemo: 'remote'
},
{
@@ -103,7 +103,7 @@ export default {
'zh-CN': '远程搜索的方法',
'en-US': 'Remote search methods'
},
- mode: ['pc'],
+ mode: ['pc', 'mobile-first'],
pcDemo: 'remote'
},
{
@@ -115,7 +115,7 @@ export default {
'en-US':
'When selecting multiple searchable options, do you still keep the current search keywords after selecting one option'
},
- mode: ['pc'],
+ mode: ['pc', 'mobile-first'],
pcDemo: 'remote'
},
{
@@ -127,7 +127,7 @@ export default {
'zh-CN': '多选配置项',
'en-US': 'Select config'
},
- mode: ['pc'],
+ mode: ['pc', 'mobile-first'],
pcDemo: 'config'
},
{
@@ -138,7 +138,7 @@ export default {
'zh-CN': '显示值字段',
'en-US': 'Show Value Fields'
},
- mode: ['pc'],
+ mode: ['pc', 'mobile-first'],
pcDemo: 'basic-usage'
},
{
@@ -149,7 +149,7 @@ export default {
'zh-CN': '绑定值字段',
'en-US': 'Bind Value Field'
},
- mode: ['pc'],
+ mode: ['pc', 'mobile-first'],
pcDemo: 'basic-usage'
}
]
diff --git a/examples/sites/demos/mobile-first/app/base-select/all-text.vue b/examples/sites/demos/mobile-first/app/base-select/all-text.vue
new file mode 100644
index 0000000000..fe5d90fbb3
--- /dev/null
+++ b/examples/sites/demos/mobile-first/app/base-select/all-text.vue
@@ -0,0 +1,43 @@
+
+
+
全选后，显示多个 tag
+
+
+
+
+
全选后，显示自定义的全部 Tag
+
+
+
+
+
场景 1：allow-create + filterable，点击创建条目
+
+
+
+
+
+
+
场景 2：allow-create + filterable + default-first-option，Enter 键创建条目
+
+
+
+
+
+
场景 1：默认不可搜索时，获取焦点不下拉
+
点击获取焦点
+
+
+
+
场景 2：设置不可搜索时，获取焦点并自动下拉
+
点击获取焦点
+
+
+
+
+
选中的值为： {{ value }}
+
+
场景 1：标签式
+
+
+
+
+
+
+
+
场景 2：配置式
+
+
+
+
+
+
+
+ {{ value }}
+
+
+
+
+ {{ cacheValue }}
+
+
+
+ 场景 1：单选，val 找不到匹配值，val 为： ,{{ val }}
+
+
+
+
+
+
+ 场景 2：多选，multiVal 找不到匹配值，multiVal 为：{{ multiVal }}
+
+
+
+
+
+
+
场景 1：collapse-tags 折叠
+
+
+
+
+
+
+
场景 2：hover-expand 折叠
+
+
+
+
+
+
+
+
场景 1：多选复制单个标签
+
+
+
+
场景 2：多选一键复制所有标签
+
+
+
+
场景 3：多选设置复制文本分隔符
+
+
+
+
复制到此处：
+
+
+
场景 1：单选无需配置可复制
+
+
场景 2：单选可搜索配置 allow-copy 可复制
+
+
+
+
场景 3：单选远程搜索配置 allow-copy 可复制
+
+
+
+
粘贴至此处：
+
+
+
+
场景 1：下拉禁用
+
+
+
+
+
+
+
场景 2：多选 + 下拉某项禁用
+
+
+
+
+
+
+
+
场景 3：单选 + 下拉某项禁用
+
+
+
+
+
+
+
+
场景 4：多选 + 禁用项默认选中
+
+
+
+
+
+
+
+
场景 5：多选 hover-expand 模式下禁用
+
+
+
+
+
+
+
单选
+
+
+
+
+
+
+
多选
+
+
+
+
+
+
场景 1：组件默认过滤
+
+
+
+
+
场景 2：自定义过滤
+
+
+
+
+
+
场景 1：过滤器模式 (默认)
+
+
+
+
+
+
+
+
场景 2：过滤器模式 (透明)
+
+
+
+
+
+
场景 1：默认下拉弹框宽度由内容撑开：
+
+
+
+
场景 2：下拉弹框宽度与输入框一致：
+
+
+
+
+
+
场景 1：默认 focus() 后仅聚焦，不下拉
+
+
点击获取焦点
+
点击失去焦点
+
+
+
+
+
+
+
+
场景 2：配置 filterable，focus() 后聚焦并自动下拉
+
+
点击获取焦点
+
点击失去焦点
+
+
+
+
+
+
+
+
场景 3：配置 automaticDropdown，focus() 后聚焦并自动下拉
+
+
点击获取焦点
+
点击失去焦点
+
+
+
+
+
+
+
+
+
+
+ {{ cacheValue }}
+
+
+
display-only/{{ displayOnly }}
+
+
+
边框为表单范围
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
场景 1：多选
+
+
+
+
+
+
+
+
场景 2：必选
+
+
+
+
+
+
+
+
+
场景 3：配置式必选
+
+
+
+
+
+
场景 4：多选个数限制
+
+
+
+
+
+
+
+
场景 5：自定义图标 + 自定义样式
+
+
+
+
+
+
+
场景 1：默认
+
+
+
+
场景 2：自定义空数据文本
+
+
+
+
+
场景 1：分组 + 多选 + 面板可搜索
+
+
+
+
+
+
+
+
+
场景 2：单选分组
+
+
+
+
+
+
+
+
+
场景 3：分组 + 多选
+
+
+
+
+
+
+
+
+
场景 4：分组 + 多选 + 可搜索
+
+
+
+
+
+
+
+
场景 1：远程搜索 (单选)
+
+
+
+
+
+
+
场景 2：远程搜索多选 + 保留搜索关键字
+
+
+
+
+
+
+
场景 3：获焦时触发远程搜索
+
+
+
+
+
+
+
场景 4：失焦清空查询数据，显示下拉图标
+
+
+
+
+
+
+
场景 5：聚焦时触发搜索，失焦清空查询数据，显示下拉图标
+
+
+
+
+
+
+
+
场景 6：远程搜索配置 trim 属性去除绑定值空格
+
+
trim 为：{{ trim }}
+
改变成有空格的值
+
重置绑定值
+
+
+
+
+
+
+
medium
+
+
默认
+
+
small
+
+
mini
+
+
+
场景 1：带标签和提示信息
+
+
+
+
+
+ {{ item.label }}
+ {{ item.tag }}
+
+
+
+ {{ item.label }}
+ {{ item.tag }}
+
+
+
+
+
+
场景 2：选项双行
+
+
+
+
+
+ {{ item.label }}
+
+
{{ item.desc }}
+
+
+
+
+ ![]()
+ {{ item.label }}
+
+
+
+
+
+
+
+ ![]()
+ {{ item.label }}
+
+
+
场景 1：下拉树单选
+
+
+
+
+
+ 场景 2：下拉树多选
+
+
+
+
+
+ 场景 3：下拉树可搜索
+
+
+
+
+
+
+
+
+
+
diff --git a/examples/sites/demos/mobile-first/app/base-select/slot-prefix.vue b/examples/sites/demos/mobile-first/app/base-select/slot-prefix.vue
new file mode 100644
index 0000000000..cffc6130c7
--- /dev/null
+++ b/examples/sites/demos/mobile-first/app/base-select/slot-prefix.vue
@@ -0,0 +1,39 @@
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/examples/sites/demos/mobile-first/app/base-select/slot-reference.vue b/examples/sites/demos/mobile-first/app/base-select/slot-reference.vue
new file mode 100644
index 0000000000..68e4fc1281
--- /dev/null
+++ b/examples/sites/demos/mobile-first/app/base-select/slot-reference.vue
@@ -0,0 +1,41 @@
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/examples/sites/demos/mobile-first/app/base-select/tag-type.vue b/examples/sites/demos/mobile-first/app/base-select/tag-type.vue
new file mode 100644
index 0000000000..9a22fbe53d
--- /dev/null
+++ b/examples/sites/demos/mobile-first/app/base-select/tag-type.vue
@@ -0,0 +1,36 @@
+
+
+
+
+
+
+
+
+
diff --git a/examples/sites/demos/mobile-first/app/base-select/webdoc/base-select.cn.md b/examples/sites/demos/mobile-first/app/base-select/webdoc/base-select.cn.md
new file mode 100644
index 0000000000..7e9241f665
--- /dev/null
+++ b/examples/sites/demos/mobile-first/app/base-select/webdoc/base-select.cn.md
@@ -0,0 +1,7 @@
+---
+title: BaseSelect 基础选择器
+---
+
+# BaseSelect 基础选择器
+
+BaseSelect 基础选择器是 Select 组件的基础版本，用法和 Select 一样，但是不包含下拉树和下拉表格功能。BaseSelect 组件的包体积更小，如果你不需要下拉树和下拉表格功能，推荐使用 BaseSelect 组件，而不是 Select 组件。
diff --git a/examples/sites/demos/mobile-first/app/base-select/webdoc/base-select.en.md b/examples/sites/demos/mobile-first/app/base-select/webdoc/base-select.en.md
new file mode 100644
index 0000000000..f6b9dc7330
--- /dev/null
+++ b/examples/sites/demos/mobile-first/app/base-select/webdoc/base-select.en.md
@@ -0,0 +1,7 @@
+---
+title: BaseSelect
+---
+
+# BaseSelect
+
+BaseSelect is a UI component that displays and selects data from a drop-down list box.
diff --git a/examples/sites/demos/mobile-first/app/base-select/webdoc/base-select.js b/examples/sites/demos/mobile-first/app/base-select/webdoc/base-select.js
new file mode 100644
index 0000000000..6b19598d87
--- /dev/null
+++ b/examples/sites/demos/mobile-first/app/base-select/webdoc/base-select.js
@@ -0,0 +1,590 @@
+export default {
+ column: '2',
+ owner: '',
+ show: true,
+ cloud: true,
+ demos: [
+ {
+ demoId: 'basic-usage',
+ name: {
+ 'zh-CN': '基本用法',
+ 'en-US': 'Basic Usage'
+ },
+ desc: {
+ 'zh-CN':
+ '通过 v-model 设置被选中的 tiny-option 的 value 属性值。
\n',
+ 'en-US':
+ 'Set the value attribute value of the selected tiny-option by v-model.
\n'
+ },
+ codeFiles: ['basic-usage.vue']
+ },
+ {
+ demoId: 'multiple',
+ name: {
+ 'zh-CN': '多选',
+ 'en-US': 'Multiple'
+ },
+ desc: {
+ 'zh-CN': `
+ 通过 multiple 属性启用多选功能，此时 v-model 的值为当前选中值所组成的数组。默认选中值会以标签（Tag 组件）展示。
+ 通过 multiple-limit 属性限制最多可选择的个数，默认为 0 不限制。
+ 通过 show-limit-text 属性限制最多可选择的个数，默认为 0 不限制。
+ 多选时，通过给 option 标签配置 required 或者在 options 配置项中添加 required 属性，来设置必选选项。
+ 通过 dropdown-icon 属性可自定义下拉图标，drop-style 属性可自定义下拉选项样式。
+ `,
+ 'en-US': `
+ Use the multiple attribute to enable the multi-selection function. In this case, the value of v-model is an array of selected values. By default, the selected value is displayed as a tag (Tag component).
+ The multiple-limit attribute is used to limit the maximum number of users that can be selected. The default value is 0.
+ The show-limit-text attribute is used to limit the maximum number of users that can be selected. The default value is 0, which is not limited.
+ When multiple options are selected, you can set required for the option tag or add the required attribute to the options configuration item to set mandatory options.
+ You can use the dropdown-icon attribute to customize the drop-down icon, and the drop-style attribute to customize the style of the drop-down options.
+ `
+ },
+ codeFiles: ['multiple.vue']
+ },
+ {
+ demoId: 'collapse-tags',
+ name: {
+ 'zh-CN': '折叠标签',
+ 'en-US': 'Collapse tags'
+ },
+ desc: {
+ 'zh-CN':
+ '通过 collapse-tags 属性设置选中多个选项时，多个标签缩略展示。设置 show-proportion 可展示当前选中条数和总条数占比，默认值为 false 。设置 hover-expand 为 true ，默认折叠标签，hover 时展示所有标签。标签内容超长时超出省略，hover 标签时展示 tooltip 。
\n',
+ 'en-US':
+ 'When multiple options are selected through the collapse-tags attribute settings, multiple tags are displayed in a thumbnail. Set show-proportion to display the current number of selected items and the proportion of total items, with a default value of false . By setting hover-expand to true , the tags are collapsed by default, and all tags are displayed when hovering. If the content of the tag is too long, it should be omitted. When hovering the tag, a tooltip should be displayed
'
+ },
+ codeFiles: ['collapse-tags.vue']
+ },
+ {
+ demoId: 'multiple-mix',
+ name: {
+ 'zh-CN': '仅显示',
+ 'en-US': 'Display only'
+ },
+ desc: {
+ 'zh-CN':
+ 'Form 表单内 Select 组件不同尺寸设置 hover-expand 和 display-only 属性的综合应用。
\n',
+ 'en-US':
+ 'Comprehensive application of the hover-expand and display-only attributes of the Select component in the form.
\n'
+ },
+ codeFiles: ['multiple-mix.vue']
+ },
+ {
+ demoId: 'tag-type',
+ name: {
+ 'zh-CN': '标签类型',
+ 'en-US': 'Tag type'
+ },
+ desc: {
+ 'zh-CN':
+ '通过 tag-type 属性设置标签类型，同 Tag 组件的 type 属性。可选值：success / info / warning / danger。
\n',
+ 'en-US':
+ 'Set the label type through the tag-type attribute, which is the same as the type attribute of the Tag component. Optional values: success/info/warning/danger.
\n'
+ },
+ codeFiles: ['tag-type.vue']
+ },
+ {
+ demoId: 'size',
+ name: {
+ 'zh-CN': '尺寸',
+ 'en-US': 'Size'
+ },
+ desc: {
+ 'zh-CN': '通过 size 属性设置输入框尺寸，可选值：medium / small / mini。
',
+ 'en-US':
+ 'Set the input box size through the size attribute, with optional values of medium / small / mini.
'
+ },
+ codeFiles: ['size.vue']
+ },
+ {
+ demoId: 'disabled',
+ name: {
+ 'zh-CN': '禁用',
+ 'en-US': 'Disabled'
+ },
+ desc: {
+ 'zh-CN': '通过 disabled 属性设置下拉或者下拉项的禁用状态。
\n',
+ 'en-US':
+ 'Set the disabled status of the dropdown or dropdown item through the disabled attribute.
\n'
+ },
+ codeFiles: ['disabled.vue']
+ },
+ {
+ demoId: 'clearable',
+ name: {
+ 'zh-CN': '可清除',
+ 'en-US': 'Clearable'
+ },
+ desc: {
+ 'zh-CN': '通过 clearable 属性启用一键清除选中值的功能。仅适用于单选。
\n',
+ 'en-US':
+ 'Enable the function of clearing selected values with one click through theclearable attribute. Only applicable for single selection.
\n'
+ },
+ codeFiles: ['clearable.vue']
+ },
+ {
+ demoId: 'filter-method',
+ name: {
+ 'zh-CN': '可搜索',
+ 'en-US': 'Filterable'
+ },
+ desc: {
+ 'zh-CN':
+ '通过 filterable 属性启用搜索功能。filter-method 自定义过滤方法。 no-match-text 属性自定义与搜索条件无匹配项时显示的文字。
\n',
+ 'en-US':
+ 'Enable search functionality through the filterable attribute filter-method customize the filtering method no-match-text the text displayed when there is no match between attribute customization and search criteria.
\n'
+ },
+ codeFiles: ['filter-method.vue']
+ },
+ {
+ demoId: 'remote-method',
+ name: {
+ 'zh-CN': '远程搜索',
+ 'en-US': 'Remote search'
+ },
+ desc: {
+ 'zh-CN':
+ '通过 filterable 和 remote 和 remote-method 这三个属性同时使用设置远程搜索。通过 reserve-keyword 属性设置多选可搜索时，可以在选中一个选项后保留当前的搜索关键词。
\n通过 trim 属性去除双向数据绑定值空格。
',
+ 'en-US':
+ 'Set remote search through the use of three attributes:filterable,remote, and remote-method. When setting multiple searchable options through the reserve-keyword attribute, the current search keyword can be retained after selecting an option.
\n Removes spaces from bidirectional data binding values through the trim attribute.
'
+ },
+ codeFiles: ['remote-method.vue']
+ },
+ {
+ demoId: 'allow-create',
+ name: {
+ 'zh-CN': '创建条目',
+ 'en-US': 'Create Entry'
+ },
+ desc: {
+ 'zh-CN':
+ '通过 allow-create 和 filterable 属性，设置当搜索字段不在已有选项中时，可创建为新的条目。结合 default-first-option 属性，可以按 Enter 键选中第一个匹配项。
\n设置 top-create 属性后，Select 下拉框中会显示新增按钮，点击按钮会抛出一个 top-create-click 事件，可以在事件中自定义一些行为。
',
+ 'en-US':
+ 'By using the allow-create and filterable attributes, the search field can be created as a new entry when it is not in an existing option. By combining the default-first-option attribute, you can press the Enter key to select the first matching option.
\n'
+ },
+ codeFiles: ['allow-create.vue']
+ },
+ {
+ demoId: 'map-field',
+ name: {
+ 'zh-CN': '映射字段',
+ 'en-US': 'Map Fields'
+ },
+ desc: {
+ 'zh-CN': '通过 text-field 设置显示文本字段，value-field设置绑定值字段。',
+ 'en-US':
+ 'Set the display text field by text-field, and set the binding value field by value-field.
\n'
+ },
+ codeFiles: ['map-field.vue']
+ },
+ {
+ demoId: 'popup-style-position',
+ name: {
+ 'zh-CN': '弹框样式与定位',
+ 'en-US': 'Bullet Box Style and Positioning'
+ },
+ desc: {
+ 'zh-CN':
+ '通过 popper-class 属性设置下拉弹框的类名，可自定义样式。placement设置弹出位置。popper-append-to-body 设置是否将弹框 dom 元素插入至 body 元素，默认为 true。
\n',
+ 'en-US':
+ 'You can customize the style by setting the class name of the dropdown pop-up box through the popper-class attribute placement set the pop-up position popper-append-to-body set whether to insert the pop-up dom element into the body element, default to true.
\n'
+ },
+ codeFiles: ['popup-style-position.vue']
+ },
+ {
+ demoId: 'show-alloption',
+ name: {
+ 'zh-CN': '不展示全选',
+ 'en-US': 'Hide Select All'
+ },
+ desc: {
+ 'zh-CN': '通过 show-alloption 属性设置多选时不展示 全选 选项，默认展示。
\n',
+ 'en-US':
+ 'By setting the show-allocation attribute, do not display the select all option when multiple selections are made, and display by default.
\n'
+ },
+ codeFiles: ['show-alloption.vue']
+ },
+ {
+ demoId: 'clear-no-match-value',
+ name: {
+ 'zh-CN': '自动清除不匹配的值',
+ 'en-US': 'Clear mismatch value'
+ },
+ desc: {
+ 'zh-CN':
+ '通过 clear-no-match-value 属性设置 v-model 的值在 options 中无法找到匹配项的值会被自动清除，默认不清除。
\n',
+ 'en-US':
+ 'By setting the value of the v-model through the clear-no-match-valueattribute, if a matching value cannot be found in the options, it will be automatically cleared and will not be cleared by default.
\n'
+ },
+ codeFiles: ['clear-no-match-value.vue']
+ },
+ {
+ demoId: 'optimization',
+ name: {
+ 'zh-CN': '虚拟滚动',
+ 'en-US': 'Virtual scrolling'
+ },
+ desc: {
+ 'zh-CN':
+ '通过 optimization 开启大数据虚拟滚动功能。仅配置式（使用 options 属性）时支持。\n多选模式下，最大选中项数 multiple-limit 默认值为 20，如果选中项比较多，建议开启 collapse-tags 进行折叠显示。
\n',
+ 'en-US':
+ 'Enable the big data virtual scrolling function through optimization. Supported only when configuring (using the options attribute). In n multiple selection mode, the maximum number of selected items is multiple-limit with a default value of 20. If there are many selected items, it is recommended to turn on collapse-tags for collapsed display.
\n'
+ },
+ codeFiles: ['optimization.vue']
+ },
+ {
+ demoId: 'option-group',
+ name: {
+ 'zh-CN': '分组',
+ 'en-US': 'Group'
+ },
+ desc: {
+ 'zh-CN':
+ '使用 tiny-option-group 组件对备选项进行分组。通过 label 属性设置分组名，disabled 属性设置该分组下所有选项为禁用。
\n',
+ 'en-US':
+ 'Use the tiny-option-group component to group alternative options. Set the group name through the label attribute, and set all options under the group to disabled through the disabled attribute.
\n'
+ },
+ codeFiles: ['option-group.vue']
+ },
+ {
+ demoId: 'copy-single',
+ name: {
+ 'zh-CN': '单选可复制',
+ 'en-US': 'Single choice replicable'
+ },
+ desc: {
+ 'zh-CN': '通过 allow-copy 属性设置单选可搜索时，鼠标可滑动选中并复制输入框的内容。
\n',
+ 'en-US':
+ 'When setting radio searchable through the allow-copy attribute, the mouse can slide to select and copy the content of the input box.
\n'
+ },
+ codeFiles: ['copy-single.vue']
+ },
+ {
+ demoId: 'copy-multi',
+ name: {
+ 'zh-CN': '多选可复制',
+ 'en-US': 'Multiple choices can be copied'
+ },
+ desc: {
+ 'zh-CN':
+ '通过 tag-selectable 属性设置输入框中标签可通过鼠标选择，然后按 Ctrl + C 或右键进行复制。copyable 属性设置启用一键复制所有标签的文本内容并以逗号分隔。
\n',
+ 'en-US':
+ 'By setting the tag-selectable attribute in the input box, the label can be selected with the mouse, and then copied by pressing Ctrl+C or right-click copyable attribute settings enable one click copying of all label text content separated by commas.
\n'
+ },
+ codeFiles: ['copy-multi.vue']
+ },
+ {
+ demoId: 'native-properties',
+ name: {
+ 'zh-CN': '原生属性',
+ 'en-US': 'Native properties'
+ },
+ desc: {
+ 'zh-CN':
+ '通过 name / placeholder / autocomplete 属性设置下拉组件内置 Input 的原生属性。
\n',
+ 'en-US':
+ 'Set the native properties of the built-in Input in the dropdown component through the name / placeholder / autocomplete attribute settings.
\n'
+ },
+ codeFiles: ['native-properties.vue']
+ },
+ {
+ demoId: 'binding-obj',
+ name: {
+ 'zh-CN': '绑定值为对象',
+ 'en-US': 'Bind value as object'
+ },
+ desc: {
+ 'zh-CN': '通过 value-key 属性设置 value 唯一标识的键名，绑定值可以设置为对象。
\n',
+ 'en-US':
+ 'By using the value-key attribute to set the key name uniquely identified by value, the binding value can be set as an object.
\n'
+ },
+ codeFiles: ['binding-obj.vue']
+ },
+ {
+ demoId: 'no-data-text',
+ name: {
+ 'zh-CN': '空数据文本',
+ 'en-US': 'Empty data text'
+ },
+ desc: {
+ 'zh-CN':
+ '通过 no-data-text 属性设置选项为空时显示的文本，show-empty-image 属性设置是否显示空数据图片，默认不显示。
\n',
+ 'en-US':
+ 'By setting theno-data-text attribute to display text when the option is empty, and by setting the show-empty-image attribute to display empty data images, it is not displayed by default.
\n'
+ },
+ codeFiles: ['no-data-text.vue']
+ },
+ {
+ demoId: 'manual-focus-blur',
+ name: {
+ 'zh-CN': '手动聚焦失焦',
+ 'en-US': 'Manual focusing out of focus'
+ },
+ desc: {
+ 'zh-CN': '通过 focus() 方法聚焦，blur()方法失焦。
\n',
+ 'en-US':
+ 'Focusing is achieved through the focus() method, while the blur() method is out of focus.
\n'
+ },
+ codeFiles: ['manual-focus-blur.vue']
+ },
+ {
+ demoId: 'automatic-dropdown',
+ name: {
+ 'zh-CN': '获焦即弹出',
+ 'en-US': 'Eject upon capture of focus'
+ },
+ desc: {
+ 'zh-CN': '通过 automatic-dropdown 设置不可搜索的 select 获得焦点并自动弹出选项菜单。
\n',
+ 'en-US':
+ 'Set non searchable select to obtain focus and automatically pop up an option menu through automatic-dropdown.
\n'
+ },
+ codeFiles: ['automatic-dropdown.vue']
+ },
+ {
+ demoId: 'is-drop-inherit-width',
+ name: {
+ 'zh-CN': '继承宽度',
+ 'en-US': 'Inherit width'
+ },
+ desc: {
+ 'zh-CN':
+ '通过 is-drop-inherit-width 属性设置下拉弹框的宽度是否跟输入框保持一致。默认超出输入框宽度时由内容撑开。
\n',
+ 'en-US':
+ 'Set whether the width of the dropdown pop-up box is consistent with the input box through the is-drop-inherit-width attribute. By default, when the width of the input box is exceeded, it is supported by the content.
\n'
+ },
+ codeFiles: ['is-drop-inherit-width.vue']
+ },
+ {
+ demoId: 'hide-drop',
+ name: {
+ 'zh-CN': '隐藏下拉',
+ 'en-US': 'Hide drop'
+ },
+ desc: {
+ 'zh-CN': '通过 hide-drop 属性设置下拉列表不显示。
\n',
+ 'en-US': 'Set the drop-down list to not display through the hide-drop attribute.
'
+ },
+ codeFiles: ['hide-drop.vue']
+ },
+ {
+ demoId: 'filter-mode',
+ name: {
+ 'zh-CN': '过滤器模式',
+ 'en-US': 'Filter mode'
+ },
+ desc: {
+ 'zh-CN':
+ '通过 shape 属性设置为 filter 切换至过滤器模式。过滤器模式下可传入 label 显示标题，tip 显示提示信息，clearable 是否显示清除按钮，placeholder 显示占位符。
\n通过 blank 属性将过滤器背景设置为透明。
',
+ 'en-US':
+ 'Set the shape attribute to filter to switch to filter mode. In filter mode, you can transfer the label display title, tip display prompt information, clearable whether to display the clear button, and placeholder display placeholder.
\nSet the filter background to transparent with the blank attribute.
'
+ },
+ codeFiles: ['filter-mode.vue']
+ },
+ {
+ demoId: 'cache-usage',
+ name: {
+ 'zh-CN': '自动缓存',
+ 'en-US': 'Automatic caching'
+ },
+ desc: {
+ 'zh-CN': '通过 cache-op 开启缓存功能，仅配置式生效。
\n',
+ 'en-US': 'Enable cache function through cache-op, only configuration mode takes effect
'
+ },
+ codeFiles: ['cache-usage.vue']
+ },
+ {
+ demoId: 'memoize-usage',
+ name: {
+ 'zh-CN': '手动缓存',
+ 'en-US': 'Manual caching'
+ },
+ desc: {
+ 'zh-CN': '使用 tiny-option 组件，则需要手动加入缓存功能。
\n',
+ 'en-US': 'If using the tiny-option component, you need to manually add caching functionality.
'
+ },
+ codeFiles: ['memoize-usage.vue']
+ },
+ {
+ demoId: 'slot-default',
+ name: {
+ 'zh-CN': '选项插槽',
+ 'en-US': 'Option slot'
+ },
+ desc: {
+ 'zh-CN': '
通过 tiny-option 的 default 插槽自定义选项的 HTML 模板。
\n',
+ 'en-US': 'HTML template for customizing options through the default slot of tiny-option.
'
+ },
+ codeFiles: ['slot-default.vue']
+ },
+ {
+ demoId: 'slot-footer',
+ name: {
+ 'zh-CN': '底部插槽',
+ 'en-US': 'Footer slot'
+ },
+ desc: {
+ 'zh-CN': '通过 footer 插槽自定义下拉弹框底部的 HTML 模板。
\n',
+ 'en-US':
+ 'Customize the HTML template at the bottom of the dropdown pop-up box through the footer slot.
'
+ },
+ codeFiles: ['slot-footer.vue']
+ },
+ {
+ demoId: 'slot-empty',
+ name: {
+ 'zh-CN': '空数据插槽',
+ 'en-US': 'Empty data slot'
+ },
+ desc: {
+ 'zh-CN': '通过 empty 插槽自定义没有选项列表时显示的 HTML 模板。
\n',
+ 'en-US':
+ 'Customize the HTML template displayed when there is no option list through the empty slot.
'
+ },
+ codeFiles: ['slot-empty.vue']
+ },
+ {
+ demoId: 'slot-prefix',
+ name: {
+ 'zh-CN': '输入框前缀插槽',
+ 'en-US': 'Predix slot'
+ },
+ desc: {
+ 'zh-CN': '通过 prefix 插槽自定义输入框前缀的 HTML 模板。
\n',
+ 'en-US': 'Customize the HTML template for the input box prefix through the prefix slot.
\n'
+ },
+ codeFiles: ['slot-prefix.vue']
+ },
+ {
+ demoId: 'slot-reference',
+ name: {
+ 'zh-CN': '触发源插槽',
+ 'en-US': 'Reference slot'
+ },
+ desc: {
+ 'zh-CN': '通过 reference 插槽自定义触发源的 HTML 模板。
\n',
+ 'en-US': 'Customize the HTML template of the trigger source through the reference slot.
'
+ },
+ codeFiles: ['slot-reference.vue']
+ },
+ {
+ demoId: 'slot-panel',
+ name: {
+ 'zh-CN': '下拉面板插槽',
+ 'en-US': 'Panel slot'
+ },
+ desc: {
+ 'zh-CN': '通过 panel 插槽自定义下拉面板的内容。
\n',
+ 'en-US': 'Customize content of the panel through the panel slot.
'
+ },
+ codeFiles: ['slot-panel.vue']
+ },
+ {
+ demoId: 'slot-label',
+ name: {
+ 'zh-CN': '标签插槽',
+ 'en-US': 'Reference slot'
+ },
+ desc: {
+ 'zh-CN': '通过 label 插槽自定义多选选中标签的 HTML 模板。
\n',
+ 'en-US':
+ 'Customize the HTML template for multiple-choice selected labels through the label slot.
'
+ },
+ codeFiles: ['slot-label.vue']
+ },
+ {
+ demoId: 'all-text',
+ name: {
+ 'zh-CN': '自定义全部文本',
+ 'en-US': 'Custom All Text'
+ },
+ desc: {
+ 'zh-CN': '当下拉中显示全部时，通过all-text 属性自定义全部的显示文本',
+ 'en-US':
+ 'Use the all-text attribute to customize all displayed text when all is displayed in the drop-down list box.'
+ },
+ codeFiles: ['all-text.vue']
+ },
+ {
+ demoId: 'events',
+ name: {
+ 'zh-CN': '事件',
+ 'en-US': 'Events'
+ },
+ desc: {
+ 'zh-CN':
+ '事件说明
\n
change：监听 v-model 的值发生变化。
\n
clear：监听单选时，点击清空按钮。
\n
blur：监听 input 失去焦点。
\n
focus：监听 input 获得焦点。
\n
visible-change：监听下拉框可见状态的变化。
\n
remove-tag：监听多选移除选中的标签。
\n
dropdown-click：监听下拉图标的点击事件。
\n
Event Description
\n
change: Listen for changes in the value of the v-model.
clear: When listening to radio selection, click the clear button.
\n
blur: Listening to input losing focus.
\n
focus: Listening for input to gain focus.
\n
visible-change: Listen for changes in the visible status of the dropdown box
\n
remove-tag: Listen for multiple selections to remove selected tags.
\n
dropdown-click: Listens to the click event of the drop-down icon.
\n
+
场景 1：单选
+
+
+
+
+
场景 2：多选
+
+
+
+
场景 1：单选
+
+
+
+
场景 2：多选
+
+
+
+
场景 1：远程搜索初始化查询（单选）
+
+
+
+
+
场景 2：远程搜索初始化查询（多选）
+
+
+
+
+
+
+
+
+
+
diff --git a/examples/sites/demos/mobile-first/app/grid-select/remote.vue b/examples/sites/demos/mobile-first/app/grid-select/remote.vue
new file mode 100644
index 0000000000..64ade8ce11
--- /dev/null
+++ b/examples/sites/demos/mobile-first/app/grid-select/remote.vue
@@ -0,0 +1,90 @@
+
+
+
场景 1：单选
+
+
+
+
场景 2：多选
+
+
+
通过 grid-op 设置表格列与数据，v-model 绑定选中值。
',
+ 'en-US':
+ 'Configure the internal grid via grid-op and bind the selection with v-model.
'
+ },
+ codeFiles: ['basic-usage.vue']
+ },
+ {
+ demoId: 'config',
+ name: {
+ 'zh-CN': '禁用选项',
+ 'en-US': 'Disable option'
+ },
+ desc: {
+ 'zh-CN':
+ '通过 radio-config / select-config 的 checkMethod 控制某些行不可选，并支持 trigger: row 开启整行点击。
',
+ 'en-US':
+ 'Use radio-config / select-config with checkMethod to disable rows and enable row-click selection.
'
+ },
+ codeFiles: ['config.vue']
+ },
+ {
+ demoId: 'remote',
+ name: {
+ 'zh-CN': '远程搜索',
+ 'en-US': 'Remote'
+ },
+ desc: {
+ 'zh-CN':
+ '配合 remote、remote-method 与 reserve-keyword 实现远程搜索，并分别展示单选与多选场景。
',
+ 'en-US':
+ 'Demonstrates remote searching with remote, remote-method and keyword reservation for both single and multiple selection.
'
+ },
+ codeFiles: ['remote.vue']
+ },
+ {
+ demoId: 'init-query',
+ name: {
+ 'zh-CN': '表格初始化查询',
+ 'en-US': 'Init query'
+ },
+ desc: {
+ 'zh-CN': '利用 init-query 在远程模式下初始化表格数据，并展示单选与多选的默认值回显。
',
+ 'en-US':
+ 'Loads remote data at startup via init-query and shows how default values are rendered for both modes.
'
+ },
+ codeFiles: ['init-query.vue']
+ },
+ {
+ demoId: 'extra-query-params',
+ name: {
+ 'zh-CN': '表格初始化查询传参',
+ 'en-US': 'Extra query params'
+ },
+ desc: {
+ 'zh-CN':
+ '通过 extra-query-params 将父级选择结果传递给子级下拉表格，实现级联查询与选项联动。
',
+ 'en-US':
+ 'Shows how extra-query-params passes parent selections to a child dropdown to build cascading queries.
'
+ },
+ codeFiles: ['extra-query-params.vue']
+ },
+ {
+ demoId: 'radio-bigdata',
+ name: {
+ 'zh-CN': '下拉表格大数据',
+ 'en-US': 'Large dataset'
+ },
+ desc: {
+ 'zh-CN': '一次性加载数百条记录，结合 Grid 的虚拟滚动仍可保持顺畅的选择体验。
',
+ 'en-US':
+ 'Loads hundreds of rows to illustrate how TinyGrid’s virtual scrolling keeps the dropdown responsive.
'
+ },
+ codeFiles: ['radio-bigdata.vue']
+ }
+ ]
+}
diff --git a/examples/sites/demos/mobile-first/menus.js b/examples/sites/demos/mobile-first/menus.js
index 060e1e2a99..23cdc1df6a 100644
--- a/examples/sites/demos/mobile-first/menus.js
+++ b/examples/sites/demos/mobile-first/menus.js
@@ -73,6 +73,19 @@ export const cmpMenus = [
{ name: 'Select', nameCn: '选择器', key: 'select' },
{ name: 'SelectMobile', nameCn: '面板选择器', key: 'select-mobile' },
{ name: 'SelectView', nameCn: '页面选择器', key: 'select-view' },
+ {
+ 'name': 'BaseSelect',
+ 'nameCn': '基础选择器',
+ 'key': 'base-select'
+ },
+ {
+ name: 'GridSelect',
+ nameCn: '下拉表格选择器',
+ key: 'grid-select',
+ meta: {
+ experimental: '3.27.0'
+ }
+ },
{ name: 'Slider', nameCn: '滑块', key: 'slider' },
{ name: 'SliderButton', nameCn: '滑动按钮组', key: 'slider-button' },
{ name: 'Switch', nameCn: '开关', key: 'switch' },
diff --git a/examples/sites/demos/pc/app/grid-select/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/grid-select/basic-usage-composition-api.vue
index 3ac081c4ad..18eeef572e 100644
--- a/examples/sites/demos/pc/app/grid-select/basic-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid-select/basic-usage-composition-api.vue
@@ -1,5 +1,16 @@
+ 场景 1：单选
+
+
+ 场景 2：多选
+