feat: 新增 button 组件 border-style 属性
This commit is contained in:
parent
5c260957e6
commit
425cff9de5
@ -111,7 +111,5 @@ export default {
|
||||
|
||||
:::
|
||||
|
||||
|
||||
|
||||
::: previousNext animation
|
||||
:::
|
@ -135,7 +135,5 @@ export default {
|
||||
|
||||
:::
|
||||
|
||||
|
||||
|
||||
::: previousNext avatar
|
||||
:::
|
||||
|
@ -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 按钮尺寸
|
||||
:::
|
||||
|
||||
|
@ -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 |
|
||||
|
||||
:::
|
||||
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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;
|
||||
|
Loading…
Reference in New Issue
Block a user