import { Card, Col, Row, Tabs } from 'antd'; import { data } from './icon'; export type IconPickerProps = { commit: (name: string) => void; }; export default (props: IconPickerProps) => { const iconData = () => { let iconList = JSON.parse(data); return [ { category: 'line', description: '线性图标', icons: iconList.slice(0, 284), }, { category: 'solid', description: '面性图标', icons: iconList.slice(284, 428), }, { category: 'office', description: '官方图标', icons: iconList.slice(428, 522), }, { category: 'other', description: '其它图标', icons: iconList.slice(522, iconList.length), }, ]; }; return ( <Tabs defaultActiveKey="direction"> {iconData().map((data) => ( <Tabs.TabPane tab={data.description} key={data.category}> <Card style={{ marginBottom: 24, overflow: 'auto', height: 250 }} bordered={false}> <Row gutter={24} style={{ fontSize: 28, textAlign: 'center', marginBottom: 20, cursor: 'pointer' }} > {data.icons.map((icon: any) => ( <Col span={4} key={icon} onClick={(e) => { props.commit(`icon-${icon.replace(/ /g, '')}`); }} > <span style={{ fontSize: 28 }} className={`iconfont icon-${icon.replace(/ /g, '')}`} ></span> </Col> ))} </Row> </Card> </Tabs.TabPane> ))} </Tabs> ); };

这段代码定义了一个名为 `IconPicker` 的组件，该组件接受一个名为 `commit` 的函数回调作为参数。该组件会根据传入的回调函数，将用户选择的图标名称作为参数，调用该函数。

组件的主要实现如下：

首先，定义一个 `iconData` 函数，用于返回一个包含图标数据的数组。该数组包含四个元素，每个元素都是一个对象，包括 `category`、`description` 和 `icons` 三个属性。其中，`category` 表示图标所属的分类，`description` 表示该分类的描述信息，`icons` 是一个包含多个图标名称的数组。

然后，使用 `Tabs` 组件将所有的图标分类展示在不同的选项卡中。对于每个选项卡，使用 `Card` 组件展示该分类下的图标列表。图标列表使用 `Row` 和 `Col` 组件进行排列，每个图标使用 `span` 元素展示，其 CSS 类名为 `iconfont icon-图标名称`，其中图标名称由 `data.icons` 数组中的元素拼接而成。

当用户点击某个图标时，会触发 `onClick` 事件，回调函数 `props.commit` 会被调用，并将对应的图标名称作为参数传入。

最后，将 `IconPicker` 组件导出，以供其他模块使用。

相关问题

php代码实现打开http://43.143.60.96/lyx.php/counsel/order?ref=addtabs这个网址，可以在广域网打开

可以使用PHP的curl函数来实现打开网址。以下是一个示例代码：

$url = 'http://43.143.60.96/lyx.php/counsel/order?ref=addtabs';
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_FOLLOWLOCATION, true);
curl_setopt($ch, CURLOPT_HEADER, false);
$result = curl_exec($ch);
curl_close($ch);
echo $result;

该代码使用curl库打开指定的URL并获取其内容，然后将其输出到屏幕上。请注意，该示例使用了curl_setopt设置来指定一些选项，例如CURLOPT_FOLLOWLOCATION，以便curl可以自动跟随重定向。

<template> <view class="container"> <swiper class="swiper-con both" :indicator-dots="true" :autoplay="true" :interval="2000" :duration="500"> <swiper-item v-for="item in swi" :key="item"> <image class="swiper-imag" :src="item"></image> </swiper-item> </swiper> <tui-tab :tabs="tabs" scroll @change="change" isSticky="true"></tui-tab> </view> </template> <script setup> import { reactive, ref } from 'vue' const tabs = reactive([ '推荐', '食品', '水果蔬菜', '新款男装', '内衣', '女装', '百货', '医药', '手机', '鞋包' ]) const tabBars = reactive([ { name: '凉拌洋葱' }, { name: '南瓜粥' }, { name: '酸辣土豆丝' }, { name: '西红柿炒鸡蛋' }, { name: '酸菜鱼' }, { name: '糖醋排骨' }, { name: '糖醋鱼' }, { name: '鱼香肉丝' }, ]) const change = (index)=>{ index = index } const swi = reactive([ '../../static/images/banner/1.jpg', '../../static/images/banner/2.jpg', '../../static/images/banner/3.jpg', '../../static/images/banner/4.jpg', '../../static/images/banner/5.jpg', ]) </script> <style lang="scss"> .container { ::v-deep .swiper-con { height: 300rpx; .uni-swiper-wrapper { border-radius: 16rpx; } .swiper-i { border-radius: 16rpx; } .swiper-imag { height: 100%; width: 100%; } } } </style>根据tui-tab标签选项卡绑定他对应的内容并且能滑动跟随

您可以将每个标签对应的内容放在一个数组中，然后使用v-for指令循环渲染出来，并将tab的index绑定到swiper的current属性上，实现切换标签时，滑动跟随的效果。具体代码如下：

<template>
<view class="container">
<swiper class="swiper-con both" :indicator-dots="true" :autoplay="true" :interval="2000" :duration="500" :current="currentIndex">
<swiper-item v-for="(item, index) in swi" :key="index">
<image class="swiper-imag" :src="item"></image>
</swiper-item>
</swiper>
<tui-tab :tabs="tabs" scroll @change="change" isSticky="true"></tui-tab>
<view class="tab-content">
<view class="tab-item" v-for="(item, index) in tabBars" :key="index" :class="{'active': currentIndex === index}">
<text>{{item.name}}</text>
</view>
</view>
</view>
</template>

<script setup>
import { reactive, ref } from 'vue'

const tabs = reactive([
'推荐',
'食品',
'水果蔬菜',
'新款男装',
'内衣',
'女装',
'百货',
'医药',
'手机',
'鞋包'
])

const tabBars = reactive([
{ name: '凉拌洋葱' },
{ name: '南瓜粥' },
{ name: '酸辣土豆丝' },
{ name: '西红柿炒鸡蛋' },
{ name: '酸菜鱼' },
{ name: '糖醋排骨' },
{ name: '糖醋鱼' },
{ name: '鱼香肉丝' },
])

const change = (index) => {
currentIndex = index
}

const swi = reactive([
'../../static/images/banner/1.jpg',
'../../static/images/banner/2.jpg',
'../../static/images/banner/3.jpg',
'../../static/images/banner/4.jpg',
'../../static/images/banner/5.jpg',
])

const currentIndex = ref(0)

</script>

<style lang="scss">
.container {
::v-deep .swiper-con {
height: 300rpx;
.uni-swiper-wrapper {
border-radius: 16rpx;
}
.swiper-i {
border-radius: 16rpx;
}
.swiper-imag {
height: 100%;
width: 100%;
}
}
.tab-content {
display: flex;
flex-wrap: wrap;
margin-top: 20rpx;
.tab-item {
width: 25%;
height: 100rpx;
display: flex;
justify-content: center;
align-items: center;
border-top: 2rpx solid #f5f5f5;
border-left: 2rpx solid #f5f5f5;
&:last-child {
border-right: 2rpx solid #f5f5f5;
}
&:nth-child(4n+1) {
border-left: none;
}
&:nth-last-child(-n+4) {
border-bottom: 2rpx solid #f5f5f5;
}
&.active {
background-color: #f5f5f5;
}
}
}
}
</style>