feat: 新增 button 组件 border-style 属性
This commit is contained in:
parent
5c260957e6
commit
425cff9de5
@ -111,7 +111,5 @@ export default {
|
|||||||
|
|
||||||
:::
|
:::
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
::: previousNext animation
|
::: previousNext animation
|
||||||
:::
|
:::
|
@ -135,7 +135,5 @@ export default {
|
|||||||
|
|
||||||
:::
|
:::
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
::: previousNext avatar
|
::: 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 按钮尺寸
|
::: title 按钮尺寸
|
||||||
:::
|
:::
|
||||||
|
|
||||||
|
@ -238,6 +238,7 @@ function handleClick(node) {
|
|||||||
| onlyIconControl | 是否仅允许节点左侧图标控制展开收缩 | false |
|
| onlyIconControl | 是否仅允许节点左侧图标控制展开收缩 | false |
|
||||||
| showLine | 是否开启连接线 | true |
|
| showLine | 是否开启连接线 | true |
|
||||||
| checkedKeys(v-model:checkedKeys) | 开启 showCheckbox 后, 选中的节点 | [] |
|
| checkedKeys(v-model:checkedKeys) | 开启 showCheckbox 后, 选中的节点 | [] |
|
||||||
|
| collapse-transition | 是否开启展示收起动画 | false |
|
||||||
|
|
||||||
:::
|
:::
|
||||||
|
|
||||||
@ -253,7 +254,6 @@ function handleClick(node) {
|
|||||||
| children | 子节点 | [] |
|
| children | 子节点 | [] |
|
||||||
| disabled | 该节点是否禁用 | false |
|
| disabled | 该节点是否禁用 | false |
|
||||||
| spread | 该节点是否展开 | false |
|
| spread | 该节点是否展开 | false |
|
||||||
| collapse-transition | 是否开启展示收起动画 | false |
|
|
||||||
|
|
||||||
:::
|
:::
|
||||||
|
|
||||||
|
@ -19,6 +19,7 @@
|
|||||||
<li>[新增] switch 组件 onswitch-value 属性。</li>
|
<li>[新增] switch 组件 onswitch-value 属性。</li>
|
||||||
<li>[新增] switch 组件 unswitch-value 属性。</li>
|
<li>[新增] switch 组件 unswitch-value 属性。</li>
|
||||||
<li>[新增] tab 组件 position 属性, 不同方向的选项卡标题。</li>
|
<li>[新增] tab 组件 position 属性, 不同方向的选项卡标题。</li>
|
||||||
|
<li>[新增] button 组件 border-style 属性, 可选值 dashed dotted 等。</li>
|
||||||
<li>[修复] transfer 组件 showSearch 属性类型警告。</li>
|
<li>[修复] transfer 组件 showSearch 属性类型警告。</li>
|
||||||
<li>[修复] upload 组件 number 属性必填警告。</li>
|
<li>[修复] upload 组件 number 属性必填警告。</li>
|
||||||
<li>[修复] variable 全局变量重复导入的问题。</li>
|
<li>[修复] variable 全局变量重复导入的问题。</li>
|
||||||
|
@ -26,6 +26,7 @@ export interface LayButtonProps {
|
|||||||
loading?: BooleanOrString;
|
loading?: BooleanOrString;
|
||||||
disabled?: BooleanOrString;
|
disabled?: BooleanOrString;
|
||||||
nativeType?: ButtonNativeType;
|
nativeType?: ButtonNativeType;
|
||||||
|
borderStyle: String;
|
||||||
}
|
}
|
||||||
|
|
||||||
const props = withDefaults(defineProps<LayButtonProps>(), {
|
const props = withDefaults(defineProps<LayButtonProps>(), {
|
||||||
@ -34,6 +35,7 @@ const props = withDefaults(defineProps<LayButtonProps>(), {
|
|||||||
loading: false,
|
loading: false,
|
||||||
disabled: false,
|
disabled: false,
|
||||||
nativeType: "button",
|
nativeType: "button",
|
||||||
|
borderStyle: "solid"
|
||||||
});
|
});
|
||||||
|
|
||||||
const emit = defineEmits(["click"]);
|
const emit = defineEmits(["click"]);
|
||||||
@ -44,6 +46,12 @@ const onClick = (event: any) => {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const styles = computed(() => {
|
||||||
|
return {
|
||||||
|
'border-style': props.borderStyle
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
const classes = computed(() => {
|
const classes = computed(() => {
|
||||||
return [
|
return [
|
||||||
{
|
{
|
||||||
@ -63,6 +71,7 @@ const classes = computed(() => {
|
|||||||
class="layui-btn"
|
class="layui-btn"
|
||||||
:class="classes"
|
:class="classes"
|
||||||
:type="nativeType"
|
:type="nativeType"
|
||||||
|
:style="styles"
|
||||||
@click="onClick"
|
@click="onClick"
|
||||||
>
|
>
|
||||||
<i v-if="prefixIcon" :class="`layui-icon ${prefixIcon}`"></i>
|
<i v-if="prefixIcon" :class="`layui-icon ${prefixIcon}`"></i>
|
||||||
|
@ -17,8 +17,8 @@ export default {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import LayCollapseTransition from "./collapseTransition.vue";
|
import LayCollapseTransition from "./transitions/collapseTransition.vue";
|
||||||
import LayFadeTransition from "./fadeTransition.vue";
|
import LayFadeTransition from "./transitions/fadeTransition.vue";
|
||||||
|
|
||||||
export interface LayTransitionProps {
|
export interface LayTransitionProps {
|
||||||
type?: string;
|
type?: string;
|
||||||
|
Loading…
x
Reference in New Issue
Block a user