zoukankan      html  css  js  c++  java
  • 移动端Vue组件库-Vant学习

    全局引入

    import Vant from 'vant';  //嫌麻烦就全部一次导出,虽然包会稍微有点大
    import 'vant/lib/index.css';  //注意导入全局的这个css,否则布局组件无法正确使用
    
    Vue.use(Vant)
    

    下拉选框

    只能单选,不支持多选
    返回obj对象,填充picker, 并取选择对象的ID

    <div>
    	<van-field readonly clickable name="picker" :value="selectedClassify" label="分类" 
    	placeholder="点击选择分类" @click="showPicker = true" />
    	<van-popup v-model="showPicker" position="bottom">
    		<van-picker show-toolbar :columns="columns" value-key="name" @confirm="onConfirm" @cancel="showPicker = false" />
    	</van-popup>
    </div>
    
    export default {
      data() {
        return {
          selectedClassify: [],
          columns: [{id:1, name:"名称A"}, {id:2, name:"名称B"}]
        };
      },
      methods: {
       	onConfirm(obj) {
    		this.selectedClassify.push(obj.id);
    		this.showPicker = false;
    	}
      }
    };
    

    checkbox 多选框

    <div>
    	<van-checkbox-group v-model="selectedClassify" direction="horizontal">
    	<van-checkbox shape="square" v-for="item in tags" v-bind:name="item.id" >{{item.name}}</van-checkbox>
    	</van-checkbox-group>
    </div>
    
    export default {
      data() {
        return {
         selectedClassify: [],
         tags: []
        };
      },
      methods: {
       	
      }
    };
    

    注意:这里的v-bind要放在v-for后面,否则selectedClassify的第一个元素是item.id的字符串,未明白为什么

    消息提示

    this.$toast('创建成功')
    或者
    this.$notify('成功')
    
  • 相关阅读:
    十七、oracle 权限
    九、oracle 事务
    十六、oracle 索引
    十九、oracle pl/sql简介
    二十二、oracle pl/sql分类二 函数
    通过HttpURLConnection模拟post表单提交
    八、oracle 分页
    二十一、oracle pl/sql分类一 存储过程
    xStream框架操作XML、JSON
    二十、oracle pl/sql基础
  • 原文地址:https://www.cnblogs.com/for-you/p/12567085.html
Copyright © 2011-2022 走看看