style 的样式的scoped 的坑

在vue的style 中加入scoped是局部，限制了本文件的样式只能用于本页面

但是要修改插件中的样式，就必须去掉scoped

在使用

methods: {
    addBlocks() {
        var html = `<div class="blockbox">
                {{count}}

                <div class="text">
                  这是第{{count}}块
                </div>
                </div>`;
        $(".blockwrap").append(html);
    }

  }
}

付全文件

<template>

  <div class='blockwrap'>
    <button type="button" name="button" @click='addBlocks'>增加一个块</button>
      <div class="blockbox">
          {{count}}
          <div class="text">
            这是第{{count}}块
          </div>
      </div>

  </div>
</template>
<script>
export default {
  name: "block",
  data: () => ({
      count: 1
  }),
  computed: {

  },
  methods: {
    addBlocks() {
        var html = \`<div class="blockbox">
                {{count}}

                <div class="text">
                  这是第{{count}}块
                </div>
                </div>`;
        $('.blockwrap').append(html);
    }

  }
}
</script>

<style lang="scss">
  .blockwrap{
    padding-top: 20px;
    padding-bottom: 20px;
    margin-left: 10px;
    width:934px;
    background: rgba(1,0,0,.2);
    margin: 0px auto 20px auto;
  }
  .blockbox{
    position: relative;
    float: left;
    width:50px;
    height:50px;
    margin-right: 10px;
    text-align: center;
    line-height: 50px;
    border: 1px solid blue;
  }
  .text{
    position: absolute;
    width: 140%;
    height:40px;
    line-height: 40px;
    top: -40px;
    display: none;
  }
  .blockbox:hover .text{
    display: block;
  }
  .tooltiptext{
    color:red;
  }
</style>

使用这种语法时:

var html = `<div class="blockbox">
                {{count}}

                <div class="text">
                  这是第{{count}}块
                </div>
                </div>`;
        $('.blockwrap').append(html);

类名blockbox的样式即使在文中定义了，但是还是不显示，必须去掉scoped 才可以显示