vant--------Picker與Popup 選擇器和遮罩的完美結合

初學前端的小伙伴肯定遇到過這樣的問題吧，想寫一個下拉，又想寫一個遮罩。兩個合起來用，然后寫一個遮罩height:100%,width:100%,z-index:999,等等去定

繁瑣又麻煩體驗感還不一定加

將vant 的picker 與popup集合方便快捷實用

1.在main.js 里引入

import { Popup } from 'vant';
Vue.use(Popup);
import { Picker } from 'vant';

Vue.use(Picker);

            <van-popup v-model="show" position="bottom" :overlay="true">
                <van-picker show-toolbar title="請選擇區域代理城市" :columns="columns" @cancel="onCancel" @confirm="onConfirm" @change="onChange" />
            </van-popup>

position:你可以自己定義 top or bottom or center 當然一般是bottom

:overlay:false or true看個人需求

title:根據你自己需求定義

js:

效果圖：

以上的列子都是小生自己實踐如有不好，請指教。

本文鏈接：https://blog.csdn.net/ZXD1314520/article/details/81871140

智能推薦

Vue scoped與深度選擇器deep的原理

JS引入模塊化概念后，變得更易于開發維護，但是css樣式由于其特殊性，一直沒有實現模塊化，scoped的出現就是為了實現樣式模塊化，其本質利用屬性選擇器實現的一種偽模塊化，并非真正意義上的模塊化，但這已經讓css模塊化前進了一大步，要知道JS的模塊化也是以這種方式開始的，比如早期的seajs，requirejs都是利用閉包封裝達到模塊化的效果，后來慢慢的出現了ES6的模塊化規范import/exp...

微信小程序 van-popup+van-datetime-picker 時間選擇器組件

引用：<picker-item id="myComponent" bind:myevent="onGetCode"></picker-item> {{currentDate}} onGetCode: function (e) { this.setData({ currentDate: e.detail.val }) }...

css選擇器與權重問題——二、css的四種引入方式與復合選擇器

上一篇忘記寫css的四種引入方法了，在這里補充出來。 css的四種引入方式 1、外聯 2、內聯 3、內嵌 4、導入 css的四種導入方法有優先級之分，我在這里就先只比較前三種導入方法了內聯對比外聯結果如下：由此我們可以得出內聯的優先級比外聯高 2. 內聯對比內嵌效果展示對比的結果依舊是內聯的優先級比較高 3. 外聯與內嵌對比結果展示：看到這里我們是不是就得出外聯比內嵌優先級高的結論了...

django 與 vue 的完美結合

最近接到一個任務，就是用django后端，前段用vue，做一個普通的簡單系統，我就是一搞后端的，聽到vue也是比較震驚，之前壓根沒接觸過vue。看了vue的一些文檔，還有一些項目，先說一下django與vue的完美結合吧！首先是創建一個django項目 django-admin startproject mysite # 創建mysite項目 django-admin startapp blog...

HTML中常用操作關于：頁面跳轉，空格

1.頁面跳轉 2.空格的代替符...

vant--------Picker與Popup 選擇器和遮罩的完美結合

js:

智能推薦

猜你喜歡