vue实现select组件,select类中下拉框选择常见的方法
这篇文章主要为大家详细介绍了某视频剪辑软件下拉选择框挑选组件的使用，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件下拉选择框挑选组件的使用方法，供大家参考，具体内容如下
效果图如下：
展开图如下：
创建组件Select.vue:预设两种主题色，亦可视情况进行自定义修改样式：
模板
div class= m-选择-换行
投入
:class=[u-select-input f16 ，color===blue ？:白色]
type=text
只读的
@click=openSelect
@blur=onBlur
v-model=selectName /
div :class=[triangle-down ，{ rotate :rotate }] @ click= open select /div
div:class=[ m-options-panel F16 ，showOptions？show : hidden ]:style= ` height:$ {选择数据。长度* 40 } px`
p class= u-option @ mousedown= getValue(item。name，item.value，index) v-for=(item，index) in selectData :key=index
{{ item.name }}
/p
/div
/div
/模板
脚本
导出默认值{
名称：选择，
道具：{
选择数据：{
类型：数组，
默认值：()={
return []
}
},
//eslint-disable-next-line vue/require-prop-types
selValue: { //将该支柱值作为安全特低电压的初始值
默认值：未定义
},
颜色：{
类型：字符串，
默认值：()={
返回"蓝色"
}
}
},
计算值：{
selectName () {
让selName
this.selectData.forEach(item={
如果(项。值===这个。选择值){
selName=item.name
}
})
返回selName
},
选择值：{
get () {
返回this.selV
},
set (newVal) {
this.selV=newVal
}
}
},
data () {
返回{
这个。selV值，
旋转：假，
showOptions: false
}
},
方法：{
openSelect () {
this.showOptions=！this.showOptions
this.rotate=！这个。旋转
},
getValue(名称，值，索引){
this.selectValue=value
这个emit(getValue )，名称，值，索引)
},
onBlur () {
this.showOptions=false
this.rotate=false
}
}
}
/脚本
style lang=less 范围。间位选择-换行{
宽度：135像素
高度：40px
行高：40px
位置：相对；你-选择-输入{
宽度：105像素
背景：# 3a 79 ee
颜色：# FFFFFF
box-shadow:0px 10px 20px 0px rgba(144，119，222，0.2)；
边框半径：20px
高度：40px
行高：40px
填充：0 15px
光标：指针；
边框：无；
}。白色{
背景：# FFFFFF
颜色：# 3a 79 ee
}。向下三角形{ //下三角样式
宽度：0;
高度：0;
左边边框：5px纯色透明；
右边框：5px纯色透明；
边框顶部：10px实心# 333;
位置：绝对；
top:18px；
右：15px
转场：变换0.3秒淡入淡出；
}。旋转{
变换：旋转(180度);
}。m选项面板{
位置：绝对；
背景：# FFFFFF
边框半径：8px
宽度：133像素
边框：1px纯色# E3E3E3
顶配：46px
左：0;
颜色：# 706F94。u选项{
填充：0 15px
光标：指针；
}。u选项：悬停{
颜色：# 3a 79 ee
背景：# eef 1 fa
}
}。显示{
显示：块；
}。隐藏{
显示：无；
}
}
/风格
在要使用的页面引入：
挑选
:selectData=selectData
:selValue=selValue
color=white
@getValue=getValue /
从" @/组件/选择"导入选择
组件：{
挑选
}
data () {
返回{
选择数据：[
{
名称： 十一五，
值：11
},
{
名称： 十二五，
数值：12
},
{
名称： 十三五，
数值：13
},
],
安全特低电压值：""
}
}
已创建(){
//初始化下拉框
这个。selv值=this。选择数据[0].价值
}
方法：{
getValue(名称，值，索引){
console.log(项目：,名称，值，索引)
}
}
这就是本文的全部内容。希望对大家的学习有帮助，支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。