action-sheet.uvue 5.6 KB
Newer Older
Y
yurj26 已提交
1 2 3
<template>
    <view>
        <page-head :title="title"></page-head>
杜庆泉's avatar
杜庆泉 已提交
4 5 6 7 8 9 10 11 12 13 14 15
		<view class="uni-list">
		    <radio-group @change="radioChange">
		        <radio class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in items" :key="item.value"
		            :class="index < items.length - 1 ? 'uni-list-cell-line': ''" :value="item.value"
		            :checked="index === current">
		            {{item.name}}
		        </radio>
		    </radio-group>
		</view>
		<view class="uni-list">
		  <view class="uni-list-cell uni-list-cell-pd">
		    <view class="uni-list-cell-db">自定义itemColor</view>
杜庆泉's avatar
杜庆泉 已提交
16
		    <switch :checked="itemColorCustom" @change="itemColorChange"/>
杜庆泉's avatar
杜庆泉 已提交
17
		  </view>
杜庆泉's avatar
杜庆泉 已提交
18 19 20 21
		  <view class="uni-list-cell uni-list-cell-pd">
		    <view class="uni-list-cell-db">超长列表文本</view>
		    <switch :checked="itemContentLarge" @change="itemContentLargeChange"/>
		  </view>
杜庆泉's avatar
杜庆泉 已提交
22 23 24 25
		  <view class="uni-list-cell uni-list-cell-pd">
		    <view class="uni-list-cell-db">大量选项</view>
		    <switch :checked="itemNumLargeSelect" @change="itemNumLargeChange"/>
		  </view>
杜庆泉's avatar
杜庆泉 已提交
26
		</view>
Y
yurj26 已提交
27 28
        <view class="uni-padding-wrap">
            <view class="uni-btn-v">
杜庆泉's avatar
杜庆泉 已提交
29
                <button class="uni-btn-v" type="default" @tap="actionSheetTap">弹出action sheet</button>
Y
yurj26 已提交
30 31 32 33 34
            </view>
        </view>
    </view>
</template>
<script lang="ts">
杜庆泉's avatar
杜庆泉 已提交
35 36 37 38
	type ItemType = {
	    value : string,
	    name : string,
	}
Y
yurj26 已提交
39 40 41 42
    export default {
        data() {
            return {
                title: 'action-sheet',
杜庆泉's avatar
杜庆泉 已提交
43
				itemColorCustom:false,
杜庆泉's avatar
杜庆泉 已提交
44
				itemContentLarge:false,
杜庆泉's avatar
杜庆泉 已提交
45
				itemNumLargeSelect:false,
杜庆泉's avatar
杜庆泉 已提交
46 47 48 49 50 51 52 53 54 55 56 57 58 59
				items: [{
				    value: '标题',
				    name: '有标题'
				},
				{
				    value: '',
				    name: '无标题'
				},
				{
				    value: '超长标题测试内容,测试超过显示最大范围之后的样式-超长标题测试内容,测试超过显示最大范围之后的样式',
				    name: '超长标题'
				}
				] as ItemType[],
				current: 0,
Y
yurj26 已提交
60 61 62 63 64 65 66 67 68 69 70 71 72 73 74
                // #ifdef H5
                buttonRect: {},
                // #endif
            }
        },
        // #ifdef H5
        onReady() {
            this.getNodeInfo()
            window.addEventListener('resize', this.getNodeInfo)
        },
        beforeDestroy() {
            window.removeEventListener('resize', this.getNodeInfo)
        },
        // #endif
        methods: {
杜庆泉's avatar
杜庆泉 已提交
75 76 77 78 79 80 81 82
			radioChange(e : RadioGroupChangeEvent) {
			    for (let i = 0; i < this.items.length; i++) {
			        if (this.items[i].value === e.detail.value) {
			            this.current = i;
			            break;
			        }
			    }
			},
杜庆泉's avatar
杜庆泉 已提交
83 84 85
			itemContentLargeChange: function (e : SwitchChangeEvent) {
				this.itemContentLarge = e.detail.value
			},
杜庆泉's avatar
杜庆泉 已提交
86 87 88
			itemColorChange: function (e : SwitchChangeEvent) {
				this.itemColorCustom = e.detail.value
			},
杜庆泉's avatar
杜庆泉 已提交
89 90 91
			itemNumLargeChange: function (e : SwitchChangeEvent) {
				this.itemNumLargeSelect = e.detail.value
			},
Y
yurj26 已提交
92
            actionSheetTap() {
杜庆泉's avatar
杜庆泉 已提交
93
				
杜庆泉's avatar
杜庆泉 已提交
94 95 96 97
				let itemInfo = ['item1', 'item2', 'item3', 'item4']
				
				if(this.itemContentLarge){
					itemInfo = ['两个黄鹂鸣翠柳,一行白鹭上青天。窗含西岭千秋雪,门泊东吴万里船', '水光潋滟晴方好,山色空蒙雨亦奇。 欲把西湖比西子,淡妆浓抹总相宜', '']
杜庆泉's avatar
杜庆泉 已提交
98 99 100 101 102 103
				}else if(this.itemNumLargeSelect){
					// 大量选项测试,不能超过6个元素 https://uniapp.dcloud.net.cn/api/ui/prompt.html#showactionsheet
					itemInfo = []
					for (var i = 1; i <= 10; i++) {
					    itemInfo.push('两个黄鹂鸣翠柳,一行白鹭上青天');
					}
杜庆泉's avatar
杜庆泉 已提交
104 105
				}
				
杜庆泉's avatar
杜庆泉 已提交
106 107 108 109
				const that = this
				if(this.itemColorCustom){
					uni.showActionSheet({
					    title: this.items[this.current].value,
杜庆泉's avatar
杜庆泉 已提交
110
					    itemList: itemInfo,
杜庆泉's avatar
杜庆泉 已提交
111 112 113 114 115 116 117 118 119 120 121 122 123 124
						itemColor:"#ff00ff",
					    // #ifdef H5
					    popover: {
					        // 104: navbar + topwindow 高度,暂时 fix createSelectorQuery 在 pc 上获取 top 不准确的 bug
					        top: that.buttonRect.top + 104 + that.buttonRect.height,
					        left: that.buttonRect.left + that.buttonRect.width / 2
					    },
					    // #endif
					    success: (e) => {
					        console.log(e.tapIndex);
					        uni.showToast({
					            title: "点击了第" + e.tapIndex + "个选项",
					            icon: "none"
					        })
杜庆泉's avatar
杜庆泉 已提交
125 126 127 128
					    },
						fail: (e) => {
						    console.log(e);
						}
杜庆泉's avatar
杜庆泉 已提交
129 130 131 132
					})
				}else{
					uni.showActionSheet({
					    title: this.items[this.current].value,
杜庆泉's avatar
杜庆泉 已提交
133
					    itemList: itemInfo,
杜庆泉's avatar
杜庆泉 已提交
134 135 136 137 138 139 140 141 142 143 144 145 146
					    // #ifdef H5
					    popover: {
					        // 104: navbar + topwindow 高度,暂时 fix createSelectorQuery 在 pc 上获取 top 不准确的 bug
					        top: that.buttonRect.top + 104 + that.buttonRect.height,
					        left: that.buttonRect.left + that.buttonRect.width / 2
					    },
					    // #endif
					    success: (e) => {
					        console.log(e.tapIndex);
					        uni.showToast({
					            title: "点击了第" + e.tapIndex + "个选项",
					            icon: "none"
					        })
杜庆泉's avatar
杜庆泉 已提交
147 148 149 150 151 152 153 154
					    },
						fail: (e) => {
						    console.log(e);
							uni.showToast({
							    title: e.errMsg,
							    icon: "none"
							})
						}
杜庆泉's avatar
杜庆泉 已提交
155 156 157 158
					})
				}
                
                
Y
yurj26 已提交
159
            },
杜庆泉's avatar
杜庆泉 已提交
160
			
Y
yurj26 已提交
161 162 163 164 165 166 167 168 169 170 171 172 173
            // #ifdef H5
            getNodeInfo() {
                uni.createSelectorQuery().select('.target').boundingClientRect().exec((ret) => {
                    const rect = ret[0]
                    if (rect) {
                        this.buttonRect = rect
                    }
                });
            }
            // #endif
        }
    }
</script>