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