npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

vue-common-select

v1.0.3

Published

Vue components library.

Downloads

11

Readme

还在持续开发中……

npm login
npm publish


#第一种引入方式
#uiSelect  组件引用方式(建立在element-ui select组件基础上)

import PingUI from 'vue-common-select' // 名字随意
Vue.use(PingUI)
#第2种引入方式
import {uiSelect} from 'vue-common-select'

##基本属性支持 disabled  placeholder 等
 fetchSelData(param) {
 // 自己自定义的查询参数 customerName  返回一个promise
      if (param) param = {...param, customerName: param.name}
      return new Promise((resolve, reject) => {
            resolve(res.result)
      })
    },

#第一种基本用法 默认 展示的name属性 值是code

       <ui-select :fetchData="fetchSelData" widthSl="163" v-model="id">
                    </ui-select>

第二种基本用法 自定义 属性展示 自定义列表样式 值是id 展示item.name 里这个name自定义

       <ui-select :fetchData="fetchSelData" widthSl="163" :props="{value:'id'}" v-model="id">
        <template slot-scope="{ item }">
                             <div>{{ item.name }}</div>
                             </template>
                    </ui-select>

第三种基本用法 自定义 url 不需要写 fetchData方法

       <ui-select widthSl="163" :props="{value:'id',url:'/XXX?ccc'}" v-model="id">
        <template slot-scope="{ item }">
                             <div>{{ item.name }}</div>
                             </template>
                    </ui-select>

第四种基本用法 默认回写值 在编辑表格时需要可参考 弹出页面时syncBoolean设置true

syncData=[{value:'',label:''}] 就是下拉框options的值 才能回写成功
       <ui-select widthSl="163"
          :isEdit.sync="syncBoolean"
           :selId.sync="syncData"
       :props="{value:'id',url:'/XXX?ccc'}" v-model="id">
        <template slot-scope="{ item }">
                             <div>{{ item.name }}</div>
                             </template>
                    </ui-select>

第五种基本用法 默认回写值 和第四种类似 但通过id值查询 查询时syncBoolean设置true

       <ui-select widthSl="163"
          :isFetch.sync="syncBoolean"
       :props="{value:'id',url:'/XXX?ccc'}" v-model="id">
        <template slot-scope="{ item }">
                             <div>{{ item.name }}</div>
                             </template>
                    </ui-select>

第四种基本用法 可以自定义查询参数名称一个(queryStr 是参数)

syncData=[{value:'',label:''}] 就是下拉框options的值 才能回写成功
       <ui-select widthSl="163"
          :isEdit.sync="syncBoolean"
           :selId.sync="syncData"
       :props="{value:'id',label:'label',queryStr:'name',url:'XX/XX'}"  v-model="id">
        <template slot-scope="{ item }">
                             <div>{{ item.name }}</div>
                             </template>
                    </ui-select>

部分截图

测试rebase命令

测试远程分支和本地分支不同命问题