VUE新增组件 | 开放平台文档

# VUE新增组件

人名组件

组件使用方式

  <t-userselect :searcher="searcher" v-model="value"></t-userselect>

使用示例

  <template>
    <t-userselect :searcher="searcher" v-model="value"></t-userselect>
  </template>

  <script>
    export default{
      data() {
        return {
          value: ['zhangshan-1'],
        };
      },
      methods: {
        searcher() {
          return [{
            name: 'san-1',
            nick: 'zhangshan-1',
          },{
            name: 'san-2',
            nick: 'zhangshan-2',
          }];
        }
      }
    };
  </script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

属性配置

属性	类型	默认值	必传	说明
searcher	(keyWord: string) : Promise<any[]>	-	true	当查询词变化时触发,返回值类型为数组
value	(any)[]	[]	true	数据类型为数组,值可以是任何形式

配置扩展

可通过sdk拉取当前TAPD项目人员信息

  import SDK from '@tencent/tapd-open-js-sdk'
  ...
  methods: {
    async searcher(text) {
      const sdk = SDK();

      const { data } = await sdk.request.getWorkspaceMemberList({
        page_size: 100,
        workspace_id: '你的项目id',
        page: 1
      })

      return data
    }
  }
  ...

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# React新增组件

人名组件

组件使用方式

  import { UserSelect } from '@tencent/tplugin-react';
  ...
  <UserSelect
    value={value}
    searcher={(text) => searcher(text)}
    onChange={(value) => setValue(value)}
  ></UserSelect>
  ...

1
2
3
4
5
6
7
8

使用示例

  import React, { useState } from 'react';
  import { UserSelect } from '@tencent/tdesign-react';

  export default function UserSelectExample() {
    const [value, setValue] = useState([]);

    function searcher(text) {
      return [
        {
          name: 'san-1',
          nick: 'zhangshan-1',
        },
        {
          name: 'san-2',
          nick: 'zhangshan-2',
        },
      ];
    }

    return (
      <>
        <div className="tdesign-demo-block">
          <UserSelect
            value={value}
            searcher={(text) => searcher(text)}
            onChange={(value) => setValue(value)}
          ></UserSelect>
        </div>
      </>
    );
  }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

属性配置

属性	类型	默认值	必传	说明
searcher	(keyWord: string) : Promise<any[]>	-	true	当查询词变化时触发,返回值类型为数组
value	(any)[]	[]	true	数据类型为数组,值可以是任何形式

配置扩展

可通过sdk拉取当前TAPD项目人员信息

  import SDK from '@tencent/tapd-open-js-sdk'
  ...
  
  async function searcher(text) {
    const sdk = SDK();

    const { data } = await sdk.request.getWorkspaceMemberList({
      page_size: 100,
      workspace_id: '你的项目id',
      page: 1
    })

    return data
  }
  ...

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

← 数据存储开发者后台 →