UrlInput

组件描述组件描述组件描述组件描述组件描述组件描述。

基础用法

基础用法基础用法基础用法基础用法基础用法基础用法。

basic.vue

<template>
  <dk-url-input v-model="url" :url-data="data" :jump-min-app="true" />
  {{ url }}
</template>

<script setup lang="ts">
import { ref } from 'vue'
const url = ref('')
const data: any = ref([
  {
    title: '多页面',
    type: 'default',
    lists: [
      {
        title: '标题1',
        list: [
          { url: 'xxxx2', title: '个人中心' },
          { url: 'xxxx3', title: '首页' },
        ],
      },
      {
        title: '标题2',
        list: [
          { url: 'xxxx2', title: '个人中心' },
          { url: 'xxxx3', title: '首页' },
        ],
      },
    ],
  },
  {
    title: '商城页面',
    type: 'default',
    list: [
      { url: 'xxxx1', title: '标题' },
      { url: 'xxxx2', title: '个人中心' },
      { url: 'xxxx3', title: '首页' },
    ],
  },
  {
    title: '项目链接',
    type: 'table',
    // 远程地址
    tableUrl: '/gs_gold/admin.question',
    urlField: 'url',
    pkField: 'id',
    // 地址规则
    urlRule: '/pages/project?id={pkField}',
  },
  {
    title: '自定义组件',
    type: 'component',
    componentName: 'DkTest',
  },
])
</script>

组件配置

好的，以下是根据你提供的表格内容生成的 UrlInput 组件的纯文档：

UrlInput Props

属性

属性	说明	类型	默认值
type	参数类型	string	-
jumpMinApp	是否跳转到小程序	Boolean	false
urlData	URL 数据数组	Array	具体参考上面Demo

UrlInput Events

事件名	说明	参数
click	点击触发的事件	(event: MouseEvent) => void