OpenTiny Vue 3.10.0 版本发布：组件 Demo 支持 Composition 写法，新增 4 个新组件

<template>  <div class="tiny-demo">    <tiny-button @click="dialogSelectVisible = !dialogSelectVisible">打开</tiny-button>    <tiny-dialog-select      v-model:visible="dialogSelectVisible"      :grid-op="state.gridOp"    >    </tiny-dialog-select>  </div></template>
<script setup lang="ts">import { ref } from 'vue'import {  DialogSelect as TinyDialogSelect,  Button as TinyButton} from '@opentiny/vue'
const dialogSelectVisible = ref(false)
const gridOp = ref({  columns: [    { field: 'id', title: 'ID', width: 40 },    { field: 'name', title: '名称', showOverflow: 'tooltip' },    { field: 'province', title: '省份', width: 80 },    { field: 'city', title: '城市', width: 80 }  ],  data: [    { id: '1', name: 'GFD科技有限公司', city: '福州', province: '福建' },    { id: '2', name: 'WWW科技有限公司', city: '深圳', province: '广东' },    { id: '3', name: 'RFV有限责任公司', city: '中山', province: '广东' },    { id: '4', name: 'TGB科技有限公司', city: '龙岩', province: '福建' },    { id: '5', name: 'YHN科技有限公司', city: '韶关', province: '广东' },    { id: '6', name: 'WSX科技有限公司', city: '黄冈', province: '湖北' },    { id: '7', name: 'KBG物业有限公司', city: '赤壁', province: '湖北' },    { id: '8', name: '深圳市福德宝网络技术有限公司', city: '深圳', province: '广东' },    { id: '9', name: 'KBG物业有限公司', city: '赤壁', province: '湖北' },    { id: '10', name: '深圳市福德宝网络技术有限公司', city: '深圳', province: '广东' }  ]})</script>

<template>  <div>    <tiny-filter-panel ref="filterPanelRef" label="物品数量" @handle-clear="handleClear" :value="value">      <tiny-radio-group v-model="radioVal" size="mini">        <tiny-radio label="大于">大于</tiny-radio>        <tiny-radio label="等于">等于</tiny-radio>        <tiny-radio label="小于">小于</tiny-radio>      </tiny-radio-group>      <tiny-input type="text" v-model="inputVal" style="margin-top: 20px"></tiny-input>    </tiny-filter-panel>  </div></template>
<script setup>import { ref, computed } from 'vue'import {  FilterPanel as TinyFilterPanel,  Radio as TinyRadio,  RadioGroup as TinyRadioGroup,  Input as TinyInput} from '@opentiny/vue'
const inputVal = ref('')const radioVal = ref('')const value = computed(() => {  return radioVal.value + inputVal.value})
function handleClear() {  radioVal.value = ''  inputVal.value = ''}</script>

<template>  <tiny-tag-group :data="data"></tiny-tag-group></template>
<script setup>import { ref } from 'vue'import { TagGroup as TinyTagGroup } from '@opentiny/vue'
const data = ref([  {    name: '标签一',    type: 'default'  },  {    name: '标签二',    type: 'default'  },  {    name: '标签三',    type: 'default'  },  ...])</script>

<template>  <ul v-infinite-scroll="load" class="tiny-infinite-list">    <li v-for="i in count" :key="i" class="tiny-infinite-list-item">{{ i }}</li>  </ul></template>
<script setup lang="ts">import InfiniteScroll from '@opentiny/vue-renderless/common/deps/infinite-scroll'import { ref } from 'vue'
const count = ref(0)const vInfiniteScroll = InfiniteScroll
const load = () => {  count.value += 2}</script>