feat:选择文字弹窗

2025-06-26 17:12:35 +08:00
parent 0992d9f2d1
commit aa9d74c2d1
12 changed files with 314 additions and 5 deletions
@@ -0,0 +1,10 @@
+{
+    "component": true,
+    "styleIsolation": "isolated",
+    "usingComponents": {
+        "van-popup": "@vant/weapp/popup/index",
+        "toy-button": "/ui/button/button",
+        "van-tab": "@vant/weapp/tab/index",
+        "van-tabs": "@vant/weapp/tabs/index"
+    }
+}
@@ -0,0 +1,12 @@
+.word-picker {
+    padding: 28rpx;
+
+    .word-picker-title {
+        font-size: 32rpx;
+        color: #141414;
+        font-weight: bold;
+        text-align: center;
+        margin-bottom: 28rpx;
+    }
+
+}
@@ -0,0 +1,40 @@
+import { WORDS } from '../../constants/words';
+
+Component({
+    options: {},
+    /**
+     * 组件的属性列表
+     */
+    properties: {
+        show: {
+            type: Boolean,
+            value: false,
+        },
+        currentTab: {
+            type: Number,
+            value: 0,
+        },
+    },
+    /**
+     * 组件的初始数据
+     */
+    data: {
+        wordList: WORDS,
+        selectedWords: [],
+    },
+    lifetimes: {
+        attached() { },
+    },
+    /**
+     * 组件的方法列表
+     */
+    methods: {
+        onClose() {
+            this.triggerEvent('onClose');
+        },
+
+        onTabChange(e: WechatMiniprogram.CustomEvent) {
+            this.setData({ currentTab: e.detail });
+        },
+    },
+});
@@ -0,0 +1,43 @@
+<van-popup
+    show="{{ show }}"
+    bind:close="onClose"
+    round
+    position="bottom"
+    custom-style="height: 60%"
+    custom-class="word-picker">
+    <view class="word-picker-title">请选择文字</view>
+    <van-tabs
+        animated
+        color="#ff1a34"
+        nav-class="nav-class"
+        wrap-class="wrap-class"
+        swipeable
+        active="{{currentTab}}"
+        bind:change="onTabChange">
+        <van-tab
+            wx:for="{{wordList}}"
+            wx:for-index="wordIndex"
+            wx:key="wordIndex"
+            title="{{wordList[wordIndex].categoryName}}">
+            <view class="word-list">
+                <view
+                    class="word-item"
+                    wx:for="{{wordList[wordIndex].words}}"
+                    wx:key="index"
+                    bind:tap="onWordClick">
+                    <text class="word-item-text">{{item}}</text>
+                    <!-- <text class="word-item-icon icon-success"></text> -->
+                </view>
+            </view>
+        </van-tab>
+    </van-tabs>
+    <view class="selected-words">
+        <text class="selected-words-title">已选文字：</text>
+        <text
+            class="selected-word-text"
+            wx:for="{{selectedWords}}"
+            wx:key="index"
+            >{{item}}</text
+        >
+    </view>
+</van-popup>