went-element

This template should help get you started developing with Vue 3 in Vite.

Recommended IDE Setup

VSCode + Volar (and disable Vetur) + TypeScript Vue Plugin (Volar).

Install

npm i went-element

Usage

Full Import

// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import WtElement from 'went-element'
import 'went-element/dist/index.css'

const app = createApp(App)

app.use(WtElement)
app.mount('#app')

Example

<template>
  <div>
    <wt-form :model="loginForm" :rules="loginRules" ref="formRef">
      <wt-form-item label="username" prop="username">
        <wt-input v-model="loginForm.username" />
      </wt-form-item>
      <wt-form-item label="password" prop="password">
        <wt-input type="password" v-model="loginForm.password" />
      </wt-form-item>
      <wt-form-item>
        <wt-button type="primary" @click="onLogin">login</wt-button>
        <wt-button type="info" @click="onReset">reset</wt-button>
      </wt-form-item>
    </wt-form>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import type { FormRules, FormInstance } from 'went-element'

const loginForm = reactive({
  username: 'admin',
  password: '123456'
})
const loginRules: FormRules = {
  username: [{ required: true, message: 'please input username', trigger: 'blur' }],
  password: [{ required: true, message: 'please input password', trigger: 'blur' }]
}
const formRef = ref<FormInstance>()
const onLogin = () => {
  formRef.value
    ?.validate()
    .then(() => {
      console.log('login success')
    })
    .catch(() => {
      console.log('login fail')
    })
}

const onReset = () => {
  formRef.value?.resetFields()
}
</script>