feat: 增加 style 绑定 map 数据类型示例

pages.json

@@ -311,11 +311,17 @@
         "navigationBarTitleText": "slots"
       }
     },
-    {
-      "path": "pages/rendering/template/template",
-      "style": {
-        "navigationBarTitleText": "template"
-      }
+    {
+      "path": "pages/rendering/template/template",
+      "style": {
+        "navigationBarTitleText": "template"
+      }
+    },
+    {
+      "path": "pages/rendering/template/template-map-style",
+      "style": {
+        "navigationBarTitleText": "template-map-style"
+      }
     },
     {
       "path": "pages/rendering/unrecognized-component/unrecognized-component",

pages/rendering/template/template-map-style.test.js

+describe('/pages/rendering/template/template-map-style', () => {
+  let page
+  beforeAll(async () => {
+    page = await program.reLaunch('/pages/rendering/template/template-map-style')
+    await page.waitFor(1000)
+  })
+  it('init screen shot', async () => {
+    const image = await program.screenshot();
+    expect(image).toMatchImageSnapshot();
+  })
+
+  it('change isClassValid screen shot', async () => {
+    const btn = await page.$('#btn')
+    await btn.tap()
+    const image = await program.screenshot();
+    expect(image).toMatchImageSnapshot();
+  })
+});
\ No newline at end of file

pages/rendering/template/template-map-style.uvue

+<template>
+  <view class="page">
+    <view :style="[styleW200, styleRounded, styleBorder]" :class="[classPadding10, classBgRed]">
+      <text>width:200px;</text>
+      <text>padding:10px;</text>
+      <text>border-radius:8px;</text>
+      <text>border:1px solid #ccc;</text>
+      <text>background-color: red;</text>
+      <text class="text-white">this text color: #fff;</text>
+    </view>
+    <view :style="[stylePadding10, styleBgGreen, styleMargin10]"
+      :class="[classH200, classRounded, classBorder, classBorderRed]">
+      <text>height:200px;</text>
+      <text>margin:10px;</text>
+      <text>padding:10px;</text>
+      <text>border-radius:8px;</text>
+      <text>border:1px solid #ccc;</text>
+      <text>border-color:red;</text>
+      <text>background-color: green;</text>
+      <text class="text-blue">this text color: blue;</text>
+    </view>
+    <view :style="styleBgBlue" :class="classPadding10">
+      <text>padding:10px;</text>
+      <text>background-color: blue;</text>
+      <text class="text-red">this text color: red;</text>
+    </view>
+    <button class="uni-common-mt" id="btn" @click="toggleIsClassValid">toggle isClassValid</button>
+  </view>
+</template>
+
+<script lang="uts">
+  export default {
+    data() {
+      return {
+        styleW200: new Map<string, string>([['width', '200px']]),
+        styleH200: new Map<string, string>([['height', '200px']]),
+        stylePadding10: new Map<string, string>([['padding', '10px']]),
+        styleMargin10: new Map<string, string>([['margin', '10px']]),
+        styleRounded: new Map<string, string>([['border-radius', '8px']]),
+        styleBorder: new Map<string, string>([['border', '1px solid #ccc']]),
+        styleBorderRed: new Map<string, string>([['border-color', 'red']]),
+        styleBorderBlue: new Map<string, string>([['border-color', 'blue']]),
+        styleBorderGreen: new Map<string, string>([['border-color', 'green']]),
+        styleBgGreen: new Map<string, string>([['background-color', 'green']]),
+        styleBgBlue: new Map<string, string>([['background-color', 'blue']]),
+        styleBgRed: new Map<string, string>([['background-color', 'red']]),
+        styleTextWhite: new Map<string, string>([['color', '#fff']]),
+        styleTextBlack: new Map<string, string>([['color', '#000']]),
+        styleTextRed: new Map<string, string>([['color', 'red']]),
+        styleTextBlue: new Map<string, string>([['color', 'blue']]),
+        styleTextGreen: new Map<string, string>([['color', 'green']]),
+        isClassValid: true,
+        classW200: new Map<string, boolean>([['w-200', true]]),
+        classH200: new Map<string, boolean>([['h-200', true]]),
+        classPadding10: new Map<string, boolean>([['padding-10', true]]),
+        classMargin10: new Map<string, boolean>([['margin-10', true]]),
+        classRounded: new Map<string, boolean>([['rounded', true]]),
+        classBorder: new Map<string, boolean>([['border', true]]),
+        classBorderRed: new Map<string, boolean>([['border-red', true]]),
+        classBorderBlue: new Map<string, boolean>([['border-blue', true]]),
+        classBorderGreen: new Map<string, boolean>([['border-green', true]]),
+        classBgGreen: new Map<string, boolean>([['bg-green', true]]),
+        classBgBlue: new Map<string, boolean>([['bg-blue', true]]),
+        classBgRed: new Map<string, boolean>([['bg-red', true]]),
+        classTextWhite: new Map<string, boolean>([['text-white', true]]),
+        classTextBlack: new Map<string, boolean>([['text-black', true]]),
+        classTextRed: new Map<string, boolean>([['text-red', true]]),
+        classTextBlue: new Map<string, boolean>([['text-blue', true]]),
+        classTextGreen: new Map<string, boolean>([['text-green', true]]),
+      }
+    },
+    methods: {
+      toggleIsClassValid(){
+        this.isClassValid = !this.isClassValid
+        this.classW200 = new Map<string, boolean>([['w-200', this.isClassValid]])
+        this.classH200 = new Map<string, boolean>([['h-200', this.isClassValid]])
+        this.classPadding10 = new Map<string, boolean>([['padding-10', this.isClassValid]])
+        this.classMargin10 = new Map<string, boolean>([['margin-10', this.isClassValid]])
+        this.classRounded = new Map<string, boolean>([['rounded', this.isClassValid]])
+        this.classBorder = new Map<string, boolean>([['border', this.isClassValid]])
+        this.classBorderRed = new Map<string, boolean>([['border-red', this.isClassValid]])
+        this.classBorderBlue = new Map<string, boolean>([['border-blue', this.isClassValid]])
+        this.classBorderGreen = new Map<string, boolean>([['border-green', this.isClassValid]])
+        this.classBgGreen = new Map<string, boolean>([['bg-green', this.isClassValid]])
+        this.classBgBlue = new Map<string, boolean>([['bg-blue', this.isClassValid]])
+        this.classBgRed = new Map<string, boolean>([['bg-red', this.isClassValid]])
+        this.classTextWhite = new Map<string, boolean>([['text-white', this.isClassValid]])
+        this.classTextBlack = new Map<string, boolean>([['text-black', this.isClassValid]])
+        this.classTextRed = new Map<string, boolean>([['text-red', this.isClassValid]])
+        this.classTextBlue = new Map<string, boolean>([['text-blue', this.isClassValid]])
+        this.classTextGreen = new Map<string, boolean>([['text-green', this.isClassValid]])
+      }
+    }
+  }
+</script>
+
+<style>
+  .w-200 {
+    width: 200px;
+  }
+
+  .h-200 {
+    height: 200px;
+  }
+
+  .padding-10 {
+    padding: 10px;
+  }
+
+  .margin-10 {
+    margin: 10px;
+  }
+
+  .rounded {
+    border-radius: 8px;
+  }
+
+  .border {
+    border: 1px solid #ccc;
+  }
+
+  .border-red {
+    border-color: red;
+  }
+
+  .border-green {
+    border-color: green;
+  }
+
+  .border-blue {
+    border-color: blue;
+  }
+
+  .bg-green {
+    background-color: green;
+  }
+
+  .bg-red {
+    background-color: red;
+  }
+
+  .bg-blue {
+    background-color: blue;
+  }
+
+  .text-white {
+    color: #fff;
+  }
+
+  .text-black {
+    color: #000;
+  }
+
+  .text-green {
+    color: green;
+  }
+
+  .text-red {
+    color: red;
+  }
+
+  .text-blue {
+    color: blue;
+  }
+</style>
\ No newline at end of file

pages/rendering/template/template.uvue

-<template>
-	<view class="container">
-		<template v-if="isShow">
-			<view class="title">{{title}}</view>
-		</template>
-		<view class="show-botton" @click="handleShow">{{isShow?'点击隐藏':'点击显示'}}</view>
-		<template v-for="(item,index) in list" :key="index">
-			<view class="item">{{index+1}}.{{item.name}}</view>
-		</template>
-	</view>
-</template>
-
-<script>
-	type objType = {
-		name: string
-	}
-	export default {
-		data() {
-			return {
-				title: "hello",
-				isShow: false,
-				list: [{
-						name: 'foo1'
-					},
-					{
-						name: 'foo2'
-					}
-				] as objType[]
-			}
-		},
-		methods: {
-			handleShow() {
-				this.isShow = !this.isShow
-			}
-		}
-	}
-</script>
-
-<style>
-	.item {
-		display: flex;
-		flex-direction: row;
-		margin: 15px;
-		border: #eee solid 1px;
-	}
+<template>
+  <view class="page">
+    <template v-if="isShow">
+      <view class="title">{{title}}</view>
+    </template>
+    <view class="show-botton" @click="handleShow">{{isShow?'点击隐藏':'点击显示'}}</view>
+    <template v-for="(item,index) in list" :key="index">
+      <view class="item">{{index+1}}.{{item.name}}</view>
+    </template>
+    <button @click="goMapStyle">跳转绑定 Map 类型 style 页面</button>
+  </view>
+</template>
+
+<script>
+  type objType = {
+    name : string
+  }
+  export default {
+    data() {
+      return {
+        title: "hello",
+        isShow: false,
+        list: [{
+          name: 'foo1'
+        },
+        {
+          name: 'foo2'
+        }
+        ] as objType[]
+      }
+    },
+    methods: {
+      handleShow() {
+        this.isShow = !this.isShow
+      },
+      goMapStyle() {
+        uni.navigateTo({ url: '/pages/rendering/template/template-map-style' })
+      }
+    }
+  }
+</script>
+
+<style>
+  .item {
+    display: flex;
+    flex-direction: row;
+    margin: 15px;
+    border: #eee solid 1px;
+  }
 </style>
\ No newline at end of file