refactor(directive): v-html

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": {

pages/directive/v-html/v-html-composition.uvue

+<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>

pages/directive/v-html/v-html.uvue → 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>'
     }
   }
 }

pages/directive/v-html/v-html.test.js

-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

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',

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