vue中通過v-html添加內容添加樣式無效

問題描述：

在使用富文本編輯圖文詳情的時候，通常會使用v-html引入所編輯的內容，然而，詳情顯示的樣式有時不是我們希望的（尤其是圖片，大圖會出現溢出內容區域的問題），在<style scope> 中添加樣式卻並不生效。

原因分析：

以下摘自vue官方文檔：

在單文件組件裏，scoped 的樣式不會應用在 v-html 內部，因爲那部分 HTML 沒有被 Vue 的模板編譯器處理。如果你希望針對 v-html 的內容設置帶作用域的 CSS，你可以替換爲 CSS Modules 或用一個額外的全局 <style> 元素手動設置類似 BEM 的作用域策略。

解決方法：

使用css中的 >>> 選擇器

注：該選擇器在less和scss中是無效的（貌似在less中還會報錯），應使用css。

示例代碼如下：

<template>
    <div class="wap-card">
      <div class="card-title">圖文詳情</div>
      <div class="notes-cont" style="min-height: 100px" v-html="data.bookDetail">
      </div>
    </div>
</template>

<style scope>
.notes-cont >>> ul > li {
  list-style-type: disc;
  margin-left: 15px;
}
.notes-cont >>> img {
  max-width: 100%;
  height: auto;
}
</style>