feat:Release to dev

examples/sites/demos/pc/app/dropdown/disabled-composition-api.vue

@@ -1,22 +1,19 @@
 <template>
   <div>
-    <tiny-dropdown>
+    <p>场景1：下拉菜单禁用</p>
+    <tiny-dropdown disabled>
       <template #dropdown>
         <tiny-dropdown-menu>
           <tiny-dropdown-item>黄金糕</tiny-dropdown-item>
           <tiny-dropdown-item>狮子头</tiny-dropdown-item>
           <tiny-dropdown-item>螺蛳粉</tiny-dropdown-item>
-          <tiny-dropdown-item disabled>不能选择</tiny-dropdown-item>
+          <tiny-dropdown-item>双皮奶</tiny-dropdown-item>
           <tiny-dropdown-item>蚵仔煎</tiny-dropdown-item>
         </tiny-dropdown-menu>
       </template>
     </tiny-dropdown>
-
-    <br />
-    <br />
-    <br />
-
-    <tiny-dropdown disabled>
+    <p>场景2：按钮类型禁用</p>
+    <tiny-dropdown split-button disabled>
       <template #dropdown>
         <tiny-dropdown-menu>
           <tiny-dropdown-item>黄金糕</tiny-dropdown-item>
@@ -27,6 +24,18 @@
         </tiny-dropdown-menu>
       </template>
     </tiny-dropdown>
+    <p>场景3：菜单项禁用</p>
+    <tiny-dropdown>
+      <template #dropdown>
+        <tiny-dropdown-menu>
+          <tiny-dropdown-item>黄金糕</tiny-dropdown-item>
+          <tiny-dropdown-item>狮子头</tiny-dropdown-item>
+          <tiny-dropdown-item>螺蛳粉</tiny-dropdown-item>
+          <tiny-dropdown-item disabled>不能选择</tiny-dropdown-item>
+          <tiny-dropdown-item>蚵仔煎</tiny-dropdown-item>
+        </tiny-dropdown-menu>
+      </template>
+    </tiny-dropdown>
   </div>
 </template>
 

examples/sites/demos/pc/app/dropdown/disabled.vue

@@ -1,22 +1,19 @@
 <template>
   <div>
-    <tiny-dropdown>
+    <p>场景1：下拉菜单禁用</p>
+    <tiny-dropdown disabled>
       <template #dropdown>
         <tiny-dropdown-menu>
           <tiny-dropdown-item>黄金糕</tiny-dropdown-item>
           <tiny-dropdown-item>狮子头</tiny-dropdown-item>
           <tiny-dropdown-item>螺蛳粉</tiny-dropdown-item>
-          <tiny-dropdown-item disabled>不能选择</tiny-dropdown-item>
+          <tiny-dropdown-item>双皮奶</tiny-dropdown-item>
           <tiny-dropdown-item>蚵仔煎</tiny-dropdown-item>
         </tiny-dropdown-menu>
       </template>
     </tiny-dropdown>
-
-    <br />
-    <br />
-    <br />
-
-    <tiny-dropdown disabled>
+    <p>场景2：按钮类型禁用</p>
+    <tiny-dropdown split-button disabled>
       <template #dropdown>
         <tiny-dropdown-menu>
           <tiny-dropdown-item>黄金糕</tiny-dropdown-item>
@@ -27,6 +24,18 @@
         </tiny-dropdown-menu>
       </template>
     </tiny-dropdown>
+    <p>场景3：菜单项禁用</p>
+    <tiny-dropdown>
+      <template #dropdown>
+        <tiny-dropdown-menu>
+          <tiny-dropdown-item>黄金糕</tiny-dropdown-item>
+          <tiny-dropdown-item>狮子头</tiny-dropdown-item>
+          <tiny-dropdown-item>螺蛳粉</tiny-dropdown-item>
+          <tiny-dropdown-item disabled>不能选择</tiny-dropdown-item>
+          <tiny-dropdown-item>蚵仔煎</tiny-dropdown-item>
+        </tiny-dropdown-menu>
+      </template>
+    </tiny-dropdown>
   </div>
 </template>
 
@@ -41,3 +50,10 @@ export default {
   }
 }
 </script>
+
+<style lang="less" scoped>
+p {
+  line-height: 1.5;
+  font-size: 14px;
+}
+</style>

examples/sites/demos/pc/app/dropdown/events-composition-api.vue

@@ -1,27 +1,63 @@
 <template>
-  <tiny-dropdown split-button @item-click="itemClick" @button-click="buttonClick" @visible-change="visibleChange">
-    下拉菜单
-    <template #dropdown>
-      <tiny-dropdown-menu>
-        <tiny-dropdown-item label="黄金糕"></tiny-dropdown-item>
-        <tiny-dropdown-item>狮子头</tiny-dropdown-item>
-        <tiny-dropdown-item>螺蛳粉</tiny-dropdown-item>
-        <tiny-dropdown-item disabled>双皮奶</tiny-dropdown-item>
-        <tiny-dropdown-item divided>蚵仔煎</tiny-dropdown-item>
-      </tiny-dropdown-menu>
-    </template>
-  </tiny-dropdown>
+  <div>
+    <p>场景1：按钮类型 + 循环 tiny-dropdown-item</p>
+
+    <tiny-dropdown split-button @item-click="itemClick" @button-click="buttonClick" @visible-change="visibleChange">
+      <template #dropdown>
+        <tiny-dropdown-menu>
+          <tiny-dropdown-item
+            v-for="(item, index) in options"
+            :key="index"
+            :label="item.label"
+            :disabled="item.disabled"
+            :divided="item.divided"
+            :icon="item.icon"
+            :item-data="item"
+          ></tiny-dropdown-item>
+        </tiny-dropdown-menu>
+      </template>
+    </tiny-dropdown>
+
+    <p>场景2：配置式</p>
+    <tiny-dropdown @item-click="itemClick" @button-click="buttonClick" @visible-change="visibleChange">
+      <template #dropdown>
+        <tiny-dropdown-menu :options="options"> </tiny-dropdown-menu>
+      </template>
+    </tiny-dropdown>
+  </div>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import {
   Dropdown as TinyDropdown,
   DropdownMenu as TinyDropdownMenu,
   DropdownItem as TinyDropdownItem,
   Notify
 } from '@opentiny/vue'
+import { iconStarDisable } from '@opentiny/vue-icon'
+
+const options = [
+  {
+    label: '黄金糕'
+  },
+  {
+    label: '狮子头',
+    disabled: true
+  },
+  {
+    label: '螺蛳粉',
+    divided: true
+  },
+  {
+    label: '双皮奶',
+    icon: iconStarDisable()
+  },
+  {
+    label: '蚵仔煎'
+  }
+]
 
-function itemClick(data) {
+const itemClick = (data) => {
   Notify({
     type: 'info',
     title: 'itemClick 回调事件',
@@ -31,14 +67,21 @@ function itemClick(data) {
   })
 }
 
-function buttonClick() {
+const buttonClick = () => {
   Notify({ message: '下拉菜单内置按钮点击事件', status: 'info' })
 }
 
-function visibleChange(status) {
+const visibleChange = (status) => {
   Notify({
     message: `下拉菜单显隐事件，当前为${status ? '显示' : '隐藏'}`,
     status: 'info'
   })
 }
 </script>
+
+<style lang="less" scoped>
+p {
+  line-height: 1.5;
+  font-size: 14px;
+}
+</style>

examples/sites/demos/pc/app/dropdown/events.vue

@@ -1,27 +1,65 @@
 <template>
-  <tiny-dropdown split-button @item-click="itemClick" @button-click="buttonClick" @visible-change="visibleChange">
-    下拉菜单
-    <template #dropdown>
-      <tiny-dropdown-menu>
-        <tiny-dropdown-item label="黄金糕"></tiny-dropdown-item>
-        <tiny-dropdown-item>狮子头</tiny-dropdown-item>
-        <tiny-dropdown-item>螺蛳粉</tiny-dropdown-item>
-        <tiny-dropdown-item disabled>双皮奶</tiny-dropdown-item>
-        <tiny-dropdown-item divided>蚵仔煎</tiny-dropdown-item>
-      </tiny-dropdown-menu>
-    </template>
-  </tiny-dropdown>
+  <div>
+    <p>场景1：按钮类型 + 循环 tiny-dropdown-item</p>
+    <tiny-dropdown split-button @item-click="itemClick" @button-click="buttonClick" @visible-change="visibleChange">
+      <template #dropdown>
+        <tiny-dropdown-menu>
+          <tiny-dropdown-item
+            v-for="(item, index) in options"
+            :key="index"
+            :label="item.label"
+            :disabled="item.disabled"
+            :divided="item.divided"
+            :icon="item.icon"
+            :item-data="item"
+          ></tiny-dropdown-item>
+        </tiny-dropdown-menu>
+      </template>
+    </tiny-dropdown>
+
+    <p>场景2：配置式</p>
+    <tiny-dropdown @item-click="itemClick" @button-click="buttonClick" @visible-change="visibleChange">
+      <template #dropdown>
+        <tiny-dropdown-menu :options="options"> </tiny-dropdown-menu>
+      </template>
+    </tiny-dropdown>
+  </div>
 </template>
 
-<script lang="jsx">
+<script>
 import { Dropdown, DropdownMenu, DropdownItem, Notify } from '@opentiny/vue'
+import { iconStarDisable } from '@opentiny/vue-icon'
 
 export default {
   components: {
     TinyDropdown: Dropdown,
     TinyDropdownMenu: DropdownMenu,
     TinyDropdownItem: DropdownItem
   },
+  data() {
+    return {
+      options: [
+        {
+          label: '黄金糕'
+        },
+        {
+          label: '狮子头',
+          disabled: true
+        },
+        {
+          label: '螺蛳粉',
+          divided: true
+        },
+        {
+          label: '双皮奶',
+          icon: iconStarDisable()
+        },
+        {
+          label: '蚵仔煎'
+        }
+      ]
+    }
+  },
   methods: {
     itemClick(data) {
       Notify({
@@ -44,3 +82,10 @@ export default {
   }
 }
 </script>
+
+<style lang="less" scoped>
+p {
+  line-height: 1.5;
+  font-size: 14px;
+}
+</style>

examples/sites/demos/pc/app/dropdown/hide-on-click-composition-api.vue

@@ -1,15 +1,18 @@
 <template>
-  <tiny-dropdown :hide-on-click="false">
-    <template #dropdown>
-      <tiny-dropdown-menu>
-        <tiny-dropdown-item>黄金糕</tiny-dropdown-item>
-        <tiny-dropdown-item>狮子头</tiny-dropdown-item>
-        <tiny-dropdown-item>螺蛳粉</tiny-dropdown-item>
-        <tiny-dropdown-item disabled>双皮奶</tiny-dropdown-item>
-        <tiny-dropdown-item divided>蚵仔煎</tiny-dropdown-item>
-      </tiny-dropdown-menu>
-    </template>
-  </tiny-dropdown>
+  <div>
+    <p>点击后不收起菜单弹框:</p>
+    <tiny-dropdown :hide-on-click="false">
+      <template #dropdown>
+        <tiny-dropdown-menu>
+          <tiny-dropdown-item>黄金糕</tiny-dropdown-item>
+          <tiny-dropdown-item>狮子头</tiny-dropdown-item>
+          <tiny-dropdown-item>螺蛳粉</tiny-dropdown-item>
+          <tiny-dropdown-item disabled>双皮奶</tiny-dropdown-item>
+          <tiny-dropdown-item divided>蚵仔煎</tiny-dropdown-item>
+        </tiny-dropdown-menu>
+      </template>
+    </tiny-dropdown>
+  </div>
 </template>
 
 <script setup>
@@ -19,3 +22,10 @@ import {
   DropdownItem as TinyDropdownItem
 } from '@opentiny/vue'
 </script>
+
+<style lang="less" scoped>
+p {
+  line-height: 1.5;
+  font-size: 14px;
+}
+</style>

examples/sites/demos/pc/app/dropdown/hide-on-click.vue

@@ -1,15 +1,18 @@
 <template>
-  <tiny-dropdown :hide-on-click="false">
-    <template #dropdown>
-      <tiny-dropdown-menu>
-        <tiny-dropdown-item>黄金糕</tiny-dropdown-item>
-        <tiny-dropdown-item>狮子头</tiny-dropdown-item>
-        <tiny-dropdown-item>螺蛳粉</tiny-dropdown-item>
-        <tiny-dropdown-item disabled>双皮奶</tiny-dropdown-item>
-        <tiny-dropdown-item divided>蚵仔煎</tiny-dropdown-item>
-      </tiny-dropdown-menu>
-    </template>
-  </tiny-dropdown>
+  <div>
+    <p>点击后不收起菜单弹框:</p>
+    <tiny-dropdown :hide-on-click="false">
+      <template #dropdown>
+        <tiny-dropdown-menu>
+          <tiny-dropdown-item>黄金糕</tiny-dropdown-item>
+          <tiny-dropdown-item>狮子头</tiny-dropdown-item>
+          <tiny-dropdown-item>螺蛳粉</tiny-dropdown-item>
+          <tiny-dropdown-item disabled>双皮奶</tiny-dropdown-item>
+          <tiny-dropdown-item divided>蚵仔煎</tiny-dropdown-item>
+        </tiny-dropdown-menu>
+      </template>
+    </tiny-dropdown>
+  </div>
 </template>
 
 <script>
@@ -23,3 +26,10 @@ export default {
   }
 }
 </script>
+
+<style lang="less" scoped>
+p {
+  line-height: 1.5;
+  font-size: 14px;
+}
+</style>