javascript – 了解Vue.js CSS类绑定排序

2023年2月20日 209次阅读

任何人都可以帮助我理解如何控制组件根元素css类和任何可能从调用组件的父级绑定的css类的顺序？

这是一个小提琴,描绘了我注意到的内容(下面的代码段示例)：
https://jsfiddle.net/cicsolutions/b6rnaw25/

你会注意到你的根元素上有一个类的组件,如果该类是一个字符串,Vue的类绑定将该类放在结果类列表的开头.这是我所期望的,因为组件设置了基本css类,然后您可以在通过向组件html元素添加类来使用组件时自定义样式.然后Vue将类绑定/连接在一起.

在小提琴的下一个例子中,我展示了使用动态的css类(即不是静态字符串).在这些情况下,Vue将组件的根元素类放在绑定类列表的末尾.

我正在研究一个我希望别人会使用的组件,所以我想在root元素上设置我的组件类,然后如果有人想要覆盖这些样式,他们可以在组件标签上添加自己的类.

我还需要root元素类是动态的,所以我必须使用数组或对象来处理类绑定.

有谁知道为什么Vue将组件根css类放在静态类的开头,最后放在动态类中？这对我来说似乎很奇怪,但也许这是故意让我逃避的原因.

尽管如此,当我需要将它作为动态类时,我将如何确保我的组件的根元素类总是在结果类列表中的第一个？

Vue.directive('bound-class', (el) => {
	const boundClass = el.attributes.class.nodeValue
  const boundClassPrintout = document.createElement('div')
  boundClassPrintout.innerHTML = 'Resulting Bound Class: ' + boundClass
  el.appendChild(boundClassPrintout)
});

// STATIC CSS CLASS -> becomes 1st class in bound class list (expected)
Vue.component('string-test', {
	template: `<div class="string-class" v-bound-class><slot></slot></div>`
});

// DYNAMIC CSS CLASS -> becomes last class in bound class list (unexpected)
Vue.component('array-test', {
	template: `<div :class="['array-class']" v-bound-class><slot></slot></div>`
});

// DYNAMIC CSS CLASS -> becomes last class in bound class list (unexpected)
Vue.component('object-test', {
	template: `<div :class="{ 'object-class': true }" v-bound-class><slot></slot></div>`
});

new Vue({
  el: "#app",
  computed: {
  	vueVersion() {
    	return Vue.version
    }
  }
})
body {
  background: #20262E;
  padding: 20px;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
}

h2 {
  margin-bottom: 0.75rem;
}
<link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <h2>Vue version: {{ vueVersion }}</h2>
  <string-test class="p-2 mb-2 border">Root class (string-class) at beginning (expected)</string-test>
  <array-test class="p-2 mb-2 border">Root class (array-class) at end (unexpected)</array-test>
   <object-test class="p-2 mb-2 border">Root class (object-class) at end (unexpected)</object-test>
</div>

最佳答案 我怀疑Vue首先插入静态类没有特别的原因;可能它只是镜像
renderClass函数中输入参数的顺序.

CSS文件中规则集的顺序也很重要;元素的class属性中的类名顺序不是.并且这两个命令都与cascade没有任何关系,它指的是继承父母样式的子元素.也许你已经将它与块内或内联样式中的声明顺序混淆了.在这种情况下,订单确实重要：

<p class="red blue">
    Order doesn't matter in the class attribute above. If
    the class styles contradict, whichever is defined last
    will win regardless of how they're ordered in the attribute.
</p>

<p class="blue red">
    This paragraph will be styled identically to the previous
    one, despite the change in class order.
</p>

<p style="color: red; color: blue">
    Order does matter here. The text color will be blue.
</p>
点赞