根据判断动态绑定文字和块元素对齐方式 css样式

定义变量 TextAlign控制水平方向上对齐方式

定义变量AliginItems控制垂直方向上对齐方式

TextAlign类型分别为 0 1 2 对应左右中

AliginItems类型分别为 0 1 2 对应上下中

需求点击图片实现对应css的变化

 <div class="controlStyle">
       <span class="control"> <img @click="TextAlign = '0'"
                                src="@/assets/img/Home/intelligenceBoard/flex-start.png" /> </span>
       <span class="control"> <img @click="TextAlign = '2'"
                                src="@/assets/img/Home/intelligenceBoard/center.png" /> </span>
        <span class="control"> <img @click="TextAlign = '1'"
                                src="@/assets/img/Home/intelligenceBoard/flex-end.png" /></span>
         <span class="control"> <img @click="AlignItems = '0'"
                                src="@/assets/img/Home/intelligenceBoard/direction-start.png" /> </span>
       <span class="control"> <img @click="AlignItems = '2'"
                                src="@/assets/img/Home/intelligenceBoard/direction-center.png" /></span>
        <span class="control"> <img @click="AlignItems = '1'"
                                src="@/assets/img/Home/intelligenceBoard/direction-end.png" /> </span>
                    </div>

定义对齐方式的css样式

//块级元素对齐方式的css样式
.justify_start{
    justify-content: flex-start;
}
.justify_center{
    justify-content: center;
}
.justify_end{
    justify-content: flex-end;
}
.align_start{
    align-items: flex-start;
}
.align_center{
    align-items: center;
}
.align_end{
    align-items: flex-end;
}

//定义文字对齐方式的css样式
.text_left{
    text-align: left;
    // background-color: #fff;
}

.text_right{
    text-align: right;
    // background-color: black;
}
.text_center{
    text-align: center;
    // background-color: yellow;
}

.text_top{
// background: red;
box-sizing: border-box;
}
.text_bottom{
// background: blue;
padding-top: calc( (var(--height) * 1px - var(--textHeight) * 1px ))  ;
// padding-top: calc( var(--height) * 1px );
// padding-top: calc(#{var(—height)} * 1px);
box-sizing: border-box;
    
}
.text_middle{
// background: greenyellow;
padding-top: calc( (var(--height) * 1px - var(--textHeight ) * 5.5px )) ;
box-sizing: border-box;

    
}

实现方式一

三元表达式

文字对齐方式 text-aligin 和padding来控制对齐方式

:class=[TextAlign=='0'?'text_left':'',TextAlign=='1'?'text_right':'',TextAlign=='2'?'text_center':'', AliginItems=='0' ? 'text_top' :'', AliginItems=='1' ? 'text_bottom' :'', AliginItems=='2' ? 'text_center' :'']

块级元素对齐方式

通过flex布局来控制对齐方式配合三元表达式来动态展示

:class=[TextAlign=='0'?'justify_start':'',TextAlign=='1'?'justify_end':'',TextAlign=='2'?'justify_center':'', AliginItems=='0' ? 'align_start' :'', AliginItems=='1' ? 'align_end' :'', AliginItems=='2' ? 'align_center' :'']

这样写可以实现,但代码繁琐

方法二

js控制

//块级元素
let pGetClass1:any=computed(()=>{

    let classList1:any=['justify_start','justify_end','justify_center']
    let numberList1:any=Number(TextAlign.value)
    let just:any=classList1[numberList1]
    console.log(just)
    return just
})
let pGetClass2:any=computed(()=>{

let classList2:any=['align_start','align_end','align_center']
let numberList2:any=Number(AlignItems.value)
let just:any=classList2[numberList2]
console.log(just)
return just
})
//文字
let getClass1:any=computed(()=>{

    let arr1:any=['text_left','text_right','text_center']

    let num1:any=Number(TextAlign.value)
console.log(arr1,num1);

    let str:any=arr1[num1]
    console.log(str);
    
    return str
})

let getClass2:any=computed(()=>{

let arr2:any=['text_top','text_bottom','text_middle']

let num2:any=Number(AlignItems.value)

let str:any=arr2[num2]
console.log(str);

return str
})

样式绑定时绑定对应的函数

练习

点击变色

原理 : 找到对应的唯一值标识,三元判断若 === 就加类名

<template>
    <div style="color:#fff">
   <div  v-for="item in listStyleData" :key="item.pid" 
 :class="['common', IndexOne === item.pid ? 'active':'']" 
   @click="IndexOne=item.pid">
    <div >{
   
   { item.pid }}</div>
</div>

    </div>
</template>

<script setup lang="ts">
import {ref} from 'vue'
const listStyleData=[
    {
        pid:'周一'
    },
    {
        pid:'周二'
    },
    {
        pid:'周三'
    },
    {
        pid:'周四'
    },
    {
        pid:'周五'
    }
]
const IndexOne=ref('')
const add=()=>{
    //暂放
}
</script>

<style scoped>
.common{
    width: 80px;
    height: 80px;
}
.active{
    color:red;
    border:1px solid red;

}
</style>

根据判断动态绑定文字和块元素对齐方式 css样式

猜你喜欢