yzx 7b74eaab9c yxy代码 10 months ago
..
components 7b74eaab9c yxy代码 10 months ago
changelog.md 7b74eaab9c yxy代码 10 months ago
package.json 7b74eaab9c yxy代码 10 months ago
readme.md 7b74eaab9c yxy代码 10 months ago

readme.md

基本用法

template 中使用组件

<template>
	<view class="content">
		<span class="title">非JSON数组模式</span>
		<superwei-combox :candidates="candidates" placeholder="请选择或输入" v-model="inputValue" @input="input"
			@select="select"></superwei-combox>

		<span class="title">JSON数组模式</span>
		<superwei-combox :candidates="candidates_json" :isJSON="true" keyName="name" placeholder="请选择或输入"
			v-model="inputValue_json" @input="input_json" @select="select_json"></superwei-combox>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				inputValue: '',
				candidates: ['选项一', '选项二', '选项三', '选项四', '选项五', '选项六', '...'],

				inputValue_json: '',
				candidates_json: [{
					id: '1',
					name: '选项一'
				}, {
					id: '2',
					name: '选项二',
					disabled: true // 单独设置disabled后即可禁用该选项
				}, {
					id: '3',
					name: '选项三'
				}, {
					id: '4',
					name: '选项四'
				}, {
					id: '5',
					name: '选项五',
					disabled: true // 单独设置disabled后即可禁用该选项
				}, {
					id: '6',
					name: '...'
				}]
			}
		},
		methods: {
			input(e) {
				console.log(e) // 选项一
			},
			select(e) {
				console.log(e) // 选项一
			},


			input_json(e) {
				console.log(e) // 选项一
			},
			select_json(e) {
				console.log(e) // {id: '1',name: '选项一'}
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.title {
		margin-top: 20px;
	}
</style>

API

Combox Props

属性名 类型 默认值 说明
label String - 标签文字
value String - combox的值
labelWidth String auto 标签宽度,有单位字符串,如:'100px'
placeholder String - 输入框占位符
candidates Array/String [] 候选字段
emptyTips String 无匹配项 无匹配项时的提示语
selectedBackground String #f5f7fa 选中项背景颜色
selectedColor String #409eff 选中项文字颜色
isJSON Boolean false 候选字段是否是json数组
keyName String - json数组显示的字段值
disabledColor String #ababac 禁用项文字颜色
isAllowCreate Boolean true 是否允许用户创建新条目

Combox Events

事件称名 说明 返回值
@input combox输入事件 返回combox输入值
@select combox选择事件 返回combox选项值