fix: button group style
This commit is contained in:
parent
9700a5e4ff
commit
5df0a0dea6
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "@layui/layui-vue",
|
"name": "@layui/layui-vue",
|
||||||
"version": "0.4.1-alpha.1",
|
"version": "0.4.1-alpha.2",
|
||||||
"author": "就眠儀式",
|
"author": "就眠儀式",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"description": "a component library for Vue 3 base on layui-vue",
|
"description": "a component library for Vue 3 base on layui-vue",
|
||||||
|
@ -15,11 +15,11 @@
|
|||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.layui-btn-group .layui-btn-primary {
|
.layui-btn-group .layui-btn {
|
||||||
border-left: none;
|
border-left: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.layui-btn-group .layui-btn-primary:hover {
|
.layui-btn-group .layui-btn:hover {
|
||||||
border-color: #d2d2d2;
|
border-color: #d2d2d2;
|
||||||
color: @button-primary-color;
|
color: @button-primary-color;
|
||||||
}
|
}
|
||||||
@ -29,7 +29,7 @@
|
|||||||
border-radius: @button-border-radius 0 0 @button-border-radius;
|
border-radius: @button-border-radius 0 0 @button-border-radius;
|
||||||
}
|
}
|
||||||
|
|
||||||
.layui-btn-group .layui-btn-primary:first-child {
|
.layui-btn-group .layui-btn:first-child {
|
||||||
border-left: 1px solid #d2d2d2;
|
border-left: 1px solid #d2d2d2;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -32,7 +32,6 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.layui-carousel > [carousel-item] > * {
|
.layui-carousel > [carousel-item] > * {
|
||||||
display: none;
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 0;
|
left: 0;
|
||||||
top: 0;
|
top: 0;
|
||||||
|
@ -84,7 +84,7 @@ provide("active", active);
|
|||||||
provide("slotsChange", slotsChange);
|
provide("slotsChange", slotsChange);
|
||||||
|
|
||||||
// 上一页
|
// 上一页
|
||||||
const prev = function () {
|
const sub = function () {
|
||||||
for (var i = 0; i < childrens.value.length; i++) {
|
for (var i = 0; i < childrens.value.length; i++) {
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
if (childrens.value[i].props.id === active.value) {
|
if (childrens.value[i].props.id === active.value) {
|
||||||
@ -100,7 +100,7 @@ const prev = function () {
|
|||||||
};
|
};
|
||||||
|
|
||||||
// 下一页
|
// 下一页
|
||||||
const next = function () {
|
const add = function () {
|
||||||
for (var i = 0; i < childrens.value.length; i++) {
|
for (var i = 0; i < childrens.value.length; i++) {
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
if (childrens.value[i].props.id === active.value) {
|
if (childrens.value[i].props.id === active.value) {
|
||||||
@ -124,9 +124,11 @@ const next = function () {
|
|||||||
:lay-arrow="arrow"
|
:lay-arrow="arrow"
|
||||||
:style="{ width: width, height: height }"
|
:style="{ width: width, height: height }"
|
||||||
>
|
>
|
||||||
|
<!-- 内容 -->
|
||||||
<div carousel-item>
|
<div carousel-item>
|
||||||
<slot></slot>
|
<slot></slot>
|
||||||
</div>
|
</div>
|
||||||
|
<!-- 轮播 -->
|
||||||
<div class="layui-carousel-ind">
|
<div class="layui-carousel-ind">
|
||||||
<ul>
|
<ul>
|
||||||
<li
|
<li
|
||||||
@ -137,18 +139,21 @@ const next = function () {
|
|||||||
></li>
|
></li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
<!-- 操作 -->
|
||||||
<button
|
<button
|
||||||
class="layui-icon layui-carousel-arrow"
|
class="layui-icon layui-carousel-arrow"
|
||||||
lay-type="sub"
|
lay-type="sub"
|
||||||
@click="prev"
|
@click="sub"
|
||||||
>
|
>
|
||||||
{{ anim === "updown" ? "" : "" }}</button
|
{{ anim === "updown" ? "" : "" }}</button
|
||||||
><button
|
>
|
||||||
|
|
||||||
|
<button
|
||||||
class="layui-icon layui-carousel-arrow"
|
class="layui-icon layui-carousel-arrow"
|
||||||
lay-type="add"
|
lay-type="add"
|
||||||
@click="next"
|
@click="add"
|
||||||
>
|
>
|
||||||
{{ anim === "updown" ? "" : "" }}
|
{{ anim === "updown" ? "" : "" }}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
@ -17,7 +17,7 @@ slotsChange.value = !slotsChange.value;
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<li :class="[active === id ? 'layui-this' : '']">
|
<li v-if="active === id ">
|
||||||
<slot></slot>
|
<slot></slot>
|
||||||
</li>
|
</li>
|
||||||
</template>
|
</template>
|
||||||
|
Loading…
x
Reference in New Issue
Block a user