vue中van-picker的选项插槽的使用

目录
  • van-picker的内部选项怎么来自定义
  • Vant选择器使用插槽
  • 总结

van-picker的内部选项怎么来自定义

首先要确保 Vant UI 的版本在2.10.0以上

然后利用插槽slot来实现，在Vant 里插槽有一个进阶用法 #

<van-picker
  :show-toolbar="false"
  :default-index="2" // 默认选中第三行，选中第一行的话，上面会有一段空白，不好看
  :loading="loading"
  :columns="columns" // 一定要绑定数据源
>
  <template #option="item"> // 这里的item就是每一个选项，可以是一个对象也可以是一个字符串
  // 我这里实现的是每一行的选项由id和name组成
  // 切记不要用v-for，会导致数据重复出现在一个选项里
    <van-row>
      <van-col :span="12" class="van-hairline--right">
        <p style="text-align: center">
          {{ item.id }}
        </p>
      </van-col>
      <van-col :span="12" class="van-hairline--left">
        <p style="text-align: center">
          {{ item.name }}
        </p>
      </van-col>
    </van-row>
  </template>
</van-picker>

附上Vant的官方地址：https://vant-contrib.gitee.io/vant/#/zh-CN/home

Vant选择器使用插槽

官方提供样式满足不了自己需要的样式时可以使用插槽可以自定义布局样式：

我这里配合了popup弹窗层使用，具体看自己的需求

 <van-popup v-model="sexShow" position="bottom" :style="{ height: '50%' }">
      <van-picker :show-toolbar="true" :columns="columns" ref="getValues" @confirm="onConfirm">
        <template #cancel="item">
          <p>
            性别
          </p>
        </template>
        <template #confirm="item">
          <div class="sexContent">
            <!-- <van-button class="submit">保存</van-button> -->
            <van-button class="submited">保存</van-button>
          </div>
        </template>
        <template #option="item">
          <p style="text-align: center">
            {{item.text}}
          </p>
        </template>
      </van-picker>
    </van-popup>

columns: [{
     text: '男',
       value: 1
     },
     {
       text: '女',
       value: 2
     }],

方法：

 onConfirm(value) {
     console.log(value)   //打印的是自己定义的数组对象，然后就可以进行自己的相关操作了
   },

另外：

this.$refs.getValues.getValues()

是通过 ref 可以获取到 Picker 实例并调用实例方法，不知道的话可以自己先打印出来看看，

虽然简单，但是也是第一次遇到，记录一下下，以免忘记（我的记忆只有七秒，忘得快）

下面是效果图，有点丑，勿喷

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 使用van-picker 动态设置当前选中项

    目录 van-picker 动态设置当前选中项 van-picker 选择器空白问题 van-picker 动态设置当前选中项 使用vant-field和van-picker.van-popup组合实现单选类型表单时,通常我们需要pick每次显示时,默认选中的是当前有效值,但往往会出现这样的情况 我们可以在没法显示picker的时候,动态设置当前选中项,代码示例如下 //pick中指定ref属性为myPicker //currentIndex为当前有效值对应的索引值 this.$refs.myP

  • Vue具名插槽+作用域插槽的混合使用方法

    vue + elementui 的项目中,通过后端返回的数据动态封装表单组件. 其中有些场景: 1.有些下拉框是联动的,例如前面的一个下拉框选择值之后,后一个下拉框才根据前面的下拉框选择的值加载数据: 2.有些输入框后面跟一个图形操作等等 上面的需求就需要用到插槽了. 这里只简单的介绍 具名插槽+作用域插槽 混合在一起使用的方法. 其中组件 mulForms.vue 里面封装的代码是(注意 slot里面的写法): <template v-if="item.slotName">

  • vue vant中picker组件的使用

    1.引入 import { Picker } from 'vant' 2.使用 components: { vanPicker: Picker, } 3.渲染 <van-picker show-toolbar :columns="columns" value-key="text" /> 4.将值push到columns //注意的点vant默认的是text,如果你需要修改需要value-key="你要定义的名字",否则不会渲染 thi

  • vue中选中多个选项并且改变选中的样式的实例代码

    1:HTML: <ul class="content"> <li v-for="(item,index) in touristList" @click="onStorage(item,index)" :class="{'active': rSelect.indexOf(item)!=-1}" :key="item.id"> <div>{{item.name}}</d

  • Vue中的slot使用插槽分发内容的方法

    本文题材来自:https://cn.vuejs.org/v2/guide/components.html#%E4%BD%BF%E7%94%A8%E6%8F%92%E6%A7%BD%E5%88%86%E5%8F%91%E5%86%85%E5%AE%B9 <slot></slot>标签,简单来说就是占位符,它会帮你占好位置,等你需要的时候直接将html传入,它会帮你显示出来. 也有人说:props可以将数据从父组件传入子组件,slot可以将html从父组件传入子组件.那么如何实现呢?

  • 详解Vue中使用插槽（slot）、聚类插槽

    一.基本的插槽 这里总结两点 如果不在子组件中使用插槽(slot),那么在子组件中写任何代码都是无效的的,不会显示 (插槽默认值)如果子组件中没有插入任何代码的话就会显示组件插槽中的内容 slot 代表父组件往子组件中 插入的标签 这里就代表组件子组件中的 <p>Dell</p> <child> <p>Dell</p> </child> 这里如果是这样的 <child> </child> 就会显示 <sl

  • vue中各选项及钩子函数执行顺序详解

    在vue中,实例选项和钩子函数和{{}}表达式都是不需要手动调用就可以直接执行的. vue的生命周期如下图: 在页面首次加载执行顺序有如下: beforeCreate //在实例初始化之后.创建之前执行 created //实例创建后执行 beforeMounted //在挂载开始之前调用 filters //挂载前加载过滤器 computed //计算属性 directives-bind //只调用一次,在指令第一次绑定到元素时调用 directives-inserted //被绑定元素插入父

  • vue中的 $slot 获取插槽的节点实例

    vue 中的 $slot 以前一直不知到这个东西,后来发现 vue api 中 藏着很多的 很神奇的 api,比如这个 具名插槽很好理解,但是那个 default 就有点难了, 写了一个炒鸡简单的 demo father: <template> <div> <button @click="getSlot">getSlot</button> <try ref="try"> <div class=&quo

  • 在Vue 中获取下拉框的文本及选项值操作

    方法1: <!-- element表单组件 --> <el-form :model="ruleForm" label-position="right" ref="ruleForm" // 被ref 标记的 status-icon size="small" inline :rules="rules" label-width="150px" class="demo

  • Vue中插槽slot的使用方法与应用场景详析

    Vue中插槽slot的使用方法与应用场景详析

    什么是插槽? 我们知道在Vue中 Child 组件的标签 的中间是不可以包着什么的 . 可是往往在很多时候我们在使用组件的时候总想在组件间外面自定义一些标签,vue新增了一种插槽机制,叫做作用域插槽.要求的版本是2.1.0+: 插槽,其实就相当于占位符.它在组件中给你的HTML模板占了一个位置,让你来传入一些东西.插槽又分为 匿名插槽.具名插槽.作用域插槽. 在 2.6.0 中,我们为具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot 指令).它取代了 slot 和 slot-sc

  • Vue中插槽和过滤器的深入讲解

    Vue中插槽和过滤器的深入讲解

    目录 插槽 什么是插槽? 插槽内容 编译作用域 后备内容 具名插槽 过滤器 概念 语法 全局过滤器 局部过滤器 练习 总结 插槽 什么是插槽? 概念 Vue 实现了一套内容分发的 API,为组件提供了一个 <slot> 元素作为承载分发内容的出口. 简单来说就是<slot> 元素作为组件模板之中的内容分发插槽.<slot> 元素自身将被替换. 插槽内容 语法 首先先新建一个文件来书写我们的slot // slot.vue <template> <div

  • vue中的插槽详解

    vue中的插槽详解

    vue中代码的复用, 为我们提供了 mixnis. 模板的复用, 为我们提供了 插槽( slot ) 插槽的分类 默认插槽 具名插槽 作用域插槽 当我们的组件中 我们只需要插入一个 html 标签的时候, 就使用默认插槽就可以了, 如果有多个, 我们就要给第一个 插槽取一个名字, 来决定到底插入哪一个插槽 当我们的插槽中要使用组件中的数据的时候, 就可能会用到作用域插槽 下面展示一下, 默认插槽的用法 使用时 以上就是默认插槽的使用 具名插槽, 也就是说我们在组件中定一个 多个 slot , 为

  • Vue中的匿名插槽与具名插槽详解

    Vue中的匿名插槽与具名插槽详解

    目录 1.匿名插槽 2.具名插槽 总结 slot又名插槽,是Vue的内容分发机制,组件内部的模板引擎使用slot元素作为承载分发内容的出口. 插槽slot是子组件的一个模板标签元素,而这一个标签元素是否显示,以及怎么显示是由父组件决定的. slot又分三类,默认插槽,具名插槽和作用域插槽.(这里说前两种) 插槽的实质是:插槽实质是对子组件的扩展,通过<slot>插槽-----向组件内部"指定位置"传递内容. 1.匿名插槽 默认插槽:又名匿名插槽,当slot没有指定name属

随机推荐