docs(carousel/color-picker/color-select-panel/config-provider/crop/divider/link-menu/slide-bar/toggle-menu/user-contact/user-head/):update text correction description (#1027)
* docs(fall-menu):[fall-menu]text correction * docs(fall-menu):[fall-menu]text correction * docs(fall-menu):[fall-menu]text correction * test(fall-menu):[fall-menu]update fall-menu E2E test * test(fall-menu)[fall-menu] update fall-menu E2E test * test(fall-menu)[fall-menu] update fall-menu E2E test * test(fall-menu)[fall-menu] update fall-menu E2E test * test(fall-menu)[fall-menu] update fall-menu E2E test * test(fall-menu)[fall-menu] update fall-menu E2E test * test(fall-menu)[fall-menu] update fall-menu E2E test * test(fall-menu)[fall-menu] update fall-menu E2E test * test(fall-menu)[fall-menu] update fall-menu E2E test * test(fall-menu)[fall-menu] update fall-menu E2E test * test(fall-menu)[fall-menu] update fall-menu E2E test * docs(carousel/color-picker/color-select-panel/config-provider/crop/divider/link-menu/slide-bar/toggle-menu/user-contact/user-head/):update text description * docs(carousel/color-picker/color-select-panel/config-provider/crop/divider/link-menu/slide-bar/toggle-menu/user-contact/user-head/):update text description * docs(carousel/color-picker/color-select-panel/config-provider/crop/divider/link-menu/slide-bar/toggle-menu/user-contact/user-head/):update text description * docs(carousel/color-picker/color-select-panel/config-provider/crop/divider/link-menu/slide-bar/toggle-menu/user-contact/user-head/):update text description * docs(carousel/color-picker/color-select-panel/config-provider/crop/divider/link-menu/slide-bar/toggle-menu/user-contact/user-head/):update text description * docs(carousel/color-picker/color-select-panel/config-provider/crop/divider/link-menu/slide-bar/toggle-menu/user-contact/user-head/):update text description * docs(carousel/color-picker/color-select-panel/config-provider/crop/divider/link-menu/slide-bar/toggle-menu/user-contact/user-head/):update text description * docs(carousel/color-picker/color-select-panel/config-provider/crop/divider/link-menu/slide-bar/toggle-menu/user-contact/user-head/):update text description * docs(carousel/color-picker/color-select-panel/config-provider/crop/divider/link-menu/slide-bar/toggle-menu/user-contact/user-head/):update text description
This commit is contained in:
James
GitHub
parent
5c245c648b
commit
1080a9122b
|
|
@ -5,7 +5,12 @@ export default {
|
|||
{
|
||||
'demoId': 'basic-usage',
|
||||
'name': { 'zh-CN': '基本用法', 'en-US': 'Basic Usage' },
|
||||
'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example.' },
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
'通过<code>arrow</code>属性设置左右箭头切换效果，<code>loop</code>属性是否循环显示，<code>autoplay</code>属性自动切换。',
|
||||
'en-US':
|
||||
'Set the left and right arrow switching effect through the<code>arrow</code>attribute, check whether the<code>loop</code>attribute is displayed in a loop, and automatically switch the<code>autoplay</code>attribute.'
|
||||
},
|
||||
'codeFiles': ['basic-usage.vue']
|
||||
},
|
||||
{
|
||||
|
|
@ -13,7 +18,7 @@ export default {
|
|||
'name': { 'zh-CN': '指示器和触发方式', 'en-US': 'Indicator and Trigger Mode' },
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
'<p>走马灯指示器默认显示在幻灯片内容上，配置 <code>indicator-position</code> 为 outside 后，将显示在外部。\n配置 <code>trigger</code> 为 click ，可以修改指示器触发方式为单击，默认鼠标悬停到指示器时，走马灯幻灯片就会对应切换。</p>\n',
|
||||
'<p>通过配置 <code>indicator-position</code> 为<code>outside</code>后，走马灯指示器默认显示在幻灯片内容上，将显示在外部。\n配置 <code>trigger</code> 为<code>click</code>，可以修改指示器触发方式为单击，默认鼠标悬停到指示器时，走马灯幻灯片就会对应切换。</p>\n',
|
||||
'en-US':
|
||||
'<p>The walk indicator is displayed on the slide by default. After <code>indicator-position</code> is set to outside, the indicator is displayed outside. \n Set <code>trigger</code> to click. You can change the indicator triggering mode to click. By default, when you hover the cursor over an indicator, the slideshow is switched accordingly. </p>\n'
|
||||
},
|
||||
|
|
@ -24,7 +29,7 @@ export default {
|
|||
'name': { 'zh-CN': '手动轮播', 'en-US': 'Manual Carousel' },
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
'<p>调用 <code>setActiveItem()</code>、<code>next()</code>、<code>prev()</code> 方法可根据需要进行轮播。<code>initial-index</code> 属性可以指定初始激活的幻灯片索引。</p>\n',
|
||||
'<p>通过调用 <code>setActiveItem()</code>、<code>next()</code>、<code>prev()</code> 方法可根据需要进行轮播。<code>initial-index</code> 属性可以指定初始激活的幻灯片索引。</p>\n',
|
||||
'en-US':
|
||||
'<p>Invoke the <code>setActiveItem()</code>, <code>next()</code>, and <code>prev()</code> methods to perform NVOD as required. The <code>initial-index</code> property specifies the slide index that is initially activated. </p>\n'
|
||||
},
|
||||
|
|
@ -32,12 +37,12 @@ export default {
|
|||
},
|
||||
{
|
||||
'demoId': 'close-loop',
|
||||
'name': { 'zh-CN': '关闭循环轮播', 'en-US': 'Disable cyclic NVOD.' },
|
||||
'name': { 'zh-CN': '关闭循环轮播', 'en-US': 'Disable cyclic NVOD' },
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
'<p>配置 <code>loop</code> 属性为 false 后，若走马灯幻灯片已切换到最后一项，则将不能再从第一项开始循环切换。即切换到最后一项时，右侧切换箭头不再显示，切换到第一项时，左侧切换箭头不再显示。</p>\n',
|
||||
'<p>通过配置 <code>loop</code> 属性为<code>false</code>后，若走马灯幻灯片已切换到最后一项，则将不能再从第一项开始循环切换。即切换到最后一项时，右侧切换箭头不再显示，切换到第一项时，左侧切换箭头不再显示。</p>\n',
|
||||
'en-US':
|
||||
'<p>After the <code>loop</code> attribute is set to false, if the slide is switched to the last item, the slide cannot be switched cyclically from the first item. That is, when switching to the last item, the right toggle arrow is no longer displayed, and when switching to the first item, the left toggle arrow is no longer displayed. </p>\n'
|
||||
'<p>After the <code>loop</code> attribute is set to <code>false</code>, if the slide is switched to the last item, the slide cannot be switched cyclically from the first item. That is, when switching to the last item, the right toggle arrow is no longer displayed, and when switching to the first item, the left toggle arrow is no longer displayed. </p>\n'
|
||||
},
|
||||
'codeFiles': ['close-loop.vue']
|
||||
},
|
||||
|
|
@ -45,9 +50,10 @@ export default {
|
|||
'demoId': 'autoplay',
|
||||
'name': { 'zh-CN': '自动切换', 'en-US': 'Automatic switchover' },
|
||||
'desc': {
|
||||
'zh-CN': '<p>配置 <code>autoplay</code> 属性为 true 后，走马灯的幻灯片内容将自动轮播切换。</p>\n',
|
||||
'zh-CN':
|
||||
'<p>通过配置 <code>autoplay</code> 属性为<code>true</code>后，走马灯的幻灯片内容将自动轮播切换。</p>\n',
|
||||
'en-US':
|
||||
'<p>After <code>autoplay</code> is set to true, the slide content of the walk-through is automatically switched in rotation. </p>\n'
|
||||
'<p>After <code>autoplay</code> is set to <code>true</code>, the slide content of the walk-through is automatically switched in rotation. </p>\n'
|
||||
},
|
||||
'codeFiles': ['autoplay.vue']
|
||||
},
|
||||
|
|
@ -55,7 +61,7 @@ export default {
|
|||
'demoId': 'play-interval',
|
||||
'name': { 'zh-CN': '轮播间隔时间', 'en-US': 'NVOD Interval' },
|
||||
'desc': {
|
||||
'zh-CN': '<p>走马灯幻灯片轮播间隔时间默认为 3000 毫秒，通过 <code>interval</code> 属性可以自定义。</p>\n',
|
||||
'zh-CN': '<p>通过 <code>interval</code> 属性可以自定义，走马灯幻灯片轮播间隔时间默认为 3000 毫秒。</p>\n',
|
||||
'en-US':
|
||||
'<p>The interval is 3000 ms by default, which can be customized through the <code>interval</code> attribute. </p>\n'
|
||||
},
|
||||
|
|
@ -65,8 +71,8 @@ export default {
|
|||
'demoId': 'up-down-carousel',
|
||||
'name': { 'zh-CN': '纵向轮播', 'en-US': 'vertical carousel' },
|
||||
'desc': {
|
||||
'zh-CN': '<p>配置 <code>type</code> 属性为 vertical 即可实现纵向轮播。</p>\n',
|
||||
'en-US': '<p>Set <code>type</code> to vertical to implement vertical rotation. </p>\n'
|
||||
'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']
|
||||
},
|
||||
|
|
@ -83,33 +89,43 @@ export default {
|
|||
{
|
||||
'demoId': 'carousel-arrow-always',
|
||||
'name': { 'zh-CN': '总是显示切换箭头', 'en-US': 'Always show the switch arrow' },
|
||||
'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example.' },
|
||||
'desc': {
|
||||
'zh-CN': '通过<code>arrow</code>设置属性为<code>always</code>。',
|
||||
'en-US': 'Set the attribute to<code>always</code>through<code>arrow</code>.'
|
||||
},
|
||||
'codeFiles': ['carousel-arrow-always.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'carousel-arrow-hover',
|
||||
'name': { 'zh-CN': 'hover 时显示切换箭头', 'en-US': 'The switch arrow is displayed during Hover.' },
|
||||
'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example.' },
|
||||
'name': { 'zh-CN': 'hover 时显示切换箭头', 'en-US': 'The switch arrow is displayed during Hover' },
|
||||
'desc': {
|
||||
'zh-CN': '通过<code>arrow</code>设置属性为<code>hover</code>。',
|
||||
'en-US': 'Set the attribute to<code>hover</code>through<code>arrow</code>.'
|
||||
},
|
||||
'codeFiles': ['carousel-arrow-hover.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'carousel-arrow-never',
|
||||
'name': { 'zh-CN': '隐藏切换箭头', 'en-US': 'Hide the switch arrow' },
|
||||
'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example.' },
|
||||
'desc': {
|
||||
'zh-CN': '通过<code>arrow</code>设置属性为<code>never</code>。',
|
||||
'en-US': 'Set the attribute to<code>never</code>through<code>arrow</code>.'
|
||||
},
|
||||
'codeFiles': ['carousel-arrow-never.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'card-mode',
|
||||
'name': { 'zh-CN': '卡片模式', 'en-US': 'Card Mode' },
|
||||
'desc': {
|
||||
'zh-CN': '<p>配置 <code>type</code> 属性为 card 后，走马灯将以卡片形式进行展示。</p>\n',
|
||||
'en-US': '<p>After the <code>type</code> attribute is set to card, the lantern is displayed as a card. </p>\n'
|
||||
'zh-CN': '<p>通过配置 <code>type</code> 属性为<code>card</code>后，走马灯将以卡片形式进行展示。</p>\n',
|
||||
'en-US':
|
||||
'<p>After the <code>type</code> attribute is set to <code>card</code>, the lantern is displayed as a card. </p>\n'
|
||||
},
|
||||
'codeFiles': ['card-mode.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'carousel-events',
|
||||
'name': { 'zh-CN': '走马灯事件', 'en-US': '' },
|
||||
'name': { 'zh-CN': '走马灯事件', 'en-US': 'The Ma Deng incident' },
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
'<p>主要包含<code>change</code>事件。</p>\n<p>当幻灯片切换时会触发该事件，回调函数可接收两个参数：<code>当前幻灯片索引</code>和<code>上一张幻灯片索引</code>。</p>\n',
|
||||
|
|
@ -122,86 +138,112 @@ export default {
|
|||
{
|
||||
'name': 'carousel',
|
||||
'type': 'component',
|
||||
'events': [],
|
||||
'slots': [],
|
||||
'props': [
|
||||
{
|
||||
'name': 'arrow',
|
||||
'type': 'string',
|
||||
'defaultValue': '该属性的默认值为 hover',
|
||||
'desc': { 'zh-CN': '切换箭头的显示时机;该属性的可选值为 always / hover / never', 'en-US': '' },
|
||||
'defaultValue': `该属性的默认值为 'hover'`,
|
||||
'desc': {
|
||||
'zh-CN': '切换箭头的显示效果，该属性的可选值为 always / hover / never',
|
||||
'en-US': 'Switch the display effect of arrows,The optional values for this attribute are always/hover/never'
|
||||
},
|
||||
'demoId': 'up-down-carousel'
|
||||
},
|
||||
{
|
||||
'name': 'autoplay',
|
||||
'type': 'boolean',
|
||||
'defaultValue': '该属性的默认值为 false',
|
||||
'desc': { 'zh-CN': '是否自动切换', 'en-US': '' },
|
||||
'desc': { 'zh-CN': '是否自动切换', 'en-US': 'Whether to automatically switch' },
|
||||
'demoId': 'autoplay'
|
||||
},
|
||||
{
|
||||
'name': 'height',
|
||||
'type': 'string',
|
||||
'defaultValue': '',
|
||||
'desc': { 'zh-CN': '走马灯的高度', 'en-US': '' },
|
||||
'desc': { 'zh-CN': '走马灯的高度', 'en-US': 'The height of the lantern' },
|
||||
'demoId': 'indicator-trigger'
|
||||
},
|
||||
{
|
||||
'name': 'indicator-position',
|
||||
'type': 'string',
|
||||
'defaultValue': '',
|
||||
'desc': { 'zh-CN': '指示器的位置。该属性的可选值为 outside / none', 'en-US': '' },
|
||||
'desc': {
|
||||
'zh-CN': '指示器的位置。该属性的可选值为 outside / none',
|
||||
'en-US': 'The position of the indicator. The optional values for this attribute are outside/none'
|
||||
},
|
||||
'demoId': 'indicator-trigger'
|
||||
},
|
||||
{
|
||||
'name': 'initial-index',
|
||||
'type': 'number',
|
||||
'defaultValue': '该属性的默认值为 0',
|
||||
'desc': { 'zh-CN': '初始状态激活的幻灯片的索引，从 0 开始', 'en-US': '' },
|
||||
'desc': {
|
||||
'zh-CN': '初始状态激活的幻灯片的索引，从 0 开始',
|
||||
'en-US': 'Index of slides activated in initial state, starting from 0'
|
||||
},
|
||||
'demoId': 'manual-play'
|
||||
},
|
||||
{
|
||||
'name': 'interval',
|
||||
'type': 'number',
|
||||
'defaultValue': '该属性的默认值为 3000',
|
||||
'desc': { 'zh-CN': '自动切换的时间间隔，单位为毫秒', 'en-US': '' },
|
||||
'desc': {
|
||||
'zh-CN': '自动切换的时间间隔，单位为毫秒',
|
||||
'en-US': 'The time interval for automatic switching, in milliseconds'
|
||||
},
|
||||
'demoId': 'play-interval'
|
||||
},
|
||||
{
|
||||
'name': 'show-title',
|
||||
'type': 'boolean',
|
||||
'defaultValue': '该属性的默认值为 false',
|
||||
'desc': { 'zh-CN': '是否显示标题', 'en-US': '' },
|
||||
'desc': { 'zh-CN': '是否显示标题', 'en-US': 'Is the title displayed' },
|
||||
'demoId': 'show-title'
|
||||
},
|
||||
{
|
||||
'name': 'trigger',
|
||||
'type': 'string',
|
||||
'defaultValue': '该属性的默认值为 hover',
|
||||
'desc': { 'zh-CN': '指示器的触发方式，默认为 hover。该属性的可选值为 click', 'en-US': '' },
|
||||
'defaultValue': `该属性的默认值为 'hover'`,
|
||||
'desc': {
|
||||
'zh-CN': '指示器的触发方式，默认为 hover。该属性的可选值为 click',
|
||||
'en-US':
|
||||
'The triggering method of the indicator is hover by default. The optional value for this attribute is click'
|
||||
},
|
||||
'demoId': 'indicator-trigger'
|
||||
},
|
||||
{
|
||||
'name': 'type',
|
||||
'type': 'string',
|
||||
'defaultValue': '该属性的默认值为 horizontal',
|
||||
'desc': { 'zh-CN': '走马灯的类型;该属性的可选值为 horizontal / vertical / card', 'en-US': '' },
|
||||
'defaultValue': `该属性的默认值为 'horizontal'`,
|
||||
'desc': {
|
||||
'zh-CN': '走马灯的类型，该属性的可选值为 horizontal / vertical / card',
|
||||
'en-US': 'The type of horse lantern,The optional values for this attribute are horizontal/vertical/card'
|
||||
},
|
||||
'demoId': 'card-mode'
|
||||
},
|
||||
{
|
||||
'name': 'loop',
|
||||
'type': 'boolean',
|
||||
'defaultValue': '该属性的默认值为 true',
|
||||
'desc': { 'zh-CN': '是否循环显示', 'en-US': '' },
|
||||
'desc': { 'zh-CN': '是否循环显示', 'en-US': 'Whether to display in a loop' },
|
||||
'demoId': 'close-loop'
|
||||
}
|
||||
],
|
||||
'events': [
|
||||
{
|
||||
'name': 'change',
|
||||
'type': '',
|
||||
'defaultValue': '',
|
||||
'desc': { 'zh-CN': '幻灯片切换时触发', 'en-US': 'Trigger during slide transition' },
|
||||
'demoId': 'carousel-events'
|
||||
}
|
||||
],
|
||||
'slots': [
|
||||
{
|
||||
'name': 'default',
|
||||
'type': '',
|
||||
'defaultValue': '',
|
||||
'desc': { 'zh-CN': '默认插槽', 'en-US': '' },
|
||||
'desc': { 'zh-CN': '默认插槽', 'en-US': 'Default slot' },
|
||||
'demoId': 'manual-play'
|
||||
}
|
||||
],
|
||||
|
|
@ -210,32 +252,23 @@ export default {
|
|||
'name': 'next',
|
||||
'type': '',
|
||||
'defaultValue': '',
|
||||
'desc': { 'zh-CN': '切换至下一张幻灯片', 'en-US': '' },
|
||||
'desc': { 'zh-CN': '切换至下一张幻灯片', 'en-US': 'Switch to the next slide' },
|
||||
'demoId': 'manual-play'
|
||||
},
|
||||
{
|
||||
'name': 'prev',
|
||||
'type': '',
|
||||
'defaultValue': '',
|
||||
'desc': { 'zh-CN': '切换至上一张幻灯片', 'en-US': '' },
|
||||
'desc': { 'zh-CN': '切换至上一张幻灯片', 'en-US': 'Switch to the previous slide' },
|
||||
'demoId': 'manual-play'
|
||||
},
|
||||
{
|
||||
'name': 'setActiveItem',
|
||||
'type': '',
|
||||
'defaultValue': '',
|
||||
'desc': { 'zh-CN': '手动切换幻灯片', 'en-US': '' },
|
||||
'desc': { 'zh-CN': '手动切换幻灯片', 'en-US': 'Manually switch slides' },
|
||||
'demoId': 'manual-play'
|
||||
}
|
||||
],
|
||||
'events': [
|
||||
{
|
||||
'name': 'change',
|
||||
'type': '',
|
||||
'defaultValue': '',
|
||||
'desc': { 'zh-CN': '幻灯片切换时触发', 'en-US': '' },
|
||||
'demoId': 'carousel-events'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
|
|
@ -246,14 +279,14 @@ export default {
|
|||
'name': 'title',
|
||||
'type': 'string',
|
||||
'defaultValue': '',
|
||||
'desc': { 'zh-CN': '幻灯片标题', 'en-US': '' },
|
||||
'desc': { 'zh-CN': '幻灯片标题', 'en-US': 'Slide Title' },
|
||||
'demoId': 'show-title'
|
||||
},
|
||||
{
|
||||
'name': 'name',
|
||||
'type': 'string',
|
||||
'defaultValue': '',
|
||||
'desc': { 'zh-CN': '幻灯片名称', 'en-US': '' },
|
||||
'desc': { 'zh-CN': '幻灯片名称', 'en-US': 'Slide Name' },
|
||||
'demoId': 'show-title'
|
||||
}
|
||||
],
|
||||
|
|
@ -262,7 +295,7 @@ export default {
|
|||
'name': 'default',
|
||||
'type': '',
|
||||
'defaultValue': '',
|
||||
'desc': { 'zh-CN': '默认插槽', 'en-US': '' },
|
||||
'desc': { 'zh-CN': '默认插槽', 'en-US': 'Default slot' },
|
||||
'demoId': 'manual-play'
|
||||
}
|
||||
]
|
||||
|
|
|
|||
|
|
@ -5,33 +5,47 @@ export default {
|
|||
{
|
||||
'demoId': 'basic-usage',
|
||||
'name': { 'zh-CN': '基本用法', 'en-US': 'Basic Usage' },
|
||||
'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example.' },
|
||||
'desc': {
|
||||
'zh-CN': '通过引用组件标签，<code>v-model</code>绑定数据即可。',
|
||||
'en-US': 'By referencing component tags,<code>v model</code>bind data.'
|
||||
},
|
||||
'codeFiles': ['base.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'size',
|
||||
'name': { 'zh-CN': '尺寸设置', 'en-US': 'Size Setting' },
|
||||
'desc': { 'zh-CN': '通过 size 属性设置large 、medium 、small 、mini 四种不同大小尺寸。不设置时为默认尺寸。', 'en-US': 'For details, see the following example.' },
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
'通过<code>size</code>属性设置<code>large</code><code>medium</code><code>small</code><code>mini</code>四种不同大小尺寸。不设置时为默认尺寸。',
|
||||
'en-US':
|
||||
'Set the size attribute to four different sizes: <code>large</code>, <code>medium</code>, <code>small</code>, and <code>mini</code>. Default size when not set'
|
||||
},
|
||||
'codeFiles': ['size.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'event',
|
||||
'name': { 'zh-CN': '事件触发', 'en-US': 'event' },
|
||||
'desc': { 'zh-CN': '点击确认是将会触发confirm事件, 取消时触发cancel事件', 'en-US': 'When click confirm will trigger confirm event. When click outside or cancel will trigger cancel event' },
|
||||
'name': { 'zh-CN': '事件触发', 'en-US': 'eventing' },
|
||||
'desc': {
|
||||
'zh-CN': '通过点击确认时触发<code>confirm</code>事件, 取消时触发<code>cancel</code>事件。',
|
||||
'en-US':
|
||||
'When click confirm will trigger <code>confirm</code>event. When click outside or cancel will trigger <code>cancel</code> event.'
|
||||
},
|
||||
'codeFiles': ['event.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'enable-alpha',
|
||||
'name': { 'zh-CN': 'Alpha', 'en-US': 'Alpha' },
|
||||
'desc': { 'zh-CN': 'Alpha选择', 'en-US': 'Alpha select.' },
|
||||
'desc': { 'zh-CN': '<code>Alpha</code>选择。', 'en-US': '<code>Alpha</code>select.' },
|
||||
'codeFiles': ['alpha.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'history',
|
||||
'name': { 'zh-CN': '历史记录', 'en-US': 'history' },
|
||||
'desc': {
|
||||
'zh-CN': '当history不为undefined时, 将会启用历史记录功能。当用户点击确认时, 将会自动将颜色插入到history. 用户行为会更改历史记录, 外部可以更改历史记录',
|
||||
'en-US': 'When history is not undefined, the history function will be enabled. When the user clicks confirm, the color will automatically be inserted into the history User behavior can change history, and external users can also change history'
|
||||
'zh-CN':
|
||||
'当<code>history</code>不为<code>undefined</code>时, 将会启用历史记录功能。当用户点击确认时, 将会自动将颜色插入到<code>history</code>. 用户行为会更改历史记录, 外部可以更改历史记录。',
|
||||
'en-US':
|
||||
'When <code>history</code> is not <code>undefined</code>, the history function will be enabled. When the user clicks confirm, the color will automatically be inserted into the <code>history</code> User behavior can change history, and external users can also change history.'
|
||||
},
|
||||
'codeFiles': ['history.vue']
|
||||
},
|
||||
|
|
@ -39,11 +53,12 @@ export default {
|
|||
'demoId': 'predefine',
|
||||
'name': {
|
||||
'zh-CN': '预定义颜色',
|
||||
'en-US': 'predefine color'
|
||||
'en-US': 'Predefine color'
|
||||
},
|
||||
'desc': {
|
||||
'zh-CN': '提供给一些定义颜色, 用户行为不会更改预定义颜色, 但外部可以更改',
|
||||
'en-US': 'Provide some defined colors, user behavior will not change the predefined colors, but can be changed externally'
|
||||
'zh-CN': '通过<code>predefine</code>预定义颜色值，用户行为不会更改预定义颜色, 但外部可以更改。',
|
||||
'en-US':
|
||||
'By<code>predefine</code>predefined color values, user behavior does not change the predefined colors, but they can be changed externally.'
|
||||
},
|
||||
'codeFiles': ['predefine.vue']
|
||||
},
|
||||
|
|
@ -51,8 +66,10 @@ export default {
|
|||
'demoId': 'default-visible',
|
||||
'name': { 'zh-CN': '默认显示', 'en-US': 'default-visible' },
|
||||
'desc': {
|
||||
'zh-CN': '当visible为true时, 将会默认显示color-select. visible是响应式的, 所以你可以强制控制color-select的状态。当visible切换的时候, 会触发cancel事件',
|
||||
'en-US': 'If visible is true the <code>color-select</code> will show. The visible prop is reactive so you can force change <code>color-select</code> show or not. When change visible will trigger cancel event'
|
||||
'zh-CN':
|
||||
'当<code>visible</code>为<code>true</code>时, 将会默认显示<code>color-select</code>。 <code>visible</code>是响应式的, 所以你可以强制控制<code>color-select</code>的状态。当<code>visible</code>切换的时候, 会触发<code>cancel</code>事件。',
|
||||
'en-US':
|
||||
'If <code>visible</code> is true the <code>color-select</code> will show. The visible prop is reactive so you can force change <code>color-select</code> show or not. When change <code>visible</code> will trigger <code>cancel</code> event.'
|
||||
},
|
||||
'codeFiles': ['default-visible.vue']
|
||||
},
|
||||
|
|
@ -60,21 +77,21 @@ export default {
|
|||
'demoId': 'dynamic-color-change',
|
||||
'name': { 'zh-CN': '颜色动态切换', 'en-US': 'dynamic-color-change' },
|
||||
'desc': {
|
||||
'zh-CN': '可以动态切换color属性, 以满足各种需求',
|
||||
'en-US': 'Can dynamically switch color attributes to meet various needs'
|
||||
'zh-CN': '通过动态切换<code>color</code>属性, 以满足各种需求。',
|
||||
'en-US': 'Can dynamically switch <code>color</code> attributes to meet various needs.'
|
||||
},
|
||||
'codeFiles': ['dynamic-color-change.vue']
|
||||
},
|
||||
}
|
||||
],
|
||||
apis: [
|
||||
{
|
||||
'name': 'color-picker',
|
||||
'type': 'component',
|
||||
'properties': [
|
||||
'props': [
|
||||
{
|
||||
'name': 'modelValue',
|
||||
'type': 'string',
|
||||
'defaultValue': 'transparent',
|
||||
'defaultValue': `'transparent'`,
|
||||
desc: {
|
||||
'zh-CN': '默认颜色',
|
||||
'en-US': 'default color'
|
||||
|
|
@ -97,7 +114,8 @@ export default {
|
|||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '定义color-picker尺寸;该属性的可选值为 large / medium / small / mini',
|
||||
'en-US': 'Define color-picker dimensions; The optional values for this attribute are large/medium/small/mini'
|
||||
'en-US':
|
||||
'Define color-picker dimensions; The optional values for this attribute are large/medium/small/mini'
|
||||
},
|
||||
demoId: 'size'
|
||||
},
|
||||
|
|
|
|||
|
|
@ -5,48 +5,61 @@ export default {
|
|||
{
|
||||
'demoId': 'basic-usage',
|
||||
'name': { 'zh-CN': '基本用法', 'en-US': 'Basic Usage' },
|
||||
'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example.' },
|
||||
'desc': {
|
||||
'zh-CN': '通过<code>visible</code>设置显示色彩选择面板。',
|
||||
'en-US': 'Set the display color selection panel through<code>visible</code>.'
|
||||
},
|
||||
'codeFiles': ['base.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'alpha',
|
||||
'name': {'zh-CN': '透明度', 'en-US': 'Alpha'},
|
||||
'desc': {'zh-CN': '透明度选择', 'en-US': 'Alpha select.'},
|
||||
'name': { 'zh-CN': '透明度', 'en-US': 'Alpha' },
|
||||
'desc': {
|
||||
'zh-CN': '通过<code>alpha</code>设置透明度选择。',
|
||||
'en-US': 'Set transparency selection through<code>alpha</code>.'
|
||||
},
|
||||
'codeFiles': ['alpha.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'event',
|
||||
'name': { 'zh-CN': '事件触发', 'en-US': 'event' },
|
||||
'desc': { 'zh-CN': '点击确认是将会触发confirm事件, 取消时触发cancel事件', 'en-US': 'When click confirm will trigger confirm event. When click outside or cancel will trigger cancel event' },
|
||||
'desc': {
|
||||
'zh-CN': '通过点击确认时触发<code>confirm</code>事件, 取消时触发<code>cancel</code>事件。',
|
||||
'en-US':
|
||||
'When click confirm will trigger confirm event. When click outside or cancel will trigger cancel event.'
|
||||
},
|
||||
'codeFiles': ['event.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'history',
|
||||
'name': { 'zh-CN': '历史记录', 'en-US': 'history' },
|
||||
'desc': {
|
||||
'zh-CN': '当history不为undefined时, 将会启用历史记录功能。当用户点击确认时, 将会自动将颜色插入到history. 用户行为会更改历史记录, 外部可以更改历史记录',
|
||||
'en-US': 'When history is not undefined, the history function will be enabled. When the user clicks confirm, the color will automatically be inserted into the history User behavior can change history, and external users can also change history'
|
||||
'zh-CN':
|
||||
'当<code>history</code>不为<code>undefined</code>时, 将会启用历史记录功能。当用户点击确认时, 将会自动将颜色插入到<code>history</code>用户行为会更改历史记录, 外部可以更改历史记录。',
|
||||
'en-US':
|
||||
'When <code>history</code> is not <code>undefined</code>, the history function will be enabled. When the user clicks confirm, the color will automatically be inserted into the <code>history</code> User behavior can change history, and external users can also change history.'
|
||||
},
|
||||
'codeFiles': ['history.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'predefine',
|
||||
'name': {
|
||||
'name': {
|
||||
'zh-CN': '预定义颜色',
|
||||
'en-US': 'predefine color'
|
||||
'en-US': 'predefine color'
|
||||
},
|
||||
'desc': {
|
||||
'zh-CN': '提供给一些定义颜色, 用户行为不会更改预定义颜色, 但外部可以更改',
|
||||
'en-US': 'Provide some defined colors, user behavior will not change the predefined colors, but can be changed externally'
|
||||
'desc': {
|
||||
'zh-CN': '通过<code>predefine</code>预定义颜色值，用户行为不会更改预定义颜色, 但外部可以更改。',
|
||||
'en-US':
|
||||
'By<code>predefine</code>predefined color values, user behavior does not change the predefined colors, but they can be changed externally.'
|
||||
},
|
||||
'codeFiles': ['predefine.vue']
|
||||
},
|
||||
}
|
||||
],
|
||||
apis: [
|
||||
{
|
||||
'name': 'color select panel',
|
||||
'type': 'component',
|
||||
'properties': [
|
||||
'props': [
|
||||
{
|
||||
name: 'modelValue',
|
||||
type: 'String',
|
||||
|
|
@ -64,7 +77,7 @@ export default {
|
|||
desc: {
|
||||
'zh-CN': '是否默认显示color select panel',
|
||||
'en-US': 'Is color select panel displayed by default'
|
||||
},
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'alpha',
|
||||
|
|
@ -80,8 +93,8 @@ export default {
|
|||
name: 'history',
|
||||
type: 'string[] | undefined',
|
||||
defaultValue: 'undefined',
|
||||
desc:{
|
||||
'zh-CN': '时候启用历史记录,',
|
||||
desc: {
|
||||
'zh-CN': '时候启用历史记录',
|
||||
'en-US': 'enable history or not'
|
||||
},
|
||||
demoId: 'history'
|
||||
|
|
@ -90,8 +103,8 @@ export default {
|
|||
name: 'predefine',
|
||||
type: 'string[] | undefined',
|
||||
defaultValue: 'undefined',
|
||||
desc:{
|
||||
'zh-CN': '时候启用历史记录,',
|
||||
desc: {
|
||||
'zh-CN': '时候启用历史记录',
|
||||
'en-US': 'enable predefine or not'
|
||||
},
|
||||
demoId: 'predefine'
|
||||
|
|
@ -122,7 +135,7 @@ export default {
|
|||
name: 'color-update',
|
||||
type: '(color:Color) => void',
|
||||
defaultValue: '',
|
||||
desc:{
|
||||
desc: {
|
||||
'zh-cn': '当颜色更新的时候会触发该事件，包括：点击预定义颜色、点击历史记录',
|
||||
'en-US': 'when click predefine color or history, will trigger color-update event'
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,24 +4,32 @@ export default {
|
|||
demos: [
|
||||
{
|
||||
'demoId': 'base',
|
||||
'name': { 'zh-CN': '基本使用', 'en-US': '' },
|
||||
'desc': { 'zh-CN': '可以通过<code>design</code>属性配置自定义不同设计规范的图标和逻辑', 'en-US': '' },
|
||||
'name': { 'zh-CN': '基本使用', 'en-US': 'Basic Use' },
|
||||
'desc': {
|
||||
'zh-CN': '通过<code>design</code>属性配置自定义不同设计规范的图标和逻辑。',
|
||||
'en-US':
|
||||
'Icons and logic for different design specifications can be customized through the <code>design</code> attribute configuration.'
|
||||
},
|
||||
'codeFiles': ['base.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'text-direct',
|
||||
'name': { 'zh-CN': '改变文字方向', 'en-US': '' },
|
||||
'name': { 'zh-CN': '改变文字方向', 'en-US': 'Change the direction of text' },
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
'有时, 我们需要改变文字的排列方向, 例如我们在排列阿拉伯语是就需要RTL而非LTR.config-provider也考虑到了这点,只需要覆写design.direction即可',
|
||||
'en-US': ''
|
||||
'通过<code>:direction="ltr"</code>设置文字对齐方向，<code>ltr</code>为左对齐，<code>rtl</code>为右对齐。',
|
||||
'en-US':
|
||||
'Set the text alignment direction through<code>: direction="ltr"</code>, where<code>ltr</code>is left aligned and<code>rtl</code>is right aligned.'
|
||||
},
|
||||
'codeFiles': ['text-direct.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'tag',
|
||||
'name': { 'zh-CN': '自定义标签', 'en-US': '' },
|
||||
'desc': { 'zh-CN': '可以通过<code>tag</code>可以自定义容器标签', 'en-US': '' },
|
||||
'name': { 'zh-CN': '自定义标签', 'en-US': 'Custom tags' },
|
||||
'desc': {
|
||||
'zh-CN': '通过<code>tag</code>可以自定义容器标签。',
|
||||
'en-US': 'Container labels can be customized through<code>tag</code>.'
|
||||
},
|
||||
'codeFiles': ['tag.vue']
|
||||
}
|
||||
],
|
||||
|
|
@ -29,33 +37,40 @@ export default {
|
|||
{
|
||||
'name': 'config-provider',
|
||||
'type': 'component',
|
||||
'properties': [
|
||||
'props': [
|
||||
{
|
||||
'name': 'design',
|
||||
'type': 'ConfigProviderProps',
|
||||
'defaultValue': '',
|
||||
'desc': { 'zh-CN': '规范，可以通过该属于定制一些自定义的交互规范', 'en-US': '' },
|
||||
'desc': {
|
||||
'zh-CN': '规范，可以通过该属于定制一些自定义的交互规范',
|
||||
'en-US': 'Standardization can be achieved by customizing some custom interaction specifications'
|
||||
},
|
||||
'demoId': 'base'
|
||||
},
|
||||
{
|
||||
'name': 'breakPoints',
|
||||
'type': 'breakPoint',
|
||||
'defaultValue': "{'xs': 480,'sm': 640,'md': 768,'lg': 1024,'xl': 1280,'2xl': 1536}",
|
||||
'desc': { 'zh-CN': '断点, 为Layout提供', 'en-US': '' },
|
||||
'desc': { 'zh-CN': '断点, 为Layout提供', 'en-US': 'Breakpoints, providing layout with' },
|
||||
'demoId': 'base'
|
||||
},
|
||||
{
|
||||
'name': 'direction',
|
||||
'type': "'ltr' | 'rtl'",
|
||||
'defaultValue': 'ltr',
|
||||
'desc': { 'zh-CN': '文字排版方向', 'en-US': '' },
|
||||
'desc': { 'zh-CN': '文字排版方向', 'en-US': 'Text layout direction' },
|
||||
'demoId': 'text-dire'
|
||||
},
|
||||
{
|
||||
'name': 'tag',
|
||||
'type': 'object',
|
||||
'defaultValue': "{enable: true,name: 'div'}",
|
||||
'desc': { 'zh-CN': '是否被元素包裹, 如果是vue2且没有一个单一节点, 组件会自动创建一个div', 'en-US': '' },
|
||||
'desc': {
|
||||
'zh-CN': '是否被元素包裹, 如果是vue2且没有一个单一节点, 组件会自动创建一个div',
|
||||
'en-US':
|
||||
'Whether it is wrapped by elements, if it is Vue2 and there is no single node, the component will automatically create a div'
|
||||
},
|
||||
'demoId': 'base'
|
||||
}
|
||||
],
|
||||
|
|
|
|||
|
|
@ -29,17 +29,17 @@ export default {
|
|||
'name': { 'zh-CN': '裁剪框最小宽高', 'en-US': 'Minimum width and height of the crop box' },
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
'<p>通过属性 <code>min-crop-box-width</code> 、<code>min-crop-box-height</code> 设置裁剪框最小宽高。设置后，调整裁剪框宽高时，调整到最小值后将不能再调整。\n通过属性 <code>mmin-container-width</code> 、<code>min-container-height</code> 设置容器的最小宽度,最小高度。</p>\n',
|
||||
'<p>通过属性 <code>min-crop-box-width</code> 、<code>min-crop-box-height</code> 设置裁剪框最小宽高。设置后，调整裁剪框宽高时，调整到最小值后将不能再调整。\n通过属性 <code>min-container-width</code> 、<code>min-container-height</code> 设置容器的最小宽度,最小高度。</p>\n',
|
||||
'en-US':
|
||||
'<p>Set the minimum width and height of the cropping frame through the <code>min-crop-box-width</code> and <code>min-crop-box-height</code> attributes. After this parameter is set, the width and height of the cropping box cannot be adjusted after the width and height are adjusted to the minimum value. \n Set the minimum width and height of the container through the <code>mmin-container-width</code> and <code>min-container-height</code> attributes. </p>\n'
|
||||
'<p>Set the minimum width and height of the cropping frame through the <code>min-crop-box-width</code> and <code>min-crop-box-height</code> attributes. After this parameter is set, the width and height of the cropping box cannot be adjusted after the width and height are adjusted to the minimum value. \n Set the minimum width and height of the container through the <code>min-container-width</code> and <code>min-container-height</code> attributes. </p>\n'
|
||||
},
|
||||
'codeFiles': ['min-crop-box-width-height.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'no-background',
|
||||
'name': { 'zh-CN': '不显示网格背景', 'en-US': 'Do not display the grid background.' },
|
||||
'name': { 'zh-CN': '不显示网格背景', 'en-US': 'Do not display the grid background' },
|
||||
'desc': {
|
||||
'zh-CN': '<p>设置 <code>background</code> 属性为 <code>false</code> 后，将不显示容器的网格背景。</p>\n',
|
||||
'zh-CN': '<p>通过设置 <code>background</code> 属性为 <code>false</code> 后，将不显示容器的网格背景。</p>\n',
|
||||
'en-US':
|
||||
'<p>When <code>background</code> is set to <code>false</code>, the grid background of the container is not displayed. </p>\n'
|
||||
},
|
||||
|
|
@ -47,9 +47,9 @@ export default {
|
|||
},
|
||||
{
|
||||
'demoId': 'no-guides',
|
||||
'name': { 'zh-CN': '不显示虚线', 'en-US': 'Do not display dotted lines.' },
|
||||
'name': { 'zh-CN': '不显示虚线', 'en-US': 'Do not display dotted lines' },
|
||||
'desc': {
|
||||
'zh-CN': '<p>设置 <code>guides</code> 属性为 <code>false</code> 将取消裁剪框上方的虚线显示。</p>\n',
|
||||
'zh-CN': '<p>通过设置 <code>guides</code> 属性为 <code>false</code> 将取消裁剪框上方的虚线显示。</p>\n',
|
||||
'en-US':
|
||||
'<p>Setting <code>guides</code> to <code>false</code> will cancel the dotted line above the crop box. </p>\n'
|
||||
},
|
||||
|
|
@ -59,7 +59,8 @@ export default {
|
|||
'demoId': 'no-modal',
|
||||
'name': { 'zh-CN': '不显示模态', 'en-US': 'Do not display modal' },
|
||||
'desc': {
|
||||
'zh-CN': '<p>设置 <code>modal</code> 属性为 <code>false</code> 将取消裁剪框下方图片上方的模态层显示。</p>\n',
|
||||
'zh-CN':
|
||||
'<p>通过设置 <code>modal</code> 属性为 <code>false</code> 将取消裁剪框下方图片上方的模态层显示。</p>\n',
|
||||
'en-US':
|
||||
'<p>Setting <code>modal</code> to <code>false</code> cancels the display of the modal layer above the image below the crop box. </p>\n'
|
||||
},
|
||||
|
|
@ -102,7 +103,7 @@ export default {
|
|||
'demoId': 'get-container-data',
|
||||
'name': { 'zh-CN': '获取容器数据', 'en-US': 'Obtain container data' },
|
||||
'desc': {
|
||||
'zh-CN': '<p>调用 <code>getContainerData</code> 方法可以获取容器的大小数据。</p>\n',
|
||||
'zh-CN': '<p>通过调用 <code>getContainerData</code> 方法可以获取容器的大小数据。</p>\n',
|
||||
'en-US': '<p>Invoke the <code>getContainerData</code> method to obtain the container size data. </p>\n'
|
||||
},
|
||||
'codeFiles': ['get-container-data.vue']
|
||||
|
|
@ -111,7 +112,7 @@ export default {
|
|||
'demoId': 'get-crop-box-data',
|
||||
'name': { 'zh-CN': '获取剪切框数据', 'en-US': 'Obtain clip box data' },
|
||||
'desc': {
|
||||
'zh-CN': '<p>调用 <code>getCropBoxData</code> 方法可以获取剪切框的位置和大小数据。</p>\n',
|
||||
'zh-CN': '<p>通过调用 <code>getCropBoxData</code> 方法可以获取剪切框的位置和大小数据。</p>\n',
|
||||
'en-US':
|
||||
'<p>Invoke the <code>getCropBoxData</code> method to obtain the position and size of the clip box. </p>\n'
|
||||
},
|
||||
|
|
@ -122,7 +123,7 @@ export default {
|
|||
'name': { 'zh-CN': '获取裁剪后的图片数据', 'en-US': 'Obtain the cropped image data' },
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
'<p>调用 <code>getCroppedCanvas</code> 方法可以获取裁剪后的图片数据，搭配 <code>toDataURL</code> 方法将转成 base64 图片数据，搭配 <code>toBlob</code> 方法将生成 Blob 图片数据。</p>\n',
|
||||
'<p>通过调用 <code>getCroppedCanvas</code> 方法可以获取裁剪后的图片数据，搭配 <code>toDataURL</code> 方法将转成 base64 图片数据，搭配 <code>toBlob</code> 方法将生成 Blob 图片数据。</p>\n',
|
||||
'en-US':
|
||||
'<p>Invoke the <code>getCroppedCanvas</code> method to obtain the cropped image data. Use the <code>toDataURL</code> method to convert the cropped image data to Base64 image data. Use the <code>toBlob</code> method to generate Blob image data. </p>\n'
|
||||
},
|
||||
|
|
@ -132,7 +133,7 @@ export default {
|
|||
'demoId': 'get-data',
|
||||
'name': { 'zh-CN': '获取裁剪区域数据', 'en-US': 'Obtain crop area data' },
|
||||
'desc': {
|
||||
'zh-CN': '<p>调用 <code>getData</code> 方法可以获取裁剪区域的位置以及大小。</p>\n',
|
||||
'zh-CN': '<p>通过调用 <code>getData</code> 方法可以获取裁剪区域的位置以及大小。</p>\n',
|
||||
'en-US':
|
||||
'<p>Invoke the <code>getData</code> method to obtain the position and size of the cropping area. </p>\n'
|
||||
},
|
||||
|
|
@ -143,7 +144,7 @@ export default {
|
|||
'name': { 'zh-CN': '获取图像数据', 'en-US': 'Obtain Image Data' },
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
'<p>调用 <code>getImageData</code> 方法可以获取图像位置、大小和其他相关数据，若想获取画布位置和大小数据可以调用 <code>getCanvasData</code> 方法。</p>\n',
|
||||
'<p>通过调用 <code>getImageData</code> 方法可以获取图像位置、大小和其他相关数据，若想获取画布位置和大小数据可以调用 <code>getCanvasData</code> 方法。</p>\n',
|
||||
'en-US':
|
||||
'<p>Invoke the <code>getImageData</code> method to obtain the image position, size, and other related data. To obtain the canvas position and size data, call the <code>getCanvasData</code> method. </p>\n'
|
||||
},
|
||||
|
|
@ -154,7 +155,7 @@ export default {
|
|||
'name': { 'zh-CN': '替换图片', 'en-US': 'Replace Image' },
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
'<p>调用 <code>replace</code> 方法可以替换图像的 src 并重新构建 cropper 。 通过 <code>rotatable</code> 属性控制图片旋转，默认为 true 。</p>\n',
|
||||
'<p>通过调用 <code>replace</code> 方法可以替换图像的 src 并重新构建 cropper 。 通过 <code>rotatable</code> 属性控制图片旋转，默认为 true。</p>\n',
|
||||
'en-US':
|
||||
'<p>Invoke the <code>replace</code> method to replace the image src and rebuild the cropper. The <code>rotatable</code> attribute is used to control image rotation. The default value is true. </p>\n'
|
||||
},
|
||||
|
|
@ -163,7 +164,10 @@ export default {
|
|||
{
|
||||
'demoId': 'replace-image1',
|
||||
'name': { 'zh-CN': '放大图片', 'en-US': 'Enlarge Image' },
|
||||
'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example.' },
|
||||
'desc': {
|
||||
'zh-CN': '通过<code>zoomable</code>可放大图片。',
|
||||
'en-US': 'You can zoom in on the image by<code>zoomable</code>.'
|
||||
},
|
||||
'codeFiles': ['replace-image.vue']
|
||||
},
|
||||
{
|
||||
|
|
@ -174,7 +178,7 @@ export default {
|
|||
},
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
'<p><code>zoom-on-wheel</code> 属性为 <code>true</code> 情况下，通过 <code>wheel-zoom-ratio</code> 属性可以设置缩放比例，默认为 <code>0.1</code> 。</p>\n',
|
||||
'<p>通过<code>zoom-on-wheel</code> 属性为 <code>true</code> 情况下，通过 <code>wheel-zoom-ratio</code> 属性可以设置缩放比例，默认为 <code>0.1</code> 。</p>\n',
|
||||
'en-US':
|
||||
'<p><code>zoom-on-wheel</code> attribute is set to <code>true</code>, you can use the <code>wheel-zoom-ratio</code> attribute to set the scaling ratio. The default value is <code>0.1</code>. </p>\n'
|
||||
},
|
||||
|
|
@ -182,10 +186,10 @@ export default {
|
|||
},
|
||||
{
|
||||
'demoId': 'zoom-on-wheel',
|
||||
'name': { 'zh-CN': '禁用鼠标滚轮缩放图像', 'en-US': 'Disable the mouse wheel to zoom in or out the image.' },
|
||||
'name': { 'zh-CN': '禁用鼠标滚轮缩放图像', 'en-US': 'Disable the mouse wheel to zoom in or out the image' },
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
'<p>设置 <code>zoom-on-wheel</code> 属性为 <code>false</code> 后，将不允许通过滚动鼠标滚轮来缩放图像。</p>\n',
|
||||
'<p>通过设置 <code>zoom-on-wheel</code> 属性为 <code>false</code> 后，将不允许通过滚动鼠标滚轮来缩放图像。</p>\n',
|
||||
'en-US':
|
||||
'<p>After the <code>zoom-on-wheel</code> attribute is set to <code>false</code>, the image cannot be zoomed in or out by scrolling the mouse wheel. </p>\n'
|
||||
},
|
||||
|
|
@ -195,7 +199,7 @@ export default {
|
|||
'demoId': 'event-ready',
|
||||
'name': { 'zh-CN': 'ready 事件', 'en-US': 'ready event' },
|
||||
'desc': {
|
||||
'zh-CN': '<p>当一个 cropper 实例完全构建时触发 <code>ready</code> 事件。</p>\n',
|
||||
'zh-CN': '<p>当一个 cropper 实例完全构建时，通过触发 <code>ready</code> 事件。</p>\n',
|
||||
'en-US': '<p>When a cropper instance is completely built, the <code>ready</code> event is triggered. </p>\n'
|
||||
},
|
||||
'codeFiles': ['event-ready.vue']
|
||||
|
|
@ -205,9 +209,9 @@ export default {
|
|||
'name': { 'zh-CN': '裁剪框方法 事件', 'en-US': 'Crop box method event' },
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
'<p>当一个 cropper 实例完全构建时触发 <code>disable</code> 方法禁用裁剪框，当触发 <code>enable</code> 启用裁剪框</p>\n',
|
||||
'<p>当一个 cropper 实例完全构建时，通过触发 <code>disable</code> 方法禁用裁剪框，当触发 <code>enable</code> 启用裁剪框。</p>\n',
|
||||
'en-US':
|
||||
'<p>When a cropper instance is completely built, the <code>disable</code> method is triggered to disable the cropping box. When the <code>enable</code> method is triggered to enable the cropping box</p>\n'
|
||||
'<p>When a cropper instance is completely built, the <code>disable</code> method is triggered to disable the cropping box. When the <code>enable</code> method is triggered to enable the cropping box.</p>\n'
|
||||
},
|
||||
'codeFiles': ['crop-meth.vue']
|
||||
},
|
||||
|
|
@ -216,9 +220,9 @@ export default {
|
|||
'name': { 'zh-CN': '裁剪相关事件', 'en-US': 'Cutout Event' },
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
'<div class="tip custom-block"><p class="custom-block-title">TIP</p>\n<p>说明当画布或剪切框开始发生变化时触发 <code>cropstart</code> 事件\n当画布或剪切框正在发生变化时触发 <code>cropmove</code> 事件\n当画布或剪切框发生变化结束时触发 <code>cropend</code> 事件\n当画布或裁剪框发生改变时触发 <code>crop</code> 事件\n通过触发 <code>getCanvasData</code> 获取画布 Canvas（图像包装器）位置和大小数据</p>\n</div>\n',
|
||||
'<div class="tip custom-block"><p class="custom-block-title">TIP</p>\n<p>说明当画布或剪切框开始发生变化时触发 <code>cropstart</code> 事件\n当画布或剪切框正在发生变化时触发 <code>cropmove</code> 事件\n当画布或剪切框发生变化结束时触发 <code>cropend</code> 事件\n当画布或裁剪框发生改变时触发 <code>crop</code> 事件\n通过触发 <code>getCanvasData</code> 获取画布 Canvas（图像包装器）位置和大小数据。</p>\n</div>\n',
|
||||
'en-US':
|
||||
'<div class="tip custom-block"><p class="custom-block-title">TIP</p>\n<p> Description: The <code>cropstart</code> event is triggered when the canvas or clipping box starts to change.\nThe <code>cropmove</code> event is triggered when the canvas or clipping box is changed.\nThe <code>cropen event is triggered when the canvas or clipping box ends. d</code>Event\nThe <code>crop</code> event is triggered when the canvas or crop box changes. \nThe <code>getCanvasData</code> event is triggered to obtain the position and size data of the canvas (image wrapper) </p>\n</div>\n'
|
||||
'<div class="tip custom-block"><p class="custom-block-title">TIP</p>\n<p> Description: The <code>cropstart</code> event is triggered when the canvas or clipping box starts to change.\nThe <code>cropmove</code> event is triggered when the canvas or clipping box is changed.\nThe <code>cropen event is triggered when the canvas or clipping box ends. d</code>Event\nThe <code>crop</code> event is triggered when the canvas or crop box changes. \nThe <code>getCanvasData</code> event is triggered to obtain the position and size data of the canvas (image wrapper). </p>\n</div>\n'
|
||||
},
|
||||
'codeFiles': ['event-about-crop.vue']
|
||||
}
|
||||
|
|
@ -227,15 +231,15 @@ export default {
|
|||
{
|
||||
'name': 'crop',
|
||||
'type': 'component',
|
||||
'properties': [
|
||||
'props': [
|
||||
{
|
||||
'name': 'crop-type',
|
||||
'type': 'string',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '设置图片裁剪后返回的类型，可配置为 blob 和 base64，默认为 base64 。',
|
||||
'zh-CN': '设置图片裁剪后返回的类型，可配置为 blob 和 base64，默认为 base64',
|
||||
'en-US':
|
||||
'Type of the image that is returned after cropping. The value can be blob or base64. The default value is base64.'
|
||||
'Type of the image that is returned after cropping. The value can be blob or base64. The default value is base64'
|
||||
},
|
||||
'demoId': 'get-cropped-canvas'
|
||||
},
|
||||
|
|
@ -244,8 +248,8 @@ export default {
|
|||
'type': 'boolean',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '设置裁剪区域图片是否可预览，默认为 false 。',
|
||||
'en-US': 'Specifies whether images in the cropping area can be previewed. The default value is false.'
|
||||
'zh-CN': '设置裁剪区域图片是否可预览，默认为 false',
|
||||
'en-US': 'Specifies whether images in the cropping area can be previewed. The default value is false'
|
||||
},
|
||||
'demoId': ''
|
||||
},
|
||||
|
|
@ -254,9 +258,9 @@ export default {
|
|||
'type': 'number',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '设置图片裁剪后的压缩比例，值在 0-1 之间，默认为 0.92 。',
|
||||
'zh-CN': '设置图片裁剪后的压缩比例，值在 0-1 之间，默认为 0.92',
|
||||
'en-US':
|
||||
'Set the compression ratio of the cropped image. The value ranges from 0 to 1. The default value is 0.92.'
|
||||
'Set the compression ratio of the cropped image. The value ranges from 0 to 1. The default value is 0.92'
|
||||
},
|
||||
'demoId': ''
|
||||
},
|
||||
|
|
@ -273,9 +277,9 @@ export default {
|
|||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
'定义 cropper 的视图模式;默认为 0;0：没有限制，3 可以移动到 2 外。1：3 只能在 2 内移动。2：2 图片不全部铺满 1 （即缩小时可以有一边出现空隙）。3：2 图片填充整个 1 。',
|
||||
'定义 cropper 的视图模式;默认为 0;0：没有限制，3 可以移动到 2 外。1：3 只能在 2 内移动。2：2 图片不全部铺满 1 （即缩小时可以有一边出现空隙）。3：2 图片填充整个 1',
|
||||
'en-US':
|
||||
'Defines the view mode of the cropper. The default value is 0. 0: no restriction. The value 3 can be moved out of the value 2. 1:3 can only be moved within 2. The 2:2 picture is not completely covered with 1 (i.e., there may be gaps on one side when the picture is zoomed out). 3: 2 The image fills the entire 1.'
|
||||
'Defines the view mode of the cropper. The default value is 0. 0: no restriction. The value 3 can be moved out of the value 2. 1:3 can only be moved within 2. The 2:2 picture is not completely covered with 1 (i.e., there may be gaps on one side when the picture is zoomed out). 3: 2 The image fills the entire 1'
|
||||
},
|
||||
'demoId': 'view-mode'
|
||||
},
|
||||
|
|
@ -285,9 +289,9 @@ export default {
|
|||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
"定义 cropper 的拖拽模式;默认为 'crop';'crop'： 可以产生一个新的裁剪框 3 。'move'：只可以移动图片 3 。'none'： 什么也不处理。",
|
||||
"定义 cropper 的拖拽模式;默认为 'crop';'crop'： 可以产生一个新的裁剪框 3 。'move'：只可以移动图片 3 。'none'： 什么也不处理",
|
||||
'en-US':
|
||||
"Defines the drag mode of the cropper. The default value is'crop'. 'Crop': A new crop box 3 can be generated. 'move': Only image 3 can be moved. 'none': no action is required."
|
||||
"Defines the drag mode of the cropper. The default value is'crop'. 'Crop': A new crop box 3 can be generated. 'move': Only image 3 can be moved. 'none': no action is required"
|
||||
},
|
||||
'demoId': 'drag-mode'
|
||||
},
|
||||
|
|
@ -319,7 +323,7 @@ export default {
|
|||
'desc': {
|
||||
'zh-CN': '是否显示图片上方裁剪框下方的黑色模态;默认为 true',
|
||||
'en-US':
|
||||
'Whether to display the black mode below the cropping box above the image; The default value is true.'
|
||||
'Whether to display the black mode below the cropping box above the image; The default value is true'
|
||||
},
|
||||
'demoId': 'no-modal'
|
||||
},
|
||||
|
|
@ -329,7 +333,7 @@ export default {
|
|||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '是否在裁剪框上方显示虚线;默认为 true',
|
||||
'en-US': 'Whether to display dotted lines above the crop box; The default value is true.'
|
||||
'en-US': 'Whether to display dotted lines above the crop box; The default value is true'
|
||||
},
|
||||
'demoId': 'no-guides'
|
||||
},
|
||||
|
|
@ -339,7 +343,7 @@ export default {
|
|||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '裁剪框是否在图片正中心;默认为 true',
|
||||
'en-US': 'Whether the cropping frame is in the center of the image; The default value is true.'
|
||||
'en-US': 'Whether the cropping frame is in the center of the image; The default value is true'
|
||||
},
|
||||
'demoId': 'aspect-ratio'
|
||||
},
|
||||
|
|
@ -349,7 +353,7 @@ export default {
|
|||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '是否显示容器的网格背景;默认为 true',
|
||||
'en-US': 'Whether to display the grid background of the container; The default value is true.'
|
||||
'en-US': 'Whether to display the grid background of the container; The default value is true'
|
||||
},
|
||||
'demoId': 'no-background'
|
||||
},
|
||||
|
|
@ -359,7 +363,7 @@ export default {
|
|||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '是否允许可以移动后面的图片;默认为 true',
|
||||
'en-US': 'Indicates whether the image can be moved. The default value is true.'
|
||||
'en-US': 'Indicates whether the image can be moved. The default value is true'
|
||||
},
|
||||
'demoId': 'drag-mode'
|
||||
},
|
||||
|
|
@ -369,7 +373,7 @@ export default {
|
|||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '是否允许旋转图像;默认为 true',
|
||||
'en-US': 'Indicates whether images can be rotated. The default value is true.'
|
||||
'en-US': 'Indicates whether images can be rotated. The default value is true'
|
||||
},
|
||||
'demoId': 'replace-image'
|
||||
},
|
||||
|
|
@ -379,7 +383,7 @@ export default {
|
|||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '是否允许放大图像;默认为 true',
|
||||
'en-US': 'Whether to allow image zooming in; The default value is true.'
|
||||
'en-US': 'Whether to allow image zooming in; The default value is true'
|
||||
},
|
||||
'demoId': 'replace-image'
|
||||
},
|
||||
|
|
@ -390,7 +394,7 @@ export default {
|
|||
'desc': {
|
||||
'zh-CN': '是否可以通过滚动鼠标滚轮来缩放图像;默认为 true',
|
||||
'en-US':
|
||||
'Specifies whether you can zoom in or out an image by scrolling the mouse wheel. The default value is true.'
|
||||
'Specifies whether you can zoom in or out an image by scrolling the mouse wheel. The default value is true'
|
||||
},
|
||||
'demoId': 'zoom-on-wheel'
|
||||
},
|
||||
|
|
@ -451,7 +455,7 @@ export default {
|
|||
'desc': {
|
||||
'zh-CN': '初始化时，是否自动显示裁剪框;默认为 true',
|
||||
'en-US':
|
||||
'Indicates whether to automatically display the crop box during initialization. The default value is true.'
|
||||
'Indicates whether to automatically display the crop box during initialization. The default value is true'
|
||||
},
|
||||
'demoId': 'auto-crop-area'
|
||||
},
|
||||
|
|
@ -483,7 +487,7 @@ export default {
|
|||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '当一个 cropper 实例完全构建时触发',
|
||||
'en-US': 'This event is triggered when a cropper instance is completely built.'
|
||||
'en-US': 'This event is triggered when a cropper instance is completely built'
|
||||
},
|
||||
'demoId': 'event-ready'
|
||||
},
|
||||
|
|
@ -494,7 +498,7 @@ export default {
|
|||
'desc': {
|
||||
'zh-CN': 'cropdata 事件回调函数中可以拿到裁剪后的数据，默认为 base64 数据',
|
||||
'en-US':
|
||||
'The tailored data can be obtained from the cropdata event callback function. The default value is Base64 data.'
|
||||
'The tailored data can be obtained from the cropdata event callback function. The default value is Base64 data'
|
||||
},
|
||||
'demoId': 'event-about-crop'
|
||||
},
|
||||
|
|
@ -562,8 +566,8 @@ export default {
|
|||
'type': '',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '替换图像的 src 并重新构建 cropper;参数为 图片 URL ',
|
||||
'en-US': 'Replace the image src and rebuild the cropper. The parameter is the image URL.'
|
||||
'zh-CN': '替换图像的 src 并重新构建 cropper;参数为 图片 URL',
|
||||
'en-US': 'Replace the image src and rebuild the cropper. The parameter is the image URL'
|
||||
},
|
||||
'demoId': 'replace-image'
|
||||
},
|
||||
|
|
@ -634,7 +638,7 @@ export default {
|
|||
'desc': {
|
||||
'zh-CN': '改变裁切框的宽高比;参数为(aspectRatio)，类型 number，是一个正数',
|
||||
'en-US':
|
||||
'Change the aspect ratio of the cutting frame; The parameter is (aspectRatio) and the type is number. The value is a positive number.'
|
||||
'Change the aspect ratio of the cutting frame; The parameter is (aspectRatio) and the type is number. The value is a positive number'
|
||||
},
|
||||
'demoId': 'aspect-ratio'
|
||||
},
|
||||
|
|
@ -644,7 +648,7 @@ export default {
|
|||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '禁用裁切框（裁切框不可移动）',
|
||||
'en-US': 'Disable the cropping box (the cropping box cannot be moved).'
|
||||
'en-US': 'Disable the cropping box (the cropping box cannot be moved)'
|
||||
},
|
||||
'demoId': 'crop-meth'
|
||||
},
|
||||
|
|
@ -661,7 +665,7 @@ export default {
|
|||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '销毁 cropper 并从图像中删除整个 cropper',
|
||||
'en-US': 'Destroy the cropper and delete the entire cropper from the image.'
|
||||
'en-US': 'Destroy the cropper and delete the entire cropper from the image'
|
||||
},
|
||||
'demoId': 'event-ready'
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,33 +5,36 @@ export default {
|
|||
{
|
||||
'demoId': 'basic-usage',
|
||||
'name': { 'zh-CN': '基本用法', 'en-US': 'Basic Usage' },
|
||||
'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example.' },
|
||||
'desc': { 'zh-CN': '通过引用组件标签即可。', 'en-US': 'You can refer to component label.' },
|
||||
'codeFiles': ['base.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'direction',
|
||||
'name': { 'zh-CN': '垂直分隔线', 'en-US': '' },
|
||||
'name': { 'zh-CN': '垂直分隔线', 'en-US': 'Vertical divider line' },
|
||||
'desc': {
|
||||
'zh-CN': '<p>通过 <code>direction</code> 属性可以设置分隔线的方向。</p>',
|
||||
'en-US': ''
|
||||
'en-US': '<p>The direction of the separator line can be set through the<code>direction</code>attribute.</p>'
|
||||
},
|
||||
'codeFiles': ['direction.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'content-position',
|
||||
'name': { 'zh-CN': '分隔线文案的位置', 'en-US': '' },
|
||||
'name': { 'zh-CN': '分隔线文案的位置', 'en-US': 'The position of the separator copy' },
|
||||
'desc': {
|
||||
'zh-CN': '<p>通过 <code>content-position</code> 属性 可以设置分隔线文案的位置。</p>',
|
||||
'en-US': ''
|
||||
'en-US':
|
||||
'<p>The position of the separator text can be set through the<code>content position</code>attribute.</p>'
|
||||
},
|
||||
'codeFiles': ['contentPosition.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'custom-style',
|
||||
'name': { 'zh-CN': '自定义分隔线样式', 'en-US': '' },
|
||||
'name': { 'zh-CN': '自定义分隔线样式', 'en-US': 'Custom divider style' },
|
||||
'desc': {
|
||||
'zh-CN': '<p>你可以自定义分割线样式。</p>',
|
||||
'en-US': ''
|
||||
'zh-CN':
|
||||
'<p>通过<code>color</code><code>border-style</code><code>content-color</code>属性，自定义分割线样式。</p>',
|
||||
'en-US':
|
||||
'<p>Customize the split line style through the<code>color</code><code>border style</code><code>content color</code>attribute.</p>'
|
||||
},
|
||||
'codeFiles': ['customStyle.vue']
|
||||
}
|
||||
|
|
@ -40,7 +43,7 @@ export default {
|
|||
{
|
||||
'name': 'divider',
|
||||
'type': 'component',
|
||||
'properties': [
|
||||
'props': [
|
||||
{
|
||||
'name': 'color',
|
||||
'type': 'string',
|
||||
|
|
@ -51,32 +54,30 @@ export default {
|
|||
{
|
||||
'name': 'direction',
|
||||
'type': 'string',
|
||||
'defaultValue': 'horizontal',
|
||||
'defaultValue': `'horizontal'`,
|
||||
'desc': {
|
||||
'zh-CN': '设置分隔线的方向，该属性的可选值为 horizontal / vertical 。',
|
||||
'en-US':
|
||||
'Set the direction of the divider; the possible values for this property are "horizontal" or "vertical".'
|
||||
'zh-CN': '设置分隔线的方向，该属性的可选值为 horizontal / vertical',
|
||||
'en-US': `Set the direction of the divider; the possible values for this property are "horizontal" or "vertical"`
|
||||
},
|
||||
'demoId': 'direction'
|
||||
},
|
||||
{
|
||||
'name': 'content-position',
|
||||
'type': 'string',
|
||||
'defaultValue': 'center',
|
||||
'defaultValue': `'center'`,
|
||||
'desc': {
|
||||
'zh-CN': '设置分隔线文案的位置，该属性的可选值为 left / center / right 。',
|
||||
'en-US':
|
||||
'Set the position of the divider content; the possible values for this property are "left", "center", or "right".'
|
||||
'zh-CN': '设置分隔线文案的位置，该属性的可选值为 left / center / right',
|
||||
'en-US': `Set the position of the separator text, with optional values of left/center/right for this attribute`
|
||||
},
|
||||
'demoId': 'content-position'
|
||||
},
|
||||
{
|
||||
'name': 'border-style',
|
||||
'type': 'string',
|
||||
'defaultValue': 'solid',
|
||||
'defaultValue': `'solid'`,
|
||||
'desc': {
|
||||
'zh-CN': '设置分隔线的样式，该属性的可选值为 solid / dashed',
|
||||
'en-US': 'Set the style of the divider; the possible values for this property are "solid" or "dashed".'
|
||||
'en-US': 'Set the style of the separator line, with optional values of solid/dashed for this property'
|
||||
},
|
||||
'demoId': 'custom-style'
|
||||
},
|
||||
|
|
@ -84,14 +85,17 @@ export default {
|
|||
'name': 'content-color',
|
||||
'type': 'string',
|
||||
'defaultValue': '',
|
||||
'desc': { 'zh-CN': '设置分隔线文案的颜色', 'en-US': 'Set the color of the divider content.' },
|
||||
'desc': { 'zh-CN': '设置分隔线文案的颜色', 'en-US': 'Set the color of the divider content' },
|
||||
'demoId': 'custom-style'
|
||||
},
|
||||
{
|
||||
'name': 'content-background-color',
|
||||
'type': 'string',
|
||||
'defaultValue': '',
|
||||
'desc': { 'zh-CN': '设置分割线文案的背景颜色', 'en-US': 'Set the background color of the divider content.' },
|
||||
'desc': {
|
||||
'zh-CN': '设置分割线文案的背景颜色',
|
||||
'en-US': 'Set the background color of the divider content'
|
||||
},
|
||||
'demoId': 'custom-style'
|
||||
}
|
||||
],
|
||||
|
|
|
|||
|
|
@ -51,7 +51,7 @@ export default {
|
|||
'name': { 'zh-CN': '自定义菜单数据服务', 'en-US': 'Customized menu data service' },
|
||||
'desc': {
|
||||
'zh-CN': '<p>通过 <code>get-menu-data-sync</code> 自定义菜单数据服务。</p>\n',
|
||||
'en-US': '<p>Customize the menu data service through <code>get-menu-data-sync</code> . </p>\n'
|
||||
'en-US': '<p>Customize the menu data service through <code>get-menu-data-sync</code>. </p>\n'
|
||||
},
|
||||
'codeFiles': ['get-menu-data-sync.vue']
|
||||
},
|
||||
|
|
@ -68,7 +68,7 @@ export default {
|
|||
},
|
||||
{
|
||||
'demoId': 'custom-icon1',
|
||||
'name': { 'zh-CN': '菜单内容超长时省略显示', 'en-US': 'Omitted if the menu content is too long.' },
|
||||
'name': { 'zh-CN': '菜单内容超长时省略显示', 'en-US': 'Omitted if the menu content is too long' },
|
||||
'desc': {
|
||||
'zh-CN': '<p>通过 <code>ellipsis</code> 属性设置菜单内容超长时省略显示。</p>\n',
|
||||
'en-US':
|
||||
|
|
@ -97,7 +97,7 @@ export default {
|
|||
'name': 'data',
|
||||
'type': 'Array',
|
||||
'defaultValue': '',
|
||||
'desc': { 'zh-CN': '设置收藏夹菜单的数据。', 'en-US': 'Set the data of the favorites menu.' },
|
||||
'desc': { 'zh-CN': '设置收藏夹菜单的数据', 'en-US': 'Set the data of the favorites menu' },
|
||||
'demoId': 'data-resource1'
|
||||
},
|
||||
{
|
||||
|
|
@ -105,8 +105,8 @@ export default {
|
|||
'type': 'object',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '自定义节点展开折叠的图标。',
|
||||
'en-US': 'Customize the icon for expanding and collapsing a node.'
|
||||
'zh-CN': '自定义节点展开折叠的图标',
|
||||
'en-US': 'Customize the icon for expanding and collapsing a node'
|
||||
},
|
||||
'demoId': 'custom-icon'
|
||||
},
|
||||
|
|
@ -115,8 +115,8 @@ export default {
|
|||
'type': 'number',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '设置可收藏的栏目的最大数量。',
|
||||
'en-US': 'Set the maximum number of columns that can be added to favorites.'
|
||||
'zh-CN': '设置可收藏的栏目的最大数量',
|
||||
'en-US': 'Set the maximum number of columns that can be added to favorites'
|
||||
},
|
||||
'demoId': 'menu-items'
|
||||
},
|
||||
|
|
@ -125,8 +125,8 @@ export default {
|
|||
'type': 'string',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '设置收藏夹菜单的标题，默认为空。',
|
||||
'en-US': 'Set the title of the favorites menu. The default value is null.'
|
||||
'zh-CN': '设置收藏夹菜单的标题，默认为空',
|
||||
'en-US': 'Set the title of the favorites menu. The default value is null'
|
||||
},
|
||||
'demoId': 'data-resource'
|
||||
},
|
||||
|
|
@ -135,9 +135,9 @@ export default {
|
|||
'type': 'boolean',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '设置打开菜单弹窗时默认是否展开所有节点，默认为 true 。',
|
||||
'zh-CN': '设置打开菜单弹窗时默认是否展开所有节点，默认为 true',
|
||||
'en-US':
|
||||
'Whether to expand all nodes by default when a menu pop-up window is opened. The default value is true.'
|
||||
'Whether to expand all nodes by default when a menu pop-up window is opened. The default value is true'
|
||||
},
|
||||
'demoId': 'menu-items'
|
||||
},
|
||||
|
|
@ -145,7 +145,7 @@ export default {
|
|||
'name': 'search-icon',
|
||||
'type': 'object',
|
||||
'defaultValue': '',
|
||||
'desc': { 'zh-CN': '自定义搜索图标。', 'en-US': 'Customize the search icon.' },
|
||||
'desc': { 'zh-CN': '自定义搜索图标', 'en-US': 'Customize the search icon' },
|
||||
'demoId': 'custom-icon'
|
||||
},
|
||||
{
|
||||
|
|
@ -153,8 +153,8 @@ export default {
|
|||
'type': 'boolean',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '菜单内容超长时省略显示，默认为 true 。',
|
||||
'en-US': 'Omitted if the menu content is too long. The default value is true.'
|
||||
'zh-CN': '菜单内容超长时省略显示，默认为 true',
|
||||
'en-US': 'Omitted if the menu content is too long. The default value is true'
|
||||
},
|
||||
'demoId': 'custom-icon1'
|
||||
},
|
||||
|
|
@ -163,8 +163,8 @@ export default {
|
|||
'type': 'boolean',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '菜单内容超长时换行显示，默认为 false 。',
|
||||
'en-US': 'The menu content is displayed in a new line when it is too long. The default value is false.'
|
||||
'zh-CN': '菜单内容超长时换行显示，默认为 false',
|
||||
'en-US': 'The menu content is displayed in a new line when it is too long. The default value is false'
|
||||
},
|
||||
'demoId': 'data-resource'
|
||||
},
|
||||
|
|
@ -173,9 +173,9 @@ export default {
|
|||
'type': 'boolean',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '树节点勾选内容后，点击取消按钮，再次打开弹窗是否保留取消前勾选的内容的状态，默认为 true 。',
|
||||
'zh-CN': '树节点勾选内容后，点击取消按钮，再次打开弹窗是否保留取消前勾选的内容的状态，默认为 true',
|
||||
'en-US':
|
||||
'Whether to retain the status of the selected content after selecting content in the tree node, clicking Cancel, and opening the dialog box again. The default value is true.'
|
||||
'Whether to retain the status of the selected content after selecting content in the tree node, clicking Cancel, and opening the dialog box again. The default value is true'
|
||||
},
|
||||
'demoId': ''
|
||||
},
|
||||
|
|
@ -185,7 +185,7 @@ export default {
|
|||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '自定义菜单数据服务，直接返回数据',
|
||||
'en-US': 'User-defined menu data service. Data is directly returned.'
|
||||
'en-US': 'User-defined menu data service. Data is directly returned'
|
||||
},
|
||||
'demoId': 'get-menu-data-sync'
|
||||
}
|
||||
|
|
@ -206,8 +206,8 @@ export default {
|
|||
'type': '',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '获取选中的菜单节点并关闭菜单弹窗，同时展示选中的菜单。',
|
||||
'en-US': 'Obtains the selected menu node, closes the menu pop-up window, and displays the selected menu.'
|
||||
'zh-CN': '获取选中的菜单节点并关闭菜单弹窗，同时展示选中的菜单',
|
||||
'en-US': 'Obtains the selected menu node, closes the menu pop-up window, and displays the selected menu'
|
||||
},
|
||||
'demoId': 'custom-foot'
|
||||
},
|
||||
|
|
@ -215,7 +215,7 @@ export default {
|
|||
'name': 'hideDialog',
|
||||
'type': '',
|
||||
'defaultValue': '',
|
||||
'desc': { 'zh-CN': '关闭菜单弹窗。', 'en-US': 'Close the menu pop-up window.' },
|
||||
'desc': { 'zh-CN': '关闭菜单弹窗', 'en-US': 'Close the menu pop-up window' },
|
||||
'demoId': 'custom-foot'
|
||||
}
|
||||
]
|
||||
|
|
|
|||
|
|
@ -9,7 +9,10 @@ export default {
|
|||
{
|
||||
'demoId': 'basic-usage',
|
||||
'name': { 'zh-CN': '基本用法', 'en-US': 'Basic Usage' },
|
||||
'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example.' },
|
||||
'desc': {
|
||||
'zh-CN': '通过<code>:init-blocks="4"</code>设置可显示的块数。',
|
||||
'en-US': 'Set the number of blocks that can be displayed through<code>: init blocks="4"</code>.'
|
||||
},
|
||||
'codeFiles': ['basic-usage.vue']
|
||||
},
|
||||
{
|
||||
|
|
@ -17,9 +20,9 @@ export default {
|
|||
'name': { 'zh-CN': '每次滚动块数', 'en-US': 'Number of blocks scrolled each time' },
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
'<p>可通过 <code>wheel-blocks</code> 设置每次滚动块数。\n可通过 <code>value</code> 调用服务时候获取数据的来源</p>\n',
|
||||
'<p>通过 <code>wheel-blocks</code> 设置每次滚动块数。\n通过 <code>value</code> 调用服务时候获取数据的来源。</p>\n',
|
||||
'en-US':
|
||||
'<p>You can use <code>wheel-blocks</code> to set the number of blocks to be scrolled each time. \nThe data source can be obtained when the service is invoked through <code>value</code></p>\n'
|
||||
'<p>You can use <code>wheel-blocks</code> to set the number of blocks to be scrolled each time. \nThe data source can be obtained when the service is invoked through <code>value</code>. </p>\n'
|
||||
},
|
||||
'codeFiles': ['wheel-blocks.vue']
|
||||
},
|
||||
|
|
@ -36,7 +39,7 @@ export default {
|
|||
'demoId': 'custom-tag',
|
||||
'name': { 'zh-CN': '自定义 DOM 标签', 'en-US': 'Customized DOM Label' },
|
||||
'desc': {
|
||||
'zh-CN': '<p>可通过 <code>tag sub-tag</code> 自定义 DOM 标签。</p>\n',
|
||||
'zh-CN': '<p>通过 <code>tag sub-tag</code> 自定义 DOM 标签。</p>\n',
|
||||
'en-US': '<p>You can use <code>tag sub-tag</code> to customize DOM tags. </p>\n'
|
||||
},
|
||||
'codeFiles': ['custom-tag.vue']
|
||||
|
|
@ -44,7 +47,10 @@ export default {
|
|||
{
|
||||
'demoId': 'slide-bar-events',
|
||||
'name': { 'zh-CN': '滚动块事件', 'en-US': 'Scroll Block Event' },
|
||||
'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example.' },
|
||||
'desc': {
|
||||
'zh-CN': '通过<code>@before-click</code>触发滑动点击前事件。',
|
||||
'en-US': 'Trigger the pre click event by<code>@ before click</code>.'
|
||||
},
|
||||
'codeFiles': ['slide-bar-events.vue']
|
||||
}
|
||||
],
|
||||
|
|
@ -52,19 +58,19 @@ export default {
|
|||
{
|
||||
'name': 'slide-bar',
|
||||
'type': 'component',
|
||||
'properties': [
|
||||
'props': [
|
||||
{
|
||||
'name': 'value',
|
||||
'type': 'Array',
|
||||
'defaultValue': '',
|
||||
'desc': { 'zh-CN': '调用服务时候获取数据的来源。', 'en-US': 'Data source obtained during service invoking.' },
|
||||
'desc': { 'zh-CN': '调用服务时候获取数据的来源', 'en-US': 'Data source obtained during service invoking' },
|
||||
'demoId': 'wheel-blocks'
|
||||
},
|
||||
{
|
||||
'name': 'init-blocks',
|
||||
'type': 'number',
|
||||
'defaultValue': '',
|
||||
'desc': { 'zh-CN': '初始时需要显示的块数。', 'en-US': 'Number of blocks to be displayed initially.' },
|
||||
'desc': { 'zh-CN': '初始时需要显示的块数', 'en-US': 'Number of blocks to be displayed initially' },
|
||||
'demoId': 'wheel-blocks'
|
||||
},
|
||||
{
|
||||
|
|
@ -72,22 +78,22 @@ export default {
|
|||
'type': 'number',
|
||||
'defaultValue': '该属性的默认值为 1',
|
||||
'desc': {
|
||||
'zh-CN': '鼠标滚轮上下滚动的时候，滚动的块数长度。',
|
||||
'en-US': 'Number of scrolling blocks when the mouse wheel is scrolled up or down.'
|
||||
'zh-CN': '鼠标滚轮上下滚动的时候，滚动的块数长度',
|
||||
'en-US': 'Number of scrolling blocks when the mouse wheel is scrolled up or down'
|
||||
},
|
||||
'demoId': 'wheel-blocks'
|
||||
},
|
||||
{
|
||||
'name': 'tag',
|
||||
'type': 'string',
|
||||
'defaultValue': '该属性的默认值为 ul',
|
||||
'defaultValue': `该属性的默认值为 'ul'`,
|
||||
'desc': { 'zh-CN': '设置组件的 Dom 标签', 'en-US': 'Setting the Dom Label of a Component' },
|
||||
'demoId': 'custom-tag'
|
||||
},
|
||||
{
|
||||
'name': 'sub-tag',
|
||||
'type': 'string',
|
||||
'defaultValue': '该属性的默认值为 li',
|
||||
'defaultValue': `该属性的默认值为 'li'`,
|
||||
'desc': { 'zh-CN': '设置组件的子级 Dom 标签', 'en-US': 'Setting the Dom Label of a Component' },
|
||||
'demoId': 'custom-tag'
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,14 +5,17 @@ export default {
|
|||
{
|
||||
'demoId': 'basic-usage',
|
||||
'name': { 'zh-CN': '基本用法', 'en-US': 'Basic Usage' },
|
||||
'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example.' },
|
||||
'desc': {
|
||||
'zh-CN': '通过<code>:data</code>设置数据源。',
|
||||
'en-US': 'Set the data source through<code>: data</code>.'
|
||||
},
|
||||
'codeFiles': ['basic-usage.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'custom-icon',
|
||||
'name': { 'zh-CN': '自定义菜单左侧图标', 'en-US': 'Icon on the left of the customized menu' },
|
||||
'desc': {
|
||||
'zh-CN': '<p>可通过 <code>icon</code> 属性自定义菜单左侧图标。</p>\n',
|
||||
'zh-CN': '<p>通过 <code>icon</code> 属性自定义菜单左侧图标。</p>\n',
|
||||
'en-US': '<p>You can customize the icon on the left of the menu through the <code>icon</code> attribute. </p>\n'
|
||||
},
|
||||
'codeFiles': ['custom-icon.vue']
|
||||
|
|
@ -22,8 +25,9 @@ export default {
|
|||
'name': { 'zh-CN': '自定义菜单数据', 'en-US': 'Customized menu data service' },
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
'<p>可通过 <code>get-menu-data-sync</code> 自定义菜单数据服务。(deprecated v3.4.0废弃, v3.16.0移除；移除原因：如果是同步数据则和:data功能重复)</p>\n',
|
||||
'en-US': '<p>You can customize the menu data service through <code>get-menu-data-sync</code> . </p>\n'
|
||||
'<p>通过 <code>get-menu-data-sync</code> 自定义菜单数据服务。(deprecated v3.4.0废弃, v3.16.0移除；移除原因：如果是同步数据则和:data功能重复)。</p>\n',
|
||||
'en-US':
|
||||
'<p>Customize menu data services through<code>get menu data sync</code>. (deprecated v3.4.0 abandoned, v3.16.0 removed; removal reason: if it is synchronized data, it is duplicated with the: data function).</p>\n'
|
||||
},
|
||||
'codeFiles': ['get-menu-data-sync.vue']
|
||||
},
|
||||
|
|
@ -31,7 +35,7 @@ export default {
|
|||
'demoId': 'get-menu-data-async',
|
||||
'name': { 'zh-CN': '自定义菜单异步数据服务', 'en-US': 'props option mapping' },
|
||||
'desc': {
|
||||
'zh-CN': '<p>可通过 <code>get-menu-data-async</code> 自定义菜单异步数据服务。</p>\n',
|
||||
'zh-CN': '<p>通过 <code>get-menu-data-async</code> 自定义菜单异步数据服务。</p>\n',
|
||||
'en-US':
|
||||
"<p>You can use <code>props</code> to configure the mapping field. The default value of this attribute is {children:'children', label:'label', disabled:'disabled'}. </p>\n"
|
||||
},
|
||||
|
|
@ -42,14 +46,14 @@ export default {
|
|||
'name': { 'zh-CN': 'props 选项映射', 'en-US': 'Custom Node Content' },
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
"<p>可通过 <code>props</code> 配置选项映射字段该属性的默认值为 {children: 'children',label: 'label',disabled: 'disabled'} 。</p>\n",
|
||||
"<p>通过<code>props</code>配置选项映射字段该属性的默认值为<code>{children:'children',label:'label',disabled:'disabled'}</code>。</p>\n",
|
||||
'en-US': '<p>Customize the node content through the <code>node</code> slot. </p>\n'
|
||||
},
|
||||
'codeFiles': ['toggle-props.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'slot-node',
|
||||
'name': { 'zh-CN': '自定义节点内容', 'en-US': 'All nodes are expanded by default.' },
|
||||
'name': { 'zh-CN': '自定义节点内容', 'en-US': 'All nodes are expanded by default' },
|
||||
'desc': {
|
||||
'zh-CN': '<p>通过 <code>node</code> 插槽自定义节点内容。</p>\n',
|
||||
'en-US':
|
||||
|
|
@ -62,18 +66,18 @@ export default {
|
|||
'name': { 'zh-CN': '默认展开所有节点', 'en-US': 'Drag Node' },
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
'<p>可通过 <code>default-expand-all</code> 属性设置是否默认展开所有节点，通过 <code>expand-on-click-node</code> 属性设置是否可以通过点击节点展开/收起菜单。</p>\n',
|
||||
'<p>通过 <code>default-expand-all</code> 属性设置是否默认展开所有节点，通过 <code>expand-on-click-node</code> 属性设置是否可以通过点击节点，展开/收起菜单。</p>\n',
|
||||
'en-US':
|
||||
'<p>You can use the <code>draggable</code> attribute to set whether to enable the node drag function. The default value is <code>false</code>. \nYou can use the <code>ellipsis</code> property to set whether to enable the function of omitting the overlong text content. The default value is <code>false</code></p>\n'
|
||||
'<p>You can use the <code>draggable</code> attribute to set whether to enable the node drag function. The default value is <code>false</code>. \nYou can use the <code>ellipsis</code> property to set whether to enable the function of omitting the overlong text content. The default value is <code>false</code>.</p>\n'
|
||||
},
|
||||
'codeFiles': ['default-expand-all.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'draggable',
|
||||
'name': { 'zh-CN': '拖拽节点', 'en-US': 'Display the filter search box.' },
|
||||
'name': { 'zh-CN': '拖拽节点', 'en-US': 'Display the filter search box' },
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
'<p>可通过 <code>draggable</code> 属性设置是否开启拖拽节点的功能，默认值为 <code>false</code>。\n可通过 <code>ellipsis</code> 属性设置是否开启文本内容超长是省略显示，默认值为 <code>false</code></p>\n',
|
||||
'<p>通过 <code>draggable</code> 属性设置是否开启拖拽节点的功能，默认值为 <code>false</code>。\n可通过 <code>ellipsis</code> 属性设置是否开启文本内容超长是省略显示，默认值为 <code>false</code>。</p>\n',
|
||||
'en-US':
|
||||
'<p>You can set the <code>show-filter</code> attribute to determine whether to display the filter search box. The default value is <code>true</code>. You can set it to <code>false</code> not to display the filter search box. </p>\n'
|
||||
},
|
||||
|
|
@ -84,7 +88,7 @@ export default {
|
|||
'name': { 'zh-CN': '显示过滤搜索框', 'en-US': 'Auto Filter' },
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
'<p>可通过 <code>show-filter</code> 属性设置是否展示过滤搜索框，默认为 <code>true</code>，可设置为<code>false</code>不展示过滤搜索框。</p>\n',
|
||||
'<p>通过 <code>show-filter</code> 属性设置是否展示过滤搜索框，默认为 <code>true</code>，可设置为<code>false</code>不展示过滤搜索框。</p>\n',
|
||||
'en-US':
|
||||
'<p>You can set the placeholder of the text box through the <code>placeholder</code> attribute. Use <code>automatic-filtering</code> to set whether to automatically filter input data. The default value is true. </p>\n'
|
||||
},
|
||||
|
|
@ -92,11 +96,12 @@ export default {
|
|||
},
|
||||
{
|
||||
'demoId': 'automatic-filtering',
|
||||
'name': { 'zh-CN': '自动过滤', 'en-US': 'The content exceeds the line feed.' },
|
||||
'name': { 'zh-CN': '自动过滤', 'en-US': 'The content exceeds the line feed' },
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
'<p>可通过 <code>placeholder</code> 属性设置输入框的占位符。 通过设置 <code>automatic-filtering</code> 为<code>false</code>关闭输入时自动过滤功能，默认值为 true。</p>\n',
|
||||
'en-US': 'For details, see the following example.'
|
||||
'<p>通过 <code>placeholder</code> 属性设置输入框的占位符。 通过设置 <code>automatic-filtering</code> 为<code>false</code>关闭输入时自动过滤功能，默认值为<code>true</code>。</p>\n',
|
||||
'en-US':
|
||||
'<p>Set the placeholder for the input box through the<code>placeholder</code>property. By setting<code>automatic filtering</code>to<code>false</code>, the automatic filtering function on input is turned off, and the default value is<code>true</code>.</p>'
|
||||
},
|
||||
'codeFiles': ['automatic-filtering.vue']
|
||||
},
|
||||
|
|
@ -104,8 +109,8 @@ export default {
|
|||
'demoId': 'show-filter1',
|
||||
'name': { 'zh-CN': '内容超出换行', 'en-US': 'Node Click Event' },
|
||||
'desc': {
|
||||
'zh-CN': '详细用法参考如下示例',
|
||||
'en-US': '<p><code>node-click</code> Event triggered after a node is clicked. </p>\n'
|
||||
'zh-CN': '通过<code>wrap</code>设置换行。',
|
||||
'en-US': 'Set line breaks through<code>wrap</code>.'
|
||||
},
|
||||
'codeFiles': ['show-filter.vue']
|
||||
},
|
||||
|
|
@ -113,8 +118,8 @@ export default {
|
|||
'demoId': 'node-click',
|
||||
'name': { 'zh-CN': '点击节点事件', 'en-US': 'Expand Node Event' },
|
||||
'desc': {
|
||||
'zh-CN': '<p><code>node-click</code> 点击节点后触发的事件。</p>\n',
|
||||
'en-US': 'Event triggered after the <p><code>node-expand</code> expands a node. </p>\n'
|
||||
'zh-CN': '<p>通过<code>node-click</code> 点击节点后触发的事件。</p>\n',
|
||||
'en-US': '<p>The event triggered by clicking on a node through<code>node click</code>.</p>\n'
|
||||
},
|
||||
'codeFiles': ['node-click.vue']
|
||||
},
|
||||
|
|
@ -122,8 +127,8 @@ export default {
|
|||
'demoId': 'node-expand',
|
||||
'name': { 'zh-CN': '展开节点事件', 'en-US': 'Shrunk Node Event' },
|
||||
'desc': {
|
||||
'zh-CN': '<p><code>node-expand</code> 展开节点后触发的事件。</p>\n',
|
||||
'en-US': 'Event triggered after a node is scaled in by the <p><code>node-collapse</code> . </p>\n'
|
||||
'zh-CN': '<p>通过<code>node-expand</code> 展开节点后触发的事件。</p>\n',
|
||||
'en-US': '<p>The event triggered after expanding a node through<code>node expand</code>.</p>\n'
|
||||
},
|
||||
'codeFiles': ['node-expand.vue']
|
||||
},
|
||||
|
|
@ -131,9 +136,8 @@ export default {
|
|||
'demoId': 'node-collapse',
|
||||
'name': { 'zh-CN': '收缩节点事件', 'en-US': 'Drag Node Event' },
|
||||
'desc': {
|
||||
'zh-CN': '<p><code>node-collapse</code> 收缩节点后触发的事件。</p>\n',
|
||||
'en-US':
|
||||
'<p><code>node-drop</code>: This event is triggered after a node is dragged and dropped. You need to set <code>draggable</code> to <code>true</code>. </p>\n'
|
||||
'zh-CN': '<p>通过<code>node-collapse</code> 收缩节点后触发的事件。</p>\n',
|
||||
'en-US': '<p>The event triggered after shrinking a node through<code>node collapse</code>.</p>'
|
||||
},
|
||||
'codeFiles': ['node-collapse.vue']
|
||||
},
|
||||
|
|
@ -142,19 +146,20 @@ export default {
|
|||
'name': { 'zh-CN': '拖放节点事件', 'en-US': 'Drag Event' },
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
'<p><code>node-drop</code> 拖放节点后触发的事件，需要设置 <code>draggable</code> 属性为 <code>true</code>。</p>\n',
|
||||
'<p>通过<code>node-drop</code> 拖放节点后触发的事件，需要设置 <code>draggable</code> 属性为 <code>true</code>。</p>\n',
|
||||
'en-US':
|
||||
'<p><code>node-drag-start</code>: This event is triggered after a node is dragged. <code>node-drag-enter</code> is triggered when a node is dragged to another node. <code>node-drag-over</code> is triggered when a node is dragged. <code>node-drag-leave</code>: This event is triggered when a node is dragged out. <code>node-drag-end</code>: This event is triggered when a node is dragged out. </p>\n'
|
||||
'<p>The event triggered by dragging and dropping a node through<code>node drop</code>needs to set the<code>draggable</code>attribute to<code>true</code>.</p>\n'
|
||||
},
|
||||
'codeFiles': ['node-drop.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'drag-events',
|
||||
'name': { 'zh-CN': '拖拽事件', 'en-US': '' },
|
||||
'name': { 'zh-CN': '拖拽事件', 'en-US': 'Dragging event' },
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
'<p><code>node-drag-start</code> 拖拽节点后的事件，<code>node-drag-enter</code> 拖拽进入其他节点时触发的事件，<code>node-drag-over</code> 在拖拽节点时触发的事件，<code>node-drag-leave</code> 拖拽离开某个节点时触发的事件，<code>node-drag-end</code> 拖拽结束时触发的事件。</p>\n',
|
||||
'en-US': ''
|
||||
'<p>通过<code>node-drag-start</code> 拖拽节点后的事件，<code>node-drag-enter</code> 拖拽进入其他节点时触发的事件，<code>node-drag-over</code> 在拖拽节点时触发的事件，<code>node-drag-leave</code> 拖拽离开某个节点时触发的事件，<code>node-drag-end</code> 拖拽结束时触发的事件。</p>\n',
|
||||
'en-US':
|
||||
'<p>Events triggered when dragging nodes through<code>node drag start</code>, events triggered when dragging into other nodes, events triggered when dragging nodes, events triggered when dragging out of a node, and events triggered when dragging out of a node.</p>'
|
||||
},
|
||||
'codeFiles': ['drag-events.vue']
|
||||
}
|
||||
|
|
@ -163,12 +168,12 @@ export default {
|
|||
{
|
||||
'name': 'toggle-menu',
|
||||
'type': 'component',
|
||||
'properties': [
|
||||
'props': [
|
||||
{
|
||||
'name': 'data',
|
||||
'type': 'Array',
|
||||
'defaultValue': '',
|
||||
'desc': { 'zh-CN': '设置收缩菜单的数据。', 'en-US': 'Set the data of the collapsed menu.' },
|
||||
'desc': { 'zh-CN': '设置收缩菜单的数据', 'en-US': 'Set the data of the collapsed menu' },
|
||||
'demoId': 'basic-usage'
|
||||
},
|
||||
{
|
||||
|
|
@ -176,8 +181,8 @@ export default {
|
|||
'type': 'boolean',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '设置是否开启拖拽节点的功能，默认值为 `false`',
|
||||
'en-US': 'Whether to enable the node drag function. The default value is `false`'
|
||||
'zh-CN': '设置是否开启拖拽节点的功能，默认值为false',
|
||||
'en-US': 'Whether to enable the node drag function. The default value is false'
|
||||
},
|
||||
'demoId': 'draggable'
|
||||
},
|
||||
|
|
@ -186,8 +191,8 @@ export default {
|
|||
'type': 'boolean',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '设置是否展示过滤搜索框，默认为 `true`。',
|
||||
'en-US': 'Specifies whether to display the search box. The default value is `true`.'
|
||||
'zh-CN': '设置是否展示过滤搜索框，默认为 `true`',
|
||||
'en-US': 'Specifies whether to display the search box. The default value is true'
|
||||
},
|
||||
'demoId': 'show-filter'
|
||||
},
|
||||
|
|
@ -195,7 +200,7 @@ export default {
|
|||
'name': 'icon',
|
||||
'type': 'object',
|
||||
'defaultValue': '',
|
||||
'desc': { 'zh-CN': '自定义菜单左侧图标。', 'en-US': 'Customize the icon on the left of the menu.' },
|
||||
'desc': { 'zh-CN': '自定义菜单左侧图标', 'en-US': 'Customize the icon on the left of the menu' },
|
||||
'demoId': 'custom-icon'
|
||||
},
|
||||
{
|
||||
|
|
@ -203,8 +208,8 @@ export default {
|
|||
'type': 'boolean',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '设置菜单默认是否展开所有节点，默认为 false 。',
|
||||
'en-US': 'Whether to expand all nodes in the menu by default. The default value is false.'
|
||||
'zh-CN': '设置菜单默认是否展开所有节点，默认为 false',
|
||||
'en-US': 'Whether to expand all nodes in the menu by default. The default value is false'
|
||||
},
|
||||
'demoId': 'default-expand-all'
|
||||
},
|
||||
|
|
@ -213,8 +218,8 @@ export default {
|
|||
'type': 'boolean',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '设置是否可以通过点击节点展开/收起菜单，默认为 false。',
|
||||
'en-US': 'Whether to expand or collapse menus by clicking a node. The default value is false.'
|
||||
'zh-CN': '设置是否可以通过点击节点展开/收起菜单，默认为 false',
|
||||
'en-US': 'Whether to expand or collapse menus by clicking a node. The default value is false'
|
||||
},
|
||||
'demoId': 'default-expand-all'
|
||||
},
|
||||
|
|
@ -222,7 +227,7 @@ export default {
|
|||
'name': 'placeholder',
|
||||
'type': 'string',
|
||||
'defaultValue': '',
|
||||
'desc': { 'zh-CN': '输入框占位符。', 'en-US': 'Placeholder in the text box.' },
|
||||
'desc': { 'zh-CN': '输入框占位符', 'en-US': 'Placeholder in the text box' },
|
||||
'demoId': 'show-filter'
|
||||
},
|
||||
{
|
||||
|
|
@ -230,8 +235,8 @@ export default {
|
|||
'type': 'boolean',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '菜单内容超长时省略显示，默认为 false 。',
|
||||
'en-US': 'Omitted if the menu content is too long. The default value is false.'
|
||||
'zh-CN': '菜单内容超长时省略显示，默认为 false',
|
||||
'en-US': 'Omitted if the menu content is too long. The default value is false'
|
||||
},
|
||||
'demoId': 'draggable'
|
||||
},
|
||||
|
|
@ -240,8 +245,8 @@ export default {
|
|||
'type': 'boolean',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '菜单内容超长时换行显示，默认为 false 。',
|
||||
'en-US': 'The menu content is displayed in a new line when it is too long. The default value is false.'
|
||||
'zh-CN': '菜单内容超长时换行显示，默认为 false',
|
||||
'en-US': 'The menu content is displayed in a new line when it is too long. The default value is false'
|
||||
},
|
||||
'demoId': 'show-filter'
|
||||
},
|
||||
|
|
@ -250,9 +255,9 @@ export default {
|
|||
'type': 'boolean',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '输入框输入内容时是否自动过滤内容，默认是 true 。',
|
||||
'zh-CN': '输入框输入内容时是否自动过滤内容，默认是 true',
|
||||
'en-US':
|
||||
'Whether to automatically filter content when you enter content in the text box. The default value is true.'
|
||||
'Whether to automatically filter content when you enter content in the text box. The default value is true'
|
||||
},
|
||||
'demoId': 'automatic-filtering'
|
||||
},
|
||||
|
|
@ -270,7 +275,8 @@ export default {
|
|||
'desc': {
|
||||
'zh-CN':
|
||||
'自定义菜单数据服务,直接返回数据（deprecated v3.4.0废弃, v3.16.0移除；移除原因：如果是同步数据则和:data功能重复）',
|
||||
'en-US': 'User-defined menu data service. Data is directly returned.'
|
||||
'en-US':
|
||||
'Customized menu data service, directly returning data (deprecated v3.4.0 discarded, v3.16.0 removed; reason for removal: if it is synchronized data, it is duplicated with the: data function)'
|
||||
},
|
||||
'demoId': 'get-menu-data-sync'
|
||||
},
|
||||
|
|
@ -278,7 +284,10 @@ export default {
|
|||
'name': 'get-menu-data-async',
|
||||
'type': 'Function',
|
||||
'defaultValue': '',
|
||||
'desc': { 'zh-CN': '自定义菜单数据服务,返回异步数据,需返回Promise对象', 'en-US': '' },
|
||||
'desc': {
|
||||
'zh-CN': '自定义菜单数据服务,返回异步数据,需返回Promise对象',
|
||||
'en-US': 'Custom menu data service, returns asynchronous data, requires a Promise object to be returned'
|
||||
},
|
||||
'demoId': 'get-menu-data-aync'
|
||||
}
|
||||
],
|
||||
|
|
@ -289,7 +298,7 @@ export default {
|
|||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
'点击节点后的事件。;点击节点后触发的回调函数;//参数arg1:\n{children: 点击节点的子节点, id: 点击节点的id ,label: 点击节点的title} \n//参数arg2:\n object 当前点击节点的数据信息对象 ',
|
||||
'点击节点后的事件。;点击节点后触发的回调函数;//参数arg1:\n{children: 点击节点的子节点, id: 点击节点的id ,label: 点击节点的title} \n//参数arg2:\n object 当前点击节点的数据信息对象',
|
||||
'en-US':
|
||||
'Indicates that a node is clicked. ;Callback function triggered after a node is clicked. //Parameter arg1:\n{children: child node of the clicked node, id: ID of the clicked node, label: title of the clicked node} \n//Parameter arg2:\n object Data information object of the currently clicked node'
|
||||
},
|
||||
|
|
@ -325,7 +334,7 @@ export default {
|
|||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
'节点开始拖拽时触发的事件。;节点开始拖拽时触发的事件。;//参数: \narg1:object 当前拖拽节点的数据信息对象\narg2:event ',
|
||||
'节点开始拖拽时触发的事件。;节点开始拖拽时触发的事件。;//参数: \narg1:object 当前拖拽节点的数据信息对象\narg2:event',
|
||||
'en-US':
|
||||
'Event triggered when a node starts to be dragged. ;Event triggered when a node starts to be dragged. ; / / Parameters:\narg1:object Data information object of the current node \narg2:event'
|
||||
},
|
||||
|
|
@ -339,7 +348,7 @@ export default {
|
|||
'zh-CN':
|
||||
'拖拽进入其他节点时触发的事件;拖拽进入其他节点时触发的事件;//参数\narg1:object 当前拖拽节点的数据信息对象\narg2: object 当前点击节点拖拽后位置的节点数据信息对象',
|
||||
'en-US':
|
||||
'This event is triggered when a user drags a node to another node. Event triggered when a user drags a node to another node. / / Parameter \narg1: object Data information object of the current node \narg2: object Data information object of the current node after the node is dragged.'
|
||||
'This event is triggered when a user drags a node to another node. Event triggered when a user drags a node to another node. / / Parameter \narg1: object Data information object of the current node \narg2: object Data information object of the current node after the node is dragged'
|
||||
},
|
||||
'demoId': 'drag-events'
|
||||
},
|
||||
|
|
@ -361,7 +370,7 @@ export default {
|
|||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
'在拖拽节点时触发的事件（类似浏览器的 mouseover 事件）;在拖拽节点时触发的事件（类似浏览器的 mouseover 事件）;//参数\narg1:object 当前拖拽节点的数据信息对象\narg2:object 当前拖拽节点拖拽时节点的数据信息对象\n arg3:event ',
|
||||
'在拖拽节点时触发的事件（类似浏览器的 mouseover 事件）;在拖拽节点时触发的事件（类似浏览器的 mouseover 事件）;//参数\narg1:object 当前拖拽节点的数据信息对象\narg2:object 当前拖拽节点拖拽时节点的数据信息对象\n arg3:event',
|
||||
'en-US':
|
||||
'Event triggered when a node is dragged (similar to the mouseover event of the browser); Event triggered when a node is dragged (similar to the mouseover event of the browser) / / Parameter \narg1:object Data information object of the current dragged node \narg2:object Data information object of the current dragged node \n arg3:event'
|
||||
},
|
||||
|
|
@ -373,7 +382,7 @@ export default {
|
|||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
"拖拽结束时（r可能未成功）触发的事件;拖拽成功完成时触发的事件;//参数\narg1: object当前拖拽节点的数据信息对象\narg2: object当前点击节点拖拽后位置的节点数据信息对象\narg3: 拖拽的类型，如：'inner'\narg4:event ",
|
||||
"拖拽结束时（r可能未成功）触发的事件;拖拽成功完成时触发的事件;//参数\narg1: object当前拖拽节点的数据信息对象\narg2: object当前点击节点拖拽后位置的节点数据信息对象\narg3: 拖拽的类型，如：'inner'\narg4:event",
|
||||
'en-US':
|
||||
"Event triggered when dragging ends (r may not succeed). Event triggered when the drag is successfully completed; / / Parameter \narg1: object Data information object of the current node\narg2: object Data information object of the current node after the node is dragged\narg3: Drag type, for example,'inner'\narg4:event"
|
||||
},
|
||||
|
|
@ -385,7 +394,7 @@ export default {
|
|||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
'拖放节点后的事件。开启 draggable 属性为 true 有效。;拖放节点后的事件。开启 draggable 属性为 true 有效。;//参数\narg1:object 当前拖拽节点的数据信息对象\n arg2:object 当前点击节点拖拽后的位置节点的数据信息对象\narg3: 拖拽的类型\narg4:event ',
|
||||
'拖放节点后的事件。开启 draggable 属性为 true 有效。;拖放节点后的事件。开启 draggable 属性为 true 有效。;//参数\narg1:object 当前拖拽节点的数据信息对象\n arg2:object 当前点击节点拖拽后的位置节点的数据信息对象\narg3: 拖拽的类型\narg4:event',
|
||||
'en-US':
|
||||
'Indicates the event after a node is dragged and dropped. This parameter is valid when the draggable attribute is set to true. ; Events after a node is dragged and dropped. This parameter is valid when the draggable attribute is set to true. ; / / Parameter \narg1:object Data information object of the current dragged node \n arg2:object Data information object of the current clicked node after the dragged node \narg3:Drag type \narg4:event'
|
||||
},
|
||||
|
|
|
|||
|
|
@ -5,7 +5,12 @@ export default {
|
|||
{
|
||||
'demoId': 'basic-usage',
|
||||
'name': { 'zh-CN': '基本用法', 'en-US': 'Basic Usage' },
|
||||
'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example.' },
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
'通过<code>:data</code>设置数据源。<code>imgUrl:图片路径</code><code>userName:姓名</code><code>userDescription:用户描述</code>。',
|
||||
'en-US':
|
||||
'Set the data source through<code>: data</code>.<code>imgUrl:"Image URL"</code><code>userName:"Name"</code><code>userDescription: User Description</code>.'
|
||||
},
|
||||
'codeFiles': ['basic-usage.vue']
|
||||
},
|
||||
{
|
||||
|
|
@ -13,9 +18,9 @@ export default {
|
|||
'name': { 'zh-CN': '设置数据源', 'en-US': 'Set Data Source' },
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
'<p>可通过 <code>data</code> 设置数据源, <code>imgUrl</code> 表示的是图片路径, <code>userName</code> 表示的是姓名, <code>userDescription</code> 表示的是用户描述。</p>\n',
|
||||
'<p>通过 <code>:data</code> 设置数据源, <code>imgUrl</code> 表示的是图片路径, <code>userName</code> 表示的是姓名, <code>userDescription</code> 表示的是用户描述。</p>\n',
|
||||
'en-US':
|
||||
'<p>You can use <code>data</code> to set the data source. <code>imgUrl</code> indicates the image path, and <code>userName</code> indicates the name. <code>userDescription</code> indicates the user description. </p>\n'
|
||||
'<p>Set the data source through<code>: data</code>. <code>imgUrl</code> indicates the image path, and <code>userName</code> indicates the name. <code>userDescription</code> indicates the user description. </p>\n'
|
||||
},
|
||||
'codeFiles': ['data-source.vue']
|
||||
},
|
||||
|
|
@ -27,16 +32,19 @@ export default {
|
|||
},
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
'<p>定制弹框不显示的内容\n<code>show-img</code> 是否显示头像,值为 true 时显示， false 隐藏,默认 true。\n<code>show-name</code> 是否显示名字,值为 true 时显示， false 隐藏,默认 true。\n<code>show-number</code> 是否显示用户账号,值为 true 时显示， false 隐藏,默认 true。</p>\n',
|
||||
'<p>通过设置<code>show-img</code> 是否显示头像，<code>show-name</code> 是否显示名字,<code>show-number</code> 是否显示用户账号,默认值为<code>true</code>。</p>',
|
||||
'en-US':
|
||||
'<p>Customize the content that is not displayed in the dialog box.\n<code>show-img</code>Indicates whether to display the avatar. The value true indicates that the avatar is displayed. The value false indicates that the avatar is hidden. The default value is true. \n<code>show-name</code> Indicates whether to display the name. The value true indicates that the name is displayed, and the value false indicates that the name is hidden. The default value is true. \n<code>show-number</code>Indicates whether to display the user account number. If the value is true, the user account number. is displayed. If the value is false, the user account number. is hidden. The default value is true. </p>\n'
|
||||
'<p>By setting<code>show img</code>to display avatars,<code>show name</code>to display names, and<code>show number</code>to display user accounts, the default value is<code>true</code>.</p> '
|
||||
},
|
||||
'codeFiles': ['not-displayed-content.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'slots-usercontact',
|
||||
'name': { 'zh-CN': '自定义默认插槽', 'en-US': 'Customize the default slot' },
|
||||
'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example.' },
|
||||
'desc': {
|
||||
'zh-CN': '通过在组件内插入<code>div</code>元素即可。',
|
||||
'en-US': 'You can insert the<code>div</code>element within the component.'
|
||||
},
|
||||
'codeFiles': ['slots-usercontact.vue']
|
||||
}
|
||||
],
|
||||
|
|
@ -44,12 +52,12 @@ export default {
|
|||
{
|
||||
'name': 'user-contact',
|
||||
'type': 'component',
|
||||
'properties': [
|
||||
'props': [
|
||||
{
|
||||
'name': 'data',
|
||||
'type': 'object',
|
||||
'defaultValue': '',
|
||||
'desc': { 'zh-CN': '设置的数据;数据设置', 'en-US': 'Setted data; Data Settings' },
|
||||
'desc': { 'zh-CN': '设置的数据', 'en-US': 'Setted data; Data Settings' },
|
||||
'demoId': 'data-source'
|
||||
},
|
||||
{
|
||||
|
|
@ -58,7 +66,7 @@ export default {
|
|||
'defaultValue': '该属性的默认值为 true',
|
||||
'desc': {
|
||||
'zh-CN': '是否显示头像，默认 true',
|
||||
'en-US': 'Indicates whether to display the avatar. The default value is true.'
|
||||
'en-US': 'Indicates whether to display the avatar. The default value is true'
|
||||
},
|
||||
'demoId': 'not-displayed-content'
|
||||
},
|
||||
|
|
@ -68,7 +76,7 @@ export default {
|
|||
'defaultValue': '该属性的默认值为 true',
|
||||
'desc': {
|
||||
'zh-CN': '是否显示姓名 userName,默认 true',
|
||||
'en-US': 'Indicates whether to display userName. The default value is true.'
|
||||
'en-US': 'Indicates whether to display userName. The default value is true'
|
||||
},
|
||||
'demoId': 'not-displayed-content'
|
||||
},
|
||||
|
|
@ -78,7 +86,7 @@ export default {
|
|||
'defaultValue': '该属性的默认值为 true',
|
||||
'desc': {
|
||||
'zh-CN': '是否显示工号 roleNumber,默认 true',
|
||||
'en-US': 'Indicates whether to display the employee ID roleNumber. The default value is true.'
|
||||
'en-US': 'Indicates whether to display the employee ID roleNumber. The default value is true'
|
||||
},
|
||||
'demoId': 'not-displayed-content'
|
||||
},
|
||||
|
|
@ -88,7 +96,7 @@ export default {
|
|||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '为 popper 添加类名(可参考 popover 组件)',
|
||||
'en-US': 'Add a class name for the popper. For details, see the popover component.'
|
||||
'en-US': 'Add a class name for the popper. For details, see the popover component'
|
||||
},
|
||||
'demoId': ''
|
||||
},
|
||||
|
|
@ -100,7 +108,7 @@ export default {
|
|||
'zh-CN':
|
||||
'是否将弹出框插入至 body 元素。在弹出框的定位出现问题时，可将该属性设置为 false (可参考 select 组件)',
|
||||
'en-US':
|
||||
'Indicates whether to insert a pop-up box to the body element. If a fault occurs in locating the fault in the dialog box that is displayed, you can set this attribute to false (for details, see the select component).'
|
||||
'Indicates whether to insert a pop-up box to the body element. If a fault occurs in locating the fault in the dialog box that is displayed, you can set this attribute to false (for details, see the select component)'
|
||||
},
|
||||
'demoId': ''
|
||||
},
|
||||
|
|
|
|||
|
|
@ -5,14 +5,17 @@ export default {
|
|||
{
|
||||
'demoId': 'basic-usage',
|
||||
'name': { 'zh-CN': '基本用法', 'en-US': 'Basic Usage' },
|
||||
'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example.' },
|
||||
'desc': {
|
||||
'zh-CN': '通过 <code>type="icon"</code> 设置头像。',
|
||||
'en-US': 'Set a profile picture through<code>type="icon"</code>.'
|
||||
},
|
||||
'codeFiles': ['basic-usage.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'min-user-head',
|
||||
'name': { 'zh-CN': '小头像', 'en-US': 'Avatar' },
|
||||
'desc': {
|
||||
'zh-CN': '<p>可通过 <code>min</code> 设置小头像。</p>\n',
|
||||
'zh-CN': '<p>通过 <code>min</code> 设置小头像。</p>\n',
|
||||
'en-US': '<p>You can use <code>min</code> to set a small avatar. </p>\n'
|
||||
},
|
||||
'codeFiles': ['min-user-head.vue']
|
||||
|
|
@ -21,7 +24,7 @@ export default {
|
|||
'demoId': 'round-user-head',
|
||||
'name': { 'zh-CN': '圆形头像', 'en-US': 'Round Head' },
|
||||
'desc': {
|
||||
'zh-CN': '<p>可通过 <code>round</code> 设置圆形头像。</p>\n',
|
||||
'zh-CN': '<p>通过 <code>round</code> 设置圆形头像。</p>\n',
|
||||
'en-US': '<p>You can use <code>round</code> to set a round avatar. </p>\n'
|
||||
},
|
||||
'codeFiles': ['round-user-head.vue']
|
||||
|
|
@ -30,7 +33,7 @@ export default {
|
|||
'demoId': 'label-user-head',
|
||||
'name': { 'zh-CN': '文字头像', 'en-US': 'Avatar' },
|
||||
'desc': {
|
||||
'zh-CN': '<p>可通过 <code>type="label"</code> 设置文字头像。</p>\n',
|
||||
'zh-CN': '<p>通过 <code>type="label"</code> 设置文字头像。</p>\n',
|
||||
'en-US': '<p>You can use <code>type="label"</code> to set the text avatar. </p>\n'
|
||||
},
|
||||
'codeFiles': ['label-user-head.vue']
|
||||
|
|
@ -39,7 +42,7 @@ export default {
|
|||
'demoId': 'icon-user-head',
|
||||
'name': { 'zh-CN': '图标头像', 'en-US': 'Icon avatar' },
|
||||
'desc': {
|
||||
'zh-CN': '<p>可通过 <code>type="icon"</code> 设置图标头像。</p>\n',
|
||||
'zh-CN': '<p>通过 <code>type="icon"</code> 设置图标头像。</p>\n',
|
||||
'en-US': '<p>You can use <code>type="icon"</code> to set the icon avatar. </p>\n'
|
||||
},
|
||||
'codeFiles': ['icon-user-head.vue']
|
||||
|
|
@ -48,7 +51,7 @@ export default {
|
|||
'demoId': 'image-user-head',
|
||||
'name': { 'zh-CN': '图片头像', 'en-US': 'Avatar' },
|
||||
'desc': {
|
||||
'zh-CN': '<p>可通过 <code>type="image"</code> 设置图片头像。</p>\n',
|
||||
'zh-CN': '<p>通过 <code>type="image"</code> 设置图片头像。</p>\n',
|
||||
'en-US': '<p>You can use <code>type="image"</code> to set the picture avatar. </p>\n'
|
||||
},
|
||||
'codeFiles': ['image-user-head.vue']
|
||||
|
|
@ -56,19 +59,28 @@ export default {
|
|||
{
|
||||
'demoId': 'message-count-total',
|
||||
'name': { 'zh-CN': '头像消息计数', 'en-US': 'Avatar Message Count' },
|
||||
'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example.' },
|
||||
'desc': {
|
||||
'zh-CN': '通过<code>:message-total="100"</code>设置消息数据。',
|
||||
'en-US': `Set message data through<code>message-total='100'</code>. `
|
||||
},
|
||||
'codeFiles': ['message-count-total.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'message-count-type',
|
||||
'name': { 'zh-CN': '使用小红点代替具体数值', 'en-US': 'Use a red dot instead of a specific value.' },
|
||||
'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example.' },
|
||||
'name': { 'zh-CN': '使用小红点代替具体数值', 'en-US': 'Use a red dot instead of a specific value' },
|
||||
'desc': {
|
||||
'zh-CN': '通过<code>:message-type="basic"</code>设置消息显示替代成小红点。',
|
||||
'en-US': `Set the message display to be replaced with a small red dot through<code>message-type='basic'</code>.`
|
||||
},
|
||||
'codeFiles': ['message-count-type.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'message-count-limit',
|
||||
'name': { 'zh-CN': '消息计数上限', 'en-US': 'Maximum number of messages' },
|
||||
'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example.' },
|
||||
'desc': {
|
||||
'zh-CN': '通过<code>:message-upper-limit="99"</code>设置消息数据上限。',
|
||||
'en-US': `Set the message data upper limit through<code>message-upper-limit='99'</code>.`
|
||||
},
|
||||
'codeFiles': ['message-count-limit.vue']
|
||||
},
|
||||
{
|
||||
|
|
@ -76,7 +88,7 @@ export default {
|
|||
'name': { 'zh-CN': '自定义颜色', 'en-US': 'Custom Color' },
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
'<p>可通过 <code>color</code> 自定义颜色，图标或文字类型（type属性值为 icon 或 label ）的情况下，设置字体颜色和背景色。</p>\n',
|
||||
'<p>通过 <code>color</code> 自定义颜色，图标或文字类型（type属性值为 icon 或 label ）的情况下，设置字体颜色和背景色。</p>\n',
|
||||
'en-US':
|
||||
'<p>You can use <code>color</code> to customize the color. If the icon or text type is set to icon or label, set the font color and background color. </p>\n'
|
||||
},
|
||||
|
|
@ -86,7 +98,7 @@ export default {
|
|||
'demoId': 'custom-background-color',
|
||||
'name': { 'zh-CN': '自定义背景颜色', 'en-US': 'Custom background color' },
|
||||
'desc': {
|
||||
'zh-CN': '<p>可通过 <code>background-color</code> 自定义背景颜色。</p>\n',
|
||||
'zh-CN': '<p>通过 <code>background-color</code> 自定义背景颜色。</p>\n',
|
||||
'en-US': '<p>You can use <code>background-color</code> to customize the background color. </p>\n'
|
||||
},
|
||||
'codeFiles': ['custom-background-color.vue']
|
||||
|
|
@ -103,7 +115,11 @@ export default {
|
|||
{
|
||||
'demoId': 'render-user-head-in-grid',
|
||||
'name': { 'zh-CN': 'Grid 单元格展示头像', 'en-US': 'Avatar Displayed in Grid Cells' },
|
||||
'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example.' },
|
||||
'desc': {
|
||||
'zh-CN': '通过Grid单元格属性<code>renderer</code>传入封装用户头像组件（HTML格式）。',
|
||||
'en-US':
|
||||
'Pass in the encapsulated user avatar component (in HTML format) through the Grid cell attribute<code>renderer</code>.'
|
||||
},
|
||||
'codeFiles': ['render-user-head-in-grid.vue']
|
||||
}
|
||||
],
|
||||
|
|
@ -111,35 +127,35 @@ export default {
|
|||
{
|
||||
'name': 'user-head',
|
||||
'type': 'component',
|
||||
'properties': [
|
||||
'props': [
|
||||
{
|
||||
'name': 'background-color',
|
||||
'type': 'string',
|
||||
'defaultValue': '#d9d9d9',
|
||||
'desc': { 'zh-CN': '背景色 。', 'en-US': 'Background color.' },
|
||||
'defaultValue': `'#d9d9d9'`,
|
||||
'desc': { 'zh-CN': '背景色', 'en-US': 'Background color' },
|
||||
'demoId': 'custom-background-color'
|
||||
},
|
||||
{
|
||||
'name': 'color',
|
||||
'type': 'string',
|
||||
'defaultValue': '#ffffff',
|
||||
'desc': { 'zh-CN': '文字颜色 。', 'en-US': 'Text color.' },
|
||||
'defaultValue': `'#ffffff'`,
|
||||
'desc': { 'zh-CN': '文字颜色', 'en-US': 'Text color' },
|
||||
'demoId': 'color'
|
||||
},
|
||||
{
|
||||
'name': 'message-total',
|
||||
'type': 'number',
|
||||
'defaultValue': '',
|
||||
'desc': { 'zh-CN': '消息计数 。', 'en-US': 'Number of messages.' },
|
||||
'desc': { 'zh-CN': '消息计数', 'en-US': 'Number of messages' },
|
||||
'demoId': 'message-count-total'
|
||||
},
|
||||
{
|
||||
'name': 'message-type',
|
||||
'type': 'string',
|
||||
'defaultValue': 'details',
|
||||
'defaultValue': `'details'`,
|
||||
'desc': {
|
||||
'zh-CN': '消息类型 details|basic 可选 。;该属性的可选值为 details / basic',
|
||||
'en-US': 'Message type details|basic is optional. ;The value of this attribute can be details or basic'
|
||||
'zh-CN': '消息类型 details|basic 可选。该属性的可选值为 details / basic',
|
||||
'en-US': 'Message type details|basic is optional. The value of this attribute can be details or basic.'
|
||||
},
|
||||
'demoId': 'message-count-type'
|
||||
},
|
||||
|
|
@ -147,29 +163,29 @@ export default {
|
|||
'name': 'message-upper-limit',
|
||||
'type': 'number',
|
||||
'defaultValue': '0',
|
||||
'desc': { 'zh-CN': '消息显示上限 。', 'en-US': 'Maximum number of displayed messages.' },
|
||||
'desc': { 'zh-CN': '消息显示上限', 'en-US': 'Maximum number of displayed messages' },
|
||||
'demoId': 'message-count-limit'
|
||||
},
|
||||
{
|
||||
'name': 'min',
|
||||
'type': 'boolean',
|
||||
'defaultValue': 'false',
|
||||
'desc': { 'zh-CN': '小尺寸模式 。', 'en-US': 'Small size mode.' },
|
||||
'desc': { 'zh-CN': '小尺寸模式', 'en-US': 'Small size mode' },
|
||||
'demoId': 'min-user-head'
|
||||
},
|
||||
{
|
||||
'name': 'round',
|
||||
'type': 'boolean',
|
||||
'defaultValue': '',
|
||||
'desc': { 'zh-CN': '圆形模式 。', 'en-US': 'Circular mode.' },
|
||||
'desc': { 'zh-CN': '圆形模式', 'en-US': 'Circular mode' },
|
||||
'demoId': 'round-user-head'
|
||||
},
|
||||
{
|
||||
'name': 'type',
|
||||
'type': 'string',
|
||||
'defaultValue': 'label',
|
||||
'defaultValue': `'label'`,
|
||||
'desc': {
|
||||
'zh-CN': '头像类型，icon|image|label 可选。;该属性的可选值为 icon / image / label',
|
||||
'zh-CN': '头像类型，icon|image|label 可选。该属性的可选值为 icon / image / label',
|
||||
'en-US':
|
||||
'Avatar type. The options are icon, image, and label. ;The value of this attribute can be icon / image / label'
|
||||
},
|
||||
|
|
@ -182,7 +198,7 @@ export default {
|
|||
'desc': {
|
||||
'zh-CN': 'type=icon 时为图标类名，type=label时为字体串，type=image时为资源路径',
|
||||
'en-US':
|
||||
'If type is set to icon, it indicates the icon class name. If type is set to label, it indicates the font string. If type is set to image, it indicates the resource path.'
|
||||
'If type is set to icon, it indicates the icon class name. If type is set to label, it indicates the font string. If type is set to image, it indicates the resource path'
|
||||
},
|
||||
'demoId': 'icon-user-head'
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue