pref(form): 新增 form 组件 submit 事件 model 属性
This commit is contained in:
就眠仪式
parent
fa04937e03
commit
97a3ab87b9
@ -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>
|
||||
|
||||
@ -3653,7 +3653,6 @@ a cite {
|
||||
|
||||
.layui-table-view .layui-table td,
|
||||
.layui-table-view .layui-table th {
|
||||
padding: 5px 0px;
|
||||
border-top: none;
|
||||
border-left: none;
|
||||
}
|
||||
|
||||
@ -1,7 +1,25 @@
|
||||
<template>
|
||||
<form class="layui-form">
|
||||
<form class="layui-form" @submit="submit">
|
||||
<slot />
|
||||
</form>
|
||||
</template>
|
||||
|
||||
<script setup name="LayForm" lang="ts"></script>
|
||||
<script setup name="LayForm" lang="ts">
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
model?: object
|
||||
}>(),
|
||||
{
|
||||
model: function(){
|
||||
return {}
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
const emit = defineEmits(['submit'])
|
||||
|
||||
const submit = function () {
|
||||
emit('submit',props.model)
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">{{ label }}</label>
|
||||
<div :class="[mode ? 'layui-input-' + mode : '']" class="layui-input-block">
|
||||
<div :class="[mode ? 'layui-input-' + mode : '']">
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
@ -15,7 +15,7 @@ const props = withDefaults(
|
||||
label?: string
|
||||
}>(),
|
||||
{
|
||||
mode: 'block',
|
||||
mode: 'block'
|
||||
}
|
||||
)
|
||||
</script>
|
||||
|
||||
@ -21,7 +21,7 @@
|
||||
</div>
|
||||
<div class="layui-table-box">
|
||||
<div class="layui-table-header">
|
||||
<table cellspacing="0" cellpadding="0" border="0" class="layui-table">
|
||||
<table cellspacing="0" cellpadding="0" border="0" class="layui-table" lay-size="sm">
|
||||
<thead>
|
||||
<tr>
|
||||
<th v-if="checkbox" class="layui-table-col-special">
|
||||
@ -47,7 +47,7 @@
|
||||
</table>
|
||||
</div>
|
||||
<div class="layui-table-body layui-table-main">
|
||||
<table cellspacing="0" cellpadding="0" border="0" class="layui-table">
|
||||
<table cellspacing="0" cellpadding="0" border="0" class="layui-table" lay-size="sm">
|
||||
<tbody>
|
||||
<template v-for="data in dataSource" :key="data">
|
||||
<tr>
|
||||
@ -63,10 +63,9 @@
|
||||
</td>
|
||||
<template v-for="column in columns" :key="column">
|
||||
<template v-if="column.customSlot">
|
||||
<td>
|
||||
<td class="layui-table-cell">
|
||||
<div
|
||||
:style="{ width: column.width }"
|
||||
style="padding: 0px 16px"
|
||||
>
|
||||
<slot :name="column.customSlot" :data="data" />
|
||||
</div>
|
||||
@ -78,10 +77,9 @@
|
||||
v-else
|
||||
:key="index"
|
||||
>
|
||||
<td v-if="column.key == key">
|
||||
<td class="layui-table-cell" v-if="column.key == key">
|
||||
<div
|
||||
:style="{ width: column.width }"
|
||||
style="padding: 0px 16px"
|
||||
>
|
||||
<span v-if="column.slot">
|
||||
<slot :name="column.slot" :data="data" />
|
||||
@ -141,7 +139,7 @@ const props = withDefaults(
|
||||
},
|
||||
selectedKeys: function () {
|
||||
return []
|
||||
},
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user