提交 d048b586 编写于 作者: DCloud-WZF's avatar DCloud-WZF 💬

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

上级 ca5dae6b
......@@ -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",
......
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
<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
<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
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册