@opentiny/vue-docs 2.1.3 → 2.1.5

package/demos/pc/app/grid/align/footer-align/{left-footer-align-composition-api.vue → footer-align-composition-api.vue}

@@ -3,9 +3,9 @@
     <tiny-grid-column type="index" width="60"></tiny-grid-column>
     <tiny-grid-column type="selection" width="60"></tiny-grid-column>
     <tiny-grid-column field="name" title="公司名称"></tiny-grid-column>
-    <tiny-grid-column field="employees" title="员工数" footer-align="right"></tiny-grid-column>
-    <tiny-grid-column field="createdDate" title="创建日期"></tiny-grid-column>
-    <tiny-grid-column field="city" title="城市"></tiny-grid-column>
+    <tiny-grid-column field="employees" title="员工数（右对齐）" footer-align="right"></tiny-grid-column>
+    <tiny-grid-column field="age" title="平均年龄（左对齐）"></tiny-grid-column>
+    <tiny-grid-column field="wages" title="平均工资（居中对齐）" footer-align="center"></tiny-grid-column>
   </tiny-grid>
 </template>
 
@@ -17,58 +17,58 @@ const tableData = ref([
   {
     id: '1',
     name: 'GFD科技YX公司',
-    city: '福州',
+    wages: 6300,
     employees: 800,
-    createdDate: '2014-04-30 00:56:00'
+    age: 35
   },
   {
     id: '2',
     name: 'WWW科技YX公司',
-    city: '深圳',
+    wages: 8600,
     employees: 300,
-    createdDate: '2016-07-08 12:36:22'
+    age: 30
   },
   {
     id: '3',
     name: 'RFV有限责任公司',
-    city: '中山',
+    wages: 4800,
     employees: 1300,
-    createdDate: '2014-02-14 14:14:14'
+    age: 43
   },
   {
     id: '4',
     name: 'TGB科技YX公司',
-    city: '龙岩',
+    wages: 6500,
     employees: 360,
-    createdDate: '2013-01-13 13:13:13'
+    age: 26
   },
   {
     id: '5',
     name: 'YHN科技YX公司',
-    city: '韶关',
+    wages: 7100,
     employees: 810,
-    createdDate: '2012-12-12 12:12:12'
+    age: 36
   },
   {
     id: '6',
     name: 'WSX科技YX公司',
-    city: '黄冈',
+    wages: 5800,
     employees: 800,
-    createdDate: '2011-11-11 11:11:11'
+    age: 29
   },
   {
     id: '7',
     name: 'KBG物业YX公司',
-    city: '赤壁',
+    wages: 8800,
     employees: 400,
-    createdDate: '2016-04-30 23:56:00'
+    age: 44
   },
   {
     id: '8',
     name: '深圳市福德宝网络技术YX公司',
-    city: '厦门',
+    wages: 9100,
     employees: 540,
-    createdDate: '2016-06-03 13:53:25'
+    age: 25
   }
 ])
 
@@ -83,6 +83,14 @@ function footerMethod({ columns, data }) {
         return Math.floor(data.map((item) => item[column.property]).reduce((acc, item) => acc + item) / data.length)
       }
 
+      if (column.property === 'age') {
+        return Math.floor(data.map((item) => item[column.property]).reduce((acc, item) => acc + item) / data.length)
+      }
+
+      if (column.property === 'wages') {
+        return Math.floor(data.map((item) => item[column.property]).reduce((acc, item) => acc + item) / data.length)
+      }
+
       return null
     }),
     columns.map((column, columnIndex) => {
@@ -94,6 +102,14 @@ function footerMethod({ columns, data }) {
         return data.map((item) => item[column.property]).reduce((acc, item) => acc + item)
       }
 
+      if (column.property === 'age') {
+        return data.map((item) => item[column.property]).reduce((acc, item) => acc + item)
+      }
+
+      if (column.property === 'wages') {
+        return data.map((item) => item[column.property]).reduce((acc, item) => acc + item)
+      }
+
       return null
     })
   ]

package/demos/pc/app/grid/align/footer-align/{left-footer-align.vue → footer-align.vue}

@@ -3,9 +3,9 @@
     <tiny-grid-column type="index" width="60"></tiny-grid-column>
     <tiny-grid-column type="selection" width="60"></tiny-grid-column>
     <tiny-grid-column field="name" title="公司名称"></tiny-grid-column>
-    <tiny-grid-column field="employees" title="员工数" footer-align="right"></tiny-grid-column>
-    <tiny-grid-column field="createdDate" title="创建日期"></tiny-grid-column>
-    <tiny-grid-column field="city" title="城市"></tiny-grid-column>
+    <tiny-grid-column field="employees" title="员工数（右对齐）" footer-align="right"></tiny-grid-column>
+    <tiny-grid-column field="age" title="平均年龄（左对齐）"></tiny-grid-column>
+    <tiny-grid-column field="wages" title="平均工资（居中对齐）" footer-align="center"></tiny-grid-column>
   </tiny-grid>
 </template>
 
@@ -23,58 +23,58 @@ export default {
         {
           id: '1',
           name: 'GFD科技YX公司',
-          city: '福州',
+          wages: 6300,
           employees: 800,
-          createdDate: '2014-04-30 00:56:00'
+          age: 35
         },
         {
           id: '2',
           name: 'WWW科技YX公司',
-          city: '深圳',
+          wages: 8600,
           employees: 300,
-          createdDate: '2016-07-08 12:36:22'
+          age: 30
         },
         {
           id: '3',
           name: 'RFV有限责任公司',
-          city: '中山',
+          wages: 4800,
           employees: 1300,
-          createdDate: '2014-02-14 14:14:14'
+          age: 43
         },
         {
           id: '4',
           name: 'TGB科技YX公司',
-          city: '龙岩',
+          wages: 6500,
           employees: 360,
-          createdDate: '2013-01-13 13:13:13'
+          age: 26
         },
         {
           id: '5',
           name: 'YHN科技YX公司',
-          city: '韶关',
+          wages: 7100,
           employees: 810,
-          createdDate: '2012-12-12 12:12:12'
+          age: 36
         },
         {
           id: '6',
           name: 'WSX科技YX公司',
-          city: '黄冈',
+          wages: 5800,
           employees: 800,
-          createdDate: '2011-11-11 11:11:11'
+          age: 29
         },
         {
           id: '7',
           name: 'KBG物业YX公司',
-          city: '赤壁',
+          wages: 8800,
           employees: 400,
-          createdDate: '2016-04-30 23:56:00'
+          age: 44
         },
         {
           id: '8',
           name: '深圳市福德宝网络技术YX公司',
-          city: '厦门',
+          wages: 9100,
           employees: 540,
-          createdDate: '2016-06-03 13:53:25'
+          age: 25
         }
       ]
     }
@@ -91,6 +91,14 @@ export default {
             return Math.floor(data.map((item) => item[column.property]).reduce((acc, item) => acc + item) / data.length)
           }
 
+          if (column.property === 'age') {
+            return Math.floor(data.map((item) => item[column.property]).reduce((acc, item) => acc + item) / data.length)
+          }
+          
+          if (column.property === 'wages') {
+            return Math.floor(data.map((item) => item[column.property]).reduce((acc, item) => acc + item) / data.length)
+          }
+
           return null
         }),
         columns.map((column, columnIndex) => {
@@ -102,6 +110,14 @@ export default {
             return data.map((item) => item[column.property]).reduce((acc, item) => acc + item)
           }
 
+          if (column.property === 'age') {
+            return data.map((item) => item[column.property]).reduce((acc, item) => acc + item)
+          }
+
+          if (column.property === 'wages') {
+            return data.map((item) => item[column.property]).reduce((acc, item) => acc + item)
+          }
+
           return null
         })
       ]

package/demos/pc/app/grid/align/grid-align/{left-grid-align-composition-api.vue → grid-align-composition-api.vue}

@@ -1,11 +1,10 @@
 <template>
   <tiny-grid :data="tableData">
     <tiny-grid-column type="index" width="60"></tiny-grid-column>
-    <tiny-grid-column type="selection" width="60"></tiny-grid-column>
-    <tiny-grid-column field="name" title="公司名称"></tiny-grid-column>
-    <tiny-grid-column field="employees" title="员工数" align="right"></tiny-grid-column>
-    <tiny-grid-column field="createdDate" title="创建日期"></tiny-grid-column>
-    <tiny-grid-column field="city" title="城市"></tiny-grid-column>
+    <tiny-grid-column field="name" title="公司名称（左对齐）"></tiny-grid-column>
+    <tiny-grid-column field="employees" title="员工数（居中对齐）" align="center"></tiny-grid-column>
+    <tiny-grid-column field="createdDate" title="创建日期（右对齐）" align="right"></tiny-grid-column>
+    <tiny-grid-column field="city" title="城市（左对齐）" ></tiny-grid-column>
   </tiny-grid>
 </template>
 

package/demos/pc/app/grid/align/grid-align/{left-grid-align.vue → grid-align.vue}

@@ -1,11 +1,10 @@
 <template>
   <tiny-grid :data="tableData">
     <tiny-grid-column type="index" width="60"></tiny-grid-column>
-    <tiny-grid-column type="selection" width="60"></tiny-grid-column>
-    <tiny-grid-column field="name" title="公司名称"></tiny-grid-column>
-    <tiny-grid-column field="employees" title="员工数" align="right"></tiny-grid-column>
-    <tiny-grid-column field="createdDate" title="创建日期"></tiny-grid-column>
-    <tiny-grid-column field="city" title="城市"></tiny-grid-column>
+    <tiny-grid-column field="name" title="公司名称（左对齐）"></tiny-grid-column>
+    <tiny-grid-column field="employees" title="员工数（居中对齐）" align="center"></tiny-grid-column>
+    <tiny-grid-column field="createdDate" title="创建日期（右对齐）" align="right"></tiny-grid-column>
+    <tiny-grid-column field="city" title="城市（左对齐）" ></tiny-grid-column>
   </tiny-grid>
 </template>
 

package/demos/pc/app/grid/align/header-align/{left-header-align-composition-api.vue → header-align-composition-api.vue}

@@ -1,10 +1,10 @@
 <template>
   <tiny-grid :data="tableData" header-align="left">
     <tiny-grid-column type="index" width="60"></tiny-grid-column>
-    <tiny-grid-column field="name" title="公司名称"></tiny-grid-column>
-    <tiny-grid-column field="employees" title="员工数" header-align="right"></tiny-grid-column>
-    <tiny-grid-column field="createdDate" title="创建日期"></tiny-grid-column>
-    <tiny-grid-column field="city" title="城市"></tiny-grid-column>
+    <tiny-grid-column field="name" title="公司名称(左对齐)" ></tiny-grid-column>
+    <tiny-grid-column field="employees" title="员工数（右对齐）" header-align="right"></tiny-grid-column>
+    <tiny-grid-column field="createdDate" title="创建日期（居中对齐）" header-align="center"></tiny-grid-column>
+    <tiny-grid-column field="city" title="城市（左对齐）" ></tiny-grid-column>
   </tiny-grid>
 </template>
 

package/demos/pc/app/grid/align/{grid-align/right-grid-align.vue → header-align/header-align.vue}

@@ -1,11 +1,10 @@
 <template>
-  <tiny-grid :data="tableData" align="right">
+  <tiny-grid :data="tableData" >
     <tiny-grid-column type="index" width="60"></tiny-grid-column>
-    <tiny-grid-column type="selection" width="60"></tiny-grid-column>
-    <tiny-grid-column field="name" title="公司名称"></tiny-grid-column>
-    <tiny-grid-column field="employees" title="员工数" align="center"></tiny-grid-column>
-    <tiny-grid-column field="createdDate" title="创建日期"></tiny-grid-column>
-    <tiny-grid-column field="city" title="城市"></tiny-grid-column>
+    <tiny-grid-column field="name" title="公司名称(左对齐)" ></tiny-grid-column>
+    <tiny-grid-column field="employees" title="员工数（右对齐）" header-align="right"></tiny-grid-column>
+    <tiny-grid-column field="createdDate" title="创建日期（居中对齐）" header-align="center"></tiny-grid-column>
+    <tiny-grid-column field="city" title="城市（左对齐）" ></tiny-grid-column>
   </tiny-grid>
 </template>
 

package/demos/pc/app/grid/slot/editor-slot-composition-api.vue

@@ -0,0 +1,66 @@
+<template>
+  <div>
+    <tiny-grid :data="tableData" :edit-config="{ trigger: 'click', mode: 'row', showStatus: true }">
+      <tiny-grid-column type="index" width="60"></tiny-grid-column>
+      <tiny-grid-column field="name" title="插槽自定义列编辑" :editor="{ component: 'input', autoselect: true }">
+        <template #edit="data">
+          <tiny-input v-model="data.row.name" placeholder="请输入内容"></tiny-input>
+        </template>
+      </tiny-grid-column>
+      <tiny-grid-column field="employees" title="员工人数"></tiny-grid-column>
+      <tiny-grid-column field="area" title="所属区域"></tiny-grid-column>
+      <tiny-grid-column field="address" title="地址"></tiny-grid-column>
+      <tiny-grid-column field="introduction" title="公司简介" show-overflow></tiny-grid-column>
+    </tiny-grid>
+  </div>
+</template>
+
+<script>
+import { ref } from 'vue'
+import { Grid as TinyGrid, GridColumn as TinyGridColumn, Input as TinyInput } from '@opentiny/vue'
+
+const tableData = ref([
+  {
+    id: '1',
+    name: 'GFD科技YX公司',
+    area: '华东区',
+    address: '福州',
+    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+  },
+  {
+    id: '2',
+    name: 'WWW科技YX公司',
+    area: '华南区',
+    address: '深圳福田区',
+    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+  },
+  {
+    id: '3',
+    name: 'RFV有限责任公司',
+    area: '华南区',
+    address: '中山市',
+    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+  },
+  {
+    id: '4',
+    name: 'TGB科技YX公司',
+    area: '华东区',
+    address: '龙岩',
+    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+  },
+  {
+    id: '5',
+    name: 'YHN科技YX公司',
+    area: '华南区',
+    address: '韶关',
+    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+  },
+  {
+    id: '6',
+    name: 'WSX科技YX公司',
+    area: '华中区',
+    address: '黄冈',
+    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+  }
+])
+</script>

package/demos/pc/app/grid/webdoc/grid-align.js

@@ -2,85 +2,38 @@ export default {
   column: '1',
   owner: '',
   demos: [
-    {
-      'demoId': 'align-column-align',
-      'name': { 'zh-CN': '列对齐', 'en-US': 'Column Alignment' },
-      'desc': {
-        'zh-CN':
-          '<p><code>align</code> 设置单独列对齐方式 可选值为 <code>left</code> <code>center</code> <code>right</code>，默认值为 <code>left</code>。</p>\n<div class="tip custom-block"><p class="custom-block-title">TIP</p>\n<p>列设置的 <code>align</code> 会覆盖掉表格设置的 <code>align</code></p>\n</div>\n',
-        'en-US':
-          '<p><code>align</code> Sets the alignment mode of a separate column. The options are <code>left</code> <code>center</code> <code>right</code>. The default value is <code>left</code>. <code>align</code> set in the </p>\n<div class="tip custom-block"><p class="custom-block-title">TIP</p>\n<p> column will overwrite <code>align</code></p>\n</div>\n set in the table'
-      },
-      'codeFiles': ['align/column-align.vue']
-    },
     {
       'demoId': 'align-header-align-left-header-align',
-      'name': { 'zh-CN': '表头左对齐', 'en-US': 'Left-aligned table header' },
+      'name': { 'zh-CN': '表头对齐', 'en-US': 'aligned table header' },
       'desc': {
         'zh-CN':
           '<p><code>header-align</code> 设置表头对齐方式可选值为 <code>left</code> <code>center</code> <code>right</code>，默认值为 <code>left</code>。</p>\n<div class="tip custom-block"><p class="custom-block-title">TIP</p>\n<p>表格上配置 <code>header-align</code> 会被列配置的 <code>header-align</code> 覆盖</p>\n</div>\n',
         'en-US':
           '<p><code>header-align</code> Sets the table header alignment mode. The value can be <code>left</code> <code>center</code> <code>right</code>. The default value is <code>left</code>. <code>header-align</code> configured in the </p>\n<div class="tip custom-block"><p class="custom-block-title">TIP</p>\n<p> table will be overwritten by <code>header-align</code> configured in the column </p>\n</div>\n'
       },
-      'codeFiles': ['align/header-align/left-header-align.vue']
-    },
-    {
-      'demoId': 'align-header-align-right-header-align',
-      'name': { 'zh-CN': '表头右对齐', 'en-US': 'Right-aligned table header' },
-      'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example.' },
-      'codeFiles': ['align/header-align/right-header-align.vue']
-    },
-    {
-      'demoId': 'align-header-align-center-header-align',
-      'name': { 'zh-CN': '表头居中对齐', 'en-US': 'Table header center alignment' },
-      'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example.' },
-      'codeFiles': ['align/header-align/center-header-align.vue']
+      'codeFiles': ['align/header-align/header-align.vue']
     },
     {
       'demoId': 'align-footer-align-left-footer-align',
-      'name': { 'zh-CN': '表尾左对齐', 'en-US': 'Left-aligned table tail' },
+      'name': { 'zh-CN': '表尾对齐', 'en-US': 'Left-aligned table tail' },
       'desc': {
         'zh-CN':
           '<p><code>footer-align</code> 设置表尾对齐方式的可选值为 <code>left</code> <code>center</code> <code>right</code>，默认值为 <code>left</code>。</p>\n<div class="tip custom-block"><p class="custom-block-title">TIP</p>\n<p>表格上配置 <code>footer-align</code> 会被列配置的 <code>footer-align</code> 覆盖</p>\n</div>\n',
         'en-US':
           'The value of <p><code>footer-align</code> is <code>left</code> <code>center</code> <code>right</code>. The default value is <code>left</code>. <code>footer-align</code> configured in the </p>\n<div class="tip custom-block"><p class="custom-block-title">TIP</p>\n<p> table will be replaced by <code>footer-align</code> configured in the column </p>\n</div>\n'
       },
-      'codeFiles': ['align/footer-align/left-footer-align.vue']
-    },
-    {
-      'demoId': 'align-footer-align-right-footer-align',
-      'name': { 'zh-CN': '表尾右对齐', 'en-US': 'Right-aligned table tail' },
-      'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example.' },
-      'codeFiles': ['align/footer-align/right-footer-align.vue']
-    },
-    {
-      'demoId': 'align-footer-align-center-footer-align',
-      'name': { 'zh-CN': '表尾居中对齐', 'en-US': 'Table tail center alignment' },
-      'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example.' },
-      'codeFiles': ['align/footer-align/center-footer-align.vue']
+      'codeFiles': ['align/footer-align/footer-align.vue']
     },
     {
       'demoId': 'align-grid-align-left-grid-align',
-      'name': { 'zh-CN': '表格左对齐', 'en-US': 'Left-aligned table' },
+      'name': { 'zh-CN': '表格对齐', 'en-US': 'Left-aligned table' },
       'desc': {
         'zh-CN':
           '<p><code>align</code> 设置全部列对齐方式可选值为 <code>left</code> <code>center</code> <code>right</code>，默认值为 <code>left</code>。</p>\n<div class="tip custom-block"><p class="custom-block-title">TIP</p>\n<p>表格设置对齐方式优先级最低，会被单独设置对齐方式覆盖</p>\n</div>\n',
         'en-US':
           '<p><code>align</code> Sets the alignment mode of all columns. The options are <code>left</code> <code>center</code> <code>right</code>. The default value is <code>left</code>. The alignment mode configured in the </p>\n<div class="tip custom-block"><p class="custom-block-title">TIP</p>\n<p> table has the lowest priority. The alignment mode configured in the </p>\n<div class="tip custom-block"><p class="custom-block-title">TIP</p>\n<p> table will overwrite the </p>\n</div>\n'
       },
-      'codeFiles': ['align/grid-align/left-grid-align.vue']
-    },
-    {
-      'demoId': 'align-grid-align-right-grid-align',
-      'name': { 'zh-CN': '表格右对齐', 'en-US': 'Right-aligned table' },
-      'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example.' },
-      'codeFiles': ['align/grid-align/right-grid-align.vue']
-    },
-    {
-      'demoId': 'align-grid-align-center-grid-align',
-      'name': { 'zh-CN': '表格居中对齐', 'en-US': 'Table center alignment' },
-      'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example.' },
-      'codeFiles': ['align/grid-align/center-grid-align.vue']
+      'codeFiles': ['align/grid-align/grid-align.vue']
     }
   ],
   apis: [{ 'name': 'grid-align', 'type': 'component', 'properties': [], 'events': [], 'slots': [] }]

package/demos/pc/app/select/allow-create-composition-api.vue

@@ -4,7 +4,7 @@
   </tiny-select>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import { ref } from 'vue'
 import { Select as TinySelect, Option as TinyOption } from '@opentiny/vue'
 

package/demos/pc/app/select/allow-create.vue

@@ -4,7 +4,7 @@
   </tiny-select>
 </template>
 
-<script lang="jsx">
+<script>
 import { Select, Option } from '@opentiny/vue'
 
 export default {

package/demos/pc/app/select/automatic-dropdown-composition-api.vue

@@ -7,7 +7,7 @@
   </div>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import { ref } from 'vue'
 import { Select as TinySelect, Option as TinyOption, Button as TinyButton } from '@opentiny/vue'
 
@@ -21,7 +21,7 @@ const options = ref([
 const value = ref('')
 const selectDomRef = ref()
 
-function onFocus() {
-  selectDomRef.value.focus()
+const onFocus = () => {
+    selectDomRef.value.focus()
 }
 </script>

package/demos/pc/app/select/automatic-dropdown.vue

@@ -7,7 +7,7 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script>
 import { Select, Option, Button } from '@opentiny/vue'
 
 export default {

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

@@ -4,7 +4,7 @@
   </tiny-select>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import { ref } from 'vue'
 import { Select as TinySelect, Option as TinyOption } from '@opentiny/vue'
 

package/demos/pc/app/select/basic-usage.vue

@@ -4,7 +4,7 @@
   </tiny-select>
 </template>
 
-<script lang="jsx">
+<script>
 import { Select, Option } from '@opentiny/vue'
 
 export default {

package/demos/pc/app/select/binding-obj-composition-api.vue

@@ -9,7 +9,7 @@
   </div>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import { ref } from 'vue'
 import { Select as TinySelect, Option as TinyOption } from '@opentiny/vue'
 

package/demos/pc/app/select/binding-obj.vue

@@ -9,7 +9,7 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script>
 import { Select, Option } from '@opentiny/vue'
 
 export default {

package/demos/pc/app/select/cache-usage-composition-api.vue

@@ -14,7 +14,7 @@
   </div>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import { ref } from 'vue'
 import { Select as TinySelect } from '@opentiny/vue'
 
@@ -30,8 +30,7 @@ const options = ref([
   { value: '选项5', label: '北京烤鸭' }
 ])
 const value = ref('选项3')
-
-function cacheChange() {
+const cacheChange = () => {
   cacheValue.value = window.localStorage.getItem(`tiny_memorize_${cacheOp.value.key}`)
 }
 </script>

package/demos/pc/app/select/cache-usage.vue

@@ -14,7 +14,7 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script>
 import { Select } from '@opentiny/vue'
 
 export default {

package/demos/pc/app/select/clear-no-match-value-composition-api.vue

@@ -1,12 +1,12 @@
 <template>
   <div class="clear-no-match-value">
-    <div>
+    <div class="font-style">
       <span>单选：</span>
       <tiny-select v-model="val" :clear-no-match-value="true" placeholder="请选择">
         <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
       </tiny-select>
     </div>
-    <div>
+    <div class="font-style">
       <span>多选：</span>
       <tiny-select v-model="multiVal" :clear-no-match-value="true" multiple placeholder="请选择">
         <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
@@ -38,5 +38,9 @@ const multiVal = ref(['选项2', '11'])
     margin-right: 20px;
     margin-bottom: 10px;
   }
+  .font-style {
+    font-size: 14px;
+    margin: 8px;
+  }
 }
 </style>

package/demos/pc/app/select/clear-no-match-value.vue

@@ -1,12 +1,12 @@
 <template>
   <div class="clear-no-match-value">
-    <div>
+    <div class="font-style">
       <span>单选：</span>
       <tiny-select v-model="val" :clear-no-match-value="true" placeholder="请选择">
         <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
       </tiny-select>
     </div>
-    <div>
+    <div class="font-style">
       <span>多选：</span>
       <tiny-select v-model="multiVal" :clear-no-match-value="true" multiple placeholder="请选择">
         <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
@@ -46,5 +46,9 @@ export default {
     margin-right: 20px;
     margin-bottom: 10px;
   }
+  .font-style {
+    font-size: 14px;
+    margin: 8px;
+  }
 }
 </style>