fix: button group style

This commit is contained in:
就眠儀式 2022-03-24 01:01:12 +08:00
parent 9700a5e4ff
commit 5df0a0dea6
5 changed files with 16 additions and 12 deletions

View File

@ -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",

View File

@ -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;
} }

View File

@ -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;

View File

@ -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>

View File

@ -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>