Typescript+vue Developed Drop-down Box To Select Components, Easy To Use

vue select drop-down box to select components

The drop-down box selection component developed by typescript+vue uses the simulated enhanced drop-down selector to replace the browser’s native selector, which is easy to use

Code example

Use v-model for two-way data binding, control the display and hiding of components, see the following code for details

• Install the package

  npm install vuets-component-select --save-dev

• js code

import Vue from 'vue';
import { VueSelect, VueOption } from "vuets-component-select";

new Vue({
  el: '#app',
  components: {
    VueSelect,
    VueOption
  },
  data() {
    return {
      visible: false,
      defaultValue: "2",
      data: [{
        value: "1",
        text: "2017-10-31"
      }, {
        value: "2",
        text: "2018-10-31"
      }],
      option: {
        title: "请选择时间",
        cancelText: "再想想",
      }
    }
  },
  methods: {
    confirmHandle(selectedValue) {
      alert(selectedValue);
    }
  }
});

• html template

<div id="app">
    <button @click="visible=true">点击测试</button>
    <vue-select v-model="visible" :option="option" @on-change="confirmHandle">
      <vue-option v-for="item in data" 
        :value="item.value" 
        :selected="item.value == defaultValue">
        {{item.text}}
      </vue-option>
    </vue-select>
  </div>
  <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
  <script src="./dist/index.js"></script>

Component API

• select props

  Property	Description	Type	Default Value
  option	The option object provides 3 attribute values: title (title), cancelText ([cancel] button copy), confirmText ([OK] button copy)	object	empty object

• select events

  Method name	Description	Parameters
  on-change	The method triggered by clicking the [OK] button	The value of the selected drop-down box

• option props

  Property	Description	Type	Default Value
  value	The value of each item in the drop-down box	string	number
  selected	The drop-down box option item selected by default	boolean	false
  text	The copy displayed by each option in the drop-down box	string	Empty character

Component development instructions

• Installation dependencies

npm/cnpm install

• Compile

npm run build

• demo run

## cd test
## npm/cnpm install
## npm run build

#把test目录的index.html在浏览器打开，切换到移动的端模拟器，可以预览在手机端的展示结果

Download Details:

Author: ljcheibao

Source Code: https://github.com/ljcheibao/vue-component-select

#vue #vuejs #javascript