arco @tuoyuan/web-plus高阶组件库

安装

pnpm

pnpm add @tuoyuan/web-plus

npm

npm install @tuoyuan/web-plus

yarn

yarn add @tuoyuan/web-plus

引入

import tyWebPlus from "@tuoyuan/web-plus"
import "@tuoyuan/web-plus/ui/es/style.css"

app.use(tyWebPlus)

安装 plus组件之前，应先全量引入arco组件和样式

import ArcoVue from '@arco-design/web-vue';
import '@arco-design/web-vue/dist/arco.css';

如果需要图标，请安装

import ArcoVueIcon from '@arco-design/web-vue/es/icon';
app.use(ArcoVueIcon);

form

const form=ref({
    name:"张三",
    age:18
})
const option=reactive<Option>({
    columns:[
        {
            label:"姓名",
            field:"name",
        },
        {
            label:"年龄",
            field:"age",
            type:"input"
        }
    ]
})

ts 类型支持

import type {Option} from "@tuoyuan/web-plus"

table

<div>
    <a-table-plus v-model="form" v-model:page="page" :option="option" :data="data"> </a-table-plus>
  </div>

import type {TableOption} from "@tuoyuan/web-plus"
const page=reactive({
    pageSize:10,
    currentPage:1,
    total:10,
})
const form=ref({})
const data=[
    {
        name: '李四',
        age: 20,
        sex: '女'
    },
    {
        name: '王五',
        age: 22,
        sex: '男'
    },
    {
        name: '赵六',
        age: 24,
        sex: '女'
    },
]
const option:TableOption={
    columns:[
        {
            label:'姓名',
            field:'name'
        },
        {
            label:'年龄',
            field:'age',
            search:true,
        },
        {
            label:'性别',
            field:'sex'
        }
    ]
}

ts 类型支持

import type {tableOption} from "@tuoyuan/web-plus"