hogwarts-ui 官方网站

Appearance

登录V2 表单 ​

基础用法 ​

点击查看示例代码
vue
<template>
  <h-login-v2 :h_data="h_form"></h-login-v2>
</template>

<script setup>
const h_form = {
  component: 'h-login-v2',
  logo:  'https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=600',
  image: 'https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=600',
  header:'企业测试服务一站式解决方案',
  meta: [
    {
      'name': '用户名',
      'type': 'text',
      'identifier': 'login',
      'icon': 'user'
    },
    {
      'name': '密码',
      'type': 'password',
      'identifier': 'password',
      'icon': 'lock'
    },
  ],
  action: [
    {
      "api": {
        "header": {
          "meta-Type": "application/json"
        },
        "method": "post",
        "params": {},
        "url": "/projects/guowang_api_testcase/issues/new"
      },
      "identifier": "save",
      "link": "#/projects/guowang_api_testcase",
      "name": "登录"
    }
  ],
  extra: [
    {
      "api": {
        "header": {
          "meta-Type": "application/json"
        },
        "method": "post",
        "params": {},
        "url": "/projects/guowang_api_testcase/issues/new"
      },
      "identifier": "save",
      "link": "#/projects/guowang_api_testcase",
      "description": '',
      "name": "没有账号？点击注册"
    }]
}
</script>
<template>
  <h-login-v2 :h_data="h_form"></h-login-v2>
</template>

<script setup>
const h_form = {
  component: 'h-login-v2',
  logo:  'https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=600',
  image: 'https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=600',
  header:'企业测试服务一站式解决方案',
  meta: [
    {
      'name': '用户名',
      'type': 'text',
      'identifier': 'login',
      'icon': 'user'
    },
    {
      'name': '密码',
      'type': 'password',
      'identifier': 'password',
      'icon': 'lock'
    },
  ],
  action: [
    {
      "api": {
        "header": {
          "meta-Type": "application/json"
        },
        "method": "post",
        "params": {},
        "url": "/projects/guowang_api_testcase/issues/new"
      },
      "identifier": "save",
      "link": "#/projects/guowang_api_testcase",
      "name": "登录"
    }
  ],
  extra: [
    {
      "api": {
        "header": {
          "meta-Type": "application/json"
        },
        "method": "post",
        "params": {},
        "url": "/projects/guowang_api_testcase/issues/new"
      },
      "identifier": "save",
      "link": "#/projects/guowang_api_testcase",
      "description": '',
      "name": "没有账号？点击注册"
    }]
}
</script>

添加背景图片 ​

点击查看示例代码
vue
<template>
  <h-login-v2 :h_data="h_form1"></h-login-v2>
</template>

<script setup>
const h_form = {
  component: 'h-login-v2',
  image: 'https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=600',
  header:'企业测试服务一站式解决方案',
  background: 'https://ceshiren.com/uploads/default/original/3X/a/8/a8492d6cc2021a37e002cb0adf9e2f964d80f98e.jpeg',
  meta: [
    {
      'name': '用户名',
      'type': 'text',
      'identifier': 'login',
      'icon': 'user'
    },
    {
      'name': '密码',
      'type': 'password',
      'identifier': 'password',
      'icon': 'lock'
    },
  ],
  action: [
    {
      "api": {
        "header": {
          "meta-Type": "application/json"
        },
        "method": "post",
        "params": {},
        "url": "/projects/guowang_api_testcase/issues/new"
      },
      "identifier": "save",
      "link": "#/projects/guowang_api_testcase",
      "name": "登录"
    }
  ],
  extra: [
    {
      "api": {
        "header": {
          "meta-Type": "application/json"
        },
        "method": "post",
        "params": {},
        "url": "/projects/guowang_api_testcase/issues/new"
      },
      "identifier": "save",
      "link": "#/projects/guowang_api_testcase",
      "description": '',
      "name": "没有账号？点击注册"
    }]
}
</script>
<template>
  <h-login-v2 :h_data="h_form1"></h-login-v2>
</template>

<script setup>
const h_form = {
  component: 'h-login-v2',
  image: 'https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=600',
  header:'企业测试服务一站式解决方案',
  background: 'https://ceshiren.com/uploads/default/original/3X/a/8/a8492d6cc2021a37e002cb0adf9e2f964d80f98e.jpeg',
  meta: [
    {
      'name': '用户名',
      'type': 'text',
      'identifier': 'login',
      'icon': 'user'
    },
    {
      'name': '密码',
      'type': 'password',
      'identifier': 'password',
      'icon': 'lock'
    },
  ],
  action: [
    {
      "api": {
        "header": {
          "meta-Type": "application/json"
        },
        "method": "post",
        "params": {},
        "url": "/projects/guowang_api_testcase/issues/new"
      },
      "identifier": "save",
      "link": "#/projects/guowang_api_testcase",
      "name": "登录"
    }
  ],
  extra: [
    {
      "api": {
        "header": {
          "meta-Type": "application/json"
        },
        "method": "post",
        "params": {},
        "url": "/projects/guowang_api_testcase/issues/new"
      },
      "identifier": "save",
      "link": "#/projects/guowang_api_testcase",
      "description": '',
      "name": "没有账号？点击注册"
    }]
}
</script>