• vant 的 Cascader 级联选择 组建css样式错乱问题修复

    vant 的 Cascader 级联选择 组建css样式错乱问题修复

    未修复的效果

    修复后的效果

     

    修复需要的css代码

    1. /*级联控件 start*/
    2.  
    3. .cplvfx .van-popup {
    4.   position: fixed;
    5.   max-height: 100%;
    6.   overflow-y: auto;
    7.   background-color: #fff;
    8.   -webkit-transition: -webkit-transform 0.3s;
    9.   transition: -webkit-transform 0.3s;
    10.   transition: transform 0.3s;
    11.   transition: transform 0.3s, -webkit-transform 0.3s;
    12.   -webkit-overflow-scrolling: touch;
    13. }
    14.  .cplvfx .van-popup--center {
    15.   top: 50%;
    16.   left: 50%;
    17.   -webkit-transform: translate3d(-50%, -50%, 0);
    18.           transform: translate3d(-50%, -50%, 0);
    19. }
    20.  .cplvfx .van-popup--center.van-popup--round {
    21.   border-radius: 16px;
    22. }
    23.  .cplvfx .van-popup--top {
    24.   top: 0;
    25.   left: 0;
    26.   width: 100%;
    27. }
    28.  .cplvfx .van-popup--top.van-popup--round {
    29.   border-radius: 0 0 16px 16px;
    30. }
    31.  .cplvfx .van-popup--right {
    32.   top: 50%;
    33.   right: 0;
    34.   -webkit-transform: translate3d(0, -50%, 0);
    35.           transform: translate3d(0, -50%, 0);
    36. }
    37.  .cplvfx .van-popup--right.van-popup--round {
    38.   border-radius: 16px 0 0 16px;
    39. }
    40.  .cplvfx .van-popup--bottom {
    41.   bottom: 0;
    42.   left: 0;
    43.   width: 100%;
    44. }
    45.  .cplvfx .van-popup--bottom.van-popup--round {
    46.   border-radius: 16px 16px 0 0;
    47. }
    48.  .cplvfx .van-popup--left {
    49.   top: 50%;
    50.   left: 0;
    51.   -webkit-transform: translate3d(0, -50%, 0);
    52.           transform: translate3d(0, -50%, 0);
    53. }
    54.  .cplvfx .van-popup--left.van-popup--round {
    55.   border-radius: 0 16px 16px 0;
    56. }
    57.  .cplvfx .van-popup--safe-area-inset-bottom {
    58.   padding-bottom: constant(safe-area-inset-bottom);
    59.   padding-bottom: env(safe-area-inset-bottom);
    60. }
    61.  .cplvfx .van-popup-slide-top-enter-active,
    62.  .cplvfx .van-popup-slide-left-enter-active,
    63.  .cplvfx .van-popup-slide-right-enter-active,
    64.  .cplvfx .van-popup-slide-bottom-enter-active {
    65.   -webkit-transition-timing-function: ease-out;
    66.           transition-timing-function: ease-out;
    67. }
    68.  .cplvfx .van-popup-slide-top-leave-active,
    69.  .cplvfx .van-popup-slide-left-leave-active,
    70.  .cplvfx .van-popup-slide-right-leave-active,
    71.  .cplvfx .van-popup-slide-bottom-leave-active {
    72.   -webkit-transition-timing-function: ease-in;
    73.           transition-timing-function: ease-in;
    74. }
    75.  .cplvfx .van-popup-slide-top-enter,
    76.  .cplvfx .van-popup-slide-top-leave-active {
    77.   -webkit-transform: translate3d(0, -100%, 0);
    78.           transform: translate3d(0, -100%, 0);
    79. }
    80.  .cplvfx .van-popup-slide-right-enter,
    81.  .cplvfx .van-popup-slide-right-leave-active {
    82.   -webkit-transform: translate3d(100%, -50%, 0);
    83.           transform: translate3d(100%, -50%, 0);
    84. }
    85.  .cplvfx .van-popup-slide-bottom-enter,
    86.  .cplvfx .van-popup-slide-bottom-leave-active {
    87.   -webkit-transform: translate3d(0, 100%, 0);
    88.           transform: translate3d(0, 100%, 0);
    89. }
    90.  .cplvfx .van-popup-slide-left-enter,
    91.  .cplvfx .van-popup-slide-left-leave-active {
    92.   -webkit-transform: translate3d(-100%, -50%, 0);
    93.           transform: translate3d(-100%, -50%, 0);
    94. }
    95.  .cplvfx .van-popup__close-icon {
    96.   position: absolute;
    97.   z-index: 1;
    98.   color: #c8c9cc;
    99.   font-size: 22px;
    100.   cursor: pointer;
    101. }
    102.  .cplvfx .van-popup__close-icon:active {
    103.   color: #969799;
    104. }
    105.  .cplvfx .van-popup__close-icon--top-left {
    106.   top: 16px;
    107.   left: 16px;
    108. }
    109.  .cplvfx .van-popup__close-icon--top-right {
    110.   top: 16px;
    111.   right: 16px;
    112. }
    113.  .cplvfx .van-popup__close-icon--bottom-left {
    114.   bottom: 16px;
    115.   left: 16px;
    116. }
    117.  .cplvfx .van-popup__close-icon--bottom-right {
    118.   right: 16px;
    119.   bottom: 16px;
    120. }
    121.  
    122. .cplvfx .van-calendar__popup.van-popup--top,
    123. .cplvfx .van-calendar__popup.van-popup--bottom {
    124.   height: 80%;
    125. }
    126. .cplvfx .van-calendar__popup.van-popup--left,
    127. .cplvfx .van-calendar__popup.van-popup--right {
    128.   height: 100%;
    129. }
    130. .cplvfx .van-calendar__popup .van-popup__close-icon {
    131.   top: 11px;
    132. }
    133.  
    134. .cplvfx .demo-contact-card .van-popup {
    135.   height: 100%;
    136.   background-color: #f7f8fa;
    137. }
    138.  
    139.  
    140.  
    141. .cplvfx .van-cascader__header {
    142.   display: -webkit-box;
    143.   display: -webkit-flex;
    144.   display: flex;
    145.   -webkit-box-align: center;
    146.   -webkit-align-items: center;
    147.           align-items: center;
    148.   -webkit-box-pack: justify;
    149.   -webkit-justify-content: space-between;
    150.           justify-content: space-between;
    151.   height: 48px;
    152.   padding: 0 16px;
    153. }
    154. .cplvfx .van-cascader__title {
    155.   font-weight: 500;
    156.   font-size: 16px;
    157.   line-height: 20px;
    158. }
    159. .cplvfx .van-cascader__close-icon {
    160.   color: #c8c9cc;
    161.   font-size: 22px;
    162. }
    163. .cplvfx .van-cascader__close-icon:active {
    164.   color: #969799;
    165. }
    166. .cplvfx .van-cascader__tabs .van-tab {
    167.   -webkit-box-flex: 0;
    168.   -webkit-flex: none;
    169.           flex: none;
    170.   padding: 0 10px;
    171. }
    172. .cplvfx .van-cascader__tabs.van-tabs--line .van-tabs__wrap {
    173.   height: 48px;
    174. }
    175. .cplvfx .van-cascader__tabs .van-tabs__nav--complete {
    176.   padding-right: 6px;
    177.   padding-left: 6px;
    178. }
    179. .cplvfx .van-cascader__tab {
    180.   color: #323233;
    181.   font-weight: 500;
    182. }
    183. .cplvfx .van-cascader__tab--unselected {
    184.   color: #969799;
    185.   font-weight: normal;
    186. }
    187. .cplvfx .van-cascader__option {
    188.   display: -webkit-box;
    189.   display: -webkit-flex;
    190.   display: flex;
    191.   -webkit-box-align: center;
    192.   -webkit-align-items: center;
    193.           align-items: center;
    194.   -webkit-box-pack: justify;
    195.   -webkit-justify-content: space-between;
    196.           justify-content: space-between;
    197.   padding: 10px 16px;
    198.   font-size: 14px;
    199.   line-height: 20px;
    200. }
    201. .cplvfx .van-cascader__option:active {
    202.   background-color: #f2f3f5;
    203. }
    204. .cplvfx .van-cascader__option--selected {
    205.   color: #ee0a24;
    206.   font-weight: 500;
    207. }
    208. .cplvfx .van-cascader__selected-icon {
    209.   font-size: 18px;
    210. }
    211. .cplvfx .van-cascader__options {
    212.   box-sizing: border-box;
    213.   height: 384px;
    214.   padding-top: 6px;
    215.   overflow-y: auto;
    216.   -webkit-overflow-scrolling: touch;
    217. }
    218. /*级联控件 end*/

     

    html代码

    1. <div class="cplvfx">
    2.   <van-field
    3.   v-model="AddVal"
    4.   is-link
    5.   readonly
    6.   placeholder="请选择活动地区"
    7.   @click="SelectAddStatus = true"
    8.   />
    9.  
    10.   <van-popup v-model="SelectAddStatus" round position="bottom">
    11. 	  <van-cascader
    12. 	  v-model="SelectAddVal"
    13. 	  title="请选择所在地区"
    14. 	  :options="AreaData"
    15. 	  active-color="#17BF8C"
    16. 	  @close="SelectAddStatus = false"
    17. 	  @change="AddSelectChange"
    18. 	  @finish="AddSelectFinish"
    19. 	  />
    20.   </van-popup>
    21. </div>

    js 代码

    一，引入必要组建

    1. import { Popup } from 'vant';
    2. import { Cascader } from 'vant';
    3. import { Field } from 'vant';
    4.  
    5.  
    6. Vue.use(Popup);
    7. Vue.use(Cascader);
    8. Vue.use(Field);

    二、参数

    1. export default {
    2. data(){
    3.   return{
    4.    SelectAddStatus:false,//地址选择状态
    5.    SelectAddVal:'',//地址值
    6.    AddVal:'',//地址值
    7.   }
    8. },
    9. created:(){},
    10. methods:{
    11.     //地址选择发生变化
    12.     AddSelectChange({ value, selectedOptions, tabIndex }){
    13.       console.log('地址选择发生变化');
    14.       console.log(value);
    15.       console.log(selectedOptions);
    16.       console.log(tabIndex);
    17.     },
    18.     //地址选择完成
    19.     AddSelectFinish({ value, selectedOptions, tabIndex }){
    20.       console.log('地址选择完成');
    21.       console.log(value);
    22.       console.log(selectedOptions);
    23.       console.log(tabIndex);
    24.       this.SelectAddStatus = false;
    25.       this.AddVal = selectedOptions.map((option) => option.text).join('/');
    26.       console.log('this.SelectAddVal===');
    27.       console.log(this.SelectAddVal);
    28.       console.log('this.AddVal===');
    29.       console.log(this.AddVal );
    30.     }
    31.  
    32. },
    33. }

    延伸阅读

    vue 页面的css样式代码多，怎么把css样式代码做成独立的文件，然后引用进来；以及style的scoped标签介绍以及scoped穿透介绍

    vue 页面的css样式代码多，怎么把css样式代码做成独立的文件，然后引用进来；以及style的scoped标签介绍以及scoped穿透介绍_cplvfx的博客-CSDN博客vue 页面的css样式代码多，怎么把css样式代码做成独立的文件，然后引用进来；以及style的scoped标签介绍以及scoped穿透介绍https://blog.csdn.net/cplvfx/article/details/125521371

  • 相关阅读:
    [山东科技大学OJ]1382 Problem A: 编写函数：三个数的最大最小值 (Append Code)
    克鲁斯卡尔算法（C++）
    Jira Bug管理工具的操作步骤 提Bug的流程
    JMETER实战从创建测试数据到分布式压测测试全流程
    sql语句，分组后，组内根据datetime字段排序，保留日期最新的一条组内记录，删除其他项。（用于组内重复数据的剔除）
    JDK源码分析实战系列-PriorityQueue
    【牛客网-前端笔试题】——vue专项练习
    【目标检测】SSD损失函数详解
    洛谷P3369 【模板】普通平衡树 红黑树实现
    载誉前行 | 求臻医学MRD检测方案荣获金如意奖·卓越奖
  • 原文地址：https://blog.csdn.net/cplvfx/article/details/125522167