vue final biblioteca de componentes de aprendizaje móvil -Vant

introducción a nivel mundial

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

Vue.use(Vant)

Cuadro desplegable

Sólo radio, no selección múltiple
devuelve el objeto obj, llenando Picker, y toma el ID de objeto seleccionado

<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;
	}
  }
};

casilla de verificación casilla de verificación

<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: {
   	
  }
};

Nota: Este v-se unen a la v-para más tarde, o de lo contrario el primer elemento es selectedClassify cadena item.id no entiende por qué

consejos de noticias

this.$toast('创建成功')
或者
this.$notify('成功')