Toggle navigation
Toggle navigation
This project
Loading...
Sign in
Hooke
/
data-table
Go to a project
Toggle navigation
Toggle navigation pinning
Projects
Groups
Snippets
Help
Project
Activity
Repository
Graphs
Network
Create a new issue
Commits
Issue Boards
Authored by
hookehuyr
2022-08-30 10:56:59 +0800
Browse Files
Options
Browse Files
Download
Email Patches
Plain Diff
Commit
ce75ea3958441756a3dfbd1134eac7ccafb41ffd
ce75ea39
1 parent
a328181e
✨ feat: 单行文本,多行文本组件完善
Show whitespace changes
Inline
Side-by-side
Showing
4 changed files
with
11 additions
and
6 deletions
src/components/TextField/index.vue
src/components/TextareaField/index.vue
src/hooks/useComponentType.js
src/views/index.vue
src/components/TextField/index.vue
View file @
ce75ea3
<!--
* @Date: 2022-08-29 14:31:20
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2022-08-30 10:
15:20
* @LastEditTime: 2022-08-30 10:
40:16
* @FilePath: /data-table/src/components/TextField/index.vue
* @Description: 单行文本输入框
-->
...
...
@@ -9,7 +9,7 @@
<div class="text-field-page">
<div class="label">{{ item.label }}<span v-if="item.required"> *</span></div>
<van-field v-model="item.value" :name="item.name" :type="item.type" :placeholder="item.placeholder"
:rules="item.rules" :required="item.required" />
:rules="item.rules" :required="item.required"
clearable
/>
</div>
</template>
...
...
src/components/TextareaField/index.vue
View file @
ce75ea3
<!--
* @Date: 2022-08-29 14:31:20
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2022-08-30 10:
18:18
* @LastEditTime: 2022-08-30 10:
40:33
* @FilePath: /data-table/src/components/TextareaField/index.vue
* @Description: 多行文本输入框
-->
...
...
@@ -9,7 +9,7 @@
<div class="textarea-field-page">
<div class="label">{{ item.label }}<span v-if="item.required"> *</span></div>
<van-field v-model="item.value" :name="item.name" :type="item.type" :placeholder="item.placeholder"
:rules="item.rules" :required="item.required"
rows="2" autosize
/>
:rules="item.rules" :required="item.required"
:rows="item.rows" :autosize="item.autosize"
/>
</div>
</template>
...
...
src/hooks/useComponentType.js
View file @
ce75ea3
...
...
@@ -12,6 +12,10 @@ import TextareaField from '@/components/TextareaField/index.vue'
export
function
createComponentType
(
data
)
{
// 判断类型和使用组件
_
.
each
(
data
,
(
item
,
index
)
=>
{
// 必填项规则添加
if
(
item
.
required
)
{
item
.
rules
=
[{
required
:
true
,
message
:
item
.
placeholder
?
item
.
placeholder
:
'必填项不能为空'
}]
}
if
(
item
.
component_type
===
'text'
)
{
item
.
type
=
'text'
;
item
.
name
=
item
.
key
;
...
...
@@ -20,6 +24,8 @@ export function createComponentType(data) {
if
(
item
.
component_type
===
'textarea'
)
{
item
.
type
=
'textarea'
;
item
.
name
=
item
.
key
;
item
.
rows
=
2
;
item
.
autosize
=
true
;
item
.
component
=
TextareaField
;
}
// // 单选框
...
...
src/views/index.vue
View file @
ce75ea3
<!--
* @Date: 2022-07-18 10:22:22
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2022-08-30 10:
18:56
* @LastEditTime: 2022-08-30 10:
35:45
* @FilePath: /data-table/src/views/index.vue
* @Description: 首页
-->
...
...
@@ -33,7 +33,6 @@ onMounted(() => {
value: 'Hooke',
label: '用户名',
placeholder: '请输入用户名',
rules: [{ required: true, message: '请填写用户名' }],
component: '',
component_type: 'text',
required: true,
...
...
Please
register
or
login
to post a comment