组件库文档 tmui.design
左滑操作栏 SlideSwitch
可以向左滑动来展示操作按钮的单元格组件。
🌶️ 左滑操作栏 SlideSwitch 示例
查看模拟效果+
示例模板
vue
<template>
<tm-app>
<tm-sheet>
<tm-text :fontSize="24" _class="font-weight-b" label="通过与cell组件组合可滑动列表"></tm-text>
</tm-sheet>
<tm-sheet :padding="[0,0]" :margin="[32,0,32,0]">
<tm-slide-switch v-model:open-status="isopen" @click="cellClick" :rightMenu="action" :width="686" :height="84" >
<tm-cell :margin="[0,0]" title="向左滑动,并点击底部按钮"></tm-cell>
<template v-slot:right>
<view class="flex flex-row flex-row-center-end">
<tm-sheet _class="flex flex-row flex-row-center-center"
:width="w" :height="84" color="red" no-level :margin="[0]" :padding="[0]">
<tm-text :userInteractionEnabled="false" label="收藏"></tm-text>
</tm-sheet>
<tm-sheet _class="flex flex-row flex-row-center-center" :width="w" :height="84" color="primary" no-level :margin="[0]" :padding="[0]">
<tm-text :userInteractionEnabled="false" label="删除"></tm-text>
</tm-sheet>
</view>
</template>
</tm-slide-switch>
<tm-slide-switch disabled :width="686" :height="84" >
<tm-cell :margin="[0,0]" title="我被禁用了"></tm-cell>
<template v-slot:right>
<view class="flex flex-row flex-row-center-end">
<tm-sheet _class="flex flex-row flex-row-center-center"
:width="w" :height="84" color="red" no-level :margin="[0]" :padding="[0]">
<tm-text :userInteractionEnabled="false" label="收藏"></tm-text>
</tm-sheet>
<tm-sheet _class="flex flex-row flex-row-center-center" :width="w" :height="84" color="primary" no-level :margin="[0]" :padding="[0]">
<tm-text :userInteractionEnabled="false" label="删除"></tm-text>
</tm-sheet>
</view>
</template>
</tm-slide-switch>
<tm-slide-switch v-for="item in 4" :key="item" :width="686" :height="84" >
<tm-cell :margin="[0,0]" :title="'向左滑动试'+item"></tm-cell>
<template v-slot:right>
<view class="flex flex-row flex-row-center-end">
<tm-sheet _class="flex flex-row flex-row-center-center"
:width="w" :height="84" color="green" no-level :margin="[0]" :padding="[0]">
<tm-text :userInteractionEnabled="false" label="哈哈"></tm-text>
</tm-sheet>
<tm-sheet _class="flex flex-row flex-row-center-center" :width="w" :height="84" color="primary" no-level :margin="[0]" :padding="[0]">
<tm-text :userInteractionEnabled="false" label="删除"></tm-text>
</tm-sheet>
</view>
</template>
</tm-slide-switch>
</tm-sheet>
<tm-sheet>
<tm-text :fontSize="24" _class="font-weight-b" label="利用插槽放置其它组件"></tm-text>
</tm-sheet>
<view class="mx-32 round-2 overflow">
<tm-slide-switch :right-width="220" v-model:open-status="isopen" :width="686" :height="300" :round="0" :action="action">
<tm-card :margin="[0,0]" :shadow="0" status="2022-5-2" title="向左滑动试下" content="这是一个基础卡片示例,非常简单且实用。这是一个基础卡片示例,非常简单且实用。">
<template v-slot:action>
<view class="flex flex-1 flex-row flex-row-center-end">
<tm-button :margin="[24,0]" label="确认" :font-size="24" :width="120" :height="50"></tm-button>
<tm-button color="white" label="取消" :font-size="24" :width="120" :height="50"></tm-button>
</view>
</template>
</tm-card>
<template v-slot:right>
<view class="flex flex-row flex-row-center-end">
<tm-sheet :width="110" _class="flex flex-row flex-row-center-center"
:height="300" color="red" no-level :margin="[0]" :padding="[0]">
<tm-text :userInteractionEnabled="false" label="收藏"></tm-text>
</tm-sheet>
<tm-sheet :width="110" _class="flex flex-row flex-row-center-center" :height="300" color="primary" no-level :margin="[0]" :padding="[0]">
<tm-text :userInteractionEnabled="false" label="删除"></tm-text>
</tm-sheet>
</view>
</template>
</tm-slide-switch>
</view>
</tm-app>
</template>
<script lang="ts" setup>
import {ref} from "vue"
import tmSlideSwitch from "@/tmui/components/tm-slide-switch/tm-slide-switch.vue"
import tmCell from "@/tmui/components/tm-cell/tm-cell.vue"
import tmApp from "@/tmui/components/tm-app/tm-app.vue"
import tmSheet from "@/tmui/components/tm-sheet/tm-sheet.vue"
import tmCard from "@/tmui/components/tm-card/tm-card.vue"
import tmButton from "@/tmui/components/tm-button/tm-button.vue"
import tmText from "@/tmui/components/tm-text/tm-text.vue"
import tmDivider from "@/tmui/components/tm-divider/tm-divider.vue"
const w = 110
const isopen = ref(true)
const action = ref([
{text:"操作",color:"black"},
{text:"删除按钮",color:"green",icon:'tmicon-delete'},
])
function onclick(item,index){
console.log(item,index)
uni.showToast({
title:`点击${item.text}`
})
}
function cellClick () {
uni.showToast({
title:`点击了内容区域`
})
}
</script>
<style>
</style>
🌶️ 兼容性
APP-VUE | APP-NVUE | 小程序 | WEB/H5 | VUE3/TS |
---|---|---|---|---|
✔️ | ✔️ | ✔️ | ✔️ | ✔️ |
🌱 参数
本组件含有公共属性 公共属性
参数名 | 类型 | 默认值 | 描述 |
---|---|---|---|
width | Number | 750 | 宽度 |
height | Number | 88 | 高度 |
action | [actionItem] | [] | 按钮数据数组(见下方说明) |
disabled | Boolean | false | 是否禁用 |
transprent | Boolean | false | 是否透明效果 |
color | String | white | 主题颜色 |
round | Number | 0 | 圆角像素 |
openStatus | Boolean | false | 为true状态下可以使用v-model:open-status |
rightWidth | Number | 120 | 左滑区域的宽度(右边底部展开的宽度) |
- 按钮数据参数
javascript
actionItem {
text: string,//操作按钮的文本,
width: number,//按钮宽度
color: string,//主题色
icon: string,//图标
[prop: string]:any
}
🌹 事件
事件名 | 参数 | 返回数据 | 描述 |
---|---|---|---|
click | - | - | 内容区域点击事件 |
close | - | - | 打开触发 |
open | - | - | 关闭触发 |
update:open-status | - | - | 滑动开启状态(更新v-model值) |
🌽 slot插槽
默认default,内容区域 left,左边低部菜单区域(暂时不开放),右滑显示出来. right,右边底部菜单区域,左滑时会显示出来
🥗 ref方法
无
💏 文档贡献
此页文档由Kyour贡献,如果对该框架感兴趣的可以参与我们一同进步!