Question

我将Vue组件构建为单个文件组件：

<template>
  <div class="chart"></div>
</template>

<script>
import * as d3 from 'd3';

export default {
  data() {
    return {
      data: [4, 8, 15, 16, 23, 42],
    };
  },
  mounted() {
    d3.select('.chart')
      .selectAll('div')
        .data(this.data)
      .enter()
        .append('div')
        .style('width', d => `${10 * d}px`)
        .text(d => d);
  },
};
</script>

<style lang="scss" scoped>
.chart {
  div {
    background-color: steelblue;
    color: white;
    font: 10px sans-serif;
    margin: 1px;
    padding: 3px;
    text-align: right;
  }
}
</style>

使用webpack处理后，CSS的呈现方式如下：

<style type="text/css">
.chart div[data-v-xxxxxxxx] {
  background-color: steelblue;
  color: white;
  font: 10px sans-serif;
  margin: 1px;
  padding: 3px;
  text-align: right;
}
</style>

但HTML显示为：

<div data-v-xxxxxxxx class="chart">
    <div style="width: 40px;">4</div>
    <div style="width: 80px;">8</div>
    <div style="width: 150px;">15</div>
    <div style="width: 160px;">16</div>
    <div style="width: 230px;">23</div>
    <div style="width: 420px;">42</div>
</div>

我使用D3生成孩子<div>。我发现data-v-xxxxxxxx并未绑定到生成的元素。如果我将子<div>包含在原始模板中而不是生成它们，则每个都具有data-v-xxxxxxxx属性，并且样式将按预期应用

我认为根节点的任何后代，无论是包含在模板中还是生成的，都应该绑定到作用域CSS的规则。有没有办法强迫这个？

Answer 1

新版vue-loader（版本12.2.0）允许您使用＆＃34;深度范围＆＃34; CSS。你需要这样使用它：

<style scoped>现在支持＆＃34;深＆＃34;可能影响孩子的选择器   使用>>>组合子的组件：

.foo >>> .bar { color: red; }将编译为：

.foo[data-v-xxxxxxx] .bar { color: red; }

有关vue-loader

的the release page的更多信息

Vue单个文件组件将data-v-xxxxxxxx绑定到生成的元素

1 个答案: