vue3 通过ref动态改变style

一条晓鱼

已于 2023-08-18 09:55:02 修改

阅读量3.4k

点赞数

分类专栏： vue 文章标签： vue.js javascript ecmascript

于 2023-08-04 17:13:27 首次发布

本文链接：https://blog.csdn.net/jiangliuhuan123/article/details/132108637

版权

vue 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

例子

通过下拉菜单组件,控制其他组件的style
在这里插入图片描述

实现

3个步骤:

1 定义组件要用的ref变量:(vue3)
const a1ref = ref(null)

2:
<div ref="a1ref" class="a1_s bg-purple-100 h-40">
    <el-button type=" primary">1</el-button>
    <el-button type=" primary">2</el-button>
    <el-button type=" primary">3</el-button>
</div>

3:其他地方点(下拉菜单)击按钮触发函数

function do_chg(params) {
    a1ref.value.style['align-items'] = params;
}

完整代码

<template>
    <div class="a_s">

        <div ref="a1ref" class="a1_s bg-purple-100 h-40">
            <el-button type=" primary">1</el-button>
            <el-button type=" primary">2</el-button>
            <el-button type=" primary">3</el-button>
        </div>

        <div class="a11_s h-40 border-red-200 border-2">

            <div class="a_s mt-2">
                <div class="mr-5">align-items: </div>
                <el-select v-model="value"  placeholder="Select" @change="do_chg">
                    <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                    />
                </el-select>
            </div>

            <div class="a_s mt-4">
                <div class="mr-2">flex-direction: </div>
                <el-select v-model="value2" placeholder="Select" @change="do_chg2">
                    <el-option
                    v-for="item in options2"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                    />
                </el-select>
            </div>

        </div>
    </div>
</template>

<script setup>
import { ref ,reactive} from "vue";
const value = ref(null)
const value2 = ref(null)
const a1ref = ref(null)

const options = [
  {
    value: 'center',
    label: 'center',
  },
  {
    value: 'flex-start',
    label: 'flex-start',
  },
  {
    value: 'flex-end',
    label: 'flex-end',
  },
  {
    value: 'baseline',
    label: 'baseline',
  },
  {
    value: 'inherit',
    label: 'inherit',
  },
]

const options2 = [
  {
    value: 'row',
    label: 'row',
  },
  {
    value: 'row-reverse',
    label: 'row-reverse',
  },
  {
    value: 'column',
    label: 'column',
  },
  {
    value: 'column-reverse',
    label: 'column-reverse',
  },
  {
    value: 'inherit',
    label: 'inherit',
  },
  {
    value: 'initial',
    label: 'initial',
  },
]
function do_chg(params) {
    a1ref.value.style['align-items'] = params;
}
function do_chg2(params) {
    a1ref.value.style['flex-direction'] = params;
}
</script>

<style scoped>
.a_s{
    display: flex;
    flex-direction: row;/*row|row-reverse|column|column-reverse|initial|inherit;*/
}
.a1_s{
    display: flex;
    width:60%;
    flex-direction: row;/*row|row-reverse|column|column-reverse|initial|inherit;*/
    align-items: flex-end;/*stretch|center|flex-start|flex-end|baseline|initial|inherit */
    /* align-content: space-around;stretch|center|flex-start|flex-end|space-between|space-around|initial|inherit */
}
.a11_s{
    display: flex;
    width:40%;
    flex-direction: column;/*row|row-reverse|column|column-reverse|initial|inherit;*/
    align-items: flex-start;/*stretch|center|flex-start|flex-end|baseline|initial|inherit */
    /* align-content: space-around;stretch|center|flex-start|flex-end|space-between|space-around|initial|inherit */
}
</style>