Merge branch 'next' of https://gitee.com/layui/layui-vue into next
This commit is contained in:
就眠儀式
commit
41c1572df4
@ -10,24 +10,16 @@
|
||||
}
|
||||
|
||||
.layui-cascader .layui-cascader-panel {
|
||||
position: absolute;
|
||||
margin-top: 2px;
|
||||
z-index: 899;
|
||||
background-color: #fff;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid #e4e7ed;
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 2px 12px #0000001a;
|
||||
line-height: 26px;
|
||||
color: #000c;
|
||||
font-size: 14px;
|
||||
white-space: nowrap;
|
||||
display: none;
|
||||
display: inline-flex;
|
||||
}
|
||||
.layui-cascader-menu {
|
||||
border-right: 1px solid var(--global-neutral-color-3);
|
||||
max-height: 360px;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
.layui-cascader-menu:last-child {
|
||||
border-right: none;
|
||||
@ -50,6 +42,6 @@
|
||||
background-color: var(--global-checked-color);
|
||||
color: white;
|
||||
}
|
||||
.layui-cascader-open .layui-cascader-panel {
|
||||
display: flex !important;
|
||||
.layui-dropdown-up > dl {
|
||||
min-width: unset;
|
||||
}
|
||||
|
||||
@ -1,48 +1,45 @@
|
||||
<template>
|
||||
<div
|
||||
class="layui-cascader"
|
||||
:class="[{ 'layui-cascader-open': open }]"
|
||||
ref="cascaderRef"
|
||||
>
|
||||
<div @click="open = !open">
|
||||
<lay-input
|
||||
v-model="displayValue"
|
||||
readonly
|
||||
suffix-icon="layui-icon-down"
|
||||
:placeholder="placeholder"
|
||||
v-if="!slots.default"
|
||||
></lay-input>
|
||||
<slot v-else></slot>
|
||||
</div>
|
||||
<lay-dropdown class="layui-cascader" ref="dropdownRef">
|
||||
<lay-input
|
||||
v-model="displayValue"
|
||||
readonly
|
||||
suffix-icon="layui-icon-down"
|
||||
:placeholder="placeholder"
|
||||
v-if="!slots.default"
|
||||
></lay-input>
|
||||
<slot v-else></slot>
|
||||
|
||||
<dl class="layui-cascader-panel layui-anim layui-anim-upbit">
|
||||
<template v-for="(itemCol, index) in treeData">
|
||||
<ul
|
||||
class="layui-cascader-menu"
|
||||
:key="'cascader-menu' + index"
|
||||
v-if="itemCol.data.length"
|
||||
>
|
||||
<li
|
||||
class="layui-cascader-menu-item"
|
||||
v-for="(item, i) in itemCol.data"
|
||||
:key="index + i"
|
||||
@click="selectBar(item, i, index)"
|
||||
:class="[
|
||||
{
|
||||
'layui-cascader-selected': itemCol.selectIndex === i,
|
||||
},
|
||||
]"
|
||||
<template #content>
|
||||
<div class="layui-cascader-panel">
|
||||
<template v-for="(itemCol, index) in treeData">
|
||||
<lay-scroll
|
||||
height="180px"
|
||||
class="layui-cascader-menu"
|
||||
:key="'cascader-menu' + index"
|
||||
v-if="itemCol.data.length"
|
||||
>
|
||||
{{ item.label }}
|
||||
<i
|
||||
class="layui-icon layui-icon-right"
|
||||
v-if="item.children && item.children.length"
|
||||
></i>
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
</dl>
|
||||
</div>
|
||||
<div
|
||||
class="layui-cascader-menu-item"
|
||||
v-for="(item, i) in itemCol.data"
|
||||
:key="index + i"
|
||||
@click="selectBar(item, i, index)"
|
||||
:class="[
|
||||
{
|
||||
'layui-cascader-selected': itemCol.selectIndex === i,
|
||||
},
|
||||
]"
|
||||
>
|
||||
{{ item.label }}
|
||||
<i
|
||||
class="layui-icon layui-icon-right"
|
||||
v-if="item.children && item.children.length"
|
||||
></i>
|
||||
</div>
|
||||
</lay-scroll>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
</lay-dropdown>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
@ -54,7 +51,6 @@ export default {
|
||||
<script setup lang="ts">
|
||||
import "./index.less";
|
||||
import { ref, onMounted, watch, useSlots } from "vue";
|
||||
import { onClickOutside } from "@vueuse/core";
|
||||
export interface LayCascaderProps {
|
||||
options?: Array<any> | null;
|
||||
modelValue?: string;
|
||||
@ -199,15 +195,13 @@ const selectBar = (item: any, selectIndex: number, parentIndex: number) => {
|
||||
.join(props.decollator);
|
||||
emit("update:modelValue", value);
|
||||
emit("change", displayValue.value);
|
||||
open.value = false;
|
||||
if (dropdownRef.value)
|
||||
// @ts-ignore
|
||||
dropdownRef.value.hide();
|
||||
}
|
||||
};
|
||||
|
||||
const open = ref<boolean>(false);
|
||||
const displayValue = ref<string | number | null>(null);
|
||||
const slots = useSlots();
|
||||
const cascaderRef = ref<null | HTMLElement>();
|
||||
onClickOutside(cascaderRef, () => {
|
||||
open.value = false;
|
||||
});
|
||||
const dropdownRef = ref(null);
|
||||
</script>
|
||||
|
||||
@ -37,4 +37,17 @@
|
||||
position: static;
|
||||
padding: 0 10px;
|
||||
color: #fff;
|
||||
}
|
||||
.lay-progress-circle {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
text-align: center;
|
||||
}
|
||||
.lay-progress-circle__text {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
@ -15,6 +15,7 @@ export interface LayProgressProps {
|
||||
size?: string;
|
||||
showText?: boolean;
|
||||
text?: string;
|
||||
circle?: boolean;
|
||||
}
|
||||
|
||||
const props = defineProps<LayProgressProps>();
|
||||
@ -27,10 +28,78 @@ const styles = computed(() => {
|
||||
},
|
||||
];
|
||||
});
|
||||
|
||||
const getStrokeDasharray = computed(() => {
|
||||
let percent;
|
||||
if (typeof props.percent == "string") {
|
||||
percent = parseInt(props.percent);
|
||||
} else {
|
||||
percent = props.percent;
|
||||
}
|
||||
return `${percent * 31.4}` + "px 3140px";
|
||||
});
|
||||
|
||||
const getCircleColor = computed(() => {
|
||||
let color;
|
||||
switch (props.theme) {
|
||||
case "red":
|
||||
color = "#ff5722";
|
||||
break;
|
||||
case "orange":
|
||||
color = "#ffb800";
|
||||
break;
|
||||
case "green":
|
||||
color = "#009688";
|
||||
break;
|
||||
case "cyan":
|
||||
color = "#2f4056";
|
||||
break;
|
||||
case "blue":
|
||||
color = "#1e9fff";
|
||||
break;
|
||||
case "black":
|
||||
color = "#393d49";
|
||||
break;
|
||||
case "gray":
|
||||
color = "#fafafa";
|
||||
break;
|
||||
default:
|
||||
color = "var(--global-checked-color)";
|
||||
break;
|
||||
}
|
||||
color = props.color ? props.color : color;
|
||||
return color;
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="layui-progress" :class="'layui-progress-' + size">
|
||||
<template v-if="circle">
|
||||
<div class="lay-progress-circle">
|
||||
<svg viewBox="0 0 1060 1060">
|
||||
<path
|
||||
d="M 530 530 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000"
|
||||
style="
|
||||
fill: none;
|
||||
stroke-width: 50px;
|
||||
stroke: var(--global-neutral-color-3);
|
||||
"
|
||||
></path>
|
||||
<path
|
||||
d="M 530 530 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000"
|
||||
style="
|
||||
stroke-width: 51px;
|
||||
fill: none;
|
||||
stroke-linecap: round;
|
||||
"
|
||||
:style="{ strokeDasharray: getStrokeDasharray,stroke:getCircleColor }"
|
||||
></path>
|
||||
</svg>
|
||||
<div class="lay-progress-circle__text" v-if="showText">
|
||||
{{ text ? text : percent + "%" }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<div class="layui-progress" :class="'layui-progress-' + size" v-else>
|
||||
<div
|
||||
class="layui-progress-bar"
|
||||
:class="'layui-bg-' + theme"
|
||||
@ -41,4 +110,4 @@ const styles = computed(() => {
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
@ -13,7 +13,7 @@
|
||||
::: demo 使用 `lay-cascader` 标签创建级联选择器
|
||||
|
||||
<template>
|
||||
<lay-cascader :options="options" v-model="value" placeholder="点我试一试"></lay-cascader>
|
||||
<lay-cascader :options="options" v-model="value" placeholder="点我试一试" style="width:250px"></lay-cascader>
|
||||
<br>
|
||||
<span>输出的值：{{value}}</span>
|
||||
</template>
|
||||
@ -297,7 +297,7 @@ const options = [
|
||||
:::
|
||||
::: demo 使用 `decollator` 属性 自定义分割符号
|
||||
<template>
|
||||
<lay-cascader :options="options" v-model="value1" decollator="-" placeholder="我可以自定义分割符号"></lay-cascader>
|
||||
<lay-cascader :options="options" v-model="value1" decollator="-" placeholder="我可以自定义分割符号" style="width:250px"></lay-cascader>
|
||||
<br>
|
||||
<span>输出的值：{{value1}}</span>
|
||||
</template>
|
||||
|
||||
@ -119,6 +119,31 @@ export default {
|
||||
|
||||
:::
|
||||
|
||||
::: title 环形进度条
|
||||
:::
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-progress percent="70" circle :show-text="showText" style="margin-right:10px"></lay-progress>
|
||||
<lay-progress percent="60" circle :show-text="showText" text="销售量"></lay-progress>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const showText = ref(true)
|
||||
|
||||
return {
|
||||
showText
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
:::
|
||||
|
||||
::: title Progress 属性
|
||||
:::
|
||||
|
||||
@ -131,7 +156,8 @@ export default {
|
||||
| size | 尺寸 | `big` |
|
||||
| text | 提示 | -- |
|
||||
| color | 颜色 | -- |
|
||||
| showText | 展示描述 | -- |
|
||||
| showText | 展示描述 | -- |
|
||||
|circle | 环形进度条| 默认为 `false` |
|
||||
|
||||
:::
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user