forked from opentiny/tiny-vue
feat(button): refresh button ui (#1171)
* feat(button): 刷新移动端设计 Signed-off-by: jacknan <zhumaonan@aliyun.com> * feat(button): 刷新移动端设计 Signed-off-by: jacknan <zhumaonan@aliyun.com> * feat(button): 刷新demo Signed-off-by: jacknan <zhumaonan@aliyun.com> * feat(button): 删除无用文件 Signed-off-by: jacknan <zhumaonan@aliyun.com> * feat(button): 优化样式 Signed-off-by: jacknan <zhumaonan@aliyun.com> * fix(pull-refresh): 去除影响pc模式的修改 Signed-off-by: jacknan <zhumaonan@aliyun.com> * feat(button): 优化样式 Signed-off-by: jacknan <zhumaonan@aliyun.com> --------- Signed-off-by: jacknan <zhumaonan@aliyun.com>
This commit is contained in:
jacknan
GitHub
parent
980f4ae145
commit
4116bd232d
|
|
@ -0,0 +1,42 @@
|
|||
<template>
|
||||
<div class="button-wrap">
|
||||
<p>按钮类型</p>
|
||||
<tiny-button type="primary" reset-time="500">主要按钮</tiny-button>
|
||||
<tiny-button type="secondary">次要按钮</tiny-button>
|
||||
<tiny-button type="danger">危险按钮</tiny-button>
|
||||
<tiny-button type="text">文字按钮</tiny-button>
|
||||
<tiny-button type="icon" :icon="IconMail"></tiny-button>
|
||||
<tiny-button type="icon" :icon="IconMail" text="图标按钮"></tiny-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Button } from '@opentiny/vue'
|
||||
import { iconMail } from '@opentiny/vue-icon'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyButton: Button
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
IconMail: iconMail()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
body {
|
||||
overflow: hidden;
|
||||
}
|
||||
.button-wrap {
|
||||
padding: 0 10px;
|
||||
overflow-y: scroll;
|
||||
height: 100%;
|
||||
}
|
||||
.button-wrap .tiny-mobile-button {
|
||||
margin-right: 16px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
<template>
|
||||
<div class="button-wrap">
|
||||
<h3>按钮不可用</h3>
|
||||
<tiny-button type="primary" disabled>主要按钮不可用</tiny-button>
|
||||
<tiny-button type="secondary" disabled>次要按钮不可用</tiny-button>
|
||||
<tiny-button type="text" disabled>文字按钮不可用</tiny-button>
|
||||
<tiny-button type="danger" disabled>危险按钮不可用</tiny-button>
|
||||
<tiny-button type="icon" :icon="IconMail" disabled></tiny-button>
|
||||
<tiny-button type="icon" :icon="IconMail" text="图标按钮" disabled></tiny-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Button } from '@opentiny/vue'
|
||||
import { iconMail } from '@opentiny/vue-icon'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyButton: Button
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
IconMail: iconMail()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
body {
|
||||
overflow: hidden;
|
||||
}
|
||||
.button-wrap {
|
||||
padding: 0 10px;
|
||||
overflow-y: scroll;
|
||||
height: 100%;
|
||||
}
|
||||
.button-wrap .tiny-mobile-button {
|
||||
margin-right: 16px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,40 +0,0 @@
|
|||
<template>
|
||||
<div class="button-wrap">
|
||||
<tiny-button round>默认1秒</tiny-button>
|
||||
<tiny-button type="primary" round :reset-time="2000">禁用2秒</tiny-button>
|
||||
<tiny-button type="success" round :reset-time="5000">禁用5秒</tiny-button>
|
||||
<tiny-button round>圆角按钮</tiny-button>
|
||||
<tiny-button type="primary" round disabled>主要按钮</tiny-button>
|
||||
<tiny-button type="success" round disabled>成功按钮</tiny-button>
|
||||
<tiny-button type="info" round disabled>信息按钮</tiny-button>
|
||||
<tiny-button type="warning" round disabled>警告按钮</tiny-button>
|
||||
<tiny-button type="danger" round disabled>危险按钮</tiny-button>
|
||||
<tiny-button type="secondary" round disabled>次要按钮</tiny-button>
|
||||
<tiny-button round disabled>弱按钮</tiny-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
import { Button } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyButton: Button
|
||||
},
|
||||
methods: {
|
||||
click() {
|
||||
console.log('click event!!!')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.button-wrap {
|
||||
padding: 0 10px;
|
||||
}
|
||||
.button-wrap .tiny-mobile-button {
|
||||
margin-right: 16px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
<template>
|
||||
<div class="button-wrap">
|
||||
<p>点击事件</p>
|
||||
<tiny-button type="secondary" :loading="loading" @click="btnClick" size="small">点我加载</tiny-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Button } from '@opentiny/vue'
|
||||
import { iconMail } from '@opentiny/vue-icon'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyButton: Button
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
IconMail: iconMail(),
|
||||
loading: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
btnClick() {
|
||||
this.loading = true
|
||||
setTimeout(() => {
|
||||
this.loading = false
|
||||
}, 2000)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
body {
|
||||
overflow: hidden;
|
||||
}
|
||||
.button-wrap {
|
||||
padding: 0 10px;
|
||||
overflow-y: scroll;
|
||||
height: 100%;
|
||||
}
|
||||
.button-wrap .tiny-mobile-button {
|
||||
margin-right: 16px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,15 +1,16 @@
|
|||
<template>
|
||||
<div class="button-wrap">
|
||||
<tiny-button :icon="IconSearch"></tiny-button>
|
||||
<tiny-button type="primary" :icon="IconEdit">编辑</tiny-button>
|
||||
<tiny-button type="success" :icon="IconYes" text="好的"></tiny-button>
|
||||
<tiny-button type="info" :icon="IconMail"></tiny-button>
|
||||
<tiny-button type="warning" :icon="IconStarO"></tiny-button>
|
||||
<tiny-button type="danger" :icon="IconDel"></tiny-button>
|
||||
<h3>图标</h3>
|
||||
<tiny-button type="icon" :icon="IconSearch"></tiny-button>
|
||||
<tiny-button type="icon" :icon="IconEdit" text="编辑"></tiny-button>
|
||||
<tiny-button type="icon" :icon="IconYes" text="好的"></tiny-button>
|
||||
<tiny-button type="icon" :icon="IconMail"></tiny-button>
|
||||
<tiny-button type="icon" :icon="IconStarO"></tiny-button>
|
||||
<tiny-button type="icon" :icon="IconDel" size="small"></tiny-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
<script>
|
||||
import { Button } from '@opentiny/vue'
|
||||
import { iconDel, iconYes, iconEdit, iconMail, iconStarO, iconSearch } from '@opentiny/vue-icon'
|
||||
|
||||
|
|
|
|||
|
|
@ -1,15 +1,12 @@
|
|||
<template>
|
||||
<div class="button-wrap">
|
||||
<tiny-button loading>加载中</tiny-button>
|
||||
<tiny-button type="primary" loading>加载中</tiny-button>
|
||||
<tiny-button type="success" loading>加载中</tiny-button>
|
||||
<tiny-button type="info" loading>加载中</tiny-button>
|
||||
<tiny-button type="warning" loading>加载中</tiny-button>
|
||||
<tiny-button type="danger" loading>加载中</tiny-button>
|
||||
<h3>按钮加载状态</h3>
|
||||
<tiny-button type="primary" loading>主要按钮-加载</tiny-button>
|
||||
<tiny-button type="secondary" :loading="loading" @click="btnClick">点我加载</tiny-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
<script>
|
||||
import { Button } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
|
|
@ -17,16 +14,31 @@ export default {
|
|||
TinyButton: Button
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
return {
|
||||
loading: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
btnClick() {
|
||||
this.loading = true
|
||||
setTimeout(() => {
|
||||
this.loading = false
|
||||
}, 2000)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
body {
|
||||
overflow: hidden;
|
||||
}
|
||||
.button-wrap {
|
||||
padding: 0 10px;
|
||||
overflow-y: scroll;
|
||||
height: 100%;
|
||||
}
|
||||
.button-wrap .tiny-mobile-button:not(:nth-child(3n)) {
|
||||
.button-wrap .tiny-mobile-button {
|
||||
margin-right: 16px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,105 +0,0 @@
|
|||
<template>
|
||||
<div class="demo-form-native-type">
|
||||
<div class="page__hd">
|
||||
<h1 class="page__title">Form</h1>
|
||||
<p class="page__desc">表单（纯展示）</p>
|
||||
</div>
|
||||
<div class="demo-padds-native-type">
|
||||
<tiny-form ref="ruleForm" :model="createData" :rules="rules">
|
||||
<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="优秀" 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>
|
||||
</tiny-form-item>
|
||||
</tiny-form>
|
||||
</div>
|
||||
<tiny-dialog-box
|
||||
:visible="boxVisibility"
|
||||
@update:visible="boxVisibility = $event"
|
||||
:modal-append-to-body="false"
|
||||
title="消息提示"
|
||||
>
|
||||
<span>reset</span>
|
||||
</tiny-dialog-box>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
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: ''
|
||||
},
|
||||
rules: {
|
||||
users: [{ required: true, message: '必填', trigger: 'change' }]
|
||||
},
|
||||
boxVisibility: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleSubmit(formName) {
|
||||
this.$refs[formName].validate((valid) => {
|
||||
if (valid) {
|
||||
this.boxVisibility = true
|
||||
this.$refs[formName].resetFields()
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.demo-padds-native-type {
|
||||
padding: 15px;
|
||||
background: white;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.page__hd {
|
||||
padding: 40px;
|
||||
}
|
||||
.page__title {
|
||||
font-weight: 400;
|
||||
font-size: 21px;
|
||||
text-align: left;
|
||||
}
|
||||
.page__desc {
|
||||
margin-top: 5px;
|
||||
color: #888;
|
||||
font-size: 14px;
|
||||
text-align: left;
|
||||
}
|
||||
.demo-form-native-type {
|
||||
height: 100%;
|
||||
background: #f4f4f4;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
.demo-form-native-type .tiny-form-item__label {
|
||||
background: #fff;
|
||||
}
|
||||
.demo-padds-native-type .tiny-mobile-input-form__input {
|
||||
text-align: right;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,33 +0,0 @@
|
|||
<template>
|
||||
<div class="button-wrap">
|
||||
<tiny-button plain>朴素按钮</tiny-button>
|
||||
<tiny-button type="primary" plain>主要按钮</tiny-button>
|
||||
<tiny-button type="success" plain>成功按钮</tiny-button>
|
||||
<tiny-button type="info" plain>信息按钮</tiny-button>
|
||||
<tiny-button type="warning" plain>警告按钮</tiny-button>
|
||||
<tiny-button type="danger" plain>危险按钮</tiny-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
import { Button } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyButton: Button
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.button-wrap {
|
||||
padding: 0 10px;
|
||||
}
|
||||
.button-wrap .tiny-mobile-button:not(:nth-child(3n)) {
|
||||
margin-right: 16px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,35 +1,28 @@
|
|||
<template>
|
||||
<div class="button-wrap">
|
||||
<tiny-button round>默认1秒</tiny-button>
|
||||
<tiny-button type="primary" round :reset-time="2000">禁用2秒</tiny-button>
|
||||
<tiny-button type="success" round :reset-time="5000">禁用5秒</tiny-button>
|
||||
<tiny-button round>圆角按钮</tiny-button>
|
||||
<tiny-button type="primary" round disabled>主要按钮</tiny-button>
|
||||
<tiny-button type="success" round disabled>成功按钮</tiny-button>
|
||||
<tiny-button type="info" round disabled>信息按钮</tiny-button>
|
||||
<tiny-button type="warning" round disabled>警告按钮</tiny-button>
|
||||
<tiny-button type="danger" round disabled>危险按钮</tiny-button>
|
||||
<tiny-button type="secondary" round disabled>次要按钮</tiny-button>
|
||||
<tiny-button round disabled>弱按钮</tiny-button>
|
||||
<p>按钮类型</p>
|
||||
<tiny-button type="primary" reset-time="500">重置时间</tiny-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
<script>
|
||||
import { Button } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyButton: Button
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
body {
|
||||
overflow: hidden;
|
||||
}
|
||||
.button-wrap {
|
||||
padding: 10px 20px;
|
||||
padding: 0 10px;
|
||||
overflow-y: scroll;
|
||||
height: 100%;
|
||||
}
|
||||
.button-wrap .tiny-mobile-button {
|
||||
margin-right: 16px;
|
||||
|
|
|
|||
|
|
@ -1,34 +0,0 @@
|
|||
<template>
|
||||
<div class="button-wrap">
|
||||
<tiny-button round>圆角按钮</tiny-button>
|
||||
<tiny-button type="primary" round>主要按钮</tiny-button>
|
||||
<tiny-button type="success" round>成功按钮</tiny-button>
|
||||
<tiny-button type="info" round>信息按钮</tiny-button>
|
||||
<tiny-button type="warning" round>警告按钮</tiny-button>
|
||||
<tiny-button type="danger" round>危险按钮</tiny-button>
|
||||
<tiny-button type="secondary" round>次要按钮</tiny-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
import { Button } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyButton: Button
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.button-wrap {
|
||||
padding: 0 10px;
|
||||
}
|
||||
.button-wrap .tiny-mobile-button {
|
||||
margin-right: 16px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,33 +1,50 @@
|
|||
<template>
|
||||
<div class="button-wrap">
|
||||
<tiny-button round>默认尺寸</tiny-button>
|
||||
<tiny-button type="primary" size="large" round>large</tiny-button>
|
||||
<tiny-button type="success" size="medium" round>medium</tiny-button>
|
||||
<tiny-button type="info" size="small" round>small</tiny-button>
|
||||
<tiny-button type="warning" size="mini" round>mini</tiny-button>
|
||||
<tiny-button type="primary" size="large" round>大号按钮</tiny-button>
|
||||
<tiny-button type="success" size="medium" round>中号按钮</tiny-button>
|
||||
<tiny-button type="info" size="small" round>小号按钮</tiny-button>
|
||||
<tiny-button type="warning" size="mini" round>mini按钮</tiny-button>
|
||||
<h3>按钮小尺寸</h3>
|
||||
<tiny-button type="primary" size="small">主要按钮</tiny-button>
|
||||
<tiny-button type="secondary" size="small">次要按钮</tiny-button>
|
||||
<tiny-button type="danger" size="small">危险按钮</tiny-button>
|
||||
<tiny-button type="text" size="small">文字按钮</tiny-button>
|
||||
<tiny-button type="icon" :icon="IconMail" size="small"></tiny-button>
|
||||
<tiny-button type="icon" :icon="IconMail" text="图标按钮" size="small"></tiny-button>
|
||||
<tiny-button type="primary" loading size="small">主要按钮-加载</tiny-button>
|
||||
<tiny-button type="secondary" :loading="loading" @click="btnClick" size="small">点我加载</tiny-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
<script>
|
||||
import { Button } from '@opentiny/vue'
|
||||
import { iconMail } from '@opentiny/vue-icon'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyButton: Button
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
return {
|
||||
IconMail: iconMail(),
|
||||
loading: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
btnClick() {
|
||||
this.loading = true
|
||||
setTimeout(() => {
|
||||
this.loading = false
|
||||
}, 2000)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
body {
|
||||
overflow: hidden;
|
||||
}
|
||||
.button-wrap {
|
||||
padding: 0 10px;
|
||||
overflow-y: scroll;
|
||||
height: 100%;
|
||||
}
|
||||
.button-wrap .tiny-mobile-button {
|
||||
margin-right: 16px;
|
||||
|
|
|
|||
|
|
@ -1,38 +0,0 @@
|
|||
<template>
|
||||
<div class="button-wrap">
|
||||
<tiny-button round>默认1秒</tiny-button>
|
||||
<tiny-button type="primary" round :reset-time="2000">禁用2秒</tiny-button>
|
||||
<tiny-button type="success" round :reset-time="5000">禁用5秒</tiny-button>
|
||||
<tiny-button round>圆角按钮</tiny-button>
|
||||
<tiny-button type="primary" round disabled>主要按钮</tiny-button>
|
||||
<tiny-button type="success" round disabled>成功按钮</tiny-button>
|
||||
<tiny-button type="info" round disabled>信息按钮</tiny-button>
|
||||
<tiny-button type="warning" round disabled>警告按钮</tiny-button>
|
||||
<tiny-button type="danger" round disabled>危险按钮</tiny-button>
|
||||
<tiny-button type="secondary" round disabled>次要按钮</tiny-button>
|
||||
<tiny-button round disabled>弱按钮</tiny-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
import { Button } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyButton: Button
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.button-wrap {
|
||||
padding: 0 10px;
|
||||
}
|
||||
.button-wrap .tiny-mobile-button {
|
||||
margin-right: 16px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -3,28 +3,28 @@ export default {
|
|||
owner: '',
|
||||
demos: [
|
||||
{
|
||||
demoId: 'event-click',
|
||||
demoId: 'base',
|
||||
name: {
|
||||
'zh-CN': '点击事件',
|
||||
'en-US': 'button type'
|
||||
'zh-CN': '基础用法',
|
||||
'en-US': 'base'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>单击事件</p>',
|
||||
'en-US': '<p>button type</p>'
|
||||
'zh-CN': '<p>基础用法</p>',
|
||||
'en-US': '<p>base</p>'
|
||||
},
|
||||
codeFiles: ['event-click.vue']
|
||||
codeFiles: ['base.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'icon',
|
||||
demoId: 'disabled',
|
||||
name: {
|
||||
'zh-CN': '图标按钮',
|
||||
'en-US': 'button round'
|
||||
'zh-CN': '不可用',
|
||||
'en-US': 'disabled'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>图标按钮</p>',
|
||||
'en-US': '<p>button round</p>'
|
||||
'zh-CN': '<p>不可用</p>',
|
||||
'en-US': '<p>disabled</p>'
|
||||
},
|
||||
codeFiles: ['icon.vue']
|
||||
codeFiles: ['disabled.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'loading',
|
||||
|
|
@ -38,55 +38,6 @@ export default {
|
|||
},
|
||||
codeFiles: ['loading.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'native-type',
|
||||
name: {
|
||||
'zh-CN': '按钮属性',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>通过<code>native-type</code>属性可以设置原生 type 属性，该属性的可选值为 button / submit / reset</p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['native-type.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'plain',
|
||||
name: {
|
||||
'zh-CN': '朴素按钮',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>朴素按钮</p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['plain.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'reset-time',
|
||||
name: {
|
||||
'zh-CN': '禁用时间',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>通过<code>reset-time</code>属性可以设置按钮禁用时间，防止重复提交，单位毫秒,该属性默认为 1000</p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['reset-time.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'round',
|
||||
name: {
|
||||
'zh-CN': '圆角按钮',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>圆角按钮</p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['round.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'size',
|
||||
name: {
|
||||
|
|
@ -100,16 +51,40 @@ export default {
|
|||
codeFiles: ['size.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'text',
|
||||
demoId: 'icon',
|
||||
name: {
|
||||
'zh-CN': '文字按钮',
|
||||
'zh-CN': '图标',
|
||||
'en-US': 'icon'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>图标</p>',
|
||||
'en-US': '<p>icon</p>'
|
||||
},
|
||||
codeFiles: ['icon.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'reset-time',
|
||||
name: {
|
||||
'zh-CN': '重置时间',
|
||||
'en-US': 'reset time'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>重置时间</p>',
|
||||
'en-US': '<p>reset-time</p>'
|
||||
},
|
||||
codeFiles: ['reset-time.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'event',
|
||||
name: {
|
||||
'zh-CN': '点击事件',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>文字按钮</p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'zh-CN': '<p>点击事件</p>',
|
||||
'en-US': '<p>button click</p>'
|
||||
},
|
||||
codeFiles: ['text.vue']
|
||||
codeFiles: ['event.vue']
|
||||
}
|
||||
],
|
||||
apis: [
|
||||
|
|
@ -119,17 +94,17 @@ export default {
|
|||
properties: [
|
||||
{
|
||||
name: 'disabled',
|
||||
type: 'Boolean',
|
||||
type: 'boolean',
|
||||
defaultValue: 'false',
|
||||
desc: {
|
||||
'zh-CN': '<p>设置按钮是否被禁用,该属性默认为false</p>',
|
||||
'en-US': 'display different button'
|
||||
},
|
||||
demoId: ''
|
||||
demoId: 'disabled'
|
||||
},
|
||||
{
|
||||
name: 'icon',
|
||||
type: 'Object',
|
||||
type: 'VueComponent',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '<p>svg 图片对象</p>',
|
||||
|
|
@ -139,7 +114,7 @@ export default {
|
|||
},
|
||||
{
|
||||
name: 'loading',
|
||||
type: 'Boolean',
|
||||
type: 'boolean',
|
||||
defaultValue: 'false',
|
||||
desc: {
|
||||
'zh-CN': '<p>svg 是否加载中状态，该属性默认为false</p>',
|
||||
|
|
@ -147,49 +122,19 @@ export default {
|
|||
},
|
||||
demoId: 'loading'
|
||||
},
|
||||
{
|
||||
name: 'native-type',
|
||||
type: 'String',
|
||||
defaultValue: 'button',
|
||||
desc: {
|
||||
'zh-CN': '<p>原生 type 属性,该属性默认为button</p>',
|
||||
'en-US': 'display different button'
|
||||
},
|
||||
demoId: 'native-type'
|
||||
},
|
||||
{
|
||||
name: 'plain',
|
||||
type: 'Boolean',
|
||||
defaultValue: 'false',
|
||||
desc: {
|
||||
'zh-CN': '<p>是否朴素按钮,该属性默认为false</p>',
|
||||
'en-US': 'display different button'
|
||||
},
|
||||
demoId: 'plain'
|
||||
},
|
||||
{
|
||||
name: 'reset-time',
|
||||
type: 'Number',
|
||||
defaultValue: '1000',
|
||||
type: 'number',
|
||||
defaultValue: '0',
|
||||
desc: {
|
||||
'zh-CN': '<p>设置按钮禁用时间，防止重复提交，单位毫秒,该属性默认为1000</p>',
|
||||
'en-US': 'display different button'
|
||||
},
|
||||
demoId: 'reset-time'
|
||||
},
|
||||
{
|
||||
name: 'round',
|
||||
type: 'Boolean',
|
||||
defaultValue: 'false',
|
||||
desc: {
|
||||
'zh-CN': '<p>是否圆角按钮，该属性默认为false</p>',
|
||||
'en-US': 'display different button'
|
||||
},
|
||||
demoId: 'round'
|
||||
},
|
||||
{
|
||||
name: 'size',
|
||||
type: 'String',
|
||||
type: 'string',
|
||||
defaultValue: '"large" | "medium" | "small" | "mini"',
|
||||
desc: {
|
||||
'zh-CN': '<p>尺寸</p>',
|
||||
|
|
@ -199,13 +144,13 @@ export default {
|
|||
},
|
||||
{
|
||||
name: 'type',
|
||||
type: '"primary" | "success" | "warning" |"info" | "danger"',
|
||||
type: '"primary" | "secondary" | "text" |"icon" | "danger"',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '<p>类型</p>',
|
||||
'en-US': 'display different button'
|
||||
},
|
||||
demoId: 'icon'
|
||||
demoId: 'base'
|
||||
},
|
||||
{
|
||||
name: 'text',
|
||||
|
|
@ -215,19 +160,19 @@ export default {
|
|||
'zh-CN': '<p>设置按钮显示的文本，可配置国际化 </p>',
|
||||
'en-US': 'display different button'
|
||||
},
|
||||
demoId: 'icon'
|
||||
demoId: 'base'
|
||||
}
|
||||
],
|
||||
events: [
|
||||
{
|
||||
name: 'click',
|
||||
type: '',
|
||||
type: '(event: PointEvent) => void',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '<p>设置当按钮被点击时触发的回调函数。</p>',
|
||||
'en-US': 'Click'
|
||||
},
|
||||
demoId: 'event-click'
|
||||
demoId: 'event'
|
||||
}
|
||||
],
|
||||
slots: [
|
||||
|
|
|
|||
|
|
@ -10,7 +10,6 @@
|
|||
*
|
||||
*/
|
||||
|
||||
@import '../mixins/button.less';
|
||||
@import '../custom.less';
|
||||
@import './vars.less';
|
||||
|
||||
|
|
@ -19,21 +18,14 @@
|
|||
}
|
||||
|
||||
@button-prefix-cls: ~'@{css-prefix}mobile-button';
|
||||
@svg-prefix-cls: ~'@{css-prefix}svg';
|
||||
|
||||
.@{button-prefix-cls} {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: var(--ti-mobile-button-height);
|
||||
line-height: var(--ti-mobile-button-height);
|
||||
font-size: var(--ti-mobile-button-font-size-default);
|
||||
-webkit-text-size-adjust: 100%;
|
||||
border-width: 1px;
|
||||
|
||||
text-size-adjust: 100%;
|
||||
border-width: var(--ti-mobile-button-border-width);
|
||||
border-style: solid;
|
||||
border-image: initial;
|
||||
border-radius: 2px;
|
||||
padding: 0 16px;
|
||||
transition:
|
||||
border 0.3s ease 0s,
|
||||
color 0.3s ease 0s,
|
||||
|
|
@ -42,173 +34,135 @@
|
|||
outline: 0;
|
||||
display: inline-block;
|
||||
user-select: none;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
vertical-align: middle;
|
||||
padding: 0 var(--ti-mobile-button-padding-large);
|
||||
height: var(--ti-mobile-button-height-large);
|
||||
min-width: var(--ti-mobile-button-min-width-large);
|
||||
line-height: var(--ti-mobile-button-height-large);
|
||||
font-size: var(--ti-mobile-button-font-size-default);
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #000;
|
||||
border: inherit;
|
||||
border-color: #000;
|
||||
border-radius: inherit;
|
||||
transform: translate(-50%, -50%);
|
||||
opacity: 0;
|
||||
content: ' ';
|
||||
}
|
||||
// 主要
|
||||
&--primary {
|
||||
color: var(--ti-mobile-button-text-color-white);
|
||||
background-color: var(--ti-mobile-button-bg-color-black);
|
||||
border-radius: 999px;
|
||||
border: none;
|
||||
|
||||
&::-moz-focus-inner {
|
||||
border: 0;
|
||||
}
|
||||
&:active,
|
||||
&.is-active {
|
||||
background-color: var(--ti-mobile-button-bg-color-active);
|
||||
}
|
||||
|
||||
&:active,
|
||||
&.is-active {
|
||||
&::before {
|
||||
opacity: 0.1;
|
||||
&.is-disabled {
|
||||
cursor: not-allowed;
|
||||
color: var(--ti-mobile-button-text-color-disabled);
|
||||
background-color: var(--ti-mobile-button-bg-color-disabled);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--ti-mobile-button-bg-color-black);
|
||||
}
|
||||
|
||||
&.is-loading {
|
||||
background-color: var(--ti-mobile-button-bg-color-active);
|
||||
}
|
||||
}
|
||||
|
||||
&.is-disabled,
|
||||
&.is-disabled:active,
|
||||
&.is-disabled.is-active {
|
||||
cursor: not-allowed;
|
||||
.button-color(var(--ti-mobile-button-text-color-disabled),
|
||||
var(--ti-mobile-button-bg-color-disabled),
|
||||
var(--ti-mobile-button-bg-color-disabled));
|
||||
}
|
||||
|
||||
.is-icon {
|
||||
fill: var(--ti-mobile-button-text-color-white);
|
||||
font-size: var(--ti-mobile-button-font-size-default);
|
||||
}
|
||||
|
||||
&--default {
|
||||
.button-color(var(--ti-mobile-button-text-color-default),
|
||||
var(--ti-mobile-button-border-color),
|
||||
var(--ti-mobile-button-bg-color-default));
|
||||
&--icon {
|
||||
color: var(--ti-mobile-button-text-color-black);
|
||||
background-color: var(--ti-mobile-button-bg-color-white);
|
||||
min-width: 0 !important;
|
||||
padding: 0 !important;
|
||||
line-height: 0;
|
||||
border: none;
|
||||
|
||||
.is-icon {
|
||||
fill: var(--ti-mobile-button-text-color-default);
|
||||
fill: var(--ti-mobile-button-text-color-black);
|
||||
width: var(--ti-mobile-button-icon-size-large);
|
||||
height: var(--ti-mobile-button-icon-size-large);
|
||||
}
|
||||
|
||||
.small {
|
||||
width: var(--ti-mobile-button-icon-size-small);
|
||||
height: var(--ti-mobile-button-icon-size-small);
|
||||
}
|
||||
|
||||
&:active .is-icon,
|
||||
&.is-active {
|
||||
fill: var(--ti-mobile-button-bg-color-active);
|
||||
}
|
||||
|
||||
&.is-disabled,
|
||||
&.is-disabled:active,
|
||||
&.is-disabled.is-active,
|
||||
&.is-disabled .is-icon {
|
||||
fill: var(--ti-mobile-button-text-color-white);
|
||||
cursor: not-allowed;
|
||||
fill: var(--ti-mobile-button-text-color-disabled);
|
||||
}
|
||||
}
|
||||
|
||||
&&--default {
|
||||
&.is-loading svg {
|
||||
fill: #666;
|
||||
}
|
||||
}
|
||||
|
||||
&--primary {
|
||||
.button-type(var(--ti-mobile-button-text-color-white),
|
||||
var(--ti-mobile-button-bg-color-primary));
|
||||
|
||||
&.is-plain {
|
||||
.button-plain(var(--ti-mobile-button-bg-color-primary));
|
||||
}
|
||||
}
|
||||
|
||||
&--success {
|
||||
.button-type(var(--ti-mobile-button-text-color-white),
|
||||
var(--ti-mobile-button-bg-color-success));
|
||||
|
||||
&.is-plain {
|
||||
.button-plain(var(--ti-mobile-button-bg-color-success));
|
||||
}
|
||||
}
|
||||
|
||||
&--warning {
|
||||
.button-type(var(--ti-mobile-button-text-color-white),
|
||||
var(--ti-mobile-button-bg-color-warning));
|
||||
|
||||
&.is-plain {
|
||||
.button-plain(var(--ti-mobile-button-bg-color-warning));
|
||||
&.is-disabled {
|
||||
color: var(--ti-mobile-button-text-color-disabled);
|
||||
background-color: var(--ti-mobile-button-bg-color-white);
|
||||
}
|
||||
}
|
||||
|
||||
&--danger {
|
||||
.button-type(var(--ti-mobile-button-text-color-white),
|
||||
var(--ti-mobile-button-bg-color-danger));
|
||||
color: var(--ti-mobile-button-text-color-danger);
|
||||
background-color: var(--ti-mobile-button-bg-color-white);
|
||||
border-color: var(--ti-mobile-button-text-color-danger);
|
||||
border-radius: 999px;
|
||||
|
||||
&.is-plain {
|
||||
.button-plain(var(--ti-mobile-button-bg-color-danger));
|
||||
}
|
||||
}
|
||||
|
||||
&--info {
|
||||
.button-type(var(--ti-mobile-button-text-color-white),
|
||||
var(--ti-mobile-button-bg-color-info));
|
||||
|
||||
&.is-plain {
|
||||
.button-plain(var(--ti-mobile-button-bg-color-info));
|
||||
&.is-disabled {
|
||||
cursor: not-allowed;
|
||||
color: var(--ti-mobile-button-text-color-disabled);
|
||||
background-color: var(--ti-mobile-button-bg-color-disabled);
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
&--text {
|
||||
.button-text(var(--ti-mobile-button-text-color),
|
||||
var(--ti-mobile-button-text-color-hover),
|
||||
var(--ti-mobile-button-text-color-active),
|
||||
var(--ti-mobile-button-text-color-disabled));
|
||||
color: var(--ti-mobile-button-text-color-blue);
|
||||
background-color: var(--ti-mobile-button-bg-color-white);
|
||||
border: none;
|
||||
min-width: 0 !important;
|
||||
padding: 0 !important;
|
||||
|
||||
&.is-disabled {
|
||||
color: var(--ti-mobile-button-text-color-disabled);
|
||||
background-color: var(--ti-mobile-button-bg-color-white);
|
||||
}
|
||||
}
|
||||
|
||||
&--secondary {
|
||||
.button-type(var(--ti-mobile-button-text-color-default),
|
||||
var(--ti-mobile-button-bg-color-secondary));
|
||||
|
||||
&.is-plain {
|
||||
.button-plain(var(--ti-mobile-button-bg-color-secondary));
|
||||
}
|
||||
}
|
||||
|
||||
&--default {
|
||||
.button-color(var(--ti-mobile-button-text-color-default),
|
||||
var(--ti-mobile-button-text-color-disabled),
|
||||
var(--ti-mobile-button-text-color-white));
|
||||
color: var(--ti-mobile-button-text-color-black);
|
||||
background-color: var(--ti-mobile-button-bg-color-white);
|
||||
border-radius: 999px;
|
||||
|
||||
&.is-disabled {
|
||||
.button-color(var(--ti-mobile-button-text-color-disabled),
|
||||
var(--ti-mobile-button-text-color-disabled),
|
||||
var(--ti-mobile-button-bg-color-white));
|
||||
cursor: not-allowed;
|
||||
color: var(--ti-mobile-button-text-color-disabled);
|
||||
background-color: var(--ti-mobile-button-bg-color-disabled);
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
&--large {
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
&--medium {
|
||||
padding: 0 16px;
|
||||
line-height: 36px;
|
||||
|
||||
.button-size(var(--ti-mobile-button-height-medium),
|
||||
var(--ti-mobile-button-font-size-medium,));
|
||||
}
|
||||
|
||||
&--small {
|
||||
padding: 0 12px;
|
||||
line-height: 28px;
|
||||
padding: 0 var(--ti-mobile-button-padding-small);
|
||||
height: var(--ti-mobile-button-height-small);
|
||||
min-width: var(--ti-mobile-button-min-width-small);
|
||||
line-height: var(--ti-mobile-button-height-small);
|
||||
font-size: var(--ti-mobile-button-font-size-small);
|
||||
|
||||
.button-size(var(--ti-mobile-button-height-small),
|
||||
var(--ti-mobile-button-font-size-small));
|
||||
}
|
||||
|
||||
&--mini {
|
||||
padding: 0 8px;
|
||||
line-height: 22px;
|
||||
|
||||
.button-size(var(--ti-mobile-button-height-mini),
|
||||
var(--ti-mobile-button-font-size-mini));
|
||||
.is-icon {
|
||||
width: var(--ti-mobile-button-icon-size-small);
|
||||
height: var(--ti-mobile-button-icon-size-small);
|
||||
}
|
||||
}
|
||||
|
||||
&.is-loading {
|
||||
|
|
@ -220,17 +174,42 @@
|
|||
font-size: var(--ti-mobile-button-font-size-default);
|
||||
}
|
||||
}
|
||||
|
||||
&.is-round {
|
||||
border-radius: 999px;
|
||||
}
|
||||
}
|
||||
|
||||
.@{css-prefix-iconfont}-loading {
|
||||
margin-right: 4px;
|
||||
font-size: 16px;
|
||||
line-height: 1;
|
||||
animation: rotating 2s linear infinite;
|
||||
.@{button-prefix-cls}-loading {
|
||||
width: var(--ti-mobile-button-loading-size);
|
||||
height: var(--ti-mobile-button-loading-size);
|
||||
border-radius: 50%;
|
||||
position: relative;
|
||||
float: left;
|
||||
animation: rotating 1.5s linear infinite;
|
||||
top: calc(50% - 8px);
|
||||
margin-right: var(--ti-mobile-button-loading-padding);
|
||||
|
||||
&-white {
|
||||
background-image: conic-gradient(rgb(255 255 255/ 0%), rgb(255 255 255 / 100%));
|
||||
|
||||
.@{button-prefix-cls}-loading-inner {
|
||||
background: var(--ti-mobile-button-bg-color-active);
|
||||
}
|
||||
}
|
||||
|
||||
&-black {
|
||||
background-image: conic-gradient(rgb(0 0 0 / 0%), rgb(0 0 0 / 100%));
|
||||
|
||||
.@{button-prefix-cls}-loading-inner {
|
||||
background: var(--ti-mobile-button-bg-color-white);
|
||||
}
|
||||
}
|
||||
|
||||
&-inner {
|
||||
width: var(--ti-mobile-button-loading-size-inner);
|
||||
height: var(--ti-mobile-button-loading-size-inner);
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: var(--ti-mobile-button-loading-padding-size-inner);
|
||||
left: var(--ti-mobile-button-loading-padding-size-inner);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rotating {
|
||||
|
|
|
|||
|
|
@ -1,24 +1,52 @@
|
|||
:root {
|
||||
--ti-mobile-button-height: 42px;
|
||||
--ti-mobile-button-font-size-default: 16px;
|
||||
--ti-mobile-button-text-color-white: var(--ti-mobile-common-color-text-white, #fff);
|
||||
--ti-mobile-button-text-color-disabled: var(--ti-mobile-common-color-text-weaken-disabled, #dbdbdb);
|
||||
--ti-mobile-button-text-color-default: var(--ti-mobile-common-color-text-primary, #191919);
|
||||
--ti-mobile-button-border-color: var(--ti-mobile-common-color-text-weaken-disabled, #dbdbdb);
|
||||
--ti-mobile-button-bg-color-default: var(--ti-mobile-common-bg-color-white, #fff);
|
||||
--ti-mobile-button-bg-color-primary: var(--ti-mobile-common-color-error-figure-3, #1e8aff);
|
||||
--ti-mobile-button-bg-color-success: var(--ti-mobile-common-color-warning-figure-3, #1ebe40);
|
||||
--ti-mobile-button-bg-color-warning: var(--ti-mobile-common-color-error-figure-2, #fccd32);
|
||||
--ti-mobile-button-bg-color-danger: var(--ti-mobile-common-color-error-figure-1, #eb5454);
|
||||
--ti-mobile-button-bg-color-disabled: var(--ti-mobile-common-bg-color-disabled, #e8e8e8);
|
||||
--ti-mobile-button-bg-color-info: #333;
|
||||
--ti-mobile-button-height-medium: 36px;
|
||||
--ti-mobile-button-font-size-medium: 14px;
|
||||
// 按钮高度-大
|
||||
--ti-mobile-button-height-large: 40px;
|
||||
// 按钮文字大小-大
|
||||
--ti-mobile-button-font-size-large: var(--ti-mobile-font-size-m, 14px);
|
||||
// icon尺寸-大
|
||||
--ti-mobile-button-icon-size-large: 24px;
|
||||
// 按钮左右边距-大
|
||||
--ti-mobile-button-padding-large: var(--ti-mobile-space-8x, 32px);
|
||||
// 按钮最小宽度-大
|
||||
--ti-mobile-button-min-width-large: 112px;
|
||||
// 按钮高度-小
|
||||
--ti-mobile-button-height-small: 28px;
|
||||
--ti-mobile-button-font-size-small: 12px;
|
||||
--ti-mobile-button-height-mini: 22px;
|
||||
--ti-mobile-button-font-size-mini: 10px;
|
||||
--ti-mobile-button-text-color: var(--ti-mobile-common-color-link-highlight, #4a79fe);
|
||||
--ti-mobile-button-text-color-hover: #6e94fe;
|
||||
--ti-mobile-button-text-color-active: var(--ti-mobile-common-color-link-highlight, #4a79fe);
|
||||
// 按钮文字大小-小
|
||||
--ti-mobile-button-font-size-small: var(--ti-mobile-font-size-s, 12px);
|
||||
// icon尺寸-小
|
||||
--ti-mobile-button-icon-size-small: 16px;
|
||||
// 按钮左右边距-小
|
||||
--ti-mobile-button-padding-small: var(--ti-mobile-space-4x, 15px);
|
||||
// 按钮最小宽度-小
|
||||
--ti-mobile-button-min-width-small: 72px;
|
||||
// 加载图标大小
|
||||
--ti-mobile-button-loading-size: 16px;
|
||||
// 加载图标和文字间距
|
||||
--ti-mobile-button-loading-padding: var(--ti-mobile-space-1x, 4px);
|
||||
// 边框尺寸
|
||||
--ti-mobile-button-border-width: var(--ti-mobile-border-width, 1px);
|
||||
// 加载图标内宽度
|
||||
--ti-mobile-button-loading-size-inner: 12px;
|
||||
// 加载图标内间距
|
||||
--ti-mobile-button-loading-padding-size-inner: 2px;
|
||||
// 按钮文字颜色-白
|
||||
--ti-mobile-button-text-color-white: var(--ti-mobile-color-text-inverse, #fff);
|
||||
// 按钮文字颜色-危险
|
||||
--ti-mobile-button-text-color-danger: var(--ti-mobile-color-error, #f23030);
|
||||
// 按钮文字颜色-不可用
|
||||
--ti-mobile-button-text-color-disabled: var(--ti-mobile-color-text-disabled, #c2c2c2);
|
||||
// 按钮文字颜色-黑
|
||||
--ti-mobile-button-text-color-black: var(--ti-mobile-color-text-primary, #191919);
|
||||
// 按钮文字颜色-蓝
|
||||
--ti-mobile-button-text-color-blue: var(--ti-mobile-color-text-link, #1476ff);
|
||||
// 边框颜色
|
||||
--ti-mobile-button-border-color: var(--ti-mobile-color-border-default-2, #595959);
|
||||
// 背景色-默认
|
||||
--ti-mobile-button-bg-color-white: var(--ti-mobile-color-bg-container-1, #fff);
|
||||
// 背景色-主要
|
||||
--ti-mobile-button-bg-color-black: var(--ti-mobile-color-bg-primary-default, #191919);
|
||||
// 背景色-不可用
|
||||
--ti-mobile-button-bg-color-disabled: var(--ti-mobile-color-bg-disabled, #f0f0f0);
|
||||
// 按钮点击背景色
|
||||
--ti-mobile-button-bg-color-active: var(--ti-mobile-color-bg-primary-active, #595959);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@ export const buttonProps = {
|
|||
type: String,
|
||||
default: '',
|
||||
validator(val: string) {
|
||||
return ['large', 'medium', 'small', 'mini', ''].includes(val)
|
||||
return ['large', 'medium', 'small', 'mini'].includes(val)
|
||||
}
|
||||
},
|
||||
round: Boolean,
|
||||
|
|
|
|||
|
|
@ -20,15 +20,23 @@
|
|||
size ? 'tiny-mobile-button--' + size : '',
|
||||
{
|
||||
'is-disabled': state.buttonDisabled,
|
||||
'is-loading': loading,
|
||||
'is-plain': state.plain,
|
||||
'is-round': round
|
||||
'is-loading': loading
|
||||
}
|
||||
]"
|
||||
v-bind="a($attrs, ['class', 'style'], true)"
|
||||
>
|
||||
<icon-loading v-if="loading" class="tiny-icon-loading" />
|
||||
<component v-if="icon && !loading" :is="icon" class="tiny-icon is-icon" />
|
||||
<template v-if="loading">
|
||||
<div
|
||||
:class="[
|
||||
'tiny-mobile-button-loading',
|
||||
'tiny-mobile-button-loading-' + (type === 'primary' ? 'white' : 'black')
|
||||
]"
|
||||
>
|
||||
<div class="tiny-mobile-button-loading-inner"></div>
|
||||
</div>
|
||||
</template>
|
||||
<component v-if="icon && !loading" :is="icon" :class="['tiny-icon', 'is-icon', text ? 'small' : null]" />
|
||||
|
||||
<slot>
|
||||
<span :style="{ marginLeft: text && (icon || loading) ? '4px' : 0 }">{{ text }}</span>
|
||||
</slot>
|
||||
|
|
@ -38,26 +46,12 @@
|
|||
<script lang="ts">
|
||||
import { renderless, api } from '@opentiny/vue-renderless/button/vue'
|
||||
import { props, setup, defineComponent } from '@opentiny/vue-common'
|
||||
import { iconLoading } from '@opentiny/vue-icon'
|
||||
import '@opentiny/vue-theme-mobile/button/index.less'
|
||||
|
||||
export default defineComponent({
|
||||
emits: ['hook-updated', 'click'],
|
||||
props: [
|
||||
...props,
|
||||
'type',
|
||||
'text',
|
||||
'size',
|
||||
'icon',
|
||||
'resetTime',
|
||||
'nativeType',
|
||||
'loading',
|
||||
'disabled',
|
||||
'plain',
|
||||
'round',
|
||||
'customClass'
|
||||
],
|
||||
components: { IconLoading: iconLoading() },
|
||||
props: [...props, 'type', 'text', 'size', 'icon', 'resetTime', 'nativeType', 'loading', 'disabled', 'customClass'],
|
||||
components: {},
|
||||
setup(props, context) {
|
||||
return setup({ props, context, renderless, api })
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue