feat: taro actionsheet

src/config.json

@@ -155,6 +155,7 @@
         },
         {
           "name": "ActionSheet",
+          "taro": true,
           "sort": "1",
           "cName": "动作面板",
           "type": "component",

src/packages/__VUE/actionsheet/demo.vue

@@ -63,14 +63,12 @@
 
 <script lang="ts">
 import { reactive } from 'vue';
-import { createComponent } from '@/packages/utils/create';
-const { createDemo } = createComponent('actionsheet');
 interface Item {
   name: string;
   subname?: string;
   disable?: boolean;
 }
-export default createDemo({
+export default {
   props: {},
   setup() {
     const state = reactive({
@@ -147,7 +145,7 @@ export default createDemo({
       switchActionSheet
     };
   }
-});
+};
 </script>
 
 <style lang="scss" scoped>

src/packages/__VUE/actionsheet/index.taro.vue

@@ -0,0 +1,125 @@
+<template>
+  <view :class="classes">
+    <nut-popup
+      pop-class="popclass"
+      :visible="visible"
+      position="bottom"
+      round
+      @click-overlay="close"
+    >
+      <view class="nut-actionsheet-panel">
+        <view v-if="title" class="nut-actionsheet-title">{{ title }}</view>
+        <view class="nut-actionsheet-item desc" v-if="description">{{
+          description
+        }}</view>
+        <view class="nut-actionsheet-menu" v-if="menuItems.length">
+          <view
+            v-for="(item, index) of menuItems"
+            class="nut-actionsheet-item"
+            :class="{ 'nut-actionsheet-item-disabled': item.disable }"
+            :style="{ color: isHighlight(item) }"
+            :key="index"
+            @click="chooseItem(item, index)"
+            >{{ item[optionTag]
+            }}<view class="subdesc">{{ item[optionSubTag] }}</view>
+          </view>
+        </view>
+        <view
+          class="nut-actionsheet-cancel"
+          v-if="cancelTxt"
+          @click="cancelActionSheet"
+        >
+          {{ cancelTxt }}
+        </view>
+      </view>
+    </nut-popup>
+  </view>
+</template>
+<script>
+import { createComponent } from '@/packages/utils/create';
+import { computed } from 'vue';
+const { componentName, create } = createComponent('actionsheet');
+import { popupProps } from '@/packages/__VUE/popup/index.vue';
+export default create({
+  props: {
+    ...popupProps,
+    cancelTxt: {
+      type: String,
+      default: ''
+    },
+    optionTag: {
+      type: String,
+      default: 'name'
+    },
+    optionSubTag: {
+      type: String,
+      default: 'subname'
+    },
+    chooseTagValue: {
+      type: String,
+      default: ''
+    },
+    title: {
+      type: String,
+      default: ''
+    },
+    color: {
+      type: String,
+      default: '#ee0a24'
+    },
+    description: {
+      type: String,
+      default: ''
+    },
+    menuItems: {
+      type: Array,
+      default: () => []
+    }
+  },
+  emits: ['cancel', 'choose', 'update:visible'],
+
+  setup(props, { emit }) {
+    const classes = computed(() => {
+      const prefixCls = componentName;
+      return {
+        [prefixCls]: true
+      };
+    });
+
+    const isHighlight = item => {
+      return props.chooseTagValue &&
+        props.chooseTagValue === item[props.optionTag]
+        ? props.color
+        : '#1a1a1a';
+    };
+
+    const cancelActionSheet = () => {
+      emit('cancel');
+      emit('update:visible', false);
+    };
+
+    const chooseItem = (item, index) => {
+      if (!item.disable) {
+        emit('choose', item, index);
+        emit('update:visible', false);
+      }
+    };
+
+    const close = () => {
+      emit('close');
+      emit('update:visible', false);
+    };
+
+    return {
+      isHighlight,
+      cancelActionSheet,
+      chooseItem,
+      close,
+      classes
+    };
+  }
+});
+</script>
+<style lang="scss">
+@import 'index.scss';
+</style>

src/sites/mobile-taro/vue/project.config.json

@@ -2,7 +2,7 @@
   "miniprogramRoot": "dist/",
   "projectname": "%40nutui%2Fnutui-taro-mobile",
   "description": "nutui-taro-vue",
-  "appid": "wxee296c9bffc451d9",
+  "appid": "wxca272ba6bdf568d8",
   "setting": {
     "urlCheck": true,
     "es6": false,
@@ -23,13 +23,14 @@
     "compileHotReLoad": false,
     "useMultiFrameRuntime": true,
     "useApiHook": true,
-    "useApiHostProcess": true,
+    "useApiHostProcess": false,
     "babelSetting": {
       "ignore": [],
       "disablePlugins": [],
       "outputPath": ""
     },
     "enableEngineNative": false,
+    "bundle": false,
     "useIsolateContext": true,
     "useCompilerModule": true,
     "userConfirmedUseCompilerModuleSwitch": false,

src/sites/mobile-taro/vue/src/app.config.ts

@@ -1,5 +1,6 @@
 export default {
   pages: [
+    'pages/actionsheet/index',
     'pages/popup/index',
     'pages/icon/index',
     'pages/inputnumber/index',

src/sites/mobile-taro/vue/src/pages/actionsheet/index.config.ts

@@ -0,0 +1,3 @@
+export default {
+  navigationBarTitleText: 'ActionSheet'
+};

src/sites/mobile-taro/vue/src/pages/actionsheet/index.vue

@@ -0,0 +1,162 @@
+<template>
+  <div class="demo">
+    <h2>基本用法</h2>
+    <nut-cell
+      :show-icon="true"
+      :isLink="true"
+      @click="switchActionSheet('isVisible1')"
+    >
+      <span><label>基础用法</label></span>
+      <div class="selected-option" v-html="state.val1"></div>
+    </nut-cell>
+    <nut-cell
+      :showIcon="true"
+      :isLink="true"
+      @click="switchActionSheet('isVisible2')"
+    >
+      <span><label>展示取消按钮</label></span>
+      <div class="selected-option" v-html="state.val2"></div>
+    </nut-cell>
+    <nut-cell :isLink="true" @click="switchActionSheet('isVisible3')">
+      <span><label>展示描述信息</label></span>
+      <div class="selected-option" v-html="state.val3"></div>
+    </nut-cell>
+    <h2>选项状态</h2>
+
+    <nut-cell :isLink="true" @click="switchActionSheet('isVisible4')">
+      <span><label>选项状态</label></span>
+    </nut-cell>
+
+    <!-- demo 基础用法 -->
+    <nut-actionsheet
+      v-model:visible="state.isVisible1"
+      :menu-items="menuItemsOne"
+      @choose="chooseItem"
+    >
+    </nut-actionsheet>
+    <!-- demo(带取消按钮） -->
+    <nut-actionsheet
+      v-model:visible="state.isVisible2"
+      cancel-txt="取消"
+      :menu-items="menuItemsOne"
+      @choose="chooseItemTwo"
+    >
+    </nut-actionsheet>
+    <!-- 展示描述信息 -->
+    <nut-actionsheet
+      v-model:visible="state.isVisible3"
+      :description="state.desc"
+      :menu-items="menuItemsTwo"
+      @choose="chooseItemThree"
+      cancel-txt="取消"
+    >
+    </nut-actionsheet>
+    <!-- demo 选项状态-->
+    <nut-actionsheet
+      v-model:visible="state.isVisible4"
+      cancel-txt="取消"
+      :menu-items="menuItemsThree"
+      :choose-tag-value="state.chooseTagValue"
+    ></nut-actionsheet>
+  </div>
+</template>
+
+<script lang="ts">
+import { reactive } from 'vue';
+interface Item {
+  name: string;
+  subname?: string;
+  disable?: boolean;
+}
+export default {
+  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: '选项一'
+      },
+      {
+        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">
+.custom-wrap {
+  padding: 110px 0;
+  text-align: center;
+}
+.nut-cell {
+  justify-content: space-between;
+}
+.myContent {
+  padding: 10px 10px 160px;
+}
+</style>