nutui/src/packages/actionsheet/demo.vue

<template>
  <div class="demo-list demo">
    <h2>基本用法(选择类)</h2>
    <nut-cell
      :showIcon="true"
      :isLink="true"
      @click="switchActionSheet('isVisible1')"
    >
      <span><label>基础用法</label></span>
      <div class="selected-option">{{ state.val1 }}</div>
    </nut-cell>
    <nut-cell
      :showIcon="true"
      :isLink="true"
      @click="switchActionSheet('isVisible2')"
    >
      <span><label>展示取消按钮</label></span>
      <div class="selected-option">{{ state.val2 }}</div>
    </nut-cell>
    <nut-cell :isLink="true" @click="switchActionSheet('isVisible3')">
      <span><label>展示描述信息</label></span>
      <div class="selected-option">{{ state.val3 }}</div>
    </nut-cell>
    <h2>选项状态</h2>

    <nut-cell :isLink="true" @click="switchActionSheet('isVisible4')">
      <span><label>选项状态</label></span>
      <!-- <div class="selected-option">打开</div> -->
    </nut-cell>

    <!-- demo 基础用法 -->
    <nut-actionsheet
      :is-visible="state.isVisible1"
      :menu-items="menuItemsOne"
      @choose="chooseItem"
    ></nut-actionsheet>
    <!-- demo(带取消按钮） -->
    <nut-actionsheet
      :is-visible="state.isVisible2"
      cancel-txt="取消"
      :menu-items="menuItemsOne"
      @choose="chooseItemTwo"
    ></nut-actionsheet>
    <!-- 展示描述信息 -->
    <nut-actionsheet
      :is-visible="state.isVisible3"
      :description="state.desc"
      :menu-items="menuItemsTwo"
      @choose="chooseItemThree"
      cancel-txt="取消"
    >
    </nut-actionsheet>
    <!-- demo 选项状态-->
    <nut-actionsheet
      :is-visible="state.isVisible4"
      cancel-txt="取消"
      :menu-items="menuItemsThree"
      :choose-tag-value="state.chooseTagValue"
    ></nut-actionsheet>
  </div>
</template>

<script lang="ts">
import { reactive } from 'vue';
import { createComponent } from '@/utils/create';
const { createDemo } = createComponent('actionsheet');
interface Item {
  name: string;
  subname?: string;
  disable?: boolean;
}
export default createDemo({
  props: {},
  setup() {
    const state = reactive({
      isVisible1: false,
      isVisible2: false,
      isVisible3: false,
      isVisible4: false,
      isVisible5: false,
      val1: '',
      val2: '',
      val3: '',
      val4: '',
      desc: '这是一段描述信息',
      chooseTagValue: '着色选项'
    });
    const menuItemsOne: Item[] = [
      {
        name: '选项一222'
      },
      {
        name: '选项二'
      },
      {
        name: '选项三'
      }
    ];
    const menuItemsTwo: Item[] = [
      {
        name: '选项一'
      },
      {
        name: '选项二'
      },
      {
        name: '选项三',
        subname: '描述信息'
      }
    ];
    const menuItemsThree: Item[] = [
      {
        name: '着色选项'
      },
      {
        name: '禁用选项',
        disable: true
      }
    ];
    const switchActionSheet = (
      param: 'isVisible1' | 'isVisible2' | 'isVisible3' | 'isVisible4'
    ) => {
      state[param] = !state[param];
    };

    const chooseItem = (itemParams: any) => {
      console.log(itemParams, 'itemParams');
      state.val1 = itemParams.name;
    };

    function chooseItemTwo(itemParams: Item) {
      state.val2 = itemParams.name;
    }
    function chooseItemThree(itemParams: Item) {
      state.val3 = itemParams.name;
    }

    return {
      state,
      menuItemsOne,
      menuItemsTwo,
      menuItemsThree,
      chooseItem,
      chooseItemTwo,
      chooseItemThree,
      switchActionSheet
    };
  }
});
</script>

<style lang="scss" scoped>
.custom-wrap {
  padding: 110px 0;
  text-align: center;
}
.nut-cell {
  justify-content: space-between;
}
.myContent {
  padding: 10px 10px 160px;
}
</style>