@opentiny/vue-docs 2.2.17 → 2.2.19

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

@@ -9,10 +9,12 @@ export default {
         'en-US': 'Basic Usage'
       },
       desc: {
-        'zh-CN':
-          '\n          通过 <code>content</code> 属性指定提示的内容。<br>\n          通过 <code>placement</code> 属性指定提示的显示位置，支持12个显示位置。<br>\n          通过 <code>effect</code> 属性指定提示的效果。<br>\n        ',
-        'en-US':
-          '\n          Specify the content of the prompt via the <code>content</code> attribute <br>\n          Use the <code>placement</code> property to specify the display location of the prompt. 12 display locations are supported <br>\n          Specify the effect of the prompt with the <code>effect</code> property <br>\n        '
+        'zh-CN': `通过 <code>content</code> 属性指定提示的内容。<br>
+           通过 <code>placement</code> 属性指定提示的显示位置，支持12个显示位置。<br>
+           通过 <code>effect</code> 属性指定提示的效果。<br>`,
+        'en-US': `Specify the content of the prompt via the <code>content</code> attribute <br>
+          Use the <code>placement</code> property to specify the display location of the prompt. 12 display locations are supported <br>
+          Specify the effect of the prompt with the <code>effect</code> property <br>`
       },
       codeFiles: ['basic-usage.vue']
     },
@@ -23,10 +25,12 @@ export default {
         'en-US': 'Theme'
       },
       desc: {
-        'zh-CN':
-          '\n          通过 <code>effect</code> 属性设置明暗效果，可选值 <code>dark/light</code> ,默认值为 <code>dark</code>，通常使用<code>effect</code>设置效果。<br>\n          通过 <code>type</code> 属性设置主题,它的优先级大于 <code>effect</code>。\n        ',
-        'en-US':
-          '\n          The <code>effect</code> property is used to set the light and dark effect. The optional dark/light effect is dark by default. The effect< br> is usually set by <code>effect</code>.\n          Set the theme with the <code>type</code> property, which has a higher priority than the <code>effect</code>.\n         '
+        'zh-CN': `
+            通过 <code>effect</code> 属性设置明暗效果，可选值 <code>dark/light</code> ,默认值为 <code>dark</code>，通常使用<code>effect</code>设置效果。<br>
+            通过 <code>type</code> 属性设置主题,它的优先级大于 <code>effect</code>。`,
+        'en-US': `
+            The <code>effect</code> property is used to set the light and dark effect. The optional dark/light effect is dark by default. The effect< br> is usually set by <code>effect</code>.
+            Set the theme with the <code>type</code> property, which has a higher priority than the <code>effect</code>.`
       },
       codeFiles: ['theme.vue']
     },
@@ -37,10 +41,16 @@ export default {
         'en-US': 'Control/disable'
       },
       desc: {
-        'zh-CN':
-          '\n            提示组件默认是监听鼠标移入/移出事件来触发，手动控制提示的出现，有以下方法：<br>\n            1.通过 <code>visible</code> 属性设置是否智能识别溢出后提示,属性取值为 <code> always / auto </code>。当取值为<code>auto</code>时，智能提示是自动识别文字是否有长度溢出，动态的显示提示。<br>\n            2.通过 <code>manual</code> 属性为 true 后,就可以通过设置 <code>v-model</code> 属性，动态控制显示和隐藏。<br>\n            3.通过 <code>diabled</code> 属性，直接禁用提示。<br>\n          ',
-        'en-US':
-          '\n            The Tooltip component is triggered by listening for mouse move in/out events by default, and manually controls the appearance of the prompt in the following ways: <br>\n            1. Use the <code>visible</code> property to set whether the overflow prompt is intelligently recognized. The property value is <code> always/auto </code>. If the value is <code>auto</code>, the smart prompt automatically identifies whether the text length overruns and dynamically displays the prompt. <br>\n            2. After the <code>manual</code> property is true, you can dynamically control the display and hiding of <br> by setting the <code>v-model</code> property.\n            3. Use the <code>diabled</code> property to disable the tooltip. <br>\n          '
+        'zh-CN': `
+          提示组件默认是监听鼠标移入/移出事件来触发，手动控制提示的出现，有以下方法：<br>
+          1.通过 <code>visible</code> 属性设置是否智能识别溢出后提示,属性取值为 <code> always / auto </code>。当取值为<code>auto</code>时，智能提示是自动识别文字是否有长度溢出，动态的显示提示。<br>
+          2.通过 <code>manual</code> 属性为 true 后,就可以通过设置 <code>v-model</code> 属性，动态控制显示和隐藏。<br>
+          3.通过 <code>disabled</code> 属性，直接禁用提示。<br>`,
+        'en-US': `
+          The Tooltip component is triggered by listening for mouse move in/out events by default, and manually controls the appearance of the prompt in the following ways: <br>
+          1. Use the <code>visible</code> property to set whether the overflow prompt is intelligently recognized. The property value is <code> always/auto </code>. If the value is <code>auto</code>, the smart prompt automatically identifies whether the text length overruns and dynamically displays the prompt. <br>
+          2. After the <code>manual</code> property is true, you can dynamically control the display and hiding of <br> by setting the <code>v-model</code> property.
+          3. Use the <code>disabled</code> property to disable the tooltip. <br>`
       },
       codeFiles: ['control.vue']
     },
@@ -51,10 +61,14 @@ export default {
         'en-US': 'Tooltip content'
       },
       desc: {
-        'zh-CN':
-          '\n            通过 <code>content</code> 属性指定弹出的文本。<br>\n            通过 <code>renderContent</code> 自定义渲染函数，可使用 <code>JSX</code> 返回需要渲染的节点内容。<br>\n            通过 <code>content</code> 插槽，自定义内容，当弹出复杂的内容结构时，推荐使用插槽的方式。<br>\n          ',
-        'en-US':
-          '\n            Specify the pop-up text via the <code>content</code> property. <br>\n            A custom rendering function with <code>renderContent</code> returns the node content to be rendered. The function is declared as (h, content)=>vnode. <br>\n            The <code>content</code> slot is used to customize content. It is recommended to use the slot when a complex content structure pops up. <br>\n         '
+        'zh-CN': `
+          通过 <code>content</code> 属性指定弹出的文本。<br>
+          通过 <code>renderContent</code> 自定义渲染函数，可使用 <code>JSX</code> 返回需要渲染的节点内容。<br>
+          通过 <code>content</code> 插槽，自定义内容，当弹出复杂的内容结构时，推荐使用插槽的方式。<br>`,
+        'en-US': `
+          Specify the pop-up text via the <code>content</code> property. <br>
+          A custom rendering function with <code>renderContent</code> returns the node content to be rendered. The function is declared as (h, content)=>vnode. <br>
+          The <code>content</code> slot is used to customize content. It is recommended to use the slot when a complex content structure pops up. <br>`
       },
       codeFiles: ['content.vue']
     },
@@ -67,7 +81,7 @@ export default {
       desc: {
         'zh-CN': '通过 <code>offset</code> 属性设置组件出现位置的偏移量。',
         'en-US':
-          'Use the <code>offset</code> property to set the offset of the position where the Tooltip component appears. \n'
+          'Use the <code>offset</code> property to set the offset of the position where the Tooltip component appears. '
       },
       codeFiles: ['offset.vue']
     },
@@ -78,10 +92,14 @@ export default {
         'en-US': 'Features of the popper layer'
       },
       desc: {
-        'zh-CN':
-          '\n          通过 <code> visible-arrow </code> 属性设置是否显示小箭头。<br>\n          通过 <code> enterable </code> 属性设置鼠标是否可进入到 tooltip 中。<br>\n          通过 <code> popper-class </code> 属性设置弹出dom的类名，便于用户定制弹出层的样式。<br>\n        ',
-        'en-US':
-          '\n            The <code> visible-arrow </code> property sets whether the small arrow is displayed. <br>\n            Use the <code> enterable </code> property to set whether the mouse can enter the tooltip. <br>\n            You can use the <code> popper-class </code> property to set the class name of the eject dom to customize the style of the eject layer. <br>\n          '
+        'zh-CN': `
+          通过 <code> visible-arrow </code> 属性设置是否显示小箭头。<br>
+          通过 <code> enterable </code> 属性设置鼠标是否可进入到 tooltip 中。<br>
+          通过 <code> popper-class </code> 属性设置弹出dom的类名，便于用户定制弹出层的样式。<br>`,
+        'en-US': `
+          The <code> visible-arrow </code> property sets whether the small arrow is displayed. <br>
+          Use the <code> enterable </code> property to set whether the mouse can enter the tooltip. <br>
+          You can use the <code> popper-class </code> property to set the class name of the eject dom to customize the style of the eject layer. <br>`
       },
       codeFiles: ['custom-popper.vue']
     },
@@ -92,10 +110,16 @@ export default {
         'en-US': 'Delay control'
       },
       desc: {
-        'zh-CN':
-          '\n            通过 <code>open-delay</code> 属性设置组件延迟出现的时间，单位毫秒,默认值为 0。<br>\n            通过 <code>close-delay</code> 属性设置 组件延迟关闭的时间，单位毫秒,默认值为 300。<br>\n            通过 <code>hide-after</code> 属性设置组件出现后自动隐藏的时间，单位毫秒，为 0 则不会自动隐藏,默认值为 0。<br>\n          ',
-        'en-US':
-          '\n            Use the <code>open-delay</code> property to set the delay in milliseconds for the Tooltip component to appear. The default value is 0. <br>\n            Use the <code>close-delay</code> property to set the delay in closing the Tooltip component, in milliseconds. The default value is 300. <br>\n            Run the <code>hide-after</code> property to set the time for the Tooltip component to be automatically hidden after it appears, in milliseconds. If it is 0, it will not be automatically hidden. The default value is 0. <br>\n          '
+        'zh-CN': `
+            通过 <code>open-delay</code> 属性设置组件延迟出现的时间，单位毫秒,默认值为 0。<br>
+            通过 <code>close-delay</code> 属性设置 组件延迟关闭的时间，单位毫秒,默认值为 300。<br>
+            通过 <code>hide-after</code> 属性设置组件出现后自动隐藏的时间，单位毫秒，为 0 则不会自动隐藏,默认值为 0。<br>
+          `,
+        'en-US': `
+            Use the <code>open-delay</code> property to set the delay in milliseconds for the Tooltip component to appear. The default value is 0. <br>
+            Use the <code>close-delay</code> property to set the delay in closing the Tooltip component, in milliseconds. The default value is 300. <br>
+            Run the <code>hide-after</code> property to set the time for the Tooltip component to be automatically hidden after it appears, in milliseconds. If it is 0, it will not be automatically hidden. The default value is 0. <br>
+            `
       },
       codeFiles: ['delay.vue']
     },
@@ -131,10 +155,12 @@ export default {
         'en-US': 'Customized Animation'
       },
       desc: {
-        'zh-CN':
-          '配置 <code> pre </code>  为  <code> true </code> ，就会预格式化  <code> content </code>  文本。<br>\n        被包围在 &lt;pre&gt; &lt;/pre&gt 标签元素中的文本会保留空格和换行符，文本也会呈现为等宽字体。',
-        'en-US':
-          'If <code> pre </code> is set to <code> true </code>, the <code> content </code> text is preformatted.<br>\n          Text enclosed in the <pre> </pre&gt tag element retains spaces and newline characters, and the text is rendered in a uniform font.'
+        'zh-CN': `
+          配置 <code> pre </code>  为  <code> true </code> ，就会预格式化  <code> content </code>  文本。<br>
+          被包围在 <code> pre </code>  标签元素中的文本会保留空格和换行符，文本也会呈现为等宽字体。`,
+        'en-US': `
+          If <code> pre </code> is set to <code> true </code>, the <code> content </code> text is preformatted.<br>
+          Text enclosed in the <code> pre </code> tag element retains spaces and newline characters, and the text is rendered in a uniform font.`
       },
       codeFiles: ['pre.vue']
     }

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

@@ -9,10 +9,14 @@ export default {
         'en-US': 'Basic Usage'
       },
       desc: {
-        'zh-CN':
-          '\n            通过 <code>data</code> 属性提供左右列表全量的数据源，其是一个数组，每个数据项中默认字段有 <code>key</code>、<code>label</code>、<code>disabled</code>。<br>\n            通过 <code>value</code> 属性指定右列表值的数组，其选择项只展示在右侧列表。\n          ',
-        'en-US':
-          '\n            The <code>data</code> property provides the full data source for the left and right lists, which is an array of objects with the default fields key, label, and disabled for each item. <br>\n            The <code>value</code> property specifies an array of values for the right list whose selections are displayed only in the right list.\n          '
+        'zh-CN': `
+          通过 <code>data</code> 属性提供左右列表全量的数据源，其是一个数组，每个数据项中默认字段有 <code>key</code>、<code>label</code>、<code>disabled</code>。<br>
+          通过 <code>value</code> 属性指定右列表值的数组，其选择项只展示在右侧列表。
+          `,
+        'en-US': `
+          The <code>data</code> property provides the full data source for the left and right lists, which is an array of objects with the default fields key, label, and disabled for each item. <br>
+          The <code>value</code> property specifies an array of values for the right list whose selections are displayed only in the right list.
+          `
       },
       codeFiles: ['basic-usage.vue']
     },
@@ -23,10 +27,14 @@ export default {
         'en-US': 'Customized List Title'
       },
       desc: {
-        'zh-CN':
-          '\n          通过 <code>titles</code> 属性，可对左右列表的标题进行自定义。<br>\n          通过 <code>format</code> 属性，可定制左右侧列表顶部的数据统计的显示格式，请参考下面示例。\n        ',
-        'en-US':
-          '\n            The titles of the left and right lists can be customized using the <code>titles</code> property. <br>\n            The <code>format</code> attribute allows you to customize the format of the statistics at the top of the left and right lists, as shown in the following example:\n          '
+        'zh-CN': `
+          通过 <code>titles</code> 属性，可对左右列表的标题进行自定义。<br>
+          通过 <code>format</code> 属性，可定制左右侧列表顶部的数据统计的显示格式，请参考下面示例。
+          `,
+        'en-US': `
+          The titles of the left and right lists can be customized using the <code>titles</code> property. <br>
+          The <code>format</code> attribute allows you to customize the format of the statistics at the top of the left and right lists, as shown in the following example:
+          `
       },
       codeFiles: ['custom-titles.vue']
     },
@@ -37,10 +45,18 @@ export default {
         'en-US': 'Display All Move Buttons'
       },
       desc: {
-        'zh-CN':
-          '\n          按钮区包含默认转移按钮和全部转移按钮。按钮的高亮与禁用，组件内部会自动识别处理。<br>\n          通过 <code>show-all-btn</code> 属性设置展示全部转移按钮，属性默认值为<code>false</code>。<br>\n          通过 <code>button-texts</code> 属性自定义左右穿梭的默认转移按钮文本，接受包含2个字符串的数组值。全部转移按钮不能自定义文本。<br>\n          你可以通过<code>to-left-disable</code> 和 <code>to-right-disable</code> 属性来指定默认转移按钮没有选中项时的状态。\n        ',
-        'en-US':
-          '\n          The button area contains two types of buttons: default buttons and all buttons. Buttons are highlighted and disabled automatically by the component itself. <br>\n          show all the move buttons with the <code>show-all-btn</code> property, which defaults to <code>false</code>. <br>\n          The default button texts of the left and right shuttles are defined by the <code>button-texts</code> attribute, which accepts an array value containing 2 strings. No custom text for all buttons. <br>\n          The <code>to-left-disable</code> and <code>to-right-disable</code> properties allow you to specify the state of the default button when no items are selected.\n         '
+        'zh-CN': `
+          按钮区包含默认转移按钮和全部转移按钮。按钮的高亮与禁用，组件内部会自动识别处理。<br>
+          通过 <code>show-all-btn</code> 属性设置展示全部转移按钮，属性默认值为<code>false</code>。<br>
+          通过 <code>button-texts</code> 属性自定义左右穿梭的默认转移按钮文本，接受包含2个字符串的数组值。全部转移按钮不能自定义文本。<br>
+          你可以通过<code>to-left-disable</code> 和 <code>to-right-disable</code> 属性来指定默认转移按钮没有选中项时的状态。
+          `,
+        'en-US': `
+          The button area contains two types of buttons: default buttons and all buttons. Buttons are highlighted and disabled automatically by the component itself. <br>
+          show all the move buttons with the <code>show-all-btn</code> property, which defaults to <code>false</code>. <br>
+          The default button texts of the left and right shuttles are defined by the <code>button-texts</code> attribute, which accepts an array value containing 2 strings. No custom text for all buttons. <br>
+          The <code>to-left-disable</code> and <code>to-right-disable</code> properties allow you to specify the state of the default button when no items are selected.
+          `
       },
       codeFiles: ['custom-btns.vue']
     },
@@ -64,10 +80,22 @@ export default {
         'en-US': 'Customized Data Item Rendering'
       },
       desc: {
-        'zh-CN':
-          '\n          通过 <code> props </code> 属性,可以指定<code> key / label /disabled </code>的映射列，以支持用户传入非标准格式的数据到<code>data</code>属性。<br>\n          通过 <code> default </code> 插槽,自定义数据项渲染的 dom 结构，推荐使用插槽的方式。<br>\n          通过 <code> render-content </code> 属性函数,使用 JSX 功能，去自定义数据项渲染的 dom 结构。<br>\n          <div class="tip custom-block"><p class="custom-block-title">如果数据格式不是标准属性格式，则一定要通过<code>props</code>做属性映射！</div>\n        ',
-        'en-US':
-          '\n        Using the <code> props </code> property, you can simply specify that the <code> key/label /disabled </code> maps to the specified column of the data item. <br>\n        The <code> default </code> slot allows you to fully customize the dom structure rendered by the data items.It is recommended that you use slots. <br>\n        It is also possible to fully customize the dom structure rendered by a data item via the <code> render-content </code> property. <br>\n        <div class="tip custom-block"><p class="custom-block-title">If the data is not in a standard attribute format, be sure to use <code>props</code> for property mapping!</div>\n      '
+        'zh-CN': `
+          通过 <code> props </code> 属性,可以指定<code> key / label /disabled </code>的映射列，以支持用户传入非标准格式的数据到<code>data</code>属性。<br>
+          通过 <code> default </code> 插槽,自定义数据项渲染的 dom 结构，推荐使用插槽的方式。<br>
+          通过 <code> render-content </code> 属性函数,使用 JSX 功能，去自定义数据项渲染的 dom 结构。<br>
+          <div class="tip custom-block">
+            <p class="custom-block-title">如果数据格式不是标准属性格式，则一定要通过<code>props</code>做属性映射！</p>
+          </div>
+          `,
+        'en-US': `
+          Using the <code> props </code> property, you can simply specify that the <code> key/label /disabled </code> maps to the specified column of the data item. <br>
+          The <code> default </code> slot allows you to fully customize the dom structure rendered by the data items.It is recommended that you use slots. <br>
+          It is also possible to fully customize the dom structure rendered by a data item via the <code> render-content </code> property. <br>
+          <div class="tip custom-block">
+            <p class="custom-block-title">If the data is not in a standard attribute format, be sure to use <code>props</code> for property mapping!</p>
+          </div>
+          `
       },
       codeFiles: ['custom-render.vue']
     },
@@ -78,10 +106,20 @@ export default {
         'en-US': 'Custom Search Method'
       },
       desc: {
-        'zh-CN':
-          '\n          组件支持显示一个输入框，去过滤显示在左右列表的数据项。<br>\n          通过 <code>filterable</code> 属性开启左右侧列表的搜索功能，默认是根据 label 内容过滤。<br>\n          通过 <code>filter-placeholder</code> 属性自定义左右搜索框占位符。<br>\n          通过 <code>filter-method</code> 钩子函数，可自定义左右列表搜索的方法。<br>\n          调用 <code>clearQuery()</code> 方法，可清空左右侧列表的搜索框，参数为 left 或者 right 。<br>\n        ',
-        'en-US':
-          '\n          At the top of the left and right lists, you can display an input field to filter the data items that display the left and right lists. <br>\n          Use the <code>filterable</code> attribute to enable the search function of the left and right lists, which by default filter based on the label content. <br>\n          Use the <code>filter-placeholder</code> attribute to define the placeholder for the left and right search boxes. <br>\n          The <code>filter-method</code> hook allows you to customize the way you search the left and right lists.<br>\n          The <code>clearQuery()</code> method clears the search box in the left and right lists with either the left or right arguments.<br>\n        '
+        'zh-CN': `
+          组件支持显示一个输入框，去过滤显示在左右列表的数据项。<br>
+          通过 <code>filterable</code> 属性开启左右侧列表的搜索功能，默认是根据 label 内容过滤。<br>
+          通过 <code>filter-placeholder</code> 属性自定义左右搜索框占位符。<br>
+          通过 <code>filter-method</code> 钩子函数，可自定义左右列表搜索的方法。<br>
+          调用 <code>clearQuery()</code> 方法，可清空左右侧列表的搜索框，参数为 left 或者 right 。<br>
+          `,
+        'en-US': `
+          At the top of the left and right lists, you can display an input field to filter the data items that display the left and right lists. <br>
+          Use the <code>filterable</code> attribute to enable the search function of the left and right lists, which by default filter based on the label content. <br>
+          Use the <code>filter-placeholder</code> attribute to define the placeholder for the left and right search boxes. <br>
+          The <code>filter-method</code> hook allows you to customize the way you search the left and right lists.<br>
+          The <code>clearQuery()</code> method clears the search box in the left and right lists with either the left or right arguments.<br>
+          `
       },
       codeFiles: ['custom-filter.vue']
     },
@@ -92,10 +130,14 @@ export default {
         'en-US': 'Default options'
       },
       desc: {
-        'zh-CN':
-          '\n          通过 <code>left-default-checked</code>、<code>right-default-checked</code> 属性分别指定左右侧列表默认的勾选数据。禁用数据项默认无法勾选。<br>\n          通过组件实例上的<code>state</code>属性，可以查询组件当前左右列表的数据项和数据选中项等信息。\n        ',
-        'en-US':
-          '\n            The <code>left-default-checked</code> and <code>right-default-checked</code> attributes specify the default check data for the left and right lists, respectively. Disabling the data item cannot be checked by default. <br>\n            Using the <code>state</code> property on the component instance, you can query the current left and right list of the component for data items and data selected items.\n          '
+        'zh-CN': `
+          通过 <code>left-default-checked</code>、<code>right-default-checked</code> 属性分别指定左右侧列表默认的勾选数据。禁用数据项默认无法勾选。<br>
+          通过组件实例上的<code>state</code>属性，可以查询组件当前左右列表的数据项和数据选中项等信息。
+          `,
+        'en-US': `
+          The <code>left-default-checked</code> and <code>right-default-checked</code> attributes specify the default check data for the left and right lists, respectively. Disabling the data item cannot be checked by default. <br>
+          Using the <code>state</code> property on the component instance, you can query the current left and right list of the component for data items and data selected items.
+          `
       },
       codeFiles: ['default-checked.vue']
     },
@@ -106,10 +148,16 @@ export default {
         'en-US': 'Drag left and right'
       },
       desc: {
-        'zh-CN':
-          '<div class="tip custom-block"><p class="custom-block-title">使用拖拽功能时请先安装 sortablejs 插件</div>通过 <code>drop-config</code> 属性配置 sortablejs 插件进行左右拖拽穿梭。\n',
-        'en-US':
-          '<div class="tip custom-block"><p class="custom-block-title"> Please install sortablejs plugin before using drag and drop function </div> Pass The <code>drop-config</code> property config the sortablejs plugin to do the left-right drag shuttle.'
+        'zh-CN': `
+          <div class="tip custom-block">
+            <p class="custom-block-title">使用拖拽功能时请先安装 sortablejs 插件</p>
+          </div>
+          通过 <code>drop-config</code> 属性配置 sortablejs 插件进行左右拖拽穿梭。`,
+        'en-US': `
+        <div class="tip custom-block">
+          <p class="custom-block-title"> Please install sortablejs plugin before using drag and drop function </p>
+        </div>
+        Pass The <code>drop-config</code> property config the sortablejs plugin to do the left-right drag shuttle.`
       },
       codeFiles: ['drop-config.vue']
     },
@@ -120,10 +168,22 @@ export default {
         'en-US': 'Right Sorting Policy'
       },
       desc: {
-        'zh-CN':
-          '通过 <code>target-order</code> 属性设置右侧列表元素的排序策略，有 original 、push 、unshift 三个选项，默认为 original 。\n            <div class="tip custom-block">\n              <p class="custom-block-title">排序策略</p>\n              <div>\n                若为 original，则保持与数据源相同的顺序；<br>若为 push，则新加入的元素排在最后；<br>若为 unshift，则新加入的元素排在最前\n              </div>\n            </div>',
-        'en-US':
-          'The <code>target-order</code> property sets the sorting strategy of the elements in the list on the right.There are three options: original, push, and unshift.The default is original. \n<div class="tip custom-block"><p class="custom-block-title"> Sorting strategy \n If original, keep same order as data source \n if push, Then the new element is last.  nIf unshift, the new element is first. \n</div>'
+        'zh-CN': `
+        通过 <code>target-order</code> 属性设置右侧列表元素的排序策略，有 original 、push 、unshift 三个选项，默认为 original 。
+          <div class="tip custom-block">
+            <p class="custom-block-title">排序策略</p>
+            <div>
+              若为 original，则保持与数据源相同的顺序；<br>若为 push，则新加入的元素排在最后；<br>若为 unshift，则新加入的元素排在最前
+            </div>
+          </div>`,
+        'en-US': `
+          The <code>target-order</code> property sets the sorting strategy of the elements in the list on the right.There are three options: original, push, and unshift.The default is original.
+          <div class="tip custom-block">
+            <p class="custom-block-title"> Sorting strategy </p>
+            <div>
+             If original, keep same order as data source \n if push, Then the new element is last.  nIf unshift, the new element is first.
+            </div>
+          </div>`
       },
       codeFiles: ['target-order.vue']
     },
@@ -134,10 +194,14 @@ export default {
         'en-US': 'Clear the search box manually'
       },
       desc: {
-        'zh-CN':
-          '\n          调用 <code>before-transfer</code> 属性，接受一个函数来拦截穿梭的动作。 <br>\n          该函数参数为一个回调函数，执行回调函数，数据项才允许穿梭。\n        ',
-        'en-US':
-          '\n            Call the <code>before-transfer</code> property, which accepts a function to intercept the shuttle action. <br>\n            This function takes a callback function and executes the callback function before the data item is allowed to shuttle.\n          '
+        'zh-CN': `
+          调用 <code>before-transfer</code> 属性，接受一个函数来拦截穿梭的动作。 <br>
+          该函数参数为一个回调函数，执行回调函数，数据项才允许穿梭。
+          `,
+        'en-US': `
+          Call the <code>before-transfer</code> property, which accepts a function to intercept the shuttle action. <br>
+          This function takes a callback function and executes the callback function before the data item is allowed to shuttle.
+          `
       },
       codeFiles: ['before-transfer.vue']
     },
@@ -148,10 +212,16 @@ export default {
         'en-US': 'Nested Table'
       },
       desc: {
-        'zh-CN':
-          '当 <code>render</code> 属性里的 <code>plugin</code> 设置为 <code>Table</code> 时指定穿梭框渲染成表格，\n            以下属性 <code> columns </code>  <code> pager-op </code> <code> show-pager </code> 是会传递给内部的表格组件。<br>\n            属性 <code> left-columns </code> <code> right-columns </code> 可以分别指定左右列表的表头，优先级高于 <code> columns </code>  属性。\n          ',
-        'en-US':
-          'When <code>plugin</code> in the <code>render</code> attribute is set to <code>Table</code>, the shuttle box is rendered as a table,\n            The following property <code> columns </code> <code> pager-op </code> <code> show-pager </code> is a table component that will be passed inside.<br>\n            The <code> left-columns </code> <code> right-columns </code> attribute can specify the table headers of the left and right lists. The priority of the <code> left-columns </code> <code> right-columns </code> attribute is higher than that of the <code>columns</code> attribute.\n          '
+        'zh-CN': `
+          当 <code>render</code> 属性里的 <code>plugin</code> 设置为 <code>Table</code> 时指定穿梭框渲染成表格，
+          以下属性 <code> columns </code>  <code> pager-op </code> <code> show-pager </code> 是会传递给内部的表格组件。<br>
+          属性 <code> left-columns </code> <code> right-columns </code> 可以分别指定左右列表的表头，优先级高于 <code> columns </code>  属性。
+          `,
+        'en-US': `
+          When <code>plugin</code> in the <code>render</code> attribute is set to <code>Table</code>, the shuttle box is rendered as a table,
+          The following property <code> columns </code> <code> pager-op </code> <code> show-pager </code> is a table component that will be passed inside.<br>
+          The <code> left-columns </code> <code> right-columns </code> attribute can specify the table headers of the left and right lists. The priority of the <code> left-columns </code> <code> right-columns </code> attribute is higher than that of the <code>columns</code> attribute.
+          `
       },
       codeFiles: ['nested-table.vue']
     },
@@ -176,10 +246,26 @@ export default {
         'en-US': 'transfer Event'
       },
       desc: {
-        'zh-CN':
-          '主要有 <code>change</code>、<code>left-check-change</code>、<code>right-check-change</code> 三个事件。\n            <div class="tip custom-block">\n              <p class="custom-block-title">事件说明</p>\n                change：右侧列表元素变化时触发; <br> left-check-change：左侧列表元素被用户选中 / 取消选中时触发; <br>right-check-change：右侧列表元素被用户选中 / 取消选中时触发;\n              </div>',
-        'en-US':
-          'There are three main events: <code>change</code>, <code>left-check-change</code>, and <code>right-check-change</code>. \n<div class="tip custom-block"><p class="custom-block-title"> Event description \nchange: \nleft-check-change fires when the right side of the list changes: \nright-check-change: Fires when the left list element is selected/deselected by the user \n</div>'
+        'zh-CN': `
+          主要有 <code>change</code>、<code>left-check-change</code>、<code>right-check-change</code> 三个事件。
+          <div class="tip custom-block">
+            <p class="custom-block-title">事件说明</p>
+            <div>
+              change：右侧列表元素变化时触发; <br>
+              left-check-change：左侧列表元素被用户选中 / 取消选中时触发; <br>
+              right-check-change：右侧列表元素被用户选中 / 取消选中时触发;
+            </div>
+          </div> `,
+        'en-US': `
+        There are three main events: <code>change</code>, <code>left-check-change</code>, and <code>right-check-change</code>.
+        <div class="tip custom-block">
+          <p class="custom-block-title"> Event description </p>
+          <div>
+            change:Triggered when the elements in the list on the right change.<br>
+            left-check-change：left-check-change fires when the right side of the list changes.<br>
+            right-check-change: Fires when the left list element is selected/deselected by the user.
+          </div>
+        </div>`
       },
       codeFiles: ['transfer-events.vue']
     }