From 89be1eebd3c50c2f86aec139f8237901d8a78168 Mon Sep 17 00:00:00 2001
From: sight <1453017105@qq.com>
Date: Thu, 3 Mar 2022 21:52:59 +0800
Subject: [PATCH] =?UTF-8?q?chore:=20=E6=9B=B4=E6=96=B0=E5=87=BD=E6=95=B0?=
 =?UTF-8?q?=E8=B0=83=E7=94=A8=E5=93=8D=E5=BA=94=E5=BC=8F=E5=92=8CVNode?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E6=A1=88=E4=BE=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 example/docs/zh-CN/index.md               | 154 ++++++++++++++++++++--
 example/src/components/demo/FormVNode.vue |  24 ++++
 2 files changed, 170 insertions(+), 8 deletions(-)
 create mode 100644 example/src/components/demo/FormVNode.vue

diff --git a/example/docs/zh-CN/index.md b/example/docs/zh-CN/index.md
index df494a4..f9455a3 100644
--- a/example/docs/zh-CN/index.md
+++ b/example/docs/zh-CN/index.md
@@ -1,4 +1,3 @@
-
 <fieldset class="layui-elem-field layui-field-title">
     <legend>安装</legend>
 </fieldset>
@@ -11,7 +10,7 @@ pnpm install @layui/layer-vue
     <legend>消息</legend>
 </fieldset>
 
-::: demo 
+::: demo
 
 <template>
     <button @click="msg">普通消息</button>
@@ -22,7 +21,6 @@ pnpm install @layui/layer-vue
 </template>
 
 <script>
-import { layer } from "../../../src/index"
 
 const msg = function() {
     layer.msg("普通消息", { time: 1000 })
@@ -61,7 +59,6 @@ const info = function() {
 </template>
 
 <script setup>
-import { layer } from "../../../src/index"
 
 const load1 = function() {
     layer.load(0, {time: 2000})
@@ -94,13 +91,13 @@ const load4 = function() {
     <button @click="openOffset">指定位置</button>
     <button @click="openIframe">远程窗体</button>
     <button @click="openHtml">HTML片段</button>
+    <button @click="openVNode">vNode</button>
     <button @click="openMaxmin">缩小放大</button>
     <button @click="openResize">尺寸拉伸</button>
 </template>
 
 <script setup>
 import { ref, h } from 'vue'
-import { layer } from "../../../src/index"
 
 const open = function() {
     layer.open({
@@ -146,6 +143,14 @@ const openHtml = function() {
     })
 }
 
+const openVNode = function() {
+    layer.open({
+        type: 1,
+        title: "vNode",
+        content: h('button', { style: 'color: red' },'vNode按钮')
+    })
+}
+
 const openMaxmin = function() {
     layer.open({
         type: 1,
@@ -180,7 +185,6 @@ const openResize = function() {
 
 <script setup>
 import { ref } from 'vue'
-import { layer } from "../../../src/index"
 
 const openConfirm1 = function() {
     layer.confirm("layui-vue 1.0.0 已经发布")
@@ -208,7 +212,6 @@ const openConfirm2 = function() {
 
 <script setup>
 import { ref } from 'vue'
-import { layer } from "../../../src/index"
 
 const openTop = function() {
     layer.drawer({
@@ -243,4 +246,139 @@ const openRight = function() {
 }
 </script>
 
-:::
\ No newline at end of file
+:::
+
+<fieldset class="layui-elem-field layui-field-title">
+    <legend>函数响应式</legend>
+</fieldset>
+
+::: demo
+
+<template>
+  <input type="text" v-model="content" placeholder="尝试更改这里的内容" style="margin-bottom:15px" /><br>
+  <button @click="openTextReactive">文本</button>
+  <button @click="openHtmlReactive">Html</button>
+  <button @click="openIframeReactive">iframe</button>
+  <button @click="openVNodeReactive">VNode</button>
+  <button @click="openReactive">v-model</button>
+</template>
+
+<script setup>
+import { ref, h } from 'vue'
+import { useLayer } from  "../../../src/index"
+
+const layer = useLayer()
+const title = ref('标题')
+const content = ref(null)
+
+// 文本响应式
+const openTextReactive = () => {
+  title.value = '文本'
+  content.value = `默认文本`
+  layer.open({
+    title: () => title.value,
+    content: () => content.value,
+    area: ['350px', '240px'],
+    shade: false,
+    maxmin: true
+  })
+}
+
+// HTML 响应式
+const openHtmlReactive = () => {
+  title.value = 'HTML'
+  content.value = `<h1>hello<h1/>`
+  layer.open({
+    title: () => title.value,
+    content: () => content.value,
+    isHtmlFragment: true,
+    area: ['350px', '240px'],
+    shade: false,
+    maxmin: true
+  })
+}
+
+// iframe 响应式
+const openIframeReactive = () => {
+  title.value = 'iframe'
+  content.value = `http://layui-vue.pearadmin.com`
+  layer.open({
+    type: 2,
+    title: () => title.value,
+    content: () => content.value,
+    area: ['1360px','700px'],
+    shade: false,
+    maxmin: true
+  })
+}
+
+// VNode响应式
+const openVNodeReactive = () => {
+  title.value = 'VNode'
+  content.value = `h('button', { style: 'border-color: #8897BA'},'尝试将button改为h1')`
+  // eval不是必须的,此处只是为了转换输入框 value
+  layer.open({
+    title: () => title.value,
+    content: () => eval(content.value),
+    area: ['350px', '240px'],
+    shade: false,
+    maxmin: true
+  })
+}
+
+// v-model 双向绑定
+const openReactive = () => {
+  title.value = '双向绑定'
+  content.value = `layer-vue`
+  layer.open({
+    title: () => title.value,
+    content: () => h("input", {
+      value: content.value,
+      onInput: (e) => content.value = e.target.value
+    }),
+    area: ['350px', '240px'],
+    shade: false,
+  })
+}
+</script>
+
+:::
+
+<fieldset class="layui-elem-field layui-field-title">
+    <legend>VNode组件</legend>
+</fieldset>
+
+::: demo
+
+<template>
+  <button @click="openComponent">组件</button>
+  <span>{{ userData }}</span>
+</template>
+
+<script setup>
+import { ref, reactive, h } from 'vue'
+import { useLayer } from  "../../../src/index"
+import FormVNode from '../../src/components/demo/FormVNode.vue'
+
+// content 选项 VNode 类型是作为 layer 的子组件渲染的,所以可以用 props 和 emit 来通信
+// 注意子组件发出的事件需要用 onXXX（）来监听
+const userData = reactive({
+  username:'',
+  password:'',
+})
+const openComponent = () => {
+  layer.open({
+    title: '测试',
+    content: h(FormVNode, { 
+      userData, 
+      onOk(res){
+        layer.msg(res)
+      }
+      }),
+    area: ['350px', '240px'],
+    shade: false,
+  })
+}
+</script>
+
+:::
diff --git a/example/src/components/demo/FormVNode.vue b/example/src/components/demo/FormVNode.vue
new file mode 100644
index 0000000..dbbd8b0
--- /dev/null
+++ b/example/src/components/demo/FormVNode.vue
@@ -0,0 +1,24 @@
+<template>
+  <form>
+    username:
+    <input type="text" name="username" v-model="userData.username" />
+    <br />password:
+    <input type="password" name="password" v-model="userData.password" />
+    <br />
+    <button type="button" @click="$emit('ok', props.userData)">确认</button>
+    <button type="reset" @click="resetClick">重置</button>
+  </form>
+</template>
+<script setup>
+import { layer } from "../../../../src/index"
+
+const props = defineProps({
+  userData: Object
+})
+
+const resetClick = function () {
+  props.userData.username = "";
+  props.userData.password = "";
+}
+
+</script>
\ No newline at end of file
-- 
Gitee