-popup-selector下拉框组件并发布到npm效果如下图

禁用时样式

是新增的webpack无法获取编译因此需要在webpack配置文件里加上相关配置

④在项目根目录新建

{config.module.rule(js).include.add(__dirname

packages)

注意这里需要绝对路径所以要拼接__dirname.end().use(babel).loader(babel-loader).tap(options

{//

${height}px;div:class[m-select-wrap,

{hover:

2}px;tabindex0mouseenteronInputEntermouseleaveonInputLeavebluractiveBlur

!disabled

e.preventDefault()clickdisabled

e.preventDefault()

openSelect()div:class[u-select-input,

{placeholder:

!selectedName}]:styleline-height:

${height

262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5

0-10.3

0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z/path/svgsvg

click.stoponClear

namefadedivv-showshowOptionsclassm-options-panelmouseenteronEntermouseleaveonLeave:styletop:

${height

!option.disabledoption[value]hoverValue,

option-disabled:

}]:titleoption[label]mouseenteronHover(option[value])clickoption.disabled

e.preventDefault()

{this.initSelector()console.log(options)},selectedValue

{this.initSelector()console.log(selectedValue)}},mounted

{initSelector

target[this.label]this.hoverValue

target[this.value]}

this.selectedValuethis.hoverValue

null}}

this.selectedName)this.hoverValue

target

cubic-bezier(.645,.045,.355,1);.u-select-input

{display:

rotate(180deg);-webkit-transform:

{opacity:

{Vue.component(VueAmazingSelector.name,

VueAmazingSelector)

方法接收Vue作为参数如果使用use注册插件则所有的组件都将被注册

const

templateVueAmazingSelector:optionsoptionslabellabelvaluevalueplaceholder请选择:disabledfalse:width160:height36:num6v-modelselectedValuechangeonChange

/template

.DS_Storenode_modulespackages/public/src/#

忽略指定文件.eslintrc.cjs.gitignore.npmignore.npmrcbabel.config.jsvue.config.jsyarn.lock*.map⑮编写README.md文件使用markdown格式

参考文档

http://markdown.p2hp.com/index.html

Amazing

Vue.use(VueAmazingSelector)Local

templateVueAmazingSelector:optionsoptionslabellabelvaluevalueplaceholder请选择:disabledfalse:width160:height36:num6v-modelselectedValuechangeonChange

/template

indexvalue值label文本值index索引值⑯登录npm

npm

registry输出https://registry.npmjs.org

npm

https://registry.npmjs.org然后在终端执行

npm

Vue.use(VueAmazingSelector)在要使用组件的页面直接使用即可

templateVueAmazingSelector:optionsoptionslabellabelvaluevalueplaceholder请选择:disabledfalse:width160:height36:num6v-modelselectedValuechangeonChange

/template