Leon19656
/
tiny-vue
forked from opentiny/tiny-vue
1
0
Fork 0
Code Issues Pull Requests 2 Packages Projects Releases Wiki Activity

feat(form): form组件增加自动换行 (#40) 

* feat(multi-select): 增加下拉选择器multi-select组件

* feat(form-item): form组件增加自动换行

* feat(form): form组件增加自动换行

* feat(form): form组件增加自动换行

* feat(form): form组件增加自动换行

* feat(form): form组件增加自动换行

* feat(form): form组件增加自动换行

* feat(form): form组件增加自动换行

* feat(form): form组件增加自动换行

* feat(form): form组件增加自动换行

* feat(form): form组件增加自动换行

* feat(form): form组件增加自动换行

* feat(form): form组件增加自动换行

* feat(form): form组件增加自动换行

* feat(form): form组件增加自动换行

* feat(form): 依赖包名称错误修改
This commit is contained in:
TC-twwang 2023-03-10 14:55:55 +08:00 committed by GitHub
parent a7effca5c6
commit 096f475f78
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
24 changed files with 295 additions and 132 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
example/src/assets/tiny-mobile-demo.css
View File

@ -89,27 +89,6 @@
.content .tiny-mobile-exception-demo .tiny-mobile-exception__footer {
position: absolute;
}
.tiny-mobile-action-sheet-demo {
width: 100%;
height: 100%;
position: relative;
}
.tiny-mobile-action-sheet-demo .tiny-mobile-action-sheet {
height: 100%;
position: relative;
}
.tiny-mobile-action-sheet-demo.action-sheet-wrap .tiny-mobile-action-sheet {
height: calc(100% - 180px);
}
.tiny-mobile-action-sheet-demo.action-sheet-slot .tiny-mobile-action-sheet {
height: calc(100% - 195px);
}
.tiny-mobile-action-sheet-demo .tiny-mobile-action-sheet__mask,
.tiny-mobile-action-sheet-demo .tiny-mobile-action-sheet__content {
position: absolute;
/* height: 100%; */
bottom: 45px;
}
.tiny-mobile-mini-picker-demo {
width: 100%;
height: 100%;

25
example/src/demo/mobile/action-sheet/actionsheet.vue
View File

@ -5,7 +5,14 @@
<p class="page__desc">弹出式菜单</p>
</div>
<tiny-button _mode="mobile" @click="fn" type="primary" size="large">上滑列表</tiny-button>
<tiny-action-sheet _mode="mobile" v-model="activeName" :menus="menus" :visible="boxVisibility" @update:visible="boxVisibility = $event"></tiny-action-sheet>
<tiny-action-sheet
_mode="mobile"
v-model="activeName"
:menus="menus"
:visible="boxVisibility"
@update:visible="boxVisibility = $event"
:isContent="true"
></tiny-action-sheet>
</div>
</template>
@ -38,6 +45,22 @@ export default {
id: 4,
label: '我是小叶',
warn: true
},
{
id: 5,
label: '我是小茎'
},
{
id: 6,
label: '我是小根'
},
{
id: 7,
label: '我是小枝'
},
{
id: 8,
label: '我是小木'
}
]
}

15
example/src/demo/mobile/action-sheet/clickfn.vue
View File

@ -1,5 +1,8 @@
<template>
<div class="tiny-mobile-action-sheet-demo">
<div class="page__hd">
<p class="page__desc">点击事件获取返回值</p>
</div>
<tiny-button _mode="mobile" @click="fn">cliclk me!</tiny-button>
<tiny-action-sheet
_mode="mobile"
@ -8,6 +11,7 @@
:visible="boxVisibility"
@update:visible="boxVisibility = $event"
@click="clickItem"
:isContent="true"
></tiny-action-sheet>
</div>
</template>
@ -55,3 +59,14 @@ export default {
}
}
</script>
<style>
.page__hd {
padding: 40px;
}
.page__desc {
margin-top: 5px;
color: #888;
font-size: 14px;
text-align: left;
}
</style>

18
example/src/demo/mobile/action-sheet/ellipsis.vue
View File

@ -1,5 +1,8 @@
<template>
<div class="tiny-mobile-action-sheet-demo">
<div class="page__hd">
<p class="page__desc">超长文字</p>
</div>
<tiny-button _mode="mobile" @click="fn">cliclk me!</tiny-button>
<tiny-action-sheet
_mode="mobile"
@ -8,6 +11,7 @@
ellipsis
:visible="boxVisibility"
@update:visible="boxVisibility = $event"
:isContent="true"
></tiny-action-sheet>
</div>
</template>
@ -27,7 +31,8 @@ export default {
menus: [
{
id: 1,
label: '我是小花,我是小花,我是小花,我是小花,我是小花,我是小花,我是小花'
label:
'我是小花,我是小花,我是小花,我是小花,我是小花,我是小花,我是小花,我是小花,我是小花,我是小花,我是小花,我是小花,我是小花,我是小花,我是小花,我是小花,我是小花'
},
{
id: 2,
@ -52,3 +57,14 @@ export default {
}
}
</script>
<style>
.page__hd {
padding: 40px;
}
.page__desc {
margin-top: 5px;
color: #888;
font-size: 14px;
text-align: left;
}
</style>

2
example/src/demo/mobile/action-sheet/slot-action.vue
View File

@ -5,7 +5,7 @@
<p class="page__desc">弹出式菜单</p>
</div>
<tiny-button @click="fn" type="primary" size="large">上滑列表</tiny-button>
<tiny-action-sheet v-model="activeName" ref="action" :menus="menus" :visible="boxVisibility" @update:visible="boxVisibility = $event">
<tiny-action-sheet v-model="activeName" ref="action" :menus="menus" :visible="boxVisibility" @update:visible="boxVisibility = $event" :isContent="true">
<template #action>
<tiny-button @click="visibleHandle" type="primary" size="large">取消</tiny-button>
</template>

2
example/src/demo/mobile/action-sheet/slot-item.vue
View File

@ -5,7 +5,7 @@
<p class="page__desc">弹出式菜单</p>
</div>
<tiny-button @click="fn" type="primary" size="large">上滑列表</tiny-button>
<tiny-action-sheet v-model="activeName" :menus="menus" :visible="boxVisibility" @update:visible="boxVisibility = $event">
<tiny-action-sheet v-model="activeName" :menus="menus" :visible="boxVisibility" @update:visible="boxVisibility = $event" :isContent="true">
<template #item="data">
<div>
{{ data.item.label }}

93
example/src/demo/mobile/form/auto-wordwrap.vue Normal file
View File

@ -0,0 +1,93 @@
<template>
<div class="demo-form">
<div class="page__hd">
<h1 class="page__title">Form</h1>
<p class="page__desc">表单（校验显示位置）</p>
</div>
<div class="demo-form-position-padds">
<tiny-form ref="ruleForm" :model="createData" :rules="rules" label-width="100px" label-position="left">
<tiny-form-item label="你真的好优秀呀！" prop="users" vertical>
<tiny-input v-model="createData.users" placeholder="请输入内容" type="form"></tiny-input>
</tiny-form-item>
<tiny-form-item label="你真的好优秀呀！" prop="users" vertical ellipsis>
<tiny-input v-model="createData.user" placeholder="请输入内容" type="form"></tiny-input>
</tiny-form-item>
<tiny-form-item class="demo-form-item">
<tiny-button type="primary" @click="handleSubmit('ruleForm')">提交</tiny-button>
</tiny-form-item>
</tiny-form>
</div>
<tiny-dialog-box :visible="boxVisibility" @update:visible="boxVisibility = $event" :modal-append-to-body="false" title="消息提示">
<span>提交成功！</span>
</tiny-dialog-box>
</div>
</template>
<script>
import { Form, FormItem, Input, Button, DialogBox } from '@opentiny/vue'
export default {
components: {
TinyForm: Form,
TinyFormItem: FormItem,
TinyInput: Input,
TinyButton: Button,
TinyDialogBox: DialogBox
},
data() {
return {
createData: {
users: '',
user: ''
},
rules: {
users: [{ required: true, message: '必填', trigger: 'change' }]
},
boxVisibility: false
}
},
methods: {
handleSubmit(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
this.boxVisibility = true
}
})
}
}
}
</script>
<style scoped>
.page__hd {
padding: 40px;
}
.page__title {
font-weight: 400;
font-size: 21px;
text-align: left;
}
.demo-form {
height: 100%;
overflow: auto;
padding-left: 16px;
padding-right: 15px;
background: #f4f4f4;
}
.demo-form-position-padds {
padding-right: 15px;
background: white;
padding-left: 15px;
margin-bottom: 15px;
}
.demo-form-item {
margin-top: 12px;
}
</style>
<style>
.demo-form-position-padds .tiny-mobile-input-form__input {
text-align: right;
}
</style>

8
example/src/demo/mobile/form/base.vue
View File

@ -6,11 +6,11 @@
</div>
<div class="padds">
<tiny-form ref="ruleForm" :model="createData" :rules="rules">
<tiny-form-item label="优秀" prop="users">
<tiny-input v-model="createData.users" vertical placeholder="请输入内容" type="form"></tiny-input>
<tiny-form-item label="优秀" prop="users" vertical>
<tiny-input v-model="createData.users" placeholder="请输入内容" type="form"></tiny-input>
</tiny-form-item>
<tiny-form-item label="优秀">
<tiny-input v-model="createData.user" is-select vertical :select-menu="menus" placeholder="请输入内容" type="form"></tiny-input>
<tiny-form-item label="优秀" vertical>
<tiny-input v-model="createData.user" is-select :select-menu="menus" placeholder="请输入内容" type="form"></tiny-input>
</tiny-form-item>
<tiny-form-item class="demo-form-base-item">
<tiny-button type="primary" @click="handleSubmit('ruleForm')">提交</tiny-button>

16
example/src/demo/mobile/form/form-select.vue
View File

@ -34,25 +34,23 @@
<tiny-input v-model="createData.user1" is-select :select-menu="menus" placeholder="请输入内容" type="form"></tiny-input>
</tiny-form-item>
<div class="lableTip">辅助文本说明未超3行</div>
<tiny-form-item label="标题">
<tiny-form-item label="标题" vertical>
<tiny-input
v-model="createData.user4"
is-select
:select-menu="menus"
placeholder="请输入内容"
type="form"
vertical
mobile-tips="辅助文本说明未超过3行"
></tiny-input>
</tiny-form-item>
<tiny-form-item label="标题">
<tiny-form-item label="标题" vertical>
<tiny-input
v-model="createData.user3"
is-select
:select-menu="menus"
placeholder="请输入内容"
type="form"
vertical
mobile-tips="辅助文本说明超过3行辅助文本说明辅助文本说明辅助文本说明辅助文本说明辅助文本说明辅助文本说明辅助文本说明辅助文本说明辅助文本说明辅助文本说明辅助文本说明辅助文本说明辅助文本说明"
></tiny-input>
</tiny-form-item>
@ -60,28 +58,26 @@
</div>
<div class="demo-form-select-padds">
<tiny-form ref="ruleForm" :model="createData" :rules="rules" label-position="top">
<tiny-form-item label="标题">
<tiny-input v-model="createData.user2" is-select :select-menu="menus" placeholder="请输入内容" type="form" vertical></tiny-input>
<tiny-form-item label="标题" vertical>
<tiny-input v-model="createData.user2" is-select :select-menu="menus" placeholder="请输入内容" type="form"></tiny-input>
</tiny-form-item>
<tiny-form-item label="标题">
<tiny-form-item label="标题" vertical>
<tiny-input
v-model="createData.user4"
is-select
:select-menu="menus"
placeholder="请输入内容"
type="form"
vertical
mobile-tips="辅助文本说明未超过3行"
></tiny-input>
</tiny-form-item>
<tiny-form-item label="标题">
<tiny-form-item label="标题" vertical>
<tiny-input
v-model="createData.user3"
is-select
:select-menu="menus"
placeholder="请输入内容"
type="form"
vertical
mobile-tips="辅助文本说明超过3行辅助文本说明辅助文本说明辅助文本说明辅助文本说明辅助文本说明辅助文本说明辅助文本说明辅助文本说明辅助文本说明辅助文本说明辅助文本说明辅助文本说明辅助文本说明"
></tiny-input>
</tiny-form-item>

24
example/src/demo/mobile/form/form-writeone.vue
View File

@ -5,22 +5,21 @@
<p class="page__desc">表单（文本框）</p>
</div>
<div class="demo-form-writeone-padds">
<tiny-form ref="ruleForm" :model="createData" :rules="rules" label-width="120" :hide-required-asterisk="true">
<tiny-form-item label="标题" prop="title1">
<tiny-input v-model="createData.title1" placeholder="请输入内容" type="form" vertical></tiny-input>
<tiny-form ref="ruleForm" :model="createData" :rules="rules" label-width="120px" :hide-required-asterisk="true">
<tiny-form-item label="标题" prop="title1" vertical>
<tiny-input v-model="createData.title1" placeholder="请输入内容" type="form"></tiny-input>
</tiny-form-item>
<tiny-form-item label="标题" prop="title2">
<tiny-input v-model="createData.title2" placeholder="请输入内容" type="form" vertical></tiny-input>
<tiny-form-item label="标题" prop="title2" vertical>
<tiny-input v-model="createData.title2" placeholder="请输入内容" type="form"></tiny-input>
</tiny-form-item>
<tiny-form-item label="标题" prop="title3">
<tiny-input v-model="createData.title3" @blur="handleSubmit('ruleForm')" placeholder="错误信息文本，右对齐" type="form" vertical></tiny-input>
<tiny-form-item label="标题" prop="title3" vertical>
<tiny-input v-model="createData.title3" @blur="handleSubmit('ruleForm')" placeholder="错误信息文本，右对齐" type="form"></tiny-input>
</tiny-form-item>
<tiny-form-item label="标题" prop="title4">
<tiny-form-item label="标题" prop="title4" vertical>
<tiny-input
v-model="createData.title4"
placeholder="请输入内容"
type="form"
vertical
mobile-tips="辅助文本说明辅助文本说明辅助文本说明辅助文本说明"
></tiny-input>
</tiny-form-item>
@ -28,18 +27,17 @@
</div>
<div class="demo-form-writeone-padds">
<tiny-form ref="ruleForm1" :model="createData" :rules="rules" label-width="60px" label-position="top" validate-position="left">
<tiny-form-item label="标题" prop="title4">
<tiny-form-item label="标题" prop="title4" vertical>
<tiny-input
v-model="createData.title4"
placeholder="请输入内容"
type="form"
readonly
vertical
mobile-tips="辅助文本说明辅助文本说明辅助文本说明辅助文本说明辅助文本说明辅助文本说明辅助文本说明辅助文本说明辅助文本说明辅助文本说明辅助文本说明辅助文本说明"
></tiny-input>
</tiny-form-item>
<tiny-form-item label="标题" prop="title5" id="title5">
<tiny-input v-model="createData.title5" placeholder="错误信息文本左对齐" type="form" readonly vertical @blur="handleSubmit('ruleForm1')"></tiny-input>
<tiny-form-item label="标题" prop="title5" id="title5" vertical>
<tiny-input v-model="createData.title5" placeholder="错误信息文本左对齐" type="form" readonly @blur="handleSubmit('ruleForm1')"></tiny-input>
</tiny-form-item>
</tiny-form>
</div>

8
example/src/demo/mobile/form/hide-required-asterisk.vue
View File

@ -6,11 +6,11 @@
</div>
<div class="demo-form-mobile-hide-padds">
<tiny-form ref="ruleForm" :model="createData" :rules="rules" :hide-required-asterisk="false" :inline="false">
<tiny-form-item label="优秀" prop="users">
<tiny-input v-model="createData.users" vertical placeholder="请输入内容" type="form"></tiny-input>
<tiny-form-item label="优秀" prop="users" vertical>
<tiny-input v-model="createData.users" placeholder="请输入内容" type="form"></tiny-input>
</tiny-form-item>
<tiny-form-item label="优秀">
<tiny-input v-model="createData.user" is-select vertical :select-menu="menus" placeholder="请输入内容" type="form"></tiny-input>
<tiny-form-item label="优秀" vertical>
<tiny-input v-model="createData.user" is-select :select-menu="menus" placeholder="请输入内容" type="form"></tiny-input>
</tiny-form-item>
<tiny-form-item class="demo-form-mobile-item">
<tiny-button type="primary" @click="handleSubmit('ruleForm')">提交</tiny-button>

8
example/src/demo/mobile/form/label-width.vue
View File

@ -6,11 +6,11 @@
</div>
<div class="demo-form-label-width-padds">
<tiny-form ref="ruleForm" :model="createData" :rules="rules" label-width="100px" label-position="left">
<tiny-form-item label="优秀" prop="users">
<tiny-input v-model="createData.users" vertical placeholder="请输入内容" type="form"></tiny-input>
<tiny-form-item label="优秀" prop="users" vertical>
<tiny-input v-model="createData.users" placeholder="请输入内容" type="form"></tiny-input>
</tiny-form-item>
<tiny-form-item label="优秀">
<tiny-input v-model="createData.user" is-select vertical :select-menu="menus" placeholder="请输入内容" type="form"></tiny-input>
<tiny-form-item label="优秀" vertical>
<tiny-input v-model="createData.user" is-select :select-menu="menus" placeholder="请输入内容" type="form"></tiny-input>
</tiny-form-item>
<tiny-form-item class="demo-form-item">
<tiny-button type="primary" @click="handleSubmit('ruleForm')">提交</tiny-button>

38
example/src/demo/mobile/form/only-read.vue
View File

@ -5,7 +5,7 @@
<p class="page__desc">表单（纯展示）</p>
</div>
<div class="padds">
<tiny-form ref="ruleForm" :model="createData" :rules="rules" label-width="120">
<tiny-form ref="ruleForm" :model="createData" :rules="rules" label-width="120px">
<tiny-form-item label="个人交养老险" prop="users">
<tiny-input v-model="createData.users" placeholder="请输入内容" type="form" readonly></tiny-input>
</tiny-form-item>
@ -21,34 +21,34 @@
</tiny-form>
</div>
<div class="padds">
<tiny-form ref="ruleForm" :model="createData" :rules="rules" label-width="120">
<tiny-form-item label="个人交养老险" prop="users">
<tiny-input v-model="createData.users" placeholder="请输入内容" type="form" readonly vertical></tiny-input>
<tiny-form ref="ruleForm" :model="createData" :rules="rules" label-width="120px">
<tiny-form-item label="个人交养老险" prop="users" vertical>
<tiny-input v-model="createData.users" placeholder="请输入内容" type="form" readonly></tiny-input>
</tiny-form-item>
<tiny-form-item label="个人交医疗险" prop="one">
<tiny-input v-model="createData.one" placeholder="请输入内容" type="form" readonly vertical></tiny-input>
<tiny-form-item label="个人交医疗险" prop="one" vertical>
<tiny-input v-model="createData.one" placeholder="请输入内容" type="form" readonly></tiny-input>
</tiny-form-item>
<tiny-form-item label="个人交失业险" prop="two">
<tiny-input v-model="createData.two" placeholder="请输入内容" type="form" readonly vertical></tiny-input>
<tiny-form-item label="个人交失业险" prop="two" vertical>
<tiny-input v-model="createData.two" placeholder="请输入内容" type="form" readonly></tiny-input>
</tiny-form-item>
<tiny-form-item label="个人交住房金" prop="three">
<tiny-input v-model="createData.three" placeholder="请输入内容" type="form" readonly vertical></tiny-input>
<tiny-form-item label="个人交住房金" prop="three" vertical>
<tiny-input v-model="createData.three" placeholder="请输入内容" type="form" readonly></tiny-input>
</tiny-form-item>
</tiny-form>
</div>
<div class="padds">
<tiny-form ref="ruleForm" :model="createData" :rules="rules" label-width="120" label-position="top">
<tiny-form-item label="个人交养老险" prop="users">
<tiny-input v-model="createData.users" placeholder="请输入内容" type="form" readonly vertical></tiny-input>
<tiny-form ref="ruleForm" :model="createData" :rules="rules" label-width="120px" label-position="top">
<tiny-form-item label="个人交养老险" prop="users" vertical>
<tiny-input v-model="createData.users" placeholder="请输入内容" type="form" readonly></tiny-input>
</tiny-form-item>
<tiny-form-item label="个人交医疗险" prop="one">
<tiny-input v-model="createData.one" placeholder="请输入内容" type="form" readonly vertical></tiny-input>
<tiny-form-item label="个人交医疗险" prop="one" vertical>
<tiny-input v-model="createData.one" placeholder="请输入内容" type="form" readonly></tiny-input>
</tiny-form-item>
<tiny-form-item label="个人交失业险" prop="two">
<tiny-input v-model="createData.two" placeholder="请输入内容" type="form" readonly vertical></tiny-input>
<tiny-form-item label="个人交失业险" prop="two" vertical>
<tiny-input v-model="createData.two" placeholder="请输入内容" type="form" readonly></tiny-input>
</tiny-form-item>
<tiny-form-item label="个人交住房金" prop="three">
<tiny-input v-model="createData.three" placeholder="请输入内容" type="form" readonly vertical></tiny-input>
<tiny-form-item label="个人交住房金" prop="three" vertical>
<tiny-input v-model="createData.three" placeholder="请输入内容" type="form" readonly></tiny-input>
</tiny-form-item>
</tiny-form>
</div>

8
example/src/demo/mobile/form/validate-position.vue
View File

@ -6,11 +6,11 @@
</div>
<div class="demo-form-position-padds">
<tiny-form ref="ruleForm" :model="createData" :rules="rules" validate-position="left" label-position="left">
<tiny-form-item label="优秀" prop="users">
<tiny-input v-model="createData.users" vertical placeholder="请输入内容" type="form"></tiny-input>
<tiny-form-item label="优秀" prop="users" vertical>
<tiny-input v-model="createData.users" placeholder="请输入内容" type="form"></tiny-input>
</tiny-form-item>
<tiny-form-item label="优秀">
<tiny-input v-model="createData.user" is-select vertical :select-menu="menus" placeholder="请输入内容" type="form"></tiny-input>
<tiny-form-item label="优秀" vertical>
<tiny-input v-model="createData.user" is-select :select-menu="menus" placeholder="请输入内容" type="form"></tiny-input>
</tiny-form-item>
<tiny-form-item class="demo-form-item">
<tiny-button type="primary" @click="handleSubmit('ruleForm')">提交</tiny-button>

8
example/src/demo/mobile/form/validate.vue
View File

@ -6,11 +6,11 @@
</div>
<div class="demo-form-validate-padds">
<tiny-form ref="ruleForm" :model="createData" :rules="rules" inline-message>
<tiny-form-item label="优秀" prop="users">
<tiny-input v-model="createData.users" vertical placeholder="请输入内容" type="form"></tiny-input>
<tiny-form-item label="优秀" prop="users" vertical>
<tiny-input v-model="createData.users" placeholder="请输入内容" type="form"></tiny-input>
</tiny-form-item>
<tiny-form-item label="优秀" prop="user">
<tiny-input v-model="createData.user" is-select vertical :select-menu="menus" placeholder="请输入内容" type="form"></tiny-input>
<tiny-form-item label="优秀" prop="user" vertical>
<tiny-input v-model="createData.user" is-select :select-menu="menus" placeholder="请输入内容" type="form"></tiny-input>
</tiny-form-item>
<tiny-form-item class="demo-form-validate-item">
<tiny-button type="primary" @click="handleSubmit('ruleForm')">提交</tiny-button>

17
example/src/docs/mobile/form/auto-wordwrap.md Normal file
View File

@ -0,0 +1,17 @@
<div class="demo-header">
<p class="overviewicon">
<span class="wapi-business-slider"/>
</p>
## Form 表单
<mobile-uxlink widget-name="Form"></mobile-uxlink>
</div>
### 校验提示信息的位置
默认自动换行，ellipsis：不换行，显示省略号
<mobile-view link="form/auto-wordwrap"></mobile-view>
<br>

4
example/src/nav.config.comp.mobile.json
View File

@ -292,6 +292,10 @@
{
"path": "/form/validate",
"name": "表单校验"
},
{
"path": "/form/auto-wordwrap",
"name": "自动换行"
}
]
},

5
example/src/route.config.comp.mobile.js
View File

@ -259,6 +259,11 @@ const router = [
meta: { title: 'form 表单', lang: 'zh-CN' },
component: () => import(/* webpackChunkName: "mobileComp" */ './docs/mobile/form/validate-position.md')
},
{
path: 'form/auto-wordwrap',
meta: { title: 'form 表单', lang: 'zh-CN' },
component: () => import(/* webpackChunkName: "mobileComp" */ './docs/mobile/form/auto-wordwrap.md')
},
{
path: 'badge',
meta: { title: 'mobileBadge 徽章组件', lang: 'zh-CN' },

4
package.json
View File

@ -71,8 +71,8 @@
"@babel/plugin-syntax-dynamic-import": "^7.8.3",
"@babel/plugin-syntax-jsx": "^7.2.0",
"@babel/preset-env": "^7.18.10",
"@better-scroll/core": "2.5.0",
"@better-scroll/wheel": "2.5.0",
"@better-scroll/core": "^2.5.0",
"@better-scroll/wheel": "^2.5.0",
"@commitlint/cli": "^17.3.0",
"@commitlint/config-conventional": "^17.3.0",
"@rollup/plugin-alias": "^3.1.9",

3
packages/action-sheet/package.json
View File

@ -10,7 +10,8 @@
},
"dependencies": {
"@opentiny/vue-common": "~0.1.0",
"@opentiny/vue-renderless": "~0.1.0"
"@opentiny/vue-renderless": "~0.1.0",
"@better-scroll/core": "2.5.0"
},
"license": "MIT"
}

33
packages/action-sheet/src/index.vue
View File

@ -11,8 +11,12 @@
-->
<template>
<div class="tiny-mobile-action-sheet" v-show="visible" @click="visibleHandle">
<div class="tiny-mobile-action-sheet__mask"></div>
<div :class="['tiny-mobile-action-sheet__content', state.toggle ? 'is-toggle' : '']">
<div class="tiny-mobile-action-sheet__mask" :style="state.sheetMaskStyle" v-if="!isContent"></div>
<div
:class="['tiny-mobile-action-sheet__content', state.toggle ? 'is-toggle' : '', isContent ? '' : 'is-not-content']"
:style="[state.sheetContentStyle]"
ref="scrollMenu"
>
<div :class="['tiny-mobile-action-sheet__menu', ellipsis ? 'is-ellipsis' : '']">
<div
:class="['tiny-mobile-action-sheet__item', item.warn ? 'is-warn' : '', item.id === modelValue || item.id === state.active ? 'is-active' : '']"
@ -25,13 +29,13 @@
</slot>
</div>
</div>
<div class="tiny-mobile-action-sheet__action">
<slot name="action">
<div class="tiny-mobile-action-sheet__cancel" @click="visibleHandle">
{{ t('ui.actionSheet.cancel') }}
</div>
</slot>
</div>
</div>
<div class="tiny-mobile-action-sheet__action" v-if="isContent">
<slot name="action">
<div class="tiny-mobile-action-sheet__cancel" @click="visibleHandle">
{{ t('ui.actionSheet.cancel') }}
</div>
</slot>
</div>
</div>
</template>
@ -40,6 +44,7 @@
import { renderless, api } from '@opentiny/vue-renderless/action-sheet/vue'
import { $prefix, setup } from '@opentiny/vue-common'
import '@opentiny/vue-theme-mobile/action-sheet/index.css'
import BScroll from '@better-scroll/core'
export default {
name: $prefix + 'ActionSheet',
@ -56,10 +61,18 @@ export default {
ellipsis: {
type: Boolean,
default: false
},
height: {
type: String,
default: '200px'
},
isContent: {
type: Boolean,
default: false
}
},
setup(props, context) {
return setup({ props, context, renderless, api, mono: true })
return setup({ props, context, renderless, api, mono: true, extendOptions: { BScroll } })
}
}
</script>

49
packages/form-item/src/index.vue
View File

@ -67,13 +67,22 @@ export default {
validateIcon: {
type: Object,
default: null
},
ellipsis: {
type: Boolean,
default: false
},
vertical: {
type: Boolean,
default: false
}
},
setup(props, context) {
return setup({ props, context, renderless, api, mono: true })
},
// eslint-disable-next-line complexity
render() {
const { state, required, slots, label, scopedSlots, showMessage, inlineMessage, validateIcon } = this
const { state, required, slots, label, scopedSlots, showMessage, inlineMessage, validateIcon, ellipsis, vertical } = this
const isMobile = state.mode === 'mobile'
const classPrefix = isMobile ? 'tiny-mobile-' : 'tiny-'
const labelSlot = slots.label ? slots.label() : null
@ -81,6 +90,8 @@ export default {
const errorSlot = scopedSlots.error && scopedSlots.error(state.validateMessage)
const formItemClass = `${classPrefix}form-item--${state.sizeClass ? state.sizeClass : ''}`
const isShowError = state.validateState === 'error' && showMessage && state.form.showMessage
const isErrorInline = typeof inlineMessage === 'boolean' ? inlineMessage : (state.formInstance && state.formInstance.inlineMessage) || false
let validateMessage = null
const FormContent = defaultSlots
? defaultSlots.map((vnode) => {
@ -134,26 +145,25 @@ export default {
popper.style.transform = `translate3d(${x}px, ${parseInt(y, 10)}px, ${z}px)`
}
}
if (isMobile) {
const validatePosition = this.validatePosition || state.formInstance.validatePosition || 'right'
const validateMessage = state.validateMessage ? (
validateMessage = state.validateMessage ? (
validatePosition === 'right' ? (
<div class="tiny-mobile-input-form__error align-right">{state.validateMessage}</div>
) : (
<div class="tiny-mobile-input-form__error align-left">{state.validateMessage}</div>
)
) : null
return (
<div>
{item}
{validateMessage}
</div>
return h(
'div',
{
class: `${classPrefix}form-item__value`,
style: state.valueStyle
},
[item]
)
}
const validateIconNode = validateIcon ? h(validateIcon, { class: 'tooltip-validate-icon' }) : null
return h(
'tooltip',
{
@ -193,14 +203,12 @@ export default {
{
class: {
[`${classPrefix}form-item__error`]: true,
[`${classPrefix}form-item__error--inline`]:
typeof inlineMessage === 'boolean' ? inlineMessage : (state.formInstance && state.formInstance.inlineMessage) || false
[`${classPrefix}form-item__error--inline`]: isErrorInline
}
},
[validateIcon ? h(validateIcon, { class: 'validate-icon' }) : null, state.validateMessage]
)
: null
const LabelContent = h(
'label-wrap',
{
@ -215,7 +223,10 @@ export default {
? h(
'label',
{
class: `${classPrefix}form-item__label`,
class: {
[`${classPrefix}form-item__label`]: true,
'is-ellipsis': isMobile && ellipsis
},
style: state.labelStyle,
attrs: {
for: state.labelFor
@ -226,7 +237,6 @@ export default {
: null
]
)
return h(
'div',
{
@ -242,15 +252,20 @@ export default {
}
},
[
LabelContent,
!isMobile ? LabelContent : null,
h(
'div',
{
class: `${classPrefix}form-item__content`,
class: {
[`${classPrefix}form-item__content`]: true,
'is-vertical': isMobile && vertical
},
style: state.contentStyle
},
[
isMobile ? LabelContent : null,
FormContent,
isMobile ? validateMessage : null,
h(
'transition',
{

14
packages/input/src/mobile.vue
View File

@ -86,14 +86,7 @@
</div>
</template>
<template v-if="type === 'form'">
<div
class="tiny-mobile-input-form"
:class="{ isVertical: vertical }"
:style="{
flexDirection: vertical ? 'column' : '',
alignItems: vertical ? 'flex-start' : 'center'
}"
>
<div class="tiny-mobile-input-form">
<div v-if="isSelect" class="tiny-mobile-input-form__select" @click="showBox">
<input
type="text"
@ -136,10 +129,6 @@
@blur="handleBlur"
@change="handleChange"
:aria-label="label"
:style="{
textAlign: vertical ? '' : 'right',
padding: vertical ? '0px 16px 0 16px' : ''
}"
/>
<tiny-action-sheet
v-model="state.sheetvalue"
@ -210,7 +199,6 @@ export default {
'selectMenu',
'labelWidth',
'mobileTips',
'vertical',
'isSelect',
'type',
'label',

4
packages/wheel/package.json
View File

@ -13,8 +13,8 @@
"@opentiny/vue-renderless": "~0.1.0",
"@opentiny/vue-locale": "~0.1.0",
"@opentiny/vue-icon": "~0.1.0",
"@better-scrool/core": "2.5.0",
"@better-scrool/wheel": "2.5.0"
"@better-scroll/core": "2.5.0",
"@better-scroll/wheel": "2.5.0"
},
"license": "MIT"
}