Привет всем. На vue есть форма
main.js
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
App.vue
<template>
<SignupForm />
</template>
<script>
import SignupForm from './components/SignupForm.vue';
export default {
name: 'App',
components: {
SignupForm
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
body {
margin: 0;
background: #eee;
}
</style>
./components/SignupForm.vue
<template>
<div>
<form action="" @submit.prevent="handleSubmit">
<label for="">Email:</label>
<input type="email" name="" id="" required v-model="email">
<label for="">Password::</label>
<input type="password" required v-model="password">
<div v-if="passwordError" class="error"> {{ passwordError }} </div>
<label for="">Role:</label>
<select v-model="role">
<option value="developer">Web Developer</option>
<option value="designer">Web Designer</option>
</select>
<label for="">Skills:</label>
<input type="text" v-model="tempSkill" @keyup.alt="addSkill">
<div v-for="skill in skills" :key="skill" class="pill">
<span @click="deleteSkill(skill)"> {{ skill }} </span>
</div>
<div class="terms">
<input type="checkbox" v-model="terms" required>
<label for="">Accept terms and conditions</label>
</div>
<div class="submit">
<button>Create an Account</button>
</div>
</form>
<p>Email: {{ email }}</p>
<p>Password: {{ password }}</p>
<p>role: {{ role }}</p>
<p>terms: {{ terms }}</p>
</div>
</template>
<script>
export default {
data() {
return {
email: '',
password: '',
role: '',
terms: false,
//names: [],
skills: [],
passwordError: ''
}
},
methods: {
addSkill(e){
if(e.key === ',' && this.tempSkill) {
if(!this.skills.includes(this.tempSkill)) {
this.skills.push(this.tempSkill)
}
this.tempSkill = ''
}
},
deleteSkill(skill){
this.skills = this.skills.filter((item)=> {
return skill !==item
})
},
handleSubmit() {
//validate password
this.passwordError = this.password.length > 5 ?
'' : 'Password must be at least 6 chars long'
if(!this.passwordError){
console.log(this.email)
console.log(this.password)
console.log(this.role)
console.log(this.skills)
}
}
}
}
</script>
<style>
form {
max-width: 420px;
margin: 30px auto;
background: white;
text-align: left;
padding: 40px;
border-radius: 10px;
}
label {
color: #aaa;
display: inline-block;
margin: 25px 0 15px;
font-size: 0.6em;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: bold;
}
input, select {
display: block;
padding: 10px 6px;
width: 100%;
box-sizing: border-box;
border: none;
border-bottom: 1px solid #ddd;
color: #555;
}
input[type='checkbox'] {
display: inline-block;
width: 16px;
margin: 0 10px 0 0;
position: relative;
top: 2px;
}
.pill {
display: inline-block;
margin: 20px 10px 0 0;
padding: 6px 12px;
background: #eee;
border-radius: 20px;
font-size: 12px;
letter-spacing: 1px;
font-weight: bold;
color: #777;
cursor: pointer;
}
button {
background: #0b6dff;
border: 0;
padding: 10px 20px;
margin-top: 20px;
color: white;
border-radius: 20px;
}
.submit {
text-align: center;
}
.error {
color: #ff0062;
margin-top: 10px;
font-size: 0.8em;
font-weight: bold;
}
</style>
как сделать так, чтобы я мог созданную форму на vue на любой сайт вставлять тэгом, например ? Спасибо.
