引入组件

局部引入

// parent.vue
const FActionSheet = defineAsyncComponent(() => import('@/components/formaui/f-action-sheet/f-action-sheet.vue'))

基础用法

<f-action-sheet v-model="showActionSheet" :items="items" @item-click="clickItem"></f-action-sheet>
<f-button width="200rpx" margin="200rpx auto" @click="showActionSheet = true">click</f-button>

import { ref } from 'vue'
const showActionSheet = ref<boolean>(false)
const items = ref([
  { label: '选项1', value: 1, disabled: true },
  { label: '选项2', value: 2 },
  { label: '选项3', value: 3 }
])
const clickItem = (value: string | number) => {
  uni.showToast({ title: value.toString(), icon: 'none' })
}

插槽

名称	说明
header	头部显示内容

属性

名称	类型	说明	默认值
items	{label:string; value:string/number; color?:string; disabled?:boolean}[]	列表项	[]
isMask	boolean	是否显示遮罩层	true
closeOnClickMask	boolean	是否点击遮罩层关闭键盘	true
borderRadius	string	自定义圆角大小	16rpx
fontSize	string	自定义字体大小	32rpx
textColor	string	自定义字体颜色	#0B1D4A
isCancel	boolean	是否展示取消按钮	true
cancelText	string	自定义取消按钮文字	取消
cancelColor	string	自定义取消按钮字体颜色	#0B1D4A
cancelBgColor	string	自定义取消按钮背景颜色	#E7E6EB
bgColor	string	自定义键盘背景颜色	#FFFFFF

事件

事件名	说明	回调参数
itemClick	点击actionsheet上的cell时触发	cell绑定的值

方法

方法名	说明	传入参数
-	-	-