pref(form): 新增 form 组件 submit 事件 model 属性
This commit is contained in:
就眠仪式
@@ -69,7 +69,6 @@ export default {
|
||||
:::
|
||||
|
||||
::: field 动画类名
|
||||
|
||||
:::
|
||||
|
||||
| Name | Description | Accepted Values |
|
||||
|
||||
@@ -80,7 +80,7 @@ export default {
|
||||
|
||||
:::
|
||||
|
||||
::: 头像属性
|
||||
::: field 头像属性
|
||||
:::
|
||||
|
||||
| | | |
|
||||
|
||||
@@ -1,3 +1,6 @@
|
||||
::: field 基础使用
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
@@ -34,7 +37,6 @@ export default {
|
||||
:::
|
||||
|
||||
::: field 徽章属性
|
||||
|
||||
:::
|
||||
|
||||
| | | |
|
||||
|
||||
@@ -1,138 +1,40 @@
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-input v-model="data"></lay-input>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const data = ref("内容");
|
||||
|
||||
return {
|
||||
data
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
::: field 基础使用
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-input placeholder="请输入密码" type="password"></lay-input>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
return {
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-textarea placeholder="请输入密码"></lay-textarea>
|
||||
<br>
|
||||
<lay-textarea placeholder="请输入密码" v-model="data"></lay-textarea>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const data = ref("内容");
|
||||
|
||||
return {
|
||||
data
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-switch v-model="active"></lay-switch>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const active = ref(true);
|
||||
|
||||
return {
|
||||
active
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-switch v-model="active" disabled></lay-switch>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const active = ref(true);
|
||||
|
||||
return {
|
||||
active
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-form>
|
||||
<lay-checkbox v-model="checked" label="1">写作</lay-checkbox>
|
||||
<lay-checkbox v-model="checked" label="2">画画</lay-checkbox>
|
||||
<lay-checkbox v-model="checked" label="3">运动</lay-checkbox>
|
||||
<lay-form @submit="submit" :model="model">
|
||||
<lay-form-item label="账户">
|
||||
<lay-input v-model="model.username"></lay-input>
|
||||
</lay-form-item>
|
||||
<lay-form-item label="密码">
|
||||
<lay-input v-model="model.password"></lay-input>
|
||||
</lay-form-item>
|
||||
<lay-form-item>
|
||||
<lay-button naive-type="submit">提交</lay-button>
|
||||
</lay-form-item>
|
||||
</lay-form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
import { ref, reactive } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const checked = ref(['1','2']);
|
||||
const model = reactive({
|
||||
username: "admin",
|
||||
password: "admin"
|
||||
})
|
||||
|
||||
const submit = function(val) {
|
||||
alert(JSON.stringify(val))
|
||||
}
|
||||
|
||||
return {
|
||||
checked
|
||||
model,
|
||||
submit
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -140,84 +42,23 @@ export default {
|
||||
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-form>
|
||||
<lay-checkbox name="like" skin="primary" v-model="checked" label="1">写作</lay-checkbox>
|
||||
<lay-checkbox name="like" skin="primary" v-model="checked" label="2">画画</lay-checkbox>
|
||||
<lay-checkbox name="like" skin="primary" v-model="checked" label="3">运动</lay-checkbox>
|
||||
</lay-form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const checked = ref(['1','2']);
|
||||
|
||||
return {
|
||||
checked
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
::: field 表单事件
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-form>
|
||||
<lay-radio v-model="selected" name="action" label="1">写作</lay-radio>
|
||||
<lay-radio v-model="selected" name="action" label="2">画画</lay-radio>
|
||||
<lay-radio v-model="selected" name="action" label="3">运动</lay-radio>
|
||||
</lay-form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const selected = ref("1");
|
||||
|
||||
return {
|
||||
selected
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
| Name | Description | Accepted Values |
|
||||
| ----- | ------ | -------------- |
|
||||
| model | 表单绑定值 | -- |
|
||||
|
||||
::: field 表单事件
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-form>
|
||||
<lay-select v-model="select">
|
||||
<lay-select-option value="beijing" label="北京"></lay-select-option>
|
||||
<lay-select-option value="jinan" label="济南"></lay-select-option>
|
||||
</lay-select>
|
||||
</lay-form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const select = ref("jinan")
|
||||
|
||||
return {
|
||||
select
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
| Name | Description | Accepted Values |
|
||||
| ----- | ------ | -------------- |
|
||||
| submit | 提交事件 | -- |
|
||||
|
||||
::: field 表单项属性
|
||||
:::
|
||||
|
||||
| Name | Description | Accepted Values |
|
||||
| ----- | ------ | -------------- |
|
||||
| label | 标题名称 | -- |
|
||||
@@ -20,3 +20,10 @@ export default {
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: field 面板插槽
|
||||
:::
|
||||
|
||||
| Name | Description | Accepted Values |
|
||||
| ----- | ------ | -------------- |
|
||||
| default | 默认插槽 | -- |
|
||||
|
||||
@@ -4,13 +4,16 @@
|
||||
::: demo
|
||||
<template>
|
||||
<lay-timeline>
|
||||
<lay-timeline-item title="0.1.6">
|
||||
[修复] menu 菜单 selectedKey 选中项 openKeys 打开项 props 双绑。<br>
|
||||
[修复] tab 选项卡 v-model 激活项 双绑。<br>
|
||||
[修复] tab 选项卡 tab-item 组件套用 for 循环无法获取 props 属性。<br>
|
||||
<lay-timeline-item title="0.1.7">
|
||||
[新增] page 分页 prev 插槽。<br>
|
||||
[新增] page 分页 next 插槽。<br>
|
||||
[新增] button 按钮 naiveType 属性, 原生 type 属性, 支持 button, submit 可选值。<br>
|
||||
[新增] form 表单 model 属性, 共 submit 等事件作为入参。<br>
|
||||
[新增] form 表单 submit 事件, 内部 submit 提交回调。<br>
|
||||
[修复] menu 菜单 selectedKey 选中项 openKeys 打开项 props 双绑。<br>
|
||||
[修复] tab 选项卡 v-model 激活项 双绑。<br>
|
||||
[修复] tab 选项卡 tab-item 组件套用 for 循环无法获取 props 属性。<br>
|
||||
[重构] tree 树内部逻辑, 优化性能。<br>
|
||||
</lay-timeline-item>
|
||||
<lay-timeline-item title="0.1.4">
|
||||
[新增] button 按钮 loading 属性, 提供 加载 状态。<br>
|
||||
|
||||
@@ -31,7 +31,7 @@
|
||||
</a>
|
||||
</li>
|
||||
<li class="layui-nav-item">
|
||||
<a href="javascript:void(0)"> 0.1.6 </a>
|
||||
<a href="javascript:void(0)"> 0.1.7 </a>
|
||||
</li>
|
||||
</ul>
|
||||
</lay-header>
|
||||
|
||||
Reference in New Issue
Block a user