feat: 新增 button 组件 border-style 属性

This commit is contained in:
就眠儀式 2022-04-01 22:03:02 +08:00
parent 5c260957e6
commit 425cff9de5
9 changed files with 41 additions and 8 deletions

View File

@ -111,7 +111,5 @@ export default {
:::
::: previousNext animation
:::

View File

@ -135,7 +135,5 @@ export default {
:::
::: previousNext avatar
:::

View File

@ -61,6 +61,33 @@ export default {
:::
::: title 不同边框
:::
::: demo 使用 `border` 属性设置边框主题
<template>
<lay-button border-style="dashed">原始按钮</lay-button>
<lay-button border="green" border-style="dashed">默认按钮</lay-button>
<lay-button border="blue" border-style="dashed">百搭按钮</lay-button>
<lay-button border="orange" border-style="dashed">暖色按钮</lay-button>
<lay-button border="red" border-style="dashed">警告按钮</lay-button>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
return {
}
}
}
</script>
:::
::: title 按钮尺寸
:::

View File

@ -238,6 +238,7 @@ function handleClick(node) {
| onlyIconControl | 是否仅允许节点左侧图标控制展开收缩 | false |
| showLine | 是否开启连接线 | true |
| checkedKeys(v-model:checkedKeys) | 开启 showCheckbox 后, 选中的节点 | [] |
| collapse-transition | 是否开启展示收起动画 | false |
:::
@ -253,7 +254,6 @@ function handleClick(node) {
| children | 子节点 | [] |
| disabled | 该节点是否禁用 | false |
| spread | 该节点是否展开 | false |
| collapse-transition | 是否开启展示收起动画 | false |
:::

View File

@ -19,6 +19,7 @@
<li>[新增] switch 组件 onswitch-value 属性。</li>
<li>[新增] switch 组件 unswitch-value 属性。</li>
<li>[新增] tab 组件 position 属性, 不同方向的选项卡标题。</li>
<li>[新增] button 组件 border-style 属性, 可选值 dashed dotted 等。</li>
<li>[修复] transfer 组件 showSearch 属性类型警告。</li>
<li>[修复] upload 组件 number 属性必填警告。</li>
<li>[修复] variable 全局变量重复导入的问题。</li>

View File

@ -26,6 +26,7 @@ export interface LayButtonProps {
loading?: BooleanOrString;
disabled?: BooleanOrString;
nativeType?: ButtonNativeType;
borderStyle: String;
}
const props = withDefaults(defineProps<LayButtonProps>(), {
@ -34,6 +35,7 @@ const props = withDefaults(defineProps<LayButtonProps>(), {
loading: false,
disabled: false,
nativeType: "button",
borderStyle: "solid"
});
const emit = defineEmits(["click"]);
@ -44,6 +46,12 @@ const onClick = (event: any) => {
}
};
const styles = computed(() => {
return {
'border-style': props.borderStyle
}
})
const classes = computed(() => {
return [
{
@ -63,6 +71,7 @@ const classes = computed(() => {
class="layui-btn"
:class="classes"
:type="nativeType"
:style="styles"
@click="onClick"
>
<i v-if="prefixIcon" :class="`layui-icon ${prefixIcon}`"></i>

View File

@ -17,8 +17,8 @@ export default {
</script>
<script setup lang="ts">
import LayCollapseTransition from "./collapseTransition.vue";
import LayFadeTransition from "./fadeTransition.vue";
import LayCollapseTransition from "./transitions/collapseTransition.vue";
import LayFadeTransition from "./transitions/fadeTransition.vue";
export interface LayTransitionProps {
type?: string;