From a02a90b1b02deea674767918919686e6c93dbcba Mon Sep 17 00:00:00 2001
From: zhenyuWang <13641039885@163.com>
Date: Mon, 22 Apr 2024 08:46:44 +0800
Subject: [PATCH] refactor(directive): v-html

---
 pages.json                                    | 18 ++++++++----
 .../directive/v-html/v-html-composition.uvue  |  7 +++++
 .../{v-html.uvue => v-html-options.uvue}      |  2 +-
 pages/directive/v-html/v-html.test.js         | 29 +++++++++++++------
 pages/index/index.uvue                        | 22 ++++++++++++++
 ...ions-API-composition-API-correspondence.md | 24 ++++++++-------
 6 files changed, 75 insertions(+), 27 deletions(-)
 create mode 100644 pages/directive/v-html/v-html-composition.uvue
 rename pages/directive/v-html/{v-html.uvue => v-html-options.uvue} (62%)

diff --git a/pages.json b/pages.json
index bf451bf..ebcc3de 100644
--- a/pages.json
+++ b/pages.json
@@ -135,6 +135,18 @@
         "navigationBarTitleText": "keep-alive 组合式 API"
       }
     },
+    {
+      "path": "pages/directive/v-html/v-html-options",
+      "style": {
+        "navigationBarTitleText": "v-html 选项式 API"
+      }
+    },
+    {
+      "path": "pages/directive/v-html/v-html-composition",
+      "style": {
+        "navigationBarTitleText": "v-html 组合式 API"
+      }
+    },
     {
       "path": "pages/directive/v-bind/v-bind",
       "style": {
@@ -271,12 +283,6 @@
         "navigationBarTitleText": "v-slot"
       }
     },
-    {
-      "path": "pages/directive/v-html/v-html",
-      "style": {
-        "navigationBarTitleText": "v-html"
-      }
-    },
     {
       "path": "pages/component-instance/slots/slots-options",
       "style": {
diff --git a/pages/directive/v-html/v-html-composition.uvue b/pages/directive/v-html/v-html-composition.uvue
new file mode 100644
index 0000000..33eb23d
--- /dev/null
+++ b/pages/directive/v-html/v-html-composition.uvue
@@ -0,0 +1,7 @@
+<template>
+  <view v-html="html" />
+</template>
+
+<script setup lang="uts">
+const  html = '<p class="p" style="color: red;">hello world for composition API!</p>'
+</script>
diff --git a/pages/directive/v-html/v-html.uvue b/pages/directive/v-html/v-html-options.uvue
similarity index 62%
rename from pages/directive/v-html/v-html.uvue
rename to pages/directive/v-html/v-html-options.uvue
index 5934a54..22aaaa6 100644
--- a/pages/directive/v-html/v-html.uvue
+++ b/pages/directive/v-html/v-html-options.uvue
@@ -6,7 +6,7 @@
 export default {
   data() {
     return {
-      html: '<p class="p" style="color: red;">hello world!</p>'
+      html: '<p class="p" style="color: red;">hello world for options API!</p>'
     }
   }
 }
diff --git a/pages/directive/v-html/v-html.test.js b/pages/directive/v-html/v-html.test.js
index 3c4194a..39f5342 100644
--- a/pages/directive/v-html/v-html.test.js
+++ b/pages/directive/v-html/v-html.test.js
@@ -1,16 +1,27 @@
-const PAGE_PATH = '/pages/directive/v-html/v-html'
+const OPTIONS_PAGE_PATH = '/pages/directive/v-html/v-html-options'
+const COMPOSITION_PAGE_PATH = '/pages/directive/v-html/v-html-composition'
+
+// TODO: ios 暂不支持
 
 describe('v-html', () => {
   let page
-  beforeAll(async () => {
-    page = await program.reLaunch(PAGE_PATH)
-    await page.waitFor('view')
-  })
-  it('basic', async () => {
-    // 补充延迟确保渲染完成
-    await page.waitFor(500)
-    
+  
+  const test = async () => {
     const image = await program.screenshot()
     expect(image).toMatchImageSnapshot()
+  }
+  
+  it('v-html options API', async () => {
+    page = await program.reLaunch(OPTIONS_PAGE_PATH)
+    await page.waitFor(700)
+    
+    await test(page)
+  })
+  
+  it('v-html composition API', async () => {
+    page = await program.reLaunch(COMPOSITION_PAGE_PATH)
+    await page.waitFor(700)
+    
+    await test(page)
   })
 })
\ No newline at end of file
diff --git a/pages/index/index.uvue b/pages/index/index.uvue
index e850b23..3c771d8 100644
--- a/pages/index/index.uvue
+++ b/pages/index/index.uvue
@@ -630,6 +630,28 @@ export default {
               ]
             }
           ] as Page[]
+        },
+         {
+          id: 'directive',
+          name: '指令',
+          pages: [
+            {
+              id: 'v-html',
+              name: 'v-html',
+              children: [
+                {
+                  id: 'v-html-options',
+                  name: 'v-html 选项式 API',
+                  url: 'v-html-options'
+                },
+                {
+                  id: 'v-html-composition',
+                  name: 'v-html 组合式 API',
+                  url: 'v-html-composition'
+                },
+              ]
+            }
+          ]
         },
         {
           id: 'lifecycle',
diff --git a/refactor_options-API-composition-API-correspondence.md b/refactor_options-API-composition-API-correspondence.md
index 5016e2c..3d44978 100644
--- a/refactor_options-API-composition-API-correspondence.md
+++ b/refactor_options-API-composition-API-correspondence.md
@@ -153,17 +153,19 @@ function transform(fileInfo, api) {
 
 ## directives
 
-- [ ] v-bind      v-bind
-- [ ] v-for       v-for
-- [ ] v-if        v-if
-- [ ] v-model     defineModel
-- [ ] v-on        v-on
-- [ ] v-show      v-show
-- [ ] v-slot      v-slot
-- [ ] v-once      v-once
-- [ ] v-memo      v-memo
-- [ ] v-pre       v-pre
-- [ ] v-html      v-html
+- [x] v-html
+- [ ] v-show
+- [ ] v-if v-else-if v-else
+- [ ] v-for
+- [ ] v-on
+- [ ] v-bind
+- [ ] v-model
+- [ ] v-slot
+- [ ] v-pre
+- [ ] v-once
+- [ ] v-memo
+- [ ] v-text
+- [ ] -cloak
 
 ## lifecycle
 
-- 
GitLab