docs(imagePreview): 新增zIndex层级功能相关文档

DevCloudFE · Dec 1, 2021 · 2134dc8 · 2134dc8
1 parent cccf2f2
commit 2134dc8
Showing 1 changed file with 108 additions and 70 deletions.
diff --git a/packages/devui-vue/docs/components/image-preview/index.md b/packages/devui-vue/docs/components/image-preview/index.md
@@ -9,107 +9,126 @@
 ### 基本用法
 
 :::demo 使用 v-d-image-preview 指令，对容器内图片进行预览。
+
 ```vue
 <template>
  <div v-d-image-preview class="devui-image-preview-demo">
  <img v-for="src in imageList" :src="src" :key="src" />
  </div>
 </template>
 <script>
- import { defineComponent, ref, reactive } from 'vue'
- export default defineComponent({
- setup() {
- const _imageList = [
- 'https://devui.design/components/assets/image1.png',
- 'https://devui.design/components/assets/image3.png'
- ]
- const imageList = ref(_imageList)
- return {
- imageList
- }
+import { defineComponent, ref, reactive } from 'vue'
+export default defineComponent({
+ setup() {
+ const _imageList = [
+ 'https://devui.design/components/assets/image1.png',
+ 'https://devui.design/components/assets/image3.png'
+ ]
+ const imageList = ref(_imageList)
+ return {
+ imageList
  }
- })
-</script>
-
-<style lang="scss" scoped>
-.devui-image-preview-demo {
- display: flex;
- flex-wrap: wrap;
- margin-top: 10px;
- img {
- margin: 10px;
- cursor: pointer;
- }
- .btn {
- margin: 10px;
  }
-}
-</style>
+})
+</script>
 ```
+
 :::
 
 ### 自定义开启预览窗口
 
 :::demo 传入 custom 参数,指令会自动注入 open 方法，通过 custom.open 开启预览窗口
+
 ```vue
 <template>
- <div v-d-image-preview="{custom: image.custom, disableDefault:true }" class="devui-image-preview-demo">
+ <div
+ v-d-image-preview="{ custom: image.custom, disableDefault: true }"
+ class="devui-image-preview-demo"
+ >
  <img v-for="src in imageList" :src="src" :key="src" />
  </div>
  <d-button @click="open" class="btn">自定义</d-button>
 </template>
 <script>
- import { defineComponent, ref, reactive } from 'vue'
- export default defineComponent({
- setup() {
- const _imageList = [
- 'https://devui.design/components/assets/image1.png',
- 'https://devui.design/components/assets/image3.png'
- ]
- const imageList = ref(_imageList)
- const image = reactive({
- custom: {},
- imageList: _imageList
- })
- function open() {
- image.custom.open()
- }
- return {
- imageList,
- image,
- open
- }
+import { defineComponent, ref, reactive } from 'vue'
+export default defineComponent({
+ setup() {
+ const _imageList = [
+ 'https://devui.design/components/assets/image1.png',
+ 'https://devui.design/components/assets/image3.png'
+ ]
+ const imageList = ref(_imageList)
+ const image = reactive({
+ custom: {},
+ imageList: _imageList
+ })
+ function open() {
+ image.custom.open()
+ }
+ return {
+ imageList,
+ image,
+ open
  }
- })
-</script>
-
-<style lang="scss" scoped>
-.devui-image-preview-demo {
- display: flex;
- flex-wrap: wrap;
- margin-top: 10px;
- img {
- margin: 10px;
- cursor: pointer;
- }
- .btn {
- margin: 10px;
  }
-}
-</style>
+})
+</script>
 ```
+
 :::
 
 ### 设置 zIndex
 
-通过设置 zIndex 控制弹出效果的层级，设置 backDropZIndex 控制弹出层背景的层级。
-可以看到当设置 zIndex 小于 backDropZIndex 时，imagePreview 会显示在背景下方。
-可以通过 Esc 关闭 imagePreview。
+:::demo 通过设置 zIndex 控制弹出效果的层级，设置 backDropZIndex 控制弹出层背景的层级。可以看到当设置 zIndex 小于 backDropZIndex 时，imagePreview 会显示在背景下方。可以通过 Esc 关闭 imagePreview。
 
-```
-// 待嵌入 modal 组件即可
+```vue
+<template>
+ <div class="devui-image-preview-flex">
+ <d-radio-group css-style="row" v-model="zIndex">
+ <d-radio v-for="item in zIndexList" :key="item" :value="item">
+ {{ item }}
+ </d-radio>
+ </d-radio-group>
+ <span class="text">zIndex: {{ zIndex }}</span>
+ </div>
+ <div class="devui-image-preview-flex">
+ <d-radio-group css-style="row" v-model="backDropZIndex">
+ <d-radio v-for="item in backDropZIndexList" :key="item" :value="item">
+ {{ item }}
+ </d-radio>
+ </d-radio-group>
+ <span class="text">backDropZIndex: {{ backDropZIndex }}</span>
+ </div>
+ <div v-d-image-preview="{ zIndex, backDropZIndex }" class="devui-image-preview-demo">
+ <img v-for="src in imageList" :src="src" :key="src" />
+ </div>
+</template>
+<script>
+import { defineComponent, ref, reactive } from 'vue'
+export default defineComponent({
+ setup() {
+ const imageList = ref([
+ 'https://devui.design/components/assets/image1.png',
+ 'https://devui.design/components/assets/image3.png'
+ ])
+ const zIndexList = ref([1000, 1050, 1100])
+ const backDropZIndexList = ref([900, 1040, 1000])
+ const zIndex = ref(1050)
+ const backDropZIndex = ref(1040)
+
+ return {
+ imageList,
+ zIndexList,
+ backDropZIndexList,
+ zIndex,
+ backDropZIndex
+ }
+ }
+})
+</script>
 ```
 
+:::
 
 ### API
 
@@ -120,4 +139,23 @@
 | zIndex | `Number` | 1050 | 可选，可选，设置预览时图片的 z-index 值 |
 | backDropZIndex | `Number` | 1040 | 可选，设置预览时图片背景的 z-index 值 |
 
-
+<style lang="scss">
+.devui-image-preview-demo {
+ display: flex;
+ flex-wrap: wrap;
+ img {
+ cursor: pointer;
+ margin-bottom: 10px;
+ }
+ .btn {
+ margin: 10px;
+ }
+}
+.devui-image-preview-flex {
+ display: flex;
+ align-items: center;
+ .text {
+ margin-left: 20px;
+ }
+}
+</style>